/* =====================================================
   Every Nation Church Korea — Design System v2
   Display: Archivo  |  Body: Pretendard / Inter
   ===================================================== */

:root {
  /* Brand */
  --navy-900: #06111f;
  --navy-800: #0a1c33;
  --navy-700: #10294b;
  --navy-600: #17386a;
  --blue-500: #2d6bff;
  --blue-400: #588cff;
  --blue-100: #d5e2ff;

  /* Neutrals */
  --paper:    #fbfaf8;
  --paper-2:  #f2f1ec;
  --ink:      #0f1620;
  --ink-70:   #454f5e;
  --ink-50:   #6d7686;
  --line:     #e5e3dc;
  --line-dark: rgba(255,255,255,0.14);

  /* Layout */
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 56px);
  --sec-y: clamp(76px, 9.5vw, 148px);
  --r: 12px;
  --r-lg: 20px;

  --shadow-sm: 0 2px 8px rgba(10,28,51,0.06);
  --shadow:    0 18px 48px rgba(10,28,51,0.12);
  --shadow-lg: 0 34px 80px rgba(6,17,31,0.24);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Pretendard Variable", Pretendard, Inter, -apple-system,
    BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;

  /* Korean line breaking.
     Browsers break Korean at any character by default, so a word like "구절"
     can end up split across two lines. keep-all breaks at spaces instead, the
     way Korean is meant to be set. The pair-up with overflow-wrap keeps a long
     unbroken string (a URL, an account number) from overflowing its box. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* Inherit the rule into elements that reset it (form controls, tables). */
input, textarea, select, button, th, td { word-break: keep-all; overflow-wrap: break-word; }

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
button { font: inherit; }

/* ---------- Display type ---------- */
.display, h1, h2, h3, .stat-n, .btn {
  font-family: Archivo, "Pretendard Variable", Pretendard, -apple-system, sans-serif;
}
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; }

.h-xl { font-size: clamp(2.9rem, 7.4vw, 5.6rem); }
.h-lg { font-size: clamp(2.2rem, 4.6vw, 3.5rem); }
.h-md { font-size: clamp(1.6rem, 2.7vw, 2.25rem); letter-spacing: -0.03em; }
.h-sm { font-size: clamp(1.15rem, 1.6vw, 1.35rem); letter-spacing: -0.022em; line-height: 1.25; }

/* Korean sub-line under English display type */
.ko-sub {
  display: block;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.5;
  opacity: 0.78;
  margin-top: 0.5em;
  font-size: max(0.95rem, 0.36em);
}
.h-xl .ko-sub { font-size: max(1.05rem, 0.3em); }
.h-sm .ko-sub, .card .ko-sub { font-size: 0.95rem; margin-top: 0.3em; opacity: 0.72; }
.vlist .ko-sub { font-size: 1rem; opacity: 0.72; }

/* Eyebrow / kicker */
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: Archivo, sans-serif;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--blue-500);
}
.kicker::before {
  content: ""; width: 26px; height: 2px; background: currentColor; opacity: 0.55;
}
.kicker.no-rule::before { display: none; }
.on-dark .kicker, .dark .kicker { color: var(--blue-400); }

.lede {
  font-size: clamp(1.02rem, 1.35vw, 1.16rem);
  color: var(--ink-70);
  max-width: 60ch;
}
.dark .lede, .on-dark .lede { color: rgba(255,255,255,0.72); }
.ko-line { display: block; font-size: 0.98em; opacity: 0.86; margin-top: 0.7em; line-height: 1.7; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: var(--sec-y); }
.section.tight { padding-block: clamp(56px, 6vw, 96px); }
.bg-paper2 { background: var(--paper-2); }
.dark { background: var(--navy-800); color: #fff; }
.dark h1, .dark h2, .dark h3 { color: #fff; }

.center { text-align: center; }
.mx-auto { margin-inline: auto; }

/* Section header */
.sec-head { max-width: 880px; margin-bottom: clamp(38px, 5vw, 68px); }
.sec-head.center { margin-inline: auto; text-align: center; }
/* Even line lengths in centred headings — stops a single orphaned word
   ("…and Where We're / Going") from reading as a misalignment. */
.sec-head.center h2,
.sec-head.center p { text-wrap: balance; }
.sec-head .kicker { margin-bottom: 18px; }
.sec-head.center .kicker::before { display: none; }
.sec-head p { margin: 20px 0 0; }
/*
 * `.mx-auto` loses to `.sec-head p` on specificity, so a width-limited
 * paragraph inside a centred section head was sitting hard against the left
 * edge of the 880px block while the heading above it stayed centred — about
 * 130px out, and clearly visible under the world map. Put the auto margins
 * back at a weight that wins.
 */
.sec-head.center p { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 32px; border-radius: 999px;
  font-size: 0.94rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1;
  border: 1.5px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .35s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .35s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--blue-500); color: #fff; }
.btn-primary:hover { background: #1f5bf0; box-shadow: 0 14px 30px rgba(45,107,255,0.32); }
.btn-dark { background: var(--navy-800); color: #fff; }
.btn-dark:hover { background: var(--navy-900); box-shadow: var(--shadow); }
.btn-light { background: #fff; color: var(--navy-800); }
.btn-light:hover { box-shadow: 0 14px 34px rgba(0,0,0,0.22); }
.btn-ghost { border-color: rgba(255,255,255,0.42); color: #fff; }
.btn-ghost:hover { background: #fff; color: var(--navy-800); border-color: #fff; }
/* "What is Every Nation?" under the mission statement on About. */
.mission-more { margin: 28px 0 0; }
.mission-more .ext { margin-left: 2px; font-size: .82em; }
.btn-outline { border-color: rgba(15,22,32,0.22); color: var(--ink); }
.btn-outline:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.btn-sm { padding: 12px 24px; font-size: 0.87rem; }
/* Bible & Prayer in the header. It is a third button beside Visit Us and Give,
   so it has to be legible as its own thing without competing with Give — a
   tinted pill rather than another outline, and it inverts on the dark
   transparent header the same way the rest of the bar does. */
.hdr-bible {
  background: rgba(45,107,255,0.09); color: var(--blue-500);
  border-color: transparent; padding-left: 18px; padding-right: 20px; gap: 7px;
}
.hdr-bible svg { width: 17px; height: 17px; flex: none; }
.hdr-bible:hover { background: rgba(45,107,255,0.16); color: var(--blue-500); }
body.has-hero .site-header:not(.scrolled) .hdr-bible { background: rgba(255,255,255,0.16); color: #fff; }
body.has-hero .site-header:not(.scrolled) .hdr-bible:hover { background: rgba(255,255,255,0.28); color: #fff; }

/* The repeat of those buttons at the foot of the phone menu. Hidden until the
   bar collapses, where it is the only place they exist. */
.nav-actions { display: none; }

/* Text link with arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: Archivo, sans-serif; font-weight: 700; font-size: 0.92rem;
  color: var(--blue-500); letter-spacing: -0.01em;
}
.link-arrow svg { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.link-arrow:hover svg { transform: translateX(5px); }
.dark .link-arrow { color: var(--blue-400); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 300;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
  border-bottom: 1px solid transparent;
}
.site-header .bar {
  max-width: var(--maxw); margin-inline: auto;
  padding: 16px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  transition: padding .4s var(--ease);
}
.site-logo { display: block; flex-shrink: 0; }
.site-logo img { height: 44px; width: auto; transition: height .4s var(--ease); }
.logo-light { display: none; }

/* over-hero transparent state */
body.has-hero .site-header:not(.scrolled) { background: transparent; }
body.has-hero .site-header:not(.scrolled) .logo-dark { display: none; }
body.has-hero .site-header:not(.scrolled) .logo-light { display: block; }
body.has-hero .site-header:not(.scrolled) .main-nav > ul > li > a { color: rgba(255,255,255,0.9); }
body.has-hero .site-header:not(.scrolled) .main-nav > ul > li > a:hover { color: #fff; background: rgba(255,255,255,0.12); }
body.has-hero .site-header:not(.scrolled) .btn-outline { border-color: rgba(255,255,255,0.45); color: #fff; }
body.has-hero .site-header:not(.scrolled) .btn-outline:hover { background: #fff; color: var(--navy-800); border-color: #fff; }
body.has-hero .site-header:not(.scrolled) .nav-toggle { color: #fff; }

.site-header.scrolled,
body:not(.has-hero) .site-header {
  background: rgba(251,250,248,0.92);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(10,28,51,0.04);
}
.site-header.scrolled .bar { padding-block: 10px; }
.site-header.scrolled .site-logo img { height: 36px; }

/* Nav */
.main-nav > ul { display: flex; align-items: center; gap: 2px; }
.main-nav > ul > li > a {
  display: block; padding: 10px 14px; border-radius: 8px;
  font-size: 0.9rem; font-weight: 600; letter-spacing: -0.012em;
  color: var(--ink); white-space: nowrap;
  transition: color .2s, background .2s;
}
.main-nav > ul > li > a:hover { color: var(--blue-500); background: rgba(45,107,255,0.07); }
.main-nav .current-menu-item > a, .main-nav .current_page_item > a { color: var(--blue-500); }
.main-nav li { position: relative; }
.main-nav li ul {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 214px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all .28s var(--ease);
}
.main-nav li:hover > ul { opacity: 1; visibility: visible; transform: none; }
.main-nav li ul a { display: block; padding: 11px 14px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.main-nav li ul a:hover { background: var(--paper-2); color: var(--blue-500); }

.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  color: var(--navy-800); border-radius: 10px;
}
.nav-toggle svg { width: 26px; height: 26px; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background: var(--navy-800);
  min-height: min(92vh, 880px);
  display: flex; align-items: flex-end;
  padding-top: 150px; padding-bottom: clamp(84px, 11vw, 150px);
}
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6,17,31,0.62) 0%, rgba(6,17,31,0.12) 34%, rgba(6,17,31,0.5) 76%, rgba(6,17,31,0.86) 100%),
    linear-gradient(96deg, rgba(6,17,31,0.9) 6%, rgba(6,17,31,0.42) 52%, rgba(6,17,31,0.05) 100%);
}
.hero .wrap { position: relative; z-index: 2; width: 100%; }
.hero .kicker { color: var(--blue-100); margin-bottom: 26px; }
.hero h1 { max-width: 15ch; }
.hero .lede { margin: 30px 0 0; color: rgba(255,255,255,0.78); max-width: 52ch; }
/* Service-time chips inside the hero — the "when?" answered before any scroll */
.hero-times { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.ht-chip {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 9px 16px; border-radius: 999px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.85);
  font-size: 0.86rem; font-weight: 500;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.ht-chip strong { color: #fff; font-family: Archivo, sans-serif; font-weight: 700; letter-spacing: .01em; }
.ht-chip.ht-lang { background: rgba(59,130,246,0.22); border-color: rgba(147,197,253,0.4); }

/* Hidden on phones, where vertical space in the hero is the scarcest thing on
   the site. Used for the secondary CTA, which is duplicated further down. */
@media (max-width: 720px) { .hide-sm { display: none !important; } }

.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }

/* ---------- Event strip (this week at ENC) ----------
   One line, hard to miss, easy to retire from the customizer. A site that
   shows something happening *this month* reads as a living church. */
/* A dark strip, but a warmer and lighter one than the navy around it, edged and
   lettered in muted bronze. The first attempt was saturated amber, which did
   stand out — the way a highlighter stands out on good stationery. The colour
   here comes from the accents instead: a bronze rule down the left edge, a
   bronze pill, a bronze underline. Quiet, and unmistakably a different object
   from the sections above and below it. */
.event-strip {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 18px; padding: 11px 20px 11px 24px;
  background: linear-gradient(104deg, #17273f 0%, #22384f 58%, #2c3f52 100%);
  border: 1px solid rgba(198,153,94,0.34);
  border-radius: 16px; color: #f4ece1;
  box-shadow: 0 12px 34px rgba(8,20,35,0.3);
}
/* The one saturated element: a thin bronze rule holding the left edge. */
.event-strip::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, #e0b878, #b9834a);
}
/* A soft sheen crossing the strip. Narrow and low-contrast — at this opacity it
   reads as light moving over metal rather than as a flashing banner, which is
   why it can afford to come round more often. */
.event-strip::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 34%, rgba(255,236,205,0.13) 47%, rgba(255,236,205,0.05) 53%, transparent 66%);
  transform: translateX(-70%);
  animation: evSheen 3.6s ease-in-out infinite;
}
@keyframes evSheen {
  0%, 30%   { transform: translateX(-70%); }
  78%, 100% { transform: translateX(70%); }
}
.event-strip .ev-tag {
  position: relative; z-index: 1;
  flex: none; font-family: Archivo, sans-serif; font-size: .66rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  background: linear-gradient(180deg, #e3bd83, #c99a5b); color: #2a1c0a;
  padding: 4px 11px; border-radius: 999px;
}
/* The strip is an announcement, not a paragraph: it holds one line and
   truncates rather than growing a second one. A banner that wraps to three
   lines stops reading as a banner. */
.event-strip .ev-text {
  position: relative; z-index: 1; flex: 1 1 200px; min-width: 0;
  font-size: .93rem; font-weight: 700; color: #fdf7ef;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.event-strip .ev-text strong { font-weight: 800; }
.event-strip .ev-date { position: relative; z-index: 1; flex: none; color: #e3c79c; font-size: .85rem; font-weight: 600; white-space: nowrap; }
/* The Korean half of each "English | 한국어" pair — present and readable, but
   clearly the second line of the pair rather than a competing one. */
.event-strip .ev-ko { margin-left: 6px; font-weight: 500; font-size: .88em; opacity: .72; }
.event-strip .ev-link {
  position: relative; z-index: 1; flex: none;
  display: inline-flex; align-items: center; gap: 5px;
  color: #e8c391; font-weight: 700; white-space: nowrap; font-size: .86rem;
  border-bottom: 1px solid rgba(232,195,145,0.5); padding-bottom: 1px;
}
.event-strip .ev-link:hover { color: #fff; border-bottom-color: #fff; }
.event-strip .ev-link svg { width: 15px; height: 15px; }
.event-strip .ev-tag i { font-style: normal; }
/* On the narrowest phones the bilingual label alone eats the first line, so
   the Korean half of the label steps aside — the date is the useful part. */
@media (max-width: 430px) { .event-strip .ev-tag i { display: none; } }
@media (prefers-reduced-motion: reduce) { .event-strip::after { animation: none; opacity: 0; } }
@media (max-width: 620px) {
  /* Stacked, not wrapped: side by side the pill left the title flowing around
     it in a ragged L shape. */
  /* Two lines on a phone, not four: label and date on the first, the name of
     the thing and the way in on the second. The auto margin on the date eats
     the leftover space, which is also what forces the wrap after it. */
  .event-strip { padding: 9px 14px 9px 18px; gap: 5px 10px; }
  .event-strip .ev-tag { order: 1; font-size: .56rem; padding: 3px 8px; letter-spacing: .1em; }
  .event-strip .ev-tag i { font-style: normal; }
  .event-strip .ev-date { order: 2; margin-left: auto; font-size: .78rem; }
  .event-strip .ev-text { order: 3; flex: 1 1 auto; font-size: .89rem; }
  .event-strip .ev-link { order: 4; font-size: .78rem; }
  .event-strip .ev-link svg { display: none; }
}

/* ---------- Sample-content flag (editors only) ----------
   Deliberately unlike anything else on the site — a dashed warning strip that
   could never be mistaken for part of the design, so nobody looks at a preview
   and believes the quotes are real. */
.sample-flag {
  margin: 0 0 22px; padding: 11px 16px; border-radius: 10px;
  background: repeating-linear-gradient(135deg, #fff8e1 0 12px, #fff3cd 12px 24px);
  border: 1px dashed #d97706; color: #7c4a03;
  font-size: .84rem; line-height: 1.6;
}
.sample-flag strong {
  display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 999px;
  background: #d97706; color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .06em;
}
.sample-flag a { color: #b45309; font-weight: 700; text-decoration: underline; }

/* ---------- Pastor welcome ---------- */
.pastor-card { display: grid; grid-template-columns: 300px 1fr; gap: clamp(24px, 4vw, 52px); align-items: start; }
.pastor-card .pc-photo { border-radius: 20px; overflow: hidden; aspect-ratio: 4/5; position: sticky; top: 100px; }
.pastor-card .pc-photo img { width: 100%; height: 100%; object-fit: cover; }
.pastor-card blockquote { margin: 20px 0 0; }
.pastor-card blockquote p {
  margin: 0 0 14px; font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  line-height: 1.75; color: var(--navy-800);
}
.pastor-card blockquote p:last-child { margin-bottom: 0; }
.pc-name { font-weight: 700; color: var(--navy-800); }
.pastor-card .pc-name { margin-top: 20px; }
.pc-name span { display: block; font-weight: 500; font-size: .88rem; opacity: .6; margin-top: 2px; }

/* The full letter. A native <details>, so it opens with no JavaScript, is
   keyboard-reachable, and can be found by the browser's own find-in-page —
   none of which a hand-built accordion gives you for free. */
.pc-more { margin-top: 26px; border-top: 1px solid var(--line, rgba(10,26,47,0.12)); padding-top: 20px; }
.pc-more > summary {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  list-style: none; font-weight: 700; font-size: .95rem; color: var(--blue-500, #3b82f6);
}
.pc-more > summary::-webkit-details-marker { display: none; }
.pc-more > summary::after {
  content: ""; width: 9px; height: 9px; flex: none;
  border-right: 2.2px solid currentColor; border-bottom: 2.2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .22s ease;
}
.pc-more[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.pc-more > summary:hover { color: var(--navy-800); }
.pc-more > summary:focus-visible { outline: 2px solid var(--blue-500, #3b82f6); outline-offset: 4px; border-radius: 4px; }

.pc-letter { margin-top: 20px; max-width: 66ch; }
.pc-letter p {
  margin: 0 0 16px; font-size: .98rem; line-height: 1.85;
  color: var(--ink-70, #34455a);
}
.pc-letter p:first-child { font-size: 1.06rem; font-weight: 600; color: var(--navy-800); }
.pc-letter p:last-child { margin-bottom: 0; }

/* A Korean gloss sitting inline inside an English link label. */
.ko-inline { font-weight: 500; font-size: .88em; opacity: .62; margin-left: 3px; }

/* Crossing to the other language version, at the end of the letter. */
.pc-other { margin-top: 26px !important; padding-top: 18px; border-top: 1px solid var(--line, rgba(10,26,47,0.1)); }
.pc-other a {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: .92rem; color: var(--blue-500, #3b82f6);
}
.pc-other a svg { width: 15px; height: 15px; }
.pc-other a:hover { color: var(--navy-800); }

@media (max-width: 720px) {
  .pastor-card { grid-template-columns: 1fr; }
  .pastor-card .pc-photo { max-width: 240px; position: static; }
}
@media (prefers-reduced-motion: reduce) { .pc-more > summary::after { transition: none; } }

/* ---------- Discipleship reviews ----------
   The same <details> pattern as the pastor's letter: no JavaScript, keyboard
   reachable, findable by the browser's own search. */
.dj-reviews {
  margin-top: clamp(28px, 3.5vw, 44px);
  border-top: 1px solid var(--line, rgba(10,26,47,0.12));
  padding-top: 22px;
}
.dj-reviews > summary {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  list-style: none; font-weight: 700; font-size: 1rem; color: var(--navy-800);
}
.dj-reviews > summary::-webkit-details-marker { display: none; }
.dj-reviews > summary .en {
  display: block; font-weight: 500; font-size: .8rem; opacity: .55; margin-top: 3px;
}
.dj-reviews > summary::after {
  content: ""; width: 10px; height: 10px; flex: none; align-self: center;
  border-right: 2.2px solid var(--blue-500, #3b82f6);
  border-bottom: 2.2px solid var(--blue-500, #3b82f6);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .22s ease;
}
.dj-reviews[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.dj-reviews > summary:hover { color: var(--blue-500, #3b82f6); }
.dj-reviews > summary:focus-visible { outline: 2px solid var(--blue-500, #3b82f6); outline-offset: 4px; border-radius: 4px; }
.dj-reviews .voices { margin-top: 24px; }
@media (prefers-reduced-motion: reduce) { .dj-reviews > summary::after { transition: none; } }

/* ---------- Voices (testimonials) ---------- */
.voices { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.voice {
  background: #fff; border: 1px solid var(--line, rgba(10,26,47,0.1));
  border-radius: 18px; padding: 26px 26px 22px;
}
.voice blockquote { margin: 0; font-size: .98rem; line-height: 1.7; color: var(--navy-800); }
.voice blockquote::before { content: "“"; color: var(--blue-500, #3b82f6); font-family: Archivo, sans-serif; font-size: 1.4em; margin-right: 2px; }
.voice figcaption { margin-top: 14px; font-size: .82rem; font-weight: 600; color: var(--ink-50, #5b6b7d); }

/* ---------- Moments (photo grid + lightbox) ----------
   A contact sheet, not a slideshow. The first version was a full-bleed
   horizontal strip, which meant huge tiles and — on a desktop with a mouse and
   no touchpad gesture — no comfortable way to move sideways. A grid shows the
   whole set at once, so nothing is hidden behind a scroll, and the big view
   moves into a lightbox where arrows can be real buttons. */
.mo-grid {
  display: grid; gap: clamp(10px, 1.2vw, 16px);
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  margin-top: clamp(24px, 3vw, 40px);
}
.mo-tile {
  position: relative; display: block; padding: 0; border: 0; cursor: pointer;
  aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden;
  background: var(--navy-800, #0a1a2f);
  box-shadow: 0 6px 18px rgba(6,17,31,0.12);
  transition: transform .28s var(--ease, ease), box-shadow .28s var(--ease, ease);
}
.mo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease, ease); }
.mo-tile:hover, .mo-tile:focus-visible {
  transform: translateY(-4px) scale(1.02); z-index: 2;
  box-shadow: 0 18px 40px rgba(6,17,31,0.26);
}
.mo-tile:hover img, .mo-tile:focus-visible img { transform: scale(1.09); }

.mo-tile .mo-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 30px 12px 10px; font-size: .78rem; font-weight: 600; color: #fff;
  text-align: left; line-height: 1.4;
  background: linear-gradient(to top, rgba(6,17,31,0.78), transparent);
}
/* The magnifier only appears on hover, so the grid itself stays photos. */
.mo-tile .mo-zoom {
  position: absolute; top: 10px; right: 10px;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,17,31,0.55); color: #fff;
  opacity: 0; transform: scale(.86);
  transition: opacity .24s ease, transform .24s ease;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.mo-tile .mo-zoom svg { width: 15px; height: 15px; }
.mo-tile:hover .mo-zoom, .mo-tile:focus-visible .mo-zoom { opacity: 1; transform: scale(1); }

@media (max-width: 640px) {
  .mo-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .mo-tile { border-radius: 12px; }
  .mo-tile .mo-cap { font-size: .7rem; padding: 22px 9px 8px; }
}

/* --- Two rows, with the rest behind a label ---
   Twenty square photos is most of a screen twice over, and by the fourth row
   the visitor is scrolling past the gallery rather than looking at it. Two
   rows is enough to say "there is life here" and short enough to get through.

   The checkbox is the state. It is visually hidden but still focusable, and
   the <label> is what gets clicked — so this opens and closes with no
   JavaScript at all, and with none of the flash-then-collapse a script-driven
   version would have. */
/* Fixed, not `.screen-reader-text`'s absolute-and-clipped.
   Clicking a <label> focuses the input it points at, and the browser then
   scrolls that input into view. Clipped at its static position near the
   gallery, that scroll threw the page back to the top on every open and
   close. A fixed element is always inside the viewport already, so there is
   nothing to scroll to and the page stays exactly where the reader left it.
   It is still a real, focusable checkbox — the focus ring is drawn on the
   label below. */
.mo-toggle {
  position: fixed; top: 0; left: 0;
  width: 1px; height: 1px; margin: 0; padding: 0;
  opacity: 0; pointer-events: none; appearance: none; -webkit-appearance: none;
}
.mo-toggle:not(:checked) ~ .mo-grid .mo-tile:nth-child(n+11) { display: none; }
.mo-toggle:checked ~ .mo-more .a,
.mo-toggle:not(:checked) ~ .mo-more .b { display: none; }
.mo-toggle:checked ~ .mo-more .mo-more-i { transform: rotate(180deg); }
/* Focus lands on the invisible checkbox, so the label has to show it. */
.mo-toggle:focus-visible ~ .mo-more { outline: 2px solid var(--blue-500); outline-offset: 3px; }

.mo-more {
  /* flex + fit-content rather than inline-flex, so `margin-inline: auto`
     actually centres it — the parent is not a flex container. */
  display: flex; width: fit-content; align-items: center; gap: 9px;
  margin: clamp(18px, 2.4vw, 26px) auto 0;
  padding: 13px 26px; border-radius: 999px;
  border: 1px solid rgba(15,22,32,0.18); background: #fff;
  font-size: 0.9rem; font-weight: 700; color: var(--navy-800);
  cursor: pointer; user-select: none;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s var(--ease);
}
.mo-more:hover { border-color: var(--navy-800); box-shadow: 0 10px 26px rgba(6,17,31,0.12); transform: translateY(-2px); }

/* The show-more label already closes the section off, so the full section
   padding underneath it read as the page having simply stopped. Section
   padding is ~148px at this width, and stacked against the next section's
   own top padding that was nearly 300px of nothing. */
.moments { padding-bottom: clamp(46px, 5vw, 72px); }
.mo-more .ko-inline { font-weight: 600; opacity: .6; }
.mo-more-i { width: 16px; height: 16px; transition: transform .28s var(--ease); }

@media (max-width: 640px) {
  /* Two columns, so two rows is six — not ten. */
  .mo-toggle:not(:checked) ~ .mo-grid .mo-tile:nth-child(n+7) { display: none; }
}
@media (min-width: 641px) {
  /* Ten or fewer photos: nothing is hidden at this width, so a control that
     appears to reveal more would be lying. */
  .mo-more[data-few] { display: none; }
}

/* --- Lightbox --- */
.mo-lightbox { position: fixed; inset: 0; z-index: 400; display: flex; }
/* Setting `display` on an element that also uses the `hidden` attribute beats
   the attribute's own `display: none` — without this the closed lightbox stays
   laid out, an invisible full-screen backdrop swallowing every click on the
   page. Cost me one round of "why does nothing open". */
.mo-lightbox[hidden] { display: none; }
.mo-lb-backdrop {
  position: absolute; inset: 0; background: rgba(4,10,20,0.9);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .28s ease;
}
.mo-lightbox.is-in .mo-lb-backdrop { opacity: 1; }
.mo-lb-inner {
  position: relative; z-index: 1; margin: auto;
  width: min(1100px, 94vw); max-height: 92vh;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.97); transition: opacity .28s ease, transform .28s ease;
}
.mo-lightbox.is-in .mo-lb-inner { opacity: 1; transform: none; }
.mo-lb-figure { margin: 0; max-height: 92vh; display: flex; flex-direction: column; }
.mo-lb-figure img {
  display: block; max-width: 100%; max-height: 82vh;
  width: auto; height: auto; object-fit: contain;
  border-radius: 12px; background: #0a1a2f;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.mo-lb-figure figcaption {
  margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 14px;
  color: rgba(255,255,255,0.78); font-size: .86rem; text-align: center;
}
.mo-lb-count { font-family: Archivo, sans-serif; font-size: .76rem; letter-spacing: .1em; opacity: .6; flex: none; }

/* Translucent so they never fight the photograph, solid enough to be obviously
   pressable — this is the part a mouse user was missing entirely. */
.mo-lb-btn {
  position: absolute; z-index: 2; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; border-radius: 50%;
  background: rgba(255,255,255,0.16); color: #fff;
  border: 1px solid rgba(255,255,255,0.28);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.mo-lb-btn:hover { background: rgba(255,255,255,0.34); border-color: rgba(255,255,255,0.6); transform: scale(1.07); }
.mo-lb-btn svg { width: 22px; height: 22px; }
.mo-lb-prev { left: -6px; top: 50%; margin-top: -25px; }
.mo-lb-next { right: -6px; top: 50%; margin-top: -25px; }
.mo-lb-close { top: -6px; right: -6px; font-size: 1.6rem; line-height: 1; width: 42px; height: 42px; }
@media (min-width: 1180px) {
  .mo-lb-prev { left: -66px; }
  .mo-lb-next { right: -66px; }
  .mo-lb-close { right: -66px; top: -10px; }
}
@media (max-width: 640px) {
  .mo-lb-btn { width: 42px; height: 42px; }
  .mo-lb-prev { left: 2px; }
  .mo-lb-next { right: 2px; }
  .mo-lb-close { top: -48px; right: 2px; }
  .mo-lb-figure img { max-height: 70vh; }
}
body.lb-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .mo-tile, .mo-tile img, .mo-lb-inner, .mo-lb-backdrop { transition: none; }
  .mo-tile:hover { transform: none; }
}

/* ---------- Watch-live button ----------
   Two states in one control. Off-air it is a quiet outline button carrying the
   next service time, so it still answers "when do you meet?" instead of just
   sitting there. On-air it turns red and breathes, because at that moment it is
   the single most useful thing on the page. */
.live-btn {
  display: inline-flex; align-items: center; gap: 11px;
  border: 1.5px solid rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.08);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-align: left;
}
.live-btn:hover { background: rgba(255,255,255,0.18); border-color: #fff; }
.live-btn .live-t { display: flex; flex-direction: column; line-height: 1.25; }
.live-btn .live-s {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
  opacity: 0.72; margin-top: 3px; text-transform: none;
}

/* All four labels ship in the markup and CSS shows exactly one, so changing
   phase is a single attribute change — no text is rebuilt in JS, and the button
   still reads correctly on a page where scripts never ran.

   The phases are: off (an ordinary day), soon (service starts within ten
   minutes), during (service has started by the clock), live (a stream is
   confirmed running). Only `live` is red — the other two announcements come
   from the clock, which cannot fail the way stream detection can. */
.live-btn .live-t,
.live-bar .live-t { display: none; }
.live-btn .live-t { flex-direction: column; line-height: 1.25; }
.live-btn[data-phase="off"]    .live-t[data-for="off"],
.live-btn[data-phase="soon"]   .live-t[data-for="soon"],
.live-btn[data-phase="during"] .live-t[data-for="during"],
.live-btn[data-phase="live"]   .live-t[data-for="live"] { display: flex; }
.live-bar[data-phase="off"]    .live-t[data-for="off"],
.live-bar[data-phase="soon"]   .live-t[data-for="soon"],
.live-bar[data-phase="during"] .live-t[data-for="during"],
.live-bar[data-phase="live"]   .live-t[data-for="live"] { display: inline; }

/* The status light. A quiet ring on an ordinary day, an amber pulse as the
   service approaches, and a white play triangle on red once the stream is
   confirmed — so "we are on air" is legible at a glance, from across a room,
   without reading a word of either language. */
.live-icon {
  position: relative; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.14);
  border: 1.5px solid rgba(255,255,255,0.5);
}
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; flex: none; opacity: .8;
}
.live-play { width: 13px; height: 13px; fill: #e11d2e; display: none; margin-left: 1px; }

/* --- soon / during: amber, awake but not shouting --- */
.live-btn[data-phase="soon"],
.live-btn[data-phase="during"] {
  background: rgba(245,158,11,0.22);
  border-color: #fbbf24;
  color: #fff;
}
.live-btn[data-phase="soon"]:hover,
.live-btn[data-phase="during"]:hover { background: rgba(245,158,11,0.34); border-color: #fcd34d; }
.live-btn[data-phase="soon"] .live-icon,
.live-btn[data-phase="during"] .live-icon {
  background: #fbbf24; border-color: #fbbf24; color: #7c2d12;
}
.live-btn[data-phase="soon"] .live-dot,
.live-btn[data-phase="during"] .live-dot {
  opacity: 1; animation: liveBlink 1.6s steps(1, end) infinite;
}

/* --- live: red, breathing, unmistakable --- */
.live-btn[data-phase="live"] {
  background: #e11d2e; border-color: #e11d2e;
  box-shadow: 0 0 0 0 rgba(225,29,46,0.55);
  animation: liveBreathe 2.4s ease-out infinite;
}
.live-btn[data-phase="live"]:hover { background: #c81626; border-color: #c81626; }
.live-btn[data-phase="live"] .live-s { opacity: 0.9; }
.live-btn[data-phase="live"] .live-icon {
  background: #fff; border-color: #fff;
  animation: livePop 1.5s ease-in-out infinite;
}
.live-btn[data-phase="live"] .live-dot { display: none; }
.live-btn[data-phase="live"] .live-play { display: block; }
@keyframes livePop {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.14); }
}
@keyframes liveBreathe {
  0%   { box-shadow: 0 0 0 0 rgba(225,29,46,0.55); }
  70%  { box-shadow: 0 0 0 16px rgba(225,29,46,0); }
  100% { box-shadow: 0 0 0 0 rgba(225,29,46,0); }
}
@keyframes liveBlink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0.25; } }

/* Someone who has asked for less motion still gets both states — just still. */
@media (prefers-reduced-motion: reduce) {
  .live-btn[data-phase="live"],
  .live-bar[data-phase="live"] { animation: none; }
  .live-dot, .live-btn[data-phase="live"] .live-icon { animation: none; }
}

/* ---------- Watch-live bar ----------
   The sermons page is wall-to-wall recordings, so nothing there hints that
   services are streamed live at all. This states it, and lists every service
   time rather than only the next one, so the page answers "when?" on a quiet
   Tuesday as well as it does five minutes before the stream starts. */
.live-bar {
  display: flex; align-items: center; gap: clamp(18px, 3vw, 40px);
  flex-wrap: wrap; justify-content: space-between;
  padding: clamp(20px, 2.6vw, 28px) clamp(22px, 3vw, 34px);
  border: 1px solid var(--line, rgba(10,26,47,0.12));
  border-radius: 20px;
  background: #fff;
}
.live-bar-kicker {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: Archivo, sans-serif;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--blue-500);
}
.live-bar-times {
  margin: 12px 0 0; color: var(--navy-800);
  font-size: clamp(1rem, 1.5vw, 1.16rem); font-weight: 700;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.live-bar-times .t span { font-weight: 500; opacity: 0.62; margin-left: 6px; }
.live-bar-times .sep { opacity: 0.3; }

.live-bar-btn {
  flex: none;
  background: var(--navy-800, #0a1a2f); color: #fff; border: 1.5px solid transparent;
}
.live-bar-btn:hover { background: #000; color: #fff; }

/* On the light sermons page the icon needs its own colours — the hero版 assumes
   a dark backdrop behind it. */
.live-bar .live-icon {
  width: 22px; height: 22px;
  background: var(--blue-500, #3b82f6); border-color: var(--blue-500, #3b82f6);
  color: #fff;
}
.live-bar[data-phase="soon"] .live-icon,
.live-bar[data-phase="during"] .live-icon { background: #f59e0b; border-color: #f59e0b; }
.live-bar[data-phase="soon"] .live-dot,
.live-bar[data-phase="during"] .live-dot { animation: liveBlink 1.6s steps(1, end) infinite; }

.live-bar[data-phase="soon"],
.live-bar[data-phase="during"] { border-color: #f59e0b; background: #fffbeb; }
.live-bar[data-phase="soon"] .live-bar-kicker,
.live-bar[data-phase="during"] .live-bar-kicker { color: #b45309; }

.live-bar[data-phase="live"] {
  background: #e11d2e; border-color: #e11d2e;
  animation: liveBreathe 2.4s ease-out infinite;
}
.live-bar[data-phase="live"] .live-icon { background: #fff; border-color: #fff; color: #e11d2e; }
.live-bar[data-phase="live"] .live-dot { animation: liveBlink 1.2s steps(1, end) infinite; }
.live-bar[data-phase="live"] .live-bar-kicker { color: rgba(255,255,255,0.92); }
.live-bar[data-phase="live"] .live-bar-times { color: #fff; }
.live-bar[data-phase="live"] .live-bar-times .t span { opacity: 0.8; }
.live-bar[data-phase="live"] .live-bar-btn { background: #fff; color: #c81626; }
.live-bar[data-phase="live"] .live-bar-btn:hover { background: var(--navy-800, #0a1a2f); color: #fff; }

@media (max-width: 640px) {
  .live-bar { align-items: stretch; }
  .live-bar-btn { width: 100%; justify-content: center; }
}

.hero-scroll {
  position: absolute; left: var(--gutter); bottom: 26px; z-index: 3;
  display: inline-flex; align-items: center; gap: 12px;
  font-family: Archivo, sans-serif; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.55);
}
.hero-scroll i {
  width: 1px; height: 34px; background: linear-gradient(rgba(255,255,255,0.7), transparent);
  animation: scrollpulse 2.1s var(--ease) infinite;
}
@keyframes scrollpulse { 0%,100% { transform: scaleY(0.4); opacity: .35; } 50% { transform: scaleY(1); opacity: 1; } }

/* Page hero (interior) */
/* Trimmed down from 200/96: an interior hero is a signpost, not a destination,
   and at the old height it filled a laptop screen on its own — you arrived at
   Ministries and had to scroll before seeing a single ministry. */
.page-hero {
  position: relative; overflow: hidden; color: #fff; background: var(--navy-800);
  padding-top: clamp(118px, 12.5vw, 156px); padding-bottom: clamp(40px, 4.6vw, 64px);
}
.page-hero .h-lg { font-size: clamp(1.9rem, 4.4vw, 3rem); }
.page-hero .hero-media::after {
  background: linear-gradient(180deg, rgba(6,17,31,0.72), rgba(6,17,31,0.62)),
              linear-gradient(96deg, rgba(6,17,31,0.85), rgba(6,17,31,0.25));
}
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero .kicker { color: var(--blue-100); margin-bottom: 14px; }
.page-hero .lede { margin-top: 16px; color: rgba(255,255,255,0.75); }

/* ---------- Overlap service card ---------- */
.overlap { position: relative; z-index: 10; margin-top: clamp(-120px, -8vw, -70px); }
.svc-card {
  background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  overflow: hidden; border: 1px solid rgba(255,255,255,0.5);
}
.svc-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 26px clamp(24px, 3.4vw, 42px); border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fff, var(--paper));
}
.svc-head .kicker { margin: 0; }
.svc-head .addr { font-size: 0.9rem; color: var(--ink-50); }
.svc-rows { display: grid; grid-template-columns: repeat(2, 1fr); }
.svc-row {
  padding: clamp(24px, 3vw, 34px) clamp(24px, 3.4vw, 42px);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
  transition: background .3s var(--ease);
}
.svc-row:last-child { border-right: 0; }
.svc-row:hover { background: var(--paper); }
.svc-row .day {
  font-family: Archivo, sans-serif; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.19em; text-transform: uppercase; color: var(--blue-500);
}
.svc-row .time {
  font-family: Archivo, sans-serif; font-weight: 800; letter-spacing: -0.035em;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem); color: var(--navy-800); line-height: 1.05;
}
.svc-row .what { font-size: 0.93rem; color: var(--ink-50); }
.svc-foot {
  padding: 20px clamp(24px, 3.4vw, 42px); border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: var(--paper);
}

/* ---------- Grids ---------- */
.grid { display: grid; gap: clamp(18px, 2.2vw, 30px); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

/* Asymmetric split */
.split { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(34px, 5.4vw, 84px); align-items: center; }
.split.reverse > *:first-child { order: 2; }
.split-media { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.split-media img { width: 100%; aspect-ratio: 4/3.2; object-fit: cover; }
.split-media.tall img { aspect-ratio: 4/4.6; }

/* Floating stat chip on media */
.media-chip {
  position: absolute; left: 22px; bottom: 22px; z-index: 2;
  background: rgba(255,255,255,0.94); backdrop-filter: blur(10px);
  border-radius: 14px; padding: 16px 22px; box-shadow: var(--shadow);
}
.media-chip .n { font-family: Archivo, sans-serif; font-weight: 800; font-size: 1.9rem; letter-spacing: -0.04em; color: var(--navy-800); line-height: 1; }
.media-chip .l { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-50); margin-top: 5px; }

/* Chip with no big figure — a short phrase reads better at sentence size,
   so drop the all-caps tracking and let it sit on one line. */
.media-chip.is-line { padding: 13px 20px; max-width: min(78%, 340px); }
.media-chip.is-line .l {
  font-family: Archivo, sans-serif; font-size: 0.95rem; font-weight: 700;
  letter-spacing: -0.01em; text-transform: none; color: var(--navy-800);
  margin-top: 0; line-height: 1.35;
}
@media (max-width: 620px) {
  .media-chip.is-line { left: 14px; bottom: 14px; padding: 11px 16px; max-width: calc(100% - 28px); }
  .media-chip.is-line .l { font-size: 0.86rem; }
}

/* ---------- Feature cards (photo) ---------- */
.feat {
  position: relative; display: block; border-radius: var(--r-lg); overflow: hidden;
  background: var(--navy-800); color: #fff; min-height: 400px;
  display: flex; align-items: flex-end;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.feat:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.feat img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.feat:hover img { transform: scale(1.06); }
.feat::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,17,31,0.05) 30%, rgba(6,17,31,0.72) 78%, rgba(6,17,31,0.92) 100%);
  transition: opacity .5s;
}
.feat-body { position: relative; z-index: 2; padding: clamp(24px, 2.8vw, 34px); }
.feat-body .kicker { color: var(--blue-100); margin-bottom: 12px; }
.feat-body h3 { color: #fff; }
.feat-body p { margin: 12px 0 0; font-size: 0.94rem; color: rgba(255,255,255,0.75); }
.feat-body .feat-go { margin-top: 16px; font-weight: 700; font-size: 0.88rem; color: #fff; }
.feat-body .feat-go .ext { opacity: .8; }

/* ---------- Plain cards ---------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(26px, 2.8vw, 34px);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s;
}
a.card:hover, .card.hoverable:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: transparent; }
.card .ic {
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: 20px;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
  background: linear-gradient(140deg, var(--blue-500), var(--navy-700)); color: #fff;
}
.card h3 { color: var(--navy-800); }
.card p { margin: 12px 0 0; color: var(--ink-70); font-size: 0.95rem; }
.dark .card { background: rgba(255,255,255,0.05); border-color: var(--line-dark); }
.dark .card h3 { color: #fff; }
.dark .card p { color: rgba(255,255,255,0.68); }

/* ---------- Walking map (embedded, replaces the old external-link button) ---------- */
.walk-map {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 3.6vw, 48px);
  align-items: center; margin-top: clamp(36px, 4.4vw, 52px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(18px, 2.2vw, 26px); overflow: hidden;
}
.walk-map-img {
  border-radius: calc(var(--r-lg) - 6px); overflow: hidden; box-shadow: var(--shadow);
  line-height: 0;
}
.walk-map-img img { width: 100%; height: auto; display: block; }
.walk-map-info p { margin: 12px 0 0; color: var(--ink-70); font-size: 0.95rem; line-height: 1.7; }
.walk-map-info p.sm { color: var(--ink-50); font-size: 0.86rem; }
@media (max-width: 780px) {
  .walk-map { grid-template-columns: 1fr; }
}

/* ---------- Editorial numbered list (values) ---------- */
.vlist { border-top: 1px solid var(--line-dark); }
.vlist li {
  display: grid; grid-template-columns: 86px 1fr 1.1fr; gap: clamp(14px, 3vw, 40px);
  padding: clamp(24px, 3vw, 36px) 0; border-bottom: 1px solid var(--line-dark);
  align-items: start;
  transition: background .35s var(--ease);
}
.vlist li:hover { background: rgba(255,255,255,0.03); }
.vlist .num {
  font-family: Archivo, sans-serif; font-weight: 800; font-size: 0.92rem;
  letter-spacing: 0.06em; color: var(--blue-400); padding-top: 6px;
}
.vlist h3 { font-size: clamp(1.25rem, 2vw, 1.7rem); }
.vlist p { margin: 0; color: rgba(255,255,255,0.66); font-size: 0.97rem; padding-top: 4px; }
.light .vlist { border-color: var(--line); }
.light .vlist li { border-color: var(--line); }
.light .vlist p { color: var(--ink-70); }
.light .vlist .num { color: var(--blue-500); }
.light .vlist li:hover { background: rgba(15,22,32,0.02); }

/* The core-values list carries a full paragraph in both languages plus the
   verse the value rests on, so the third column needs room to breathe and the
   citation needs to read as a citation — small, spaced, and set apart by a
   rule rather than by another colour the eye has to decode. */
.vlist-values li { grid-template-columns: 86px 1fr 1.5fr; }
.vlist-values .vl-body p { margin: 0; }
.vlist-values .vl-body .ko-line { opacity: 0.78; }
.vl-ref {
  margin-top: 14px !important; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-family: Archivo, sans-serif;
  font-size: 0.76rem !important; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--blue-400) !important;
}
.light .vl-ref { border-top-color: var(--line); color: var(--blue-500) !important; }
/* Matches the 900px breakpoint the rest of .vlist collapses at — a different
   number here would leave a 40px band where the two rules disagree. */
@media (max-width: 900px) {
  .vlist-values li { grid-template-columns: 44px 1fr; }
  .vlist-values .vl-body { grid-column: 2; }
}

/* ---------- Stat band ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.stat { border-left: 2px solid rgba(255,255,255,0.16); padding-left: 24px; }
.stat-n {
  font-weight: 800; letter-spacing: -0.05em; line-height: 1;
  font-size: clamp(2.6rem, 6vw, 4.4rem); color: #fff;
}
.stat-l { margin-top: 10px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.55); }

/* ---------- Full-bleed band ---------- */
.band {
  position: relative; overflow: hidden; color: #fff; background: var(--navy-900);
  padding-block: clamp(90px, 11vw, 160px);
}
.band-media { position: absolute; inset: 0; }
.band-media img { width: 100%; height: 100%; object-fit: cover; }
.band-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,17,31,0.78), rgba(6,17,31,0.9));
}
.band .wrap { position: relative; z-index: 2; }

/* Marquee of nations */
.marquee { overflow: hidden; margin-top: 44px; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; gap: 46px; width: max-content; animation: slide 42s linear infinite; }
.marquee span {
  font-family: Archivo, sans-serif; font-weight: 800; font-size: clamp(1.1rem, 2vw, 1.55rem);
  letter-spacing: -0.02em; color: rgba(255,255,255,0.32); white-space: nowrap;
}
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------- Sermons ---------- */
.sermon-feature { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.video-frame {
  aspect-ratio: 16/9; border-radius: var(--r-lg); overflow: hidden;
  background: var(--navy-900); box-shadow: var(--shadow-lg);
}
.video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-frame .thumb { position: relative; width: 100%; height: 100%; }
.video-frame .thumb img { width: 100%; height: 100%; object-fit: cover; }

.sermon {
  display: block; border-radius: var(--r-lg); overflow: hidden; background: #fff;
  border: 1px solid var(--line);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s;
}
.sermon:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: transparent; }
.sermon-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--navy-800); }
.sermon-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.sermon:hover .sermon-thumb img { transform: scale(1.06); }
.play-dot {
  position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,0.94); color: var(--navy-800);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 26px rgba(0,0,0,0.28); z-index: 2;
  transition: transform .4s var(--ease);
}
.sermon:hover .play-dot { transform: scale(1.1); }
.play-dot svg { width: 17px; height: 17px; margin-left: 3px; fill: currentColor; }
.sermon-body { padding: 22px 24px 26px; }
.sermon-body .date {
  font-family: Archivo, sans-serif; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-500); margin-bottom: 10px;
}
.sermon-body h3 { color: var(--navy-800); font-size: 1.08rem; letter-spacing: -0.025em; line-height: 1.3; }
.sermon-body p { margin: 10px 0 0; color: var(--ink-50); font-size: 0.9rem; }

/* ---------- Contact / map ---------- */
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(30px, 4.4vw, 64px); align-items: start; }
.info { display: grid; gap: 4px; }
.info-row {
  display: grid; grid-template-columns: 132px 1fr; gap: 18px;
  padding: 20px 0; border-bottom: 1px solid var(--line); align-items: start;
}
.info-row:first-child { border-top: 1px solid var(--line); }
.info-row dt {
  font-family: Archivo, sans-serif; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-50); padding-top: 4px;
}
.info-row dd { margin: 0; font-size: 0.98rem; color: var(--ink); }
.info-row dd .sm { display: block; font-size: 0.86rem; color: var(--ink-50); margin-top: 3px; }
.map-frame { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); background: var(--paper-2); }
.map-frame iframe { width: 100%; height: clamp(340px, 46vw, 520px); border: 0; display: block; }

/* ---------- Forms ---------- */
.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(26px, 3.4vw, 42px); box-shadow: var(--shadow-sm);
}
.field { margin-bottom: 18px; }
.field label, .form-card label {
  display: block; margin-bottom: 8px;
  font-family: Archivo, sans-serif; font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-50);
}
.field input, .field textarea, .field select,
.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type=tel], .wpcf7 textarea, .wpcf7 select {
  width: 100%; padding: 14px 16px; font: inherit; font-size: 0.97rem;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 10px;
  transition: border-color .25s, background .25s;
}
.field input:focus, .field textarea:focus, .field select:focus,
.wpcf7 input:focus, .wpcf7 textarea:focus {
  outline: none; border-color: var(--blue-500); background: #fff;
}
.field textarea { min-height: 138px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* ---------- Giving — one unified section: steps + QR / accounts ---------- */
.give-qr {
  position: relative; overflow: hidden;
  background:
    radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(120deg, var(--navy-700), var(--navy-900) 70%);
  background-size: 26px 26px, auto;
}
.give-head { max-width: 640px; margin: 0 auto clamp(48px, 6vw, 72px); text-align: center; }
.give-head .lede { margin: 18px auto 0; max-width: 52ch; }
.give-body {
  display: grid; grid-template-columns: 1fr auto; align-items: start;
  gap: clamp(40px, 6vw, 80px);
}

/* -- left: numbered steps, dark-on-navy version of the old light .give-row -- */
.give-steps { display: grid; gap: 0; }
.give-step {
  display: grid; grid-template-columns: 56px 1fr; gap: 22px;
  padding: clamp(22px, 2.6vw, 30px) 0; border-bottom: 1px solid var(--line-dark); align-items: start;
}
.give-step:first-child { border-top: 1px solid var(--line-dark); }
.give-step .n {
  font-family: Archivo, sans-serif; font-weight: 800; font-size: 0.86rem;
  letter-spacing: 0.08em; color: var(--blue-400); padding-top: 7px;
}
.give-step h3 { color: #fff; }
.give-step p { margin: 8px 0 0; color: rgba(255,255,255,0.62); font-size: 0.95rem; line-height: 1.7; }

/* -- right: QR + account panel, a lighter card floating on the navy field -- */
.give-qr-panel {
  background: rgba(255,255,255,0.04); border: 1px solid var(--line-dark);
  border-radius: var(--r-lg); padding: clamp(28px, 3.4vw, 40px); backdrop-filter: blur(2px);
}
.give-qr-panel-head { margin-bottom: clamp(22px, 3vw, 30px); }
.give-qr-panel-head .tag {
  display: inline-block; font-family: Archivo, sans-serif; font-weight: 800;
  font-size: 0.74rem; letter-spacing: 0.1em; color: var(--blue-400); text-transform: uppercase;
}
.give-qr-panel-head p {
  margin: 10px 0 0; font-size: 0.96rem; color: #fff; font-weight: 600; max-width: 30ch;
}
.give-qr-panel-head p .ko-line { display: block; margin-top: 4px; font-weight: 400; color: rgba(255,255,255,0.62); font-size: 0.88rem; }
.give-qr-grid {
  display: grid; grid-template-columns: minmax(150px, 190px) minmax(230px, 300px);
  gap: clamp(18px, 2.4vw, 26px); align-items: start;
}
.give-qr-item { text-align: center; }
.give-qr-item.acct { text-align: left; }
.qr-box {
  display: block; background: #fff; border-radius: var(--r-lg);
  padding: 12px; box-shadow: var(--shadow-lg); transition: transform .3s var(--ease);
  max-width: 190px; margin: 0 auto;
}
.give-qr-item.acct .qr-box { margin: 0; }
.qr-box:hover { transform: translateY(-4px); }
.qr-box img { width: 100%; height: auto; display: block; border-radius: 6px; }
.qr-label {
  margin-top: 14px; font-family: Archivo, sans-serif; font-weight: 800;
  font-size: 0.98rem; letter-spacing: 0.02em; color: #fff;
}
.qr-label .ko-sub { display: block; margin-top: 2px; font-family: inherit; font-weight: 500; }
.qr-detail {
  margin-top: 12px; font-size: 1.02rem; line-height: 2.05;
  color: rgba(255,255,255,0.78); font-variant-numeric: tabular-nums;
}
.qr-detail strong {
  display: inline-block; min-width: 76px;
  color: var(--blue-400); font-family: Archivo, sans-serif; font-weight: 800;
  font-size: 0.72rem; letter-spacing: 0.06em; margin-right: 6px;
}
@media (max-width: 900px) {
  .give-body { grid-template-columns: 1fr; }
  .give-qr-panel { justify-self: center; width: 100%; max-width: 460px; }
}
@media (max-width: 560px) {
  .give-qr-grid { grid-template-columns: 1fr; max-width: 280px; margin-inline: auto; justify-items: center; }
  .give-qr-item.acct { text-align: center; }
  .give-qr-item.acct .qr-box { margin: 0 auto; }
  .qr-detail { text-align: left; display: inline-block; }
}

/* ---------- FAQ ---------- */
.faq { max-width: 880px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: clamp(22px, 2.6vw, 30px) 0;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 22px;
  font-family: Archivo, sans-serif; font-weight: 700; font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  letter-spacing: -0.024em; color: var(--navy-800); line-height: 1.35;
  transition: color .25s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--blue-500); }
.faq summary .pm {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center;
  color: var(--blue-500); font-size: 1.15rem; line-height: 1;
  transition: transform .35s var(--ease), background .25s, border-color .25s, color .25s;
}
.faq details[open] summary .pm { transform: rotate(45deg); background: var(--blue-500); border-color: var(--blue-500); color: #fff; }
.faq .ans { padding: 0 62px 30px 0; color: var(--ink-70); font-size: 0.98rem; line-height: 1.78; }
/* Some answers point at the giving page or our live streams. The link has to
   look like one inside a paragraph of running text, so underline it rather
   than rely on colour alone. */
.faq .ans a {
  color: var(--blue-500); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(45,107,255,0.4);
}
.faq .ans a:hover { text-decoration-color: var(--blue-500); }

/* ---------- AI Bible chat ---------- */
.chat {
  max-width: 880px; margin-inline: auto; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow); overflow: hidden;
}
.chat-top {
  background: linear-gradient(120deg, var(--navy-700), var(--navy-900));
  color: #fff; padding: 22px clamp(22px, 3vw, 32px);
  display: flex; align-items: center; gap: 14px;
}
.chat-top .dot { width: 9px; height: 9px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 4px rgba(74,222,128,0.18); }
.chat-top .t { font-family: Archivo, sans-serif; font-weight: 700; font-size: 0.98rem; letter-spacing: -0.02em; }
.chat-top .s { font-size: 0.78rem; color: rgba(255,255,255,0.6); }
.chat-log { padding: clamp(22px, 3vw, 32px); display: grid; gap: 18px; min-height: 460px; max-height: 640px; overflow-y: auto; }
.msg { display: flex; gap: 12px; max-width: 88%; }
.msg .av {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: Archivo, sans-serif; font-weight: 800; font-size: 0.76rem;
}
.msg.bot .av { background: var(--navy-800); color: #fff; }
.msg.me { margin-left: auto; flex-direction: row-reverse; }
.msg.me .av { background: var(--blue-100); color: var(--navy-800); }
.msg .bub { padding: 14px 18px; border-radius: 14px; font-size: 0.95rem; line-height: 1.72; }
.msg.bot .bub { background: var(--paper); border: 1px solid var(--line); border-top-left-radius: 4px; }
.msg.me .bub { background: var(--blue-500); color: #fff; border-top-right-radius: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 9px; padding: 0 clamp(22px, 3vw, 32px) 22px; }
.chip {
  padding: 10px 17px; border-radius: 999px; cursor: pointer;
  background: var(--paper); border: 1px solid var(--line);
  font-size: 0.85rem; font-weight: 600; color: var(--navy-800);
  transition: border-color .25s, background .25s, transform .3s var(--ease);
}
.chip:hover { border-color: var(--blue-500); background: #fff; transform: translateY(-1px); }
.chat-input { display: flex; gap: 12px; padding: 18px clamp(22px, 3vw, 32px); border-top: 1px solid var(--line); background: var(--paper); }
.chat-input input { flex: 1; min-width: 0; padding: 14px 18px; border-radius: 999px; border: 1.5px solid var(--line); font: inherit; font-size: 0.95rem; }
.chat-input input:focus { outline: none; border-color: var(--blue-500); background: #fff; }
.send {
  width: 50px; height: 50px; border-radius: 50%; border: 0; cursor: pointer; flex-shrink: 0;
  background: var(--blue-500); color: #fff; display: flex; align-items: center; justify-content: center;
  transition: background .25s, transform .3s var(--ease);
}
.send:hover { background: #1f5bf0; transform: scale(1.05); }
.send svg { width: 18px; height: 18px; fill: currentColor; }
.note { text-align: center; font-size: 0.85rem; color: var(--ink-50); margin-top: 20px; }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 24ch; margin-inline: auto; }
.cta-band .lede { margin: 24px auto 0; }
.cta-band .row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-900); color: rgba(255,255,255,0.68); padding-block: clamp(56px, 7vw, 88px) 32px; }
.foot-grid {
  display: grid; grid-template-columns: 1.55fr 1fr 1fr 1.25fr;
  gap: clamp(28px, 4vw, 52px); padding-bottom: 44px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.foot-logo img { height: 50px; width: auto; margin-bottom: 20px; }
.foot-about { font-size: 0.9rem; color: rgba(255,255,255,0.5); max-width: 32ch; }
.foot-grid h4 {
  color: #fff; font-family: Archivo, sans-serif; font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 18px;
}
.foot-grid li { margin-bottom: 11px; font-size: 0.91rem; }
.foot-grid a { transition: color .2s; }
.foot-grid a:hover { color: #fff; }
.socials { display: flex; gap: 10px; margin-top: 24px; }
.socials a {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14);
  display: flex; align-items: center; justify-content: center;
  transition: background .25s, transform .35s var(--ease), border-color .25s;
}
.socials a:hover { background: var(--blue-500); border-color: var(--blue-500); transform: translateY(-3px); }
.socials svg { width: 18px; height: 18px; fill: #fff; }
.foot-bottom {
  padding-top: 26px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 0.8rem; color: rgba(255,255,255,0.38);
}
/* Quieter than the lines beside it until you go looking for it — which is
   exactly how a staff door should behave. */
.foot-pt {
  display: inline-flex; align-items: center; gap: 7px;
  color: rgba(255,255,255,0.34); text-decoration: none;
  transition: color .2s ease;
}
.foot-pt::before {
  content: ""; width: 11px; height: 11px; flex: none; opacity: .8;
  background: currentColor;
  -webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a5 5 0 0 0-5 5v3H5v13h14V9h-2V6a5 5 0 0 0-5-5zm0 2a3 3 0 0 1 3 3v3H9V6a3 3 0 0 1 3-3z'/%3E%3C/svg%3E");
  mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a5 5 0 0 0-5 5v3H5v13h14V9h-2V6a5 5 0 0 0-5-5zm0 2a3 3 0 0 1 3 3v3H9V6a3 3 0 0 1 3-3z'/%3E%3C/svg%3E");
}
.foot-pt:hover { color: rgba(255,255,255,0.72); }

/* ---------- Content ---------- */
.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 2em 0 0.6em; color: var(--navy-800); }
.prose h3 { font-size: 1.25rem; margin: 1.6em 0 0.5em; color: var(--navy-800); }
.prose p { margin: 0 0 1.2em; color: var(--ink-70); }
.prose a { color: var(--blue-500); text-decoration: underline; text-underline-offset: 3px; }
.prose img { border-radius: var(--r); margin: 1.6em 0; }
.prose blockquote {
  margin: 1.8em 0; padding: 4px 0 4px 26px; border-left: 3px solid var(--blue-500);
  font-size: 1.1rem; color: var(--ink); font-style: normal;
}
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.3em; color: var(--ink-70); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 0.5em; }

/* Pagination */
.pager { display: flex; gap: 8px; justify-content: center; margin-top: 54px; }
.pager .page-numbers {
  min-width: 44px; height: 44px; padding: 0 14px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); font-family: Archivo, sans-serif; font-weight: 700; font-size: 0.9rem;
  color: var(--navy-800); transition: all .25s;
}
.pager .page-numbers:hover { border-color: var(--navy-800); }
.pager .current { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }

/* ---------- Scroll reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); }
.js .reveal.in {
  opacity: 1; transform: none;
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay: var(--d, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap;
}

/* ---------- Responsive ---------- */
@media (max-width: 1120px) {
  .nav-toggle { display: flex; }
  .main-nav {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    height: 100vh; height: 100dvh; z-index: 400;
    background: var(--navy-900); color: #fff;
    padding: 96px var(--gutter) 40px;
    display: none; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .main-nav.open { display: block; animation: navin .4s var(--ease); }
  @keyframes navin { from { opacity: 0; transform: translateY(-10px); } }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav > ul > li > a,
  body.has-hero .site-header:not(.scrolled) .main-nav > ul > li > a {
    color: #fff; font-family: Archivo, sans-serif; font-weight: 700;
    font-size: 1.5rem; letter-spacing: -0.03em;
    padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,0.12); border-radius: 0;
  }
  .main-nav > ul > li > a:hover,
  body.has-hero .site-header:not(.scrolled) .main-nav > ul > li > a:hover { background: none; color: var(--blue-400); }
  .main-nav li ul { position: static; opacity: 1; visibility: visible; transform: none; background: none; border: 0; box-shadow: none; padding: 0 0 12px 16px; }
  .main-nav li ul a { color: rgba(255,255,255,0.7); }
  .main-nav li ul a:hover { background: none; color: #fff; }
  body.nav-open { overflow: hidden; }
  /* The scrolled header carries backdrop-filter, which makes it the containing
     block for position:fixed descendants — that collapsed the full-screen menu
     down to the header bar, so tapping the toggle looked like nothing happened.
     Drop the filter while the menu is open; the bar is transparent then anyway. */
  body.nav-open .site-header {
    background: transparent !important; border-color: transparent !important; box-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  body.nav-open .nav-toggle { color: #fff; position: relative; z-index: 401; }
  body.nav-open .logo-dark { display: none; }
  body.nav-open .logo-light { display: block; }
  body.nav-open .site-logo { position: relative; z-index: 401; }
  .header-actions .btn-outline,
  .header-actions .hdr-bible { display: none; }
  .nav-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; }
  .nav-actions .btn { width: 100%; }
  .g4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  body { font-size: 16px; }
  .split, .sermon-feature, .contact-grid { grid-template-columns: 1fr; }
  .split.reverse > *:first-child { order: 0; }
  .g3 { grid-template-columns: 1fr; }
  .svc-rows { grid-template-columns: 1fr; }
  .svc-row { border-right: 0; border-bottom: 1px solid var(--line); }
  .svc-row:last-child { border-bottom: 0; }
  .vlist li { grid-template-columns: 44px 1fr; }
  .vlist li p { grid-column: 2; }
  .stats { grid-template-columns: 1fr; gap: 20px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .overlap { margin-top: -56px; }
  .feat { min-height: 340px; }
  .faq .ans { padding-right: 0; }
  .hero { min-height: auto; padding-top: 128px; }
  .hero-scroll { display: none; }
}

@media (max-width: 560px) {
  .g2, .g4, .field-row, .foot-grid { grid-template-columns: 1fr; }
  .info-row { grid-template-columns: 1fr; gap: 6px; }
  .site-logo img { height: 36px; }
}

/* =====================================================
   v2.1 — Background video + motion system
   ===================================================== */

/* ---------- Hero background video ---------- */
.hero-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04);
}
/* slow drift when there is no video playing */
.js .hero-media:not(.playing) .hero-poster {
  animation: kenburns 26s ease-in-out infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.2%, -1.6%, 0); }
}

.hero-video {
  position: absolute; inset: 0; overflow: hidden;
  opacity: 0; transition: opacity 1.4s var(--ease);
  pointer-events: none;
}
.hero-media.playing .hero-video { opacity: 1; }

.hero-video video {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%; object-fit: cover;
}
/* YouTube iframe scaled to cover the viewport (16:9 math) */
.hero-video iframe {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw; height: 56.25vw;
  min-height: 100%; min-width: 177.78vh;
  border: 0; pointer-events: none;
}

/* Video treatment: darken + slight desaturation so type stays legible */
.hero-media.has-video::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(6, 17, 31, 0.42);
}

/* Scrim + fine grain over the hero.
   NOTE: this must re-declare the dark gradients, not just the dot pattern —
   setting background-image alone would wipe the scrim defined earlier and
   leave white type sitting on bright video frames. */
.hero-media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-image:
    radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(6,17,31,0.55) 0%, rgba(6,17,31,0.18) 32%, rgba(6,17,31,0.55) 74%, rgba(6,17,31,0.92) 100%),
    linear-gradient(96deg, rgba(6,17,31,0.94) 4%, rgba(6,17,31,0.55) 48%, rgba(6,17,31,0.12) 100%);
  background-size: 26px 26px, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat;
}

/* the gradient scrim sits above video + grain */
.hero .hero-media + .wrap, .page-hero .hero-media + .wrap { position: relative; z-index: 3; }
.hero-scroll { z-index: 4; }

/* ---------- Hero content entrance ----------
   Pure CSS keyframes, deliberately NOT gated on any JS-added class. The old
   version waited for body.loaded, which meant the headline was invisible for
   as long as the main script took to run — on a slow connection or busy
   renderer that was measured at 4–8 seconds of blank hero. A first-time
   visitor decides in about three. Now the text starts animating the moment
   the HTML paints, whatever the script is doing. */
@keyframes heroEnter {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroKoSub {
  from { opacity: 0; }
  to   { opacity: .78; }
}
.js .hero-anim > * {
  opacity: 0;
  animation: heroEnter .9s var(--ease) forwards;
}
.js .hero-anim > *:nth-child(1) { animation-delay: 50ms; }
.js .hero-anim > *:nth-child(2) { animation-delay: 150ms; }
.js .hero-anim > *:nth-child(3) { animation-delay: 260ms; }
.js .hero-anim > *:nth-child(4) { animation-delay: 380ms; }
.js .hero-anim > *:nth-child(5) { animation-delay: 480ms; }

/* the Korean sub-line fades slightly later than its English heading */
.js .hero-anim h1 .ko-sub {
  opacity: 0;
  animation: heroKoSub .8s var(--ease) .5s forwards;
}

/* ---------- Motion variants for scroll reveal ---------- */
.js .reveal-l { opacity: 0; transform: translateX(-34px); }
.js .reveal-r { opacity: 0; transform: translateX(34px); }
.js .reveal-l.in, .js .reveal-r.in {
  opacity: 1; transform: none;
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--d, 0ms);
}

/* Image curtain reveal */
.js .reveal-clip { clip-path: inset(0 0 100% 0); }
.js .reveal-clip.in {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.15s var(--ease);
  transition-delay: var(--d, 0ms);
}
/* the picture inside eases out of a slight zoom at the same time */
.js .reveal-clip img { transform: scale(1.12); }
.js .reveal-clip.in img { transform: scale(1); transition: transform 1.5s var(--ease); }

/* Stagger children of a grid automatically */
.js .stagger > * { opacity: 0; transform: translateY(26px); }
.js .stagger.in > * {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.js .stagger.in > *:nth-child(1) { transition-delay: 0ms; }
.js .stagger.in > *:nth-child(2) { transition-delay: 110ms; }
.js .stagger.in > *:nth-child(3) { transition-delay: 220ms; }
.js .stagger.in > *:nth-child(4) { transition-delay: 330ms; }
.js .stagger.in > *:nth-child(5) { transition-delay: 440ms; }
.js .stagger.in > *:nth-child(6) { transition-delay: 550ms; }
.js .stagger.in > *:nth-child(7) { transition-delay: 660ms; }
.js .stagger.in > *:nth-child(8) { transition-delay: 770ms; }

/* Kicker rule line draws in */
.js .reveal .kicker::before, .js .sec-head.in .kicker::before { transform-origin: left; }
.js .reveal:not(.in) .kicker::before { transform: scaleX(0); }
.js .reveal.in .kicker::before { transform: scaleX(1); transition: transform .8s var(--ease) .15s; }

/* ---------- Parallax ---------- */
[data-parallax] { will-change: transform; }

/* ---------- Micro-interactions ---------- */
.media-chip { animation: floaty 5.5s ease-in-out infinite; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Service rows: accent bar slides in on hover */
.svc-row { position: relative; }
.svc-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--blue-500); transform: scaleY(0); transform-origin: top;
  transition: transform .45s var(--ease);
}
.svc-row:hover::before { transform: scaleY(1); }

/* Value list rows: number slides + line highlights */
.vlist li { position: relative; }
.vlist li::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--blue-500); transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease);
}
.vlist li:hover::after { transform: scaleX(1); }
.vlist li h3 { transition: transform .45s var(--ease); }
.vlist li:hover h3 { transform: translateX(8px); }

/* Nav underline */
.main-nav > ul > li > a { position: relative; }
.main-nav > ul > li > a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
  background: currentColor; border-radius: 2px;
  transform: scaleX(0); transform-origin: center;
  transition: transform .35s var(--ease);
  opacity: .7;
}
.main-nav > ul > li > a:hover::after { transform: scaleX(1); }

/* Buttons get a soft sheen sweep on hover */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; top: 0; left: -140%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: skewX(-18deg); transition: left .7s var(--ease);
}
.btn:hover::after { left: 160%; }
.btn-light::after, .btn-outline::after {
  background: linear-gradient(100deg, transparent, rgba(45,107,255,0.14), transparent);
}

/* Feature card body lifts a touch on hover */
.feat-body { transition: transform .5s var(--ease); }
.feat:hover .feat-body { transform: translateY(-6px); }

/* Chat chips + social icons already animate; add FAQ row hover */
.faq summary { position: relative; padding-left: 0; transition: padding-left .4s var(--ease), color .25s; }
.faq summary:hover { padding-left: 10px; }

/* ---------- Reduced motion: switch everything off ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .hero-anim > *,
  .js .reveal, .js .reveal-l, .js .reveal-r, .js .stagger > * { opacity: 1 !important; transform: none !important; animation: none !important; }
  .js .reveal-clip { clip-path: none !important; }
  .js .reveal-clip img { transform: none !important; }
  .js .hero-anim h1 .ko-sub { opacity: .78 !important; animation: none !important; }
  .js .hero-media:not(.playing) .hero-poster { animation: none; }
  .media-chip { animation: none; }
  .marquee-track { animation: none; }
  .btn::after { display: none; }
}

/* ---------- Mobile hero video ----------
   This used to be `display: none`, from when phones were excluded outright.
   It stayed behind after the JS was changed to serve phones a lighter cut, so
   the video downloaded, decoded and "played" while being invisible — which is
   exactly how it looked to everyone testing on a phone. The scrim is kept a
   little lighter here because the phone crop is a tighter part of the frame. */
@media (max-width: 820px) {
  .hero-media.has-video::before { background: rgba(6,17,31,0.34); }
}

/* Parallax containers need overscan so the translate never exposes an edge */
.hero .hero-media, .page-hero .hero-media { bottom: auto; height: 142%; }
.band-media[data-parallax] { bottom: auto; height: 138%; top: -18%; }
@media (max-width: 820px) {
  .hero .hero-media, .page-hero .hero-media { height: 100%; bottom: 0; }
  .band-media[data-parallax] { height: 100%; top: 0; }
}

/* =====================================================
   v2.2 — admin bar, video framing, world map
   ===================================================== */

/* ---------- WordPress admin bar ---------- */
/* The offsets below only make sense for the full-screen mobile menu, which is
 * the only state where .main-nav is position:fixed. Above that breakpoint the
 * nav is an ordinary flex item in the header bar, and giving it a viewport
 * height stretches the bar and drags the logo and buttons down with it. */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 1120px) {
  body.admin-bar .main-nav { top: 32px; height: calc(100dvh - 32px); }
}
@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
  body.admin-bar .main-nav { top: 46px; height: calc(100dvh - 46px); }
}
@media screen and (max-width: 600px) {
  /* WP hides the admin bar on scroll below 600px, so it is not fixed there */
  body.admin-bar .site-header { top: 0; }
  body.admin-bar .main-nav { top: 0; height: 100dvh; }
}

/* ---------- Background video framing ----------
   The embed paints its title and channel name across the top-left for the
   first seconds. Scaling the frame up pushes that chrome outside the crop. */
.hero-video iframe {
  width: 150vw; height: 84.375vw;          /* 150vw * 9/16 */
  min-height: 150%; min-width: 266.67vh;
}

/* ---------- World map ---------- */
.mapwrap { position: relative; width: 100%; }
.enk-map { width: 100%; height: auto; display: block; overflow: visible; }

.enk-map .c {
  fill: #ffffff;
  stroke: #d9dde4;
  stroke-width: 1.1;
  stroke-linejoin: round;
  transition: fill .35s var(--ease), stroke .35s var(--ease);
}
.enk-map .c.on {
  fill: var(--blue-500);
  stroke: #ffffff;
  stroke-width: 1.2;
}
.js .enk-map .c.on {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.55);
}
.js [data-map].lit .enk-map .c.on {
  opacity: 1;
  transform: none;
  transition: opacity .55s var(--ease), transform .7s var(--ease), fill .35s var(--ease);
  transition-delay: var(--d, 0ms);
}
.enk-map .c.on:hover { fill: var(--navy-800); cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .js .enk-map .c.on { opacity: 1; transform: none; }
}

/* Tooltip */
.map-tip {
  position: absolute; z-index: 5; pointer-events: none;
  transform: translate(-50%, -140%);
  background: var(--navy-800); color: #fff;
  padding: 8px 14px; border-radius: 999px;
  font-family: Archivo, sans-serif; font-size: 0.82rem; font-weight: 700;
  letter-spacing: -0.01em; white-space: nowrap;
  box-shadow: var(--shadow); opacity: 0;
  transition: opacity .2s var(--ease);
}
.map-tip.show { opacity: 1; }

/* Legend */
.map-legend {
  display: flex; gap: 26px; flex-wrap: wrap; justify-content: center;
  margin-top: 30px;
}
.map-legend span {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.88rem; color: var(--ink-70);
}
.map-legend i {
  width: 13px; height: 13px; border-radius: 3px; display: block;
  border: 1px solid #d9dde4;
}
.map-legend i.on { background: var(--blue-500); border-color: var(--blue-500); }
.map-legend i.off { background: #fff; }

/* Map stats row */
.map-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; margin-top: clamp(36px, 5vw, 58px);
  border-top: 1px solid var(--line); padding-top: clamp(28px, 3.4vw, 42px);
}
.map-stats .s { text-align: center; }
.map-stats .n {
  font-family: Archivo, sans-serif; font-weight: 800; letter-spacing: -0.045em;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem); color: var(--navy-800); line-height: 1;
}
.map-stats .l {
  margin-top: 10px; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-50);
}
.map-stats .l .ko { display: block; letter-spacing: 0; text-transform: none; font-size: 0.92rem; font-weight: 600; color: var(--ink-70); margin-top: 5px; }

@media (max-width: 700px) {
  .map-stats { grid-template-columns: 1fr; gap: 22px; }
  .map-legend { gap: 16px; }
}

/* ---------- Mission 2029 ----------
 * Sits straight under the world map and inherits its argument, so it is dark
 * where the map is pale: the eye reads the two as question and answer rather
 * than as two more sections. The progress bar is the only element allowed to
 * use the movement's blue at full strength — it is the one number on the page
 * that is still moving. */
.m29-sec {
  /* Warm paper rather than the near-black this band used to be. The flags are
     the design here, and colour printed on ink-dark loses most of its life —
     the same reason Every Nation's own year-in-review page sets its flag rows
     on cream. The section still reads as its own room because the two ribbons
     fence it top and bottom. */
  background: #fbf3ea;
  color: var(--ink);
  position: relative;
  overflow: hidden;
  /* the ribbons run flush to the top and bottom edges, so the section's own
     rhythm padding moves onto .wrap below */
  padding-block: 0;
}
.m29-sec > .wrap { position: relative; z-index: 1; padding-top: clamp(58px, 7vw, 92px); padding-bottom: clamp(58px, 7vw, 92px); }
.m29-sec .h-lg { color: var(--navy-800); }
.m29-sec .kicker { color: var(--blue-500); }
.m29-sec .lede { color: var(--ink-70); }
.m29-sec .lede .ko-line { color: var(--ink-50); }

/* ---- Flag ribbons ---------------------------------------------------- */
.m29-ribbon {
  display: flex; width: 100%; overflow: hidden;
  padding: clamp(14px, 1.6vw, 20px) 0;
  background: #f6ebdf;
  /* fade both ends so the strip reads as continuous rather than as a slab
     that stops at the viewport edge */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.m29-ribbon-top { border-bottom: 1px solid rgba(10,28,51,0.07); }
.m29-ribbon-bot { border-top: 1px solid rgba(10,28,51,0.07); }
.m29-run {
  display: flex; flex: 0 0 auto; align-items: center;
  gap: clamp(10px, 1.2vw, 16px);
  padding-right: clamp(10px, 1.2vw, 16px);
  animation: m29slide 64s linear infinite;
  will-change: transform;
}
.m29-ribbon-bot .m29-run { animation-duration: 78s; animation-direction: reverse; }
/* Pause only the strip actually under the cursor. Hanging this off .m29-sec
   instead meant that simply moving the mouse down the page — anywhere over the
   heading or the cards — froze both ribbons, which reads as the animation
   breaking rather than as a hover. */
.m29-ribbon:hover .m29-run { animation-play-state: paused; }
@keyframes m29slide { to { transform: translateX(-100%); } }
.m29-flag {
  width: clamp(34px, 3.6vw, 46px); height: auto; border-radius: 50%;
  flex: 0 0 auto; display: block;
  box-shadow: 0 1px 3px rgba(10,28,51,0.14);
}

/* ---- Progress -------------------------------------------------------- */
.m29-track { max-width: 660px; margin: clamp(38px, 5vw, 56px) auto 0; }
.m29-bar {
  height: 12px; border-radius: 999px;
  background: rgba(10,28,51,0.09);
  overflow: hidden;
}
.m29-bar span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--blue-500), var(--blue-400));
  /* grows from nothing when the band scrolls in — see .reveal */
  transform-origin: left center;
  animation: m29fill 1.15s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes m29fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.m29-scale {
  display: flex; justify-content: space-between; gap: 16px;
  margin-top: 14px;
}
.m29-scale span {
  font-family: Archivo, sans-serif; font-size: 0.72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-50);
}
.m29-scale b {
  font-size: 2.1rem; font-weight: 800; letter-spacing: -0.02em;
  display: inline-block; margin-right: 7px; vertical-align: -3px;
  color: var(--navy-800);
}
.m29-scale .m29-done b { color: var(--blue-500); }
.m29-scale .m29-goal { text-align: right; }
.m29-scale i {
  display: block; margin-top: 4px; font-style: normal;
  font-family: inherit; font-size: 0.76rem; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--ink-50);
}
.m29-reached {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 10px; margin-top: 26px;
}
.m29-reached img {
  width: 40px; height: 40px; border-radius: 50%; display: block;
  box-shadow: 0 2px 8px rgba(10,28,51,0.16);
  outline: 2px solid #fff; outline-offset: -1px;
}
.m29-list {
  margin: 12px 0 0; text-align: center;
  font-size: 0.86rem; color: var(--ink-50);
}

/* ---- Ask / Go / Give ------------------------------------------------- */
.m29-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(44px, 6vw, 72px);
}
.m29-card {
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.6vw, 32px);
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid rgba(10,28,51,0.07);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.m29-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.m29-word {
  font-family: Archivo, sans-serif; font-weight: 800;
  font-size: clamp(1.7rem, 2.8vw, 2.1rem); line-height: 1.1;
  letter-spacing: -0.02em; color: var(--blue-500);
}
.m29-word i {
  display: block; margin-top: 6px; font-style: normal;
  font-size: 0.42em; font-weight: 700; letter-spacing: .04em;
  color: var(--ink-50);
}
.m29-lead {
  margin: 18px 0 0; font-size: 0.95rem; line-height: 1.72;
  color: var(--ink);
}
.m29-lead .ko, .m29-verse .ko {
  display: block; margin-top: 6px;
  font-size: 0.88em; color: var(--ink-50);
}
.m29-verse {
  margin: 16px 0 0; padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 0.86rem; line-height: 1.7; font-style: italic;
  color: var(--ink-70);
}
.m29-verse .ko { font-style: normal; }
.m29-go {
  margin-top: auto; padding-top: 20px;
  font-family: Archivo, sans-serif; font-size: 0.8rem; font-weight: 700;
  letter-spacing: .04em; color: var(--navy-800); text-decoration: none;
  display: inline-flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
}
.m29-go .ko { font-weight: 500; color: var(--ink-50); }
.m29-go .arw { color: var(--blue-500); transition: transform .25s var(--ease); }
.m29-card:hover .m29-go .arw { transform: translateX(4px); }

.m29-more { margin: clamp(34px, 4vw, 48px) 0 0; text-align: center; }
/* the label carries English + Korean + an arrow, which is wider than a phone —
   .btn's own white-space:nowrap would push it off the right edge */
.m29-btn { max-width: 100%; white-space: normal; }
.m29-btn > * { min-width: 0; }
.m29-more .ko { font-weight: 500; opacity: .72; }
.m29-more .ext { opacity: .8; }
@media (max-width: 620px) {
  .m29-btn { flex-direction: column; gap: 5px; padding: 14px 24px; text-align: center; }
}

@media (max-width: 860px) {
  .m29-grid { grid-template-columns: 1fr; }
  .m29-scale b { font-size: 1.7rem; }
  .m29-reached img { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .m29-bar span { animation: none; }
  .m29-run { animation: none; }
  /* without the slide the strip would sit frozen mid-loop; anchor it left */
  .m29-ribbon { justify-content: flex-start; }
}

/* AI Bible typing indicator */
.msg.thinking .bub { padding: 16px 20px; }
.dots { display: inline-flex; gap: 5px; align-items: center; }
.dots i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink-50);
  display: block; animation: blink 1.3s var(--ease) infinite;
}
.dots i:nth-child(2) { animation-delay: .18s; }
.dots i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%,60%,100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.send:disabled { opacity: .5; cursor: default; }
@media (prefers-reduced-motion: reduce) { .dots i { animation: none; opacity: .55; } }

/* ---------- Progressive-enhancement guard for scroll reveal ----------
 * The .reveal / .reveal-l / .reveal-r / .reveal-clip / .stagger rules above
 * hide their content the moment the inline <head> script sets .js — but only
 * main.js can ever un-hide it by adding .in. If main.js is slow, blocked, or
 * its DOMContentLoaded handler never fires (background tab, bfcache), that
 * content stays invisible for good. This is what left the Welcome and Campus
 * photos blank.
 *
 * So the hidden states only count once main.js has actually armed the
 * observer and added .reveal-on. No JS, no hiding — the page just renders. */
html.js:not(.reveal-on) .reveal,
html.js:not(.reveal-on) .reveal-l,
html.js:not(.reveal-on) .reveal-r,
html.js:not(.reveal-on) .stagger > * { opacity: 1; transform: none; }
html.js:not(.reveal-on) .reveal-clip { clip-path: none; }
html.js:not(.reveal-on) .reveal-clip img { transform: none; }
html.js:not(.reveal-on) .reveal .kicker::before { transform: scaleX(1); }

/* ---------- Multilingual welcome band ----------
 * The greeting cycles through languages. All the words are stacked in a single
 * grid cell so the band's height is set by the tallest one and never jumps as
 * they swap — scripts like Devanagari and Burmese are noticeably taller than
 * Latin. Only .is-on is visible, and the first word carries it in the markup so
 * the band reads correctly before (or without) JS.
 *
 * The motion lives on the individual letters (.wc), not the word. Each letter's
 * resting state IS its exit state, so one class toggle animates both directions
 * and no keyframes have to be scheduled. Entering staggers on --i (left to
 * right), leaving on --j (right to left) — the transition-delay simply differs
 * between the two states.
 *
 * Three treatments take turns, assigned per word in the template: fx-rise
 * (letters lift into place), fx-scatter (letters drift in from seeded offsets),
 * fx-blur (letters resolve out of focus). Enough variety that the band stays
 * interesting on a long visit, not so much that it becomes a fireworks show. */
.welcome-band {
  background: var(--navy-800);
  color: #fff;
  padding-block: clamp(26px, 3.4vw, 48px);
  text-align: center;
  overflow: hidden;
}
.welcome-band-kicker {
  margin: 0 0 clamp(10px, 1.2vw, 15px);
  font-family: Archivo, sans-serif;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--blue-400);
}
.wrotate { display: grid; place-items: center; }
.wrotate-word {
  grid-area: 1 / 1;
  font-family: Archivo, 'Pretendard Variable', Pretendard, sans-serif;
  font-weight: 800;
  font-size: clamp(1.9rem, 5.8vw, 3.8rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  /* long greetings must wrap rather than push the band sideways */
  max-width: 100%;
  word-break: keep-all;
}
.wc {
  display: inline-block;
  font-style: normal;
  will-change: opacity, transform, filter;
  opacity: 0;
  transition:
    opacity .42s var(--ease),
    transform .52s cubic-bezier(.2, .8, .3, 1),
    filter .42s var(--ease);
  transition-delay: calc(var(--j, 0) * 26ms); /* leaving: right to left */
}
.wrotate-word.is-on .wc {
  opacity: 1;
  transform: none;
  filter: none;
  transition-delay: calc(var(--i, 0) * 34ms); /* arriving: left to right */
}

/* Letters lift up into place, one after the next. */
.fx-rise .wc { transform: translateY(0.42em); }

/* Letters drift in from seeded positions — see the template for --dx/--dy/--r. */
.fx-scatter .wc { transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--r, 0)) scale(.82); }

/* Letters resolve out of focus, slightly oversized as they sharpen. */
.fx-blur .wc { transform: scale(1.18); filter: blur(9px); }

@media (prefers-reduced-motion: reduce) {
  /* The swap itself is the part that bothers people; with reduced motion the
     first greeting simply stays put, so the letters need no motion at all. */
  .wc { opacity: 1; transform: none; filter: none; transition: none; }
  .wrotate-word:not(.is-on) .wc { opacity: 0; } /* stacked words must still stay hidden */
}

/* ---------- Sermon filter tabs + Shorts cards ---------- */
.sermon-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.sermon-tab {
  display: inline-flex; align-items: center;
  padding: 10px 20px; border-radius: 999px;
  border: 1px solid var(--line);
  font-family: Archivo, sans-serif; font-weight: 700; font-size: 0.86rem;
  color: var(--ink-70); background: #fff;
  transition: background .3s var(--ease), color .3s, border-color .3s;
}
.sermon-tab:hover { border-color: var(--navy-800); color: var(--navy-800); }
.sermon-tab.is-on { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }

/* A Short's thumbnail is a 9:16 frame; hqdefault still comes back 16:9 with
   bars, so crop to portrait and let object-fit take the middle. */
.sermon.is-short .sermon-thumb { aspect-ratio: 3/4; }

/* =====================================================
   v2.9.3 — About pages (English / Korean) + AI Bible
   ===================================================== */

/* Language switch sitting just under the page hero */
.lang-switch-wrap { padding-top: clamp(28px, 4vw, 44px); }
.lang-switch {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px;
}
.lang-opt {
  display: block; padding: 8px 20px; border-radius: 999px;
  font-size: 0.88rem; font-weight: 700; letter-spacing: -0.01em;
  color: var(--ink-70); transition: background .25s var(--ease), color .25s;
}
.lang-opt:hover { color: var(--navy-800); }
.lang-opt.is-on { background: var(--navy-800); color: #fff; }

/* Checklist used on the About pages */
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li {
  position: relative; padding-left: 30px; margin-top: 14px;
  color: var(--ink-70); font-size: 0.98rem; line-height: 1.65;
}
.ticks li:first-child { margin-top: 0; }
.ticks li::before {
  content: ""; position: absolute; left: 2px; top: 0.55em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--blue-500); box-shadow: 0 0 0 4px rgba(45,107,255,0.14);
}
.ticks strong { color: var(--navy-800); font-weight: 700; }
.dark .ticks li { color: rgba(255,255,255,0.72); }
.dark .ticks strong { color: #fff; }

/* Press coverage links */
.press-links { display: flex; flex-direction: column; gap: 10px; }
.press-link {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--r);
  background: #fff; transition: border-color .25s, transform .25s var(--ease), box-shadow .25s;
}
.press-link:hover { border-color: transparent; box-shadow: var(--shadow); transform: translateY(-2px); }
.press-link .src {
  flex-shrink: 0; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--blue-500);
}
.press-link .ttl { font-size: 0.93rem; font-weight: 600; color: var(--navy-800); }

/* ---------- AI Bible: standard bar, rich answers, sources dialog ---------- */
.std-bar {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 22px; padding: 18px 22px;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r);
}
.std-text { flex: 1 1 420px; font-size: 0.92rem; line-height: 1.6; color: var(--ink-70); }
.std-text strong { color: var(--navy-800); }
.std-en { display: block; margin-top: 6px; font-size: 0.85rem; opacity: .72; }

/* Structured answer body */
.bub.rich { line-height: 1.68; }
.bub.rich > *:first-child { margin-top: 0; }
.bub.rich p { margin: 0 0 12px; }
.ans-h {
  margin: 20px 0 8px; font-family: Archivo, sans-serif;
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--blue-500);
}
.ans-q {
  margin: 12px 0; padding: 10px 0 10px 16px;
  border-left: 3px solid var(--blue-500);
  font-style: normal; color: var(--navy-800);
}
.ans-ul { margin: 0 0 14px; padding-left: 20px; }
.ans-ul li { margin-bottom: 7px; }
.ans-foot { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.ans-note { margin: 0 !important; font-size: 0.78rem; line-height: 1.55; color: var(--ink-50); }
.ans-src {
  display: inline-block; margin-top: 9px;
  font-size: 0.82rem; font-weight: 700; color: var(--blue-500);
}
.ans-src:hover { text-decoration: underline; }

/* Modal */
body.modal-open { overflow: hidden; }
.modal {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(6,17,31,0.62);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: modalin .28s var(--ease);
}
.modal[hidden] { display: none; }
@keyframes modalin { from { opacity: 0; } }
.modal-card {
  position: relative; width: min(620px, 100%); max-height: 86vh; overflow-y: auto;
  background: #fff; border-radius: var(--r-lg); padding: clamp(26px, 4vw, 40px);
  box-shadow: var(--shadow-lg);
}
.modal-close {
  position: absolute; top: 14px; right: 16px;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: var(--paper-2); color: var(--ink-70);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.modal-close:hover { background: var(--navy-800); color: #fff; }
.modal-lead { margin: 16px 0 0; font-size: 0.92rem; line-height: 1.6; color: var(--ink-70); }
.src-list { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.src-item {
  display: block; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .25s, background .25s, transform .25s var(--ease);
}
.src-item:hover { background: var(--paper-2); border-color: transparent; transform: translateX(3px); }
.src-item .n { display: block; font-weight: 700; color: var(--navy-800); font-size: 0.98rem; }
.src-item .ext { color: var(--blue-500); font-size: 0.85em; }
.src-item .d { display: block; margin-top: 5px; font-size: 0.86rem; line-height: 1.55; color: var(--ink-70); }
.modal-foot { margin: 24px 0 0; font-size: 0.84rem; line-height: 1.6; color: var(--ink-50); }
.modal-foot strong { color: var(--navy-800); }
@media (max-width: 620px) {
  .std-bar { flex-direction: column; align-items: stretch; }
  /* flex-basis follows the main axis. Stacked, `flex: 1 1 420px` stopped
     meaning "at least 420px wide" and started meaning "at least 420px tall",
     which opened a screen-high hole between the text and the button on
     phones. Width is no longer in question once we are stacked, so the
     basis goes back to the content. */
  .std-text { flex: 0 1 auto; }
}

/* Korean sub-line under an English lead, matching the site's en-first convention */
.std-ko { display: block; margin-top: 6px; font-size: 0.85rem; opacity: .72; }
.src-item .d.ko { opacity: .7; font-size: 0.82rem; }

/* ---------- About: archive gallery ---------- */
.gallery { position: relative; }
.gallery-stage {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: var(--navy-800); box-shadow: var(--shadow);
  aspect-ratio: 4 / 3;
}
.gslide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transition: opacity .9s var(--ease);
  pointer-events: none;
}
.gslide.is-on { opacity: 1; pointer-events: auto; }
.gslide img { width: 100%; height: 100%; object-fit: cover; }
.gslide figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 42px 22px 18px;
  background: linear-gradient(180deg, rgba(6,17,31,0) 0%, rgba(6,17,31,0.82) 62%);
  color: #fff;
}
.gslide .c-main { display: block; font-size: 0.95rem; font-weight: 700; line-height: 1.4; }
.gslide .c-sub { display: block; margin-top: 3px; font-size: 0.82rem; opacity: .72; line-height: 1.45; }

.gallery-dots { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.gdot {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--line); transition: background .3s, transform .3s var(--ease);
}
.gdot:hover { background: var(--ink-50); }
.gdot.is-on { background: var(--blue-500); transform: scale(1.35); }
@media (prefers-reduced-motion: reduce) {
  .gslide { transition: none; }
}

/* ---------- Visit: parking notice ---------- */
.parking-alert {
  display: flex; gap: 12px; margin-top: 16px; padding: 14px 16px;
  background: rgba(45,107,255,0.07); border: 1px solid rgba(45,107,255,0.22);
  border-radius: var(--r);
}
.parking-alert .pa-ic {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--blue-500); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 800; line-height: 1;
}
.parking-alert p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--navy-800); font-weight: 600; }
.parking-alert p.sm { margin-top: 5px; font-weight: 500; font-size: 0.86rem; color: var(--ink-70); }

/* ---------- Visit: Kakao walking map ---------- */
.kmap {
  width: 100%; aspect-ratio: 4 / 3; min-height: 320px;
  background: var(--paper-2);
  background-image: repeating-linear-gradient(45deg, rgba(10,28,51,0.03) 0 12px, transparent 12px 24px);
}
.kmap.is-failed::after {
  content: "지도를 불러오지 못했습니다 · Map could not load";
  display: flex; align-items: center; justify-content: center; height: 100%;
  font-size: 0.9rem; color: var(--ink-50); text-align: center; padding: 20px;
}
.kmap-label {
  position: relative; white-space: nowrap;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,0.96); border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(10,28,51,0.16);
  font-size: 0.78rem; font-weight: 700; color: var(--navy-800);
}
.kmap-label.is-church { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.walk-map-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

/* ---------- Contact form ---------- */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field .req { color: var(--blue-500); }
.field-note { margin: 14px 0 0; font-size: 0.84rem; line-height: 1.6; color: var(--ink-50); }
.form-msg { margin: 16px 0 0; font-size: 0.9rem; line-height: 1.6; min-height: 1.2em; }
.form-msg.is-ok { color: #1a7f37; font-weight: 600; }
.form-msg.is-error { color: #b32d2e; font-weight: 600; }
.form-msg.is-info { color: var(--ink-50); }
.linkish {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--blue-500); font-weight: 700; text-decoration: underline;
}
.linkish:hover { color: var(--navy-800); }

/* ---------- Email dialog ---------- */
.modal-card.is-narrow { width: min(460px, 100%); }
.copy-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 16px; padding: 14px 16px;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r);
}
.copy-val {
  font-family: Archivo, sans-serif; font-weight: 700; font-size: 0.98rem;
  color: var(--navy-800); word-break: break-all;
}
.btn.is-copied { background: #1a7f37 !important; border-color: #1a7f37 !important; color: #fff !important; }

/* ---------- Footer: Every Nation family column ---------- */
.foot-grid h4 .foot-h-ko {
  display: block; margin-top: 4px;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0; text-transform: none;
  opacity: .6;
}
.foot-grid .ext { opacity: .5; font-size: 0.82em; }
.foot-more { margin-top: 16px !important; padding-top: 14px; border-top: 1px solid var(--line-dark); }
.foot-more a { display: block; line-height: 1.5; }
.foot-more-ko { display: block; margin-top: 4px; font-size: 0.8rem; opacity: .55; line-height: 1.5; }
@media (min-width: 1121px) {
  .foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1.15fr 1.15fr; }
}

/* =====================================================
   Resources page
   ===================================================== */
.res-nav {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px;
  padding: 8px; background: var(--paper-2);
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
.res-nav-item {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px; border-radius: var(--r);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.res-nav-item:hover { background: #fff; transform: translateY(-2px); box-shadow: var(--shadow); }
.res-nav-item .n {
  font-family: Archivo, sans-serif; font-weight: 800; font-size: 0.8rem;
  color: var(--blue-500); letter-spacing: 0.06em;
}
.res-nav-item .t { font-weight: 700; color: var(--navy-800); font-size: 0.95rem; line-height: 1.35; }
.res-nav-item .ko-sub { display: block; font-size: 0.82rem; font-weight: 500; opacity: .7; margin-top: 2px; }

.card-go { margin-top: 14px !important; font-size: 0.85rem; font-weight: 700; color: var(--blue-500); }
.card .ext { opacity: .6; }

/* Notion embed */
.notion-wrap {
  margin-top: 40px; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; background: #fff;
}
.notion-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; background: var(--paper-2); border-bottom: 1px solid var(--line);
}
.notion-bar .nb-t { font-weight: 700; font-size: 0.9rem; color: var(--navy-800); }
.notion-frame { display: block; width: 100%; height: 720px; border: 0; }
.notion-note { margin: 0; padding: 12px 18px; font-size: 0.82rem; color: var(--ink-50); border-top: 1px solid var(--line); }
@media (max-width: 900px) { .notion-frame { height: 560px; } }

/* Discipleship journey */
.dj-figure {
  margin-bottom: clamp(34px, 5vw, 56px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(18px, 3vw, 36px);
}
.dj-figure img { width: 100%; height: auto; }
.dj-stages { display: flex; flex-direction: column; gap: 14px; }
.dj-row {
  display: grid; grid-template-columns: 1.1fr 1fr 1.3fr; gap: clamp(18px, 3vw, 38px);
  padding: clamp(22px, 3vw, 32px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  border-left: 5px solid var(--blue-500);
}
.dj-engage    { border-left-color: #1b4fd8; }
.dj-establish { border-left-color: #7b2fa8; }
.dj-equip     { border-left-color: #1a8f5a; }
.dj-empower   { border-left-color: #cf2027; }
.dj-num {
  display: block; font-family: Archivo, sans-serif; font-weight: 800;
  font-size: 0.78rem; letter-spacing: 0.1em; color: var(--ink-50); margin-bottom: 8px;
}
.dj-head h3 {
  margin: 0; font-family: Archivo, sans-serif; font-weight: 800;
  font-size: 1.3rem; letter-spacing: -0.02em; color: var(--navy-800);
}
.dj-head .dj-ko { font-size: 0.95rem; font-weight: 700; opacity: .65; margin-left: 4px; }
.dj-sub { margin: 8px 0 0; font-size: 0.92rem; color: var(--ink-70); font-weight: 600; }
.dj-sub .ko-sub { display: block; font-weight: 500; opacity: .7; font-size: 0.86rem; margin-top: 2px; }
.dj-label {
  display: block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--blue-500); margin-bottom: 8px;
}
.dj-goal p, .dj-tools p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--ink-70); }
.dj-goal p.sm { margin-top: 5px; font-size: 0.85rem; opacity: .78; }
.dj-cta { margin: 34px 0 0; font-size: 0.95rem; color: var(--ink-70); }
@media (max-width: 900px) {
  .res-nav { grid-template-columns: 1fr; }
  .dj-row { grid-template-columns: 1fr; gap: 18px; }
}

/* =====================================================
   Notion panel + Verse of the day
   ===================================================== */
.notion-panel {
  display: flex; align-items: center; gap: clamp(18px, 3vw, 28px);
  margin-top: 40px; padding: clamp(22px, 3vw, 30px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.notion-panel:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: transparent; }
.np-mark {
  flex-shrink: 0; width: 56px; height: 56px; border-radius: 14px;
  background: var(--navy-800); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: Archivo, sans-serif; font-weight: 800; font-size: 1.5rem;
}
.np-body { flex: 1 1 auto; }
.np-kicker {
  display: block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--blue-500); margin-bottom: 7px;
}
.np-body h3 { margin: 0; font-size: 1.1rem; color: var(--navy-800); }
.np-body h3 .ko-sub { display: block; font-size: 0.88rem; font-weight: 600; opacity: .7; margin-top: 2px; }
.np-body p { margin: 10px 0 0; font-size: 0.9rem; line-height: 1.6; color: var(--ink-70); }
.np-go { flex-shrink: 0; font-weight: 700; font-size: 0.9rem; color: var(--blue-500); white-space: nowrap; }
@media (max-width: 700px) {
  .notion-panel { flex-direction: column; align-items: flex-start; }
}

.cover-panel { margin-top: 20px; align-items: center; }
.cvr-cover {
  flex-shrink: 0; width: 64px; height: auto; border-radius: 6px;
  box-shadow: 0 4px 14px rgba(20, 30, 60, .18);
}
.cvr-go {
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
  text-align: right;
}
.cvr-go-line { display: flex; align-items: center; gap: 4px; }
.cvr-go .ko-sub { font-weight: 600; font-size: 0.76rem; opacity: .65; margin: 0; }
@media (max-width: 700px) {
  .cvr-go { flex-direction: row; align-items: center; }
  .cvr-go .ko-sub { display: none; }
}

/* ---------- Verse of the day ---------- */
.va-grid { display: grid; gap: clamp(28px, 3.4vw, 46px); align-items: start; }
/*
 * Grid items default to min-width:auto, so the widest item's min-content sets
 * the column — and on a phone the chat box's text input was forcing the column
 * ~16px past the viewport, dragging the verse card off the right edge with it.
 * Letting both columns shrink is the fix; the input carries min-width:0 too.
 */
.va-grid > * { min-width: 0; max-width: 100%; }
@media (min-width: 1020px) {
  .va-grid { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); }
}

/*
 * The colour is set per-day from PHP as --vh / --vh2 (two hues), so the card
 * looks different every morning without anyone changing a setting.
 *
 * The whole card is deliberately quiet. An earlier version had two saturated
 * radial glows and a 4px dot grid over the top, which together produced the
 * look everyone now recognises from generated imagery — a violet mesh gradient
 * on a pixel screen. Both are gone. What is left reads as light falling
 * through a window at dusk: one soft source high in the card, a deep ink
 * settling toward the bottom, and film grain instead of a grid. Colour is
 * still there and still changes daily, but at roughly a third of the
 * saturation, so it is felt rather than looked at.
 */
.votd {
  --vh: 210; --vh2: 222;
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 22px; color: #fff;
  background: #0d141d;
  box-shadow: 0 20px 50px rgba(6,17,31,0.18);
}
/* The photograph chosen for today's theme. Sits under the wash, and drifts
   slowly enough that you notice it only if you sit with the card a while —
   which is the point of the card. */
.votd-photo { position: absolute; inset: 0; z-index: 0; }
.votd-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.05);
  animation: votdDrift 68s ease-in-out infinite alternate;
}
@keyframes votdDrift {
  from { transform: scale(1.05) translate3d(0, 0, 0); }
  to   { transform: scale(1.09) translate3d(-1%, -0.8%, 0); }
}

/* No photograph today: one low light source near the top, then ink. The
   saturation here (28%) is the single most important number on this card —
   at 70% the same gradient is a neon smear. */
.votd-wash {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(130% 78% at 28% -12%, hsl(var(--vh2) 28% 42% / 0.55) 0%, transparent 66%),
    radial-gradient(100% 60% at 92% 6%,   hsl(var(--vh)  22% 46% / 0.24) 0%, transparent 62%),
    linear-gradient(177deg, #18222e 0%, #111a25 44%, #0b121a 78%, #090f16 100%);
}
/* Two jobs at once: let the photograph be seen, and keep several paragraphs of
   two-language Scripture readable on top of it.

   A single flat tint cannot do both — turn it down and the text fails, turn it
   up and the photo may as well not be there. So the scrim is graded down the
   card instead: light across the top, where only the short bold kicker sits and
   the picture can actually be looked at, then deepening fast to near-solid by
   the time the quote begins. The tint over the photo is now almost colourless;
   saturated colour over a photograph is what made the first attempt a purple
   rectangle, and even the toned-down version still announced itself. */
/* Softly out of focus. This is the change that does the most work: a sharp
   photograph behind a paragraph makes the eye keep trying to resolve it, and
   faces in particular pull attention straight off the words. Blurred, the
   photograph gives what it was there for — colour, light, a sense of place —
   and asks for nothing. The extra scale hides the transparent edge blur
   leaves at the rim. */
.votd.has-photo .votd-photo img {
  filter: saturate(0.72) brightness(0.96) blur(7px);
  transform: scale(1.12);
}
@keyframes votdDriftPhoto {
  from { transform: scale(1.12) translate3d(0, 0, 0); }
  to   { transform: scale(1.17) translate3d(-1%, -0.8%, 0); }
}
.votd.has-photo .votd-photo img { animation-name: votdDriftPhoto; }
.votd.has-photo .votd-wash {
  background:
    radial-gradient(120% 60% at 26% -8%, hsl(var(--vh2) 26% 46% / 0.24) 0%, transparent 64%),
    linear-gradient(180deg,
      rgba(9,15,22,0.34) 0%,
      rgba(9,15,22,0.50) 14%,
      rgba(9,14,21,0.76) 32%,
      rgba(8,13,19,0.86) 54%,
      rgba(7,12,18,0.92) 100%);
}
/* Film grain, not a dot screen. The old texture was a 4px lattice of dots —
   perfectly regular, and at any size the eye reads regularity as machinery.
   Fractal noise is irregular, so it disappears into the gradient the way grain
   does in a photograph, while still doing the job of stopping the gradient
   from banding on a wide monitor. */
.votd-wash::after {
  content: ""; position: absolute; inset: 0;
  opacity: .07; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
.votd.has-photo .votd-wash::after { opacity: .05; }

/* Photographer and licence. Required by Unsplash's terms and by the Creative
   Commons licences behind Openverse, so it is never conditional — only quiet. */
.votd-credit {
  margin: 18px 0 0; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.68rem; line-height: 1.5; color: rgba(255,255,255,0.4);
}
.votd-credit a { color: rgba(255,255,255,0.58); text-decoration: underline; text-underline-offset: 2px; }
.votd-credit a:hover { color: rgba(255,255,255,0.85); }
.votd-body { position: relative; z-index: 2; padding: clamp(26px, 2.8vw, 38px); }
@media (prefers-reduced-motion: reduce) { .votd-photo img { animation: none; } }

.votd-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 22px;
}
.votd-kicker {
  font-family: Archivo, sans-serif; font-size: 0.66rem; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase; color: hsl(var(--vh2) 30% 78%);
}
.votd-kicker .ko {
  display: inline-block; margin-left: 8px; letter-spacing: 0.04em;
  opacity: .72; text-transform: none; font-size: 0.7rem; color: rgba(255,255,255,0.8);
}
.votd-date { font-size: 0.76rem; color: rgba(255,255,255,0.55); }

.votd-quote { margin: 0; }
.vq-en {
  margin: 0; font-family: Archivo, sans-serif; font-weight: 700;
  font-size: clamp(1.06rem, 1.4vw, 1.2rem); line-height: 1.5; letter-spacing: -0.01em;
}
.vq-ko { margin: 0; font-size: 0.95rem; line-height: 1.78; color: rgba(255,255,255,0.86); }
.votd-quote.is-ko { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.16); }
.vq-ref {
  display: block; margin-top: 10px; font-style: normal;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.05em;
  color: hsl(var(--vh2) 30% 76%);
}
.vq-ver { display: inline-block; margin-left: 6px; opacity: .6; font-weight: 600; color: rgba(255,255,255,0.7); }

.votd-note { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.16); }
.votd-note p { margin: 0; font-size: 0.93rem; line-height: 1.7; color: rgba(255,255,255,0.9); }
.votd-note p.ko { margin-top: 8px; font-size: 0.86rem; line-height: 1.75; color: rgba(255,255,255,0.6); }

.votd-ask {
  margin-top: 20px; padding: 16px 18px;
  background: rgba(255,255,255,0.055);
  border-left: 2px solid hsl(var(--vh2) 26% 62% / 0.7);
  border-radius: 0 12px 12px 0;
}
.votd-ask-k {
  display: block; margin-bottom: 9px;
  font-family: Archivo, sans-serif; font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--vh2) 28% 76%);
}
.votd-ask-k .ko {
  display: inline-block; margin-left: 7px; letter-spacing: 0.03em;
  text-transform: none; font-size: 0.68rem; color: rgba(255,255,255,0.55);
}
.votd-ask p { margin: 0; font-size: 0.93rem; line-height: 1.68; color: rgba(255,255,255,0.95); }
.votd-ask p.ko { margin-top: 7px; font-size: 0.86rem; color: rgba(255,255,255,0.62); }

.votd-links { margin-top: 22px; }
.votd-links-k {
  display: block; margin-bottom: 11px;
  font-family: Archivo, sans-serif; font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.45);
}
.votd-links-k .ko {
  display: inline-block; margin-left: 7px; letter-spacing: 0.03em;
  text-transform: none; font-size: 0.68rem; color: rgba(255,255,255,0.38);
}
.votd-links-row { display: flex; flex-wrap: wrap; gap: 8px; }
.votd-link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 13px; border-radius: 999px;
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.18);
  font-size: 0.8rem; font-weight: 700; color: #fff;
  transition: background .2s ease, border-color .2s ease;
}
.votd-link:hover { background: rgba(255,255,255,0.17); border-color: rgba(255,255,255,0.34); color: #fff; }
.votd-link .m { font-weight: 600; font-size: 0.72rem; color: rgba(255,255,255,0.6); }
.votd-link .ext { font-size: 0.72rem; color: rgba(255,255,255,0.5); }

.votd-tie {
  margin: 22px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.14);
  font-size: 0.8rem; line-height: 1.65; color: rgba(255,255,255,0.55);
}
.votd-tie strong { color: rgba(255,255,255,0.82); font-weight: 700; }
.votd-tie a { color: hsl(var(--vh2) 32% 78%); font-weight: 700; }
.votd-tie .ko { display: block; margin-top: 5px; font-size: 0.76rem; color: rgba(255,255,255,0.4); }

/* ---------- Floating verse card ---------- */
.vfab {
  position: fixed; right: 20px; bottom: 20px; z-index: 350;
  width: min(300px, calc(100vw - 40px));
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.vfab.is-in { opacity: 1; transform: none; }
.vfab.is-out { opacity: 0; transform: translateY(14px); pointer-events: none; }

.vfab-card {
  display: block; position: relative; padding: 16px 18px 14px; border-radius: 16px;
  background: rgba(7,19,35,0.93); color: #fff;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 18px 44px rgba(6,17,31,0.34);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .22s ease, box-shadow .22s ease, border-color .3s ease;
}
/* Drifts gently and brightens on the beat, so it reads as alive without nagging. */
.vfab.is-in .vfab-card { animation: vfabFloat 5.4s ease-in-out infinite; }
.vfab-card:hover {
  animation-play-state: paused;
  color: #fff; transform: translateY(-4px);
  border-color: rgba(255,255,255,0.34);
  box-shadow: 0 26px 58px rgba(6,17,31,0.46);
}
@keyframes vfabFloat {
  0%, 100% { transform: translateY(0);     box-shadow: 0 18px 44px rgba(6,17,31,0.34); }
  50%      { transform: translateY(-7px);  box-shadow: 0 28px 58px rgba(6,17,31,0.44); }
}

/* A soft halo that pulses just behind the card. */
.vfab-card::before {
  content: ""; position: absolute; inset: -2px; border-radius: 18px; z-index: -1;
  background: linear-gradient(135deg, var(--blue-500), #7b5cff 55%, var(--blue-400));
  opacity: .34; filter: blur(9px);
  animation: vfabGlow 5.4s ease-in-out infinite;
}
@keyframes vfabGlow {
  0%, 100% { opacity: .22; }
  50%      { opacity: .58; }
}

.vfab-kicker {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; color: var(--blue-400);
}
.vfab-kicker .en {
  font-family: Archivo, sans-serif; font-size: 0.58rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.4);
}
.vfab-mark { font-size: 0.74rem; animation: vfabTwinkle 3.4s ease-in-out infinite; }
@keyframes vfabTwinkle {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.22); }
}

.vfab-ref { display: block; margin-top: 8px; font-size: 0.8rem; font-weight: 700; color: rgba(255,255,255,0.94); }
.vfab-text {
  display: block; margin-top: 5px;
  font-size: 0.82rem; line-height: 1.6; color: rgba(255,255,255,0.72);
}
.vfab-go { display: block; margin-top: 11px; font-size: 0.76rem; font-weight: 700; color: var(--blue-400); }

.vfab-close {
  position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer; font-size: 1.05rem; line-height: 1;
  background: #fff; color: var(--navy-800);
  border: 1px solid rgba(6,17,31,0.12); box-shadow: 0 4px 14px rgba(6,17,31,0.2);
}
.vfab-close:hover { background: var(--navy-800); color: #fff; }

/* ---------- Floating contact button ----------
   Bottom-right, under the verse card, which is offset to make room for it.
   In Kakao's own yellow when a channel is set, because that colour is the
   fastest way to tell a Korean visitor "this is KakaoTalk" — and deliberately
   NOT that colour when it merely opens an email panel. */
.kfab-wrap { position: fixed; right: 20px; bottom: 20px; z-index: 345; }
.kfab {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px 11px 13px; border-radius: 999px; border: 0; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: .9rem; line-height: 1.2;
  box-shadow: 0 10px 28px rgba(6,17,31,0.26);
  transition: transform .2s var(--ease, ease), box-shadow .2s ease, background .2s ease;
}
.kfab:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(6,17,31,0.34); }
.kfab.is-kakao { background: #FEE500; color: #3C1E1E; }
.kfab.is-kakao:hover { background: #FFDE00; color: #3C1E1E; }
.kfab.is-plain { background: var(--navy-800, #0a1a2f); color: #fff; }
.kfab.is-plain:hover { background: #000; color: #fff; }

.kfab-ic { flex: none; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
.kfab-ic svg { width: 22px; height: 22px; }
.kfab.is-kakao .kfab-ic svg { fill: #3C1E1E; }

.kfab-t { display: flex; flex-direction: column; text-align: left; }
.kfab-s { font-size: .68rem; font-weight: 600; opacity: .62; margin-top: 2px; }

/* The verse card sits directly above the button rather than on top of it. */
.vfab { bottom: 92px; }

@media (max-width: 620px) {
  /* Too little width down here for a label — the icon carries it, and the
     button shrinks to something thumb-sized in the corner. */
  .kfab-wrap { right: 12px; bottom: 12px; }
  .kfab { padding: 0; width: 54px; height: 54px; justify-content: center; border-radius: 50%; }
  .kfab-t { display: none; }
  .kfab-ic { width: 26px; height: 26px; }
  .kfab-ic svg { width: 25px; height: 25px; }
}
@media (prefers-reduced-motion: reduce) { .kfab, .kfab:hover { transition: none; transform: none; } }

/* First-ever visit: a compact chip instead of the full card, so the page's
   first impression is the church, not a popup. One tap opens the card. */
.vfab.is-mini { width: auto; }
.vfab.is-mini .vfab-ref,
.vfab.is-mini .vfab-text,
.vfab.is-mini .vfab-go { display: none; }
.vfab.is-mini .vfab-card { padding: 10px 16px; border-radius: 999px; }
.vfab.is-mini .vfab-card::before { border-radius: 999px; }
.vfab.is-mini .vfab-close { display: none; }

@media (max-width: 620px) {
  /* bottom stays clear of the floating contact button below it. */
  .vfab { right: 12px; bottom: 78px; width: min(280px, calc(100vw - 24px)); }
  .vfab-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .vfab { transition: opacity .2s ease; transform: none; }
  .vfab.is-in { transform: none; }
  .vfab.is-in .vfab-card, .vfab-card::before, .vfab-mark { animation: none; }
}

/* ---------- Every Nation family links ---------- */
.fam { margin-top: 40px; }
.fam-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: left; }
@media (max-width: 1040px) { .fam-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .fam-grid { grid-template-columns: 1fr; } }

.fam-card {
  display: block; padding: 20px 22px; border-radius: 16px;
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.18);
  color: #fff; transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.fam-card:hover {
  color: #fff; background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.36); transform: translateY(-3px);
}
.fam-name { display: block; }
.fam-name .n { display: block; font-family: Archivo, sans-serif; font-weight: 800; font-size: 1rem; letter-spacing: -0.01em; }
.fam-name .alt { display: block; margin-top: 4px; font-weight: 600; font-size: 0.8rem; color: rgba(255,255,255,0.55); }
.fam-name .ext { display: inline-block; font-family: system-ui, sans-serif; font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,0.5); margin-left: 6px; vertical-align: 2px; }
.fam-desc { display: block; margin-top: 10px; font-size: 0.85rem; line-height: 1.62; color: rgba(255,255,255,0.72); }

.fam-row {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; flex-wrap: wrap; margin-top: 22px;
}
.fam-find {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-weight: 700; font-size: 0.92rem; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.4); padding-bottom: 3px;
}
.fam-find:hover { color: #fff; border-color: #fff; }
.fam-find .alt { font-weight: 600; font-size: 0.78rem; color: rgba(255,255,255,0.55); }
.fam-find .ext { font-size: 0.75rem; }

.fam-sep { width: 1px; height: 18px; background: rgba(255,255,255,0.22); }
@media (max-width: 700px) { .fam-sep { display: none; } }

.fam-near { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fam-near-k {
  font-family: Archivo, sans-serif; font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.42);
}
.fam-near a { font-size: 0.88rem; font-weight: 600; color: rgba(255,255,255,0.85); }
.fam-near a:hover { color: #fff; }
.fam-near .ext { font-size: 0.72rem; color: rgba(255,255,255,0.45); }

/* ---------- Busan page ---------- */
.bs-social { display: flex; flex-wrap: wrap; gap: 10px; }
.bs-social-link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px; border-radius: 999px;
  border: 1.5px solid var(--line); background: #fff;
  font-size: 0.88rem; font-weight: 700; color: var(--navy-800);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.bs-social-link:hover { border-color: var(--navy-800); background: var(--navy-800); color: #fff; transform: translateY(-2px); }
.bs-social-link .ext { font-size: 0.74rem; opacity: .6; }

/* A quiet pointer to Busan, dropped into the Seoul pages. */
.bs-note {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: clamp(28px, 3.4vw, 44px); padding: 20px 24px;
  border: 1px solid var(--line); border-radius: 16px; background: #fff;
}
.bs-note-k {
  font-family: Archivo, sans-serif; font-size: 0.64rem; font-weight: 800;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--blue-500);
}
.bs-note p { margin: 0; flex: 1 1 260px; font-size: 0.92rem; line-height: 1.65; color: var(--ink-70); }
.bs-note p .ko { display: block; margin-top: 4px; font-size: 0.86rem; color: var(--ink-50); }

/* ---------- Vessel Worship page ---------- */
.vw-feature {
  max-width: 960px; margin-inline: auto;
  aspect-ratio: 16/9; border-radius: 18px; overflow: hidden;
  background: #000; box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.vw-feature iframe { width: 100%; height: 100%; border: 0; display: block; }

.vw-grid { display: grid; gap: 22px; grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 980px) { .vw-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .vw-grid { grid-template-columns: 1fr; } }

.vw-card {
  display: block; border-radius: var(--r-lg); overflow: hidden;
  background: #fff; border: 1px solid var(--line);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.vw-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.vw-thumb { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--navy-800); }
.vw-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.vw-card:hover .vw-thumb img { transform: scale(1.05); }
.vw-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; color: #fff;
}
.vw-play::before {
  content: ""; position: absolute; width: 54px; height: 54px; border-radius: 50%;
  background: rgba(6,17,31,0.62); border: 1.5px solid rgba(255,255,255,0.5);
  transition: background .25s ease, transform .25s ease;
}
.vw-card:hover .vw-play::before { background: var(--blue-500); border-color: var(--blue-500); transform: scale(1.08); }
.vw-play { text-indent: 3px; }
.vw-play, .vw-play::before { pointer-events: none; }
.vw-meta { display: block; padding: 16px 18px 18px; }
.vw-title { display: block; font-family: Archivo, sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; color: var(--navy-800); }
.vw-desc { display: block; margin-top: 5px; font-size: 0.84rem; color: var(--ink-50); }

.vw-songs { border-top: 1px solid var(--line); }
.vw-song {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 18px 6px; border-bottom: 1px solid var(--line);
}
.vw-song-num {
  font-family: Archivo, sans-serif; font-weight: 800; font-size: 0.8rem;
  color: var(--blue-500); flex: none;
}
.vw-song-name { flex: 1 1 260px; font-weight: 700; font-size: 1.02rem; color: var(--navy-800); }
.vw-song-name .d { display: block; margin-top: 3px; font-weight: 500; font-size: 0.84rem; color: var(--ink-50); }
.vw-song-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.vw-act {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px; font-size: 0.82rem; font-weight: 700;
  border: 1.5px solid var(--line); background: #fff; color: var(--navy-800);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.vw-act:hover { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.vw-act.is-sheet { border-color: var(--blue-500); color: var(--blue-500); }
.vw-act.is-sheet:hover { background: var(--blue-500); color: #fff; }
.vw-act.is-soon { color: var(--ink-50); border-style: dashed; cursor: default; }
.vw-act .ext { font-size: 0.72rem; opacity: .65; }

/* ---------- Prayer request (Notion form) ---------- */
.prayer-box {
  max-width: 720px; margin: 34px auto 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(14px, 2vw, 20px);
  box-shadow: 0 14px 40px rgba(6,17,31,0.06);
}
/* Height is fixed rather than grown to fit: a cross-origin frame cannot report
   its own content height, and any script that tries to guess is a scrollbar
   inside a scrollbar waiting to happen. 620px holds both fields and the submit
   button of this form without the frame needing to scroll at all. */
.prayer-frame {
  display: block; width: 100%; height: 620px;
  border: 0; border-radius: var(--r); background: var(--paper-2);
}
@media (max-width: 640px) { .prayer-frame { height: 680px; } }

.prayer-out { margin: 16px 0 0; text-align: center; }
.prayer-out a {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 0.92rem; color: var(--blue-500);
}
.prayer-out a:hover { text-decoration: underline; }
.prayer-out .ko-inline { font-weight: 600; opacity: .72; }

.prayer-note {
  margin: 14px 0 0; text-align: center;
  font-size: 0.82rem; line-height: 1.6; color: var(--ink-50);
}
.prayer-note .ko { display: block; margin-top: 4px; }
.prayer-note a { color: var(--ink-70); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Every Nation Music (Vessel page) ---------- */
/* `.dark p` is not styled globally, and inherited white at paragraph size sits
   heavier than the rest of the site's dark sections read. */
#en-music .sec-head p { color: rgba(255,255,255,0.74); }
#en-music .sec-head p .ko-line { color: rgba(255,255,255,0.58); }

.enm-cta { margin: 30px 0 40px; text-align: center; }
/* Bigger than a standard .btn on purpose: it is the destination of the whole
   section, and it has to hold its own above six large video cards. */
.enm-btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 16px 30px 16px 22px; border-radius: 999px;
  text-align: left; line-height: 1.25;
  box-shadow: 0 16px 40px rgba(0,0,0,0.28);
}
.enm-play {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: #ff0033; color: #fff;
  transition: transform .25s var(--ease);
}
.enm-play svg { width: 22px; height: 22px; margin-left: 2px; }
.enm-btn:hover .enm-play { transform: scale(1.08); }
.enm-btn-t { display: block; font-size: 1.02rem; font-weight: 800; }
.enm-btn-t .ko {
  display: block; margin-top: 3px;
  font-size: 0.8rem; font-weight: 600; opacity: .62;
}
@media (max-width: 480px) {
  .enm-btn { width: 100%; justify-content: flex-start; padding: 15px 20px; }
  .enm-btn-t { font-size: 0.95rem; }
}

/* Four to a row rather than Vessel's three: these are a sample of a catalogue,
   not the page's own work, so they should read as a shelf of covers. Smaller
   cards also mean one row is a sensible amount to show before the fold. */
.enm-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.enm-grid .vw-meta { padding: 12px 14px 14px; }
.enm-grid .vw-title { font-size: 0.9rem; }
.enm-grid .vw-desc { font-size: 0.76rem; }
@media (max-width: 1000px) { .enm-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 700px)  { .enm-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; } }

/* One row collapsed, at each column count. */
.mo-toggle:not(:checked) ~ .enm-grid .vw-card:nth-child(n+5) { display: none; }
@media (max-width: 1000px) { .mo-toggle:not(:checked) ~ .enm-grid .vw-card:nth-child(n+4) { display: none; } }
@media (max-width: 700px)  { .mo-toggle:not(:checked) ~ .enm-grid .vw-card:nth-child(n+5) { display: none; } }

/* On the dark band the white pill would shout louder than the YouTube button
   above it, which is the one that matters. */
.enm-morebtn {
  background: transparent; color: #fff;
  border-color: rgba(255,255,255,0.3);
}
.enm-morebtn:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.6); box-shadow: none; }
.enm-morebtn .ko-inline { opacity: .7; }

/* ---------- Instagram / Messenger DM, under the contact form ---------- */
/* Beside the send button: the button on the left, these on the right, both on
   the same line so the reader sees one row of ways to reach us. */
.form-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px 20px; flex-wrap: wrap;
}
.form-actions .btn-primary { flex-shrink: 0; }

.dm-block { text-align: right; }
.dm-lead {
  display: block; margin-bottom: 8px;
  font-size: 0.78rem; font-weight: 700; color: var(--ink-50);
}
.dm-lead .ko { display: block; margin-top: 2px; font-weight: 600; font-size: 0.74rem; opacity: .8; }
.dm-row { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* Outside the form (a plugin-rendered form has nowhere to slot them in) they
   go back to being a centred block under the card. */
.form-card + .dm-block { margin-top: 26px; text-align: center; }
.form-card + .dm-block .dm-row { justify-content: center; }
.form-card + .dm-block .dm-lead { font-size: 0.86rem; margin-bottom: 14px; }
.dm-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px 9px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
  text-align: left; line-height: 1.25;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s var(--ease);
}
.dm-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(6,17,31,0.12); border-color: transparent; }
.dm-i {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff;
}
.dm-i { width: 30px; height: 30px; }
.dm-i svg { width: 17px; height: 17px; }
/* Each platform's own colour, because that is what makes the button
   recognisable before the label is read. Kept to the icon disc only — two
   full-colour buttons side by side would out-shout the send button above. */
.dm-ig .dm-i { background: linear-gradient(135deg, #f9ce34 0%, #ee2a7b 48%, #6228d7 100%); }
.dm-fb .dm-i { background: #0084ff; }
.dm-t { display: block; font-size: 0.84rem; font-weight: 700; color: var(--navy-800); }
.dm-t .ko { display: block; margin-top: 1px; font-size: 0.7rem; font-weight: 600; color: var(--ink-50); }

@media (max-width: 640px) {
  /* Too narrow for two columns — stack, and left-align so the block lines up
     with the send button above it rather than drifting to the right edge. */
  .form-actions { flex-direction: column; align-items: stretch; }
  .dm-block { text-align: left; }
  .dm-row { justify-content: flex-start; }
}
@media (max-width: 420px) {
  .dm-row { flex-direction: column; }
  .dm-btn { justify-content: flex-start; }
}

/* ---------- Prayer form (visitor side) ---------- */
/* Two moods, one section. Asking is the site's usual blue; thanksgiving turns
   everything gold. The switch is a plain class on the <section> (JS) with a
   :has() fallback, so the colour holds even with scripts off. */
.prayer-sec {
  --pr: var(--blue-500);
  --pr-deep: var(--navy-800);
  --pr-soft: rgba(45,107,255,0.12);
  --pr-bg: #fff;
  transition: background-color .5s ease;
}
.prayer-sec.is-joy,
.prayer-sec:has(.pr-type-opt input[value="thanks"]:checked) {
  --pr: #c08327;
  --pr-deep: #6b4a12;
  --pr-soft: rgba(214,158,49,0.22);
  --pr-bg: #fffdf6;
  background: #f7f2e5;
}
.prayer-sec .h-lg { color: var(--pr-deep); transition: color .5s ease; }
.prayer-sec .kicker { color: var(--pr); transition: color .5s ease; }
.prayer-sec .kicker::before { background: var(--pr); transition: background-color .5s ease; }

/* Copy that swaps with the mood. display:contents so the swapped-in span
   disappears from layout entirely and its children sit directly in the h2. */
.pr-sw { display: none; }
.prayer-sec .pr-sw-ask { display: contents; }
.prayer-sec.is-joy .pr-sw-ask,
.prayer-sec:has(.pr-type-opt input[value="thanks"]:checked) .pr-sw-ask { display: none; }
.prayer-sec.is-joy .pr-sw-joy,
.prayer-sec:has(.pr-type-opt input[value="thanks"]:checked) .pr-sw-joy { display: contents; }

.prayer-card {
  position: relative;
  max-width: 700px; margin-inline: auto;
  background: var(--pr-bg);
  transition: background-color .5s ease, box-shadow .5s ease;
}
.prayer-sec.is-joy .prayer-card,
.prayer-sec:has(.pr-type-opt input[value="thanks"]:checked) .prayer-card {
  box-shadow: 0 22px 60px rgba(150,105,20,0.16);
}
.prayer-card .btn-primary {
  background: var(--pr); border-color: var(--pr);
  transition: background-color .45s ease, border-color .45s ease, box-shadow .45s ease;
}
.prayer-card .btn-primary:hover { background: var(--pr-deep); border-color: var(--pr-deep); }
.prayer-card .field .req { color: var(--pr); transition: color .45s ease; }

/* Equal boxes. flex-basis 0 (not 200px) so the two share the row evenly no
   matter how long the labels are — otherwise "Answered & Thanksgiving"
   wrapping to two lines made its box taller than its partner. */
.pr-type {
  display: flex; gap: 10px; border: 0; padding: 0; margin: 0 0 22px;
  flex-wrap: wrap; align-items: stretch;
}
/* These are <label>s inside .form-card, so without this they inherit the
   field-label treatment — uppercase, 0.11em tracking, 0.76rem — which is right
   for "NAME · 이름" above an input and wrong for a choice you click. Reset it
   and set the two lines deliberately, so both boxes read as the same kind of
   object and sit in the same family as the card around them. */
.pr-type-opt {
  flex: 1 1 0; min-width: 190px; cursor: pointer; position: relative; display: flex;
  margin-bottom: 0; text-transform: none; letter-spacing: normal;
}
.pr-type-opt input { position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pr-type-opt > span:first-of-type {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 14px 16px; border-radius: var(--r);
  border: 1.5px solid var(--line); background: var(--paper-2);
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s var(--ease);
}
.pr-ic { display: block; font-size: 1.15rem; line-height: 1; margin-bottom: 7px; }
.pr-type-opt strong {
  display: block;
  font-family: Archivo, sans-serif; font-weight: 800;
  font-size: 1.02rem; line-height: 1.2; letter-spacing: -0.012em;
  text-transform: none; color: var(--navy-800);
}
.pr-type-opt em {
  display: block; margin-top: 4px;
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
  font-style: normal; font-weight: 500;
  font-size: 0.83rem; line-height: 1.35; letter-spacing: 0;
  text-transform: none; color: var(--ink-50);
}
.pr-type-opt input:checked + span {
  border-color: var(--blue-500); background: #fff;
  box-shadow: 0 6px 18px rgba(45,107,255,0.12);
}
.pr-type-opt.is-joy input:checked + span {
  border-color: #d69e31; background: #fffaee;
  box-shadow: 0 10px 26px rgba(190,138,36,0.24);
  animation: prPop .5s var(--ease);
}
.pr-type-opt.is-joy input:checked + span strong { color: #6b4a12; }
.pr-type-opt.is-joy input:checked + span .pr-ic { animation: prCheer .9s var(--ease); }
.pr-type-opt input:focus-visible + span { outline: 2px solid var(--pr); outline-offset: 2px; }

@keyframes prPop {
  0% { transform: scale(1); }
  42% { transform: scale(1.035); }
  100% { transform: scale(1); }
}
@keyframes prCheer {
  0%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-5px) rotate(-9deg); }
  60% { transform: translateY(-2px) rotate(7deg); }
}

/* The little rising lights. JS drops spans in here on every click of the
   thanksgiving option — clicking it again should always pay out, because the
   point is to make testimony the button people want to press. */
.pr-joy { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 2; }
.pr-joy i {
  position: absolute; bottom: 34%; left: var(--x, 50%);
  width: var(--sz, 7px); height: var(--sz, 7px);
  color: var(--c, #e5b64a);
  opacity: 0;
  animation: prRise var(--dur, 1.5s) var(--ease) var(--dl, 0s) forwards;
}
/* A four-point sparkle, drawn rather than typed, so it stays crisp and takes
   the mood colour. */
.pr-joy i::before {
  content: ""; position: absolute; inset: 0; background: currentColor;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
.pr-joy i.is-dot::before { clip-path: none; border-radius: 50%; }
@keyframes prRise {
  0%   { opacity: 0; transform: translate(0,0) scale(.3) rotate(0); }
  18%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, -108px)) scale(var(--ds, 1.05)) rotate(var(--rot, 160deg)); }
}
/* A single warm bloom behind the card the moment the mood flips. */
.pr-bloom {
  position: absolute; left: 50%; top: 30%; width: 260px; height: 260px;
  margin: -130px 0 0 -130px; border-radius: 50%; pointer-events: none; z-index: 1;
  background: radial-gradient(circle, rgba(240,200,110,0.55), rgba(240,200,110,0) 68%);
  animation: prBloom 1.05s var(--ease) forwards;
}
@keyframes prBloom {
  0% { opacity: 0; transform: scale(.35); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: scale(2.5); }
}
@media (prefers-reduced-motion: reduce) {
  .pr-joy, .pr-bloom { display: none; }
  .pr-type-opt.is-joy input:checked + span,
  .pr-type-opt.is-joy input:checked + span .pr-ic { animation: none; }
}

.prayer-note {
  margin: 20px 0 0; font-size: 0.82rem; line-height: 1.6; color: var(--ink-50);
}
.prayer-note .ko { display: block; margin-top: 4px; }
.prayer-note a { color: var(--ink-70); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- "Until the rain comes" — Elijah on Carmel, full-bleed ----------
 * The band spans the full width of the window and is exactly as tall as the
 * painting's own 16:9 makes it — 56.25% of the width, no cap. Every attempt to
 * bound the height cost something visible: at 78vh on a wide screen the crop
 * ate the servant's head at the top and Elijah's body at the bottom, which are
 * the only two things in the picture. A tall band is the honest price of
 * showing a wide painting whole across a wide window.
 *
 * ⚠️ Do NOT reintroduce `aspect-ratio: 16/9` with a `max-height`. That pair
 * looks equivalent to this and is not: once max-height clamps the height, the
 * ratio drives the *width* back down, and the band silently stops short of the
 * right edge while staying flush left. Height is computed from vw here
 * precisely so the width is never a derived value.
 *
 * The type goes top-left, into the storm-dark sky the artist left empty — the
 * place the artwork's own title occupied before it was painted out of the file.
 * So the scrim is horizontal, not a blanket: it darkens the left half where the
 * words are and fades to nothing across the figures, which need no help.
 */
.rain-sec {
  position: relative; overflow: hidden;
  margin-top: clamp(52px, 7vw, 88px);
  width: 100%;
  height: 56.25vw;
  min-height: 430px;
  display: grid; align-items: center;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  background-color: var(--navy-900); /* shows while the photo decodes */
}
.rain-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(6,17,31,0.90) 0%, rgba(6,17,31,0.80) 30%, rgba(6,17,31,0.34) 55%, rgba(6,17,31,0.02) 74%),
    linear-gradient(180deg, rgba(6,17,31,0.30) 0%, rgba(6,17,31,0) 34%);
}
.rain-sec .wrap { position: relative; z-index: 1; }
.rain-cap { text-align: left; max-width: 50%; min-width: 300px; }
.rain-shout {
  margin: 0; font-family: Archivo, sans-serif; font-weight: 800;
  font-size: clamp(1.5rem, 3.2vw, 2.3rem); line-height: 1.14;
  letter-spacing: -0.01em; color: #f0c860;
}
.rain-shout .ko {
  display: block; margin-top: 8px; font-size: 0.5em; font-weight: 700;
  letter-spacing: .02em; color: rgba(255,255,255,0.62);
}
.rain-v {
  margin: clamp(20px, 2.6vw, 30px) 0 0; max-width: 560px;
  padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.22);
}
.rain-v p { margin: 0; font-size: clamp(0.86rem, 1.05vw, 0.96rem); line-height: 1.76; color: rgba(255,255,255,0.88); }
.rain-v p b { font-weight: 700; color: #f0c860; }
.rain-v p.ko { margin-top: 10px; font-size: 0.86em; color: rgba(255,255,255,0.6); }
.rain-v cite {
  display: block; margin-top: 14px; font-style: normal;
  font-family: Archivo, sans-serif; font-size: 0.7rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,0.5);
}
.rain-close {
  margin: clamp(18px, 2.4vw, 28px) 0 0;
  font-size: clamp(0.9rem, 1.1vw, 1rem); font-weight: 600; line-height: 1.65; color: #fff;
}
.rain-close .ko { display: block; margin-top: 5px; font-weight: 500; color: rgba(255,255,255,0.62); }

/* Narrow screens: no overlay at all. A 16:9 painting squeezed behind a column
   of text on a phone is neither readable nor a painting — so the picture gets
   its own full width at the top, whole, and the words sit on plain navy under
   it. Same two elements, stacked instead of layered. */
@media (max-width: 860px) {
  .rain-sec {
    height: auto; min-height: 0;
    padding: calc(56.25% + clamp(28px, 6vw, 44px)) 0 clamp(40px, 8vw, 56px);
    background-position: top center; background-size: 100% auto;
  }
  .rain-scrim {
    /* only under the words — the picture itself stays untouched */
    top: 56.25%;
    background: linear-gradient(180deg, rgba(6,17,31,0) 0%, var(--navy-900) 7%, var(--navy-900) 100%);
  }
  .rain-cap { max-width: 100%; min-width: 0; text-align: center; }
  .rain-v { margin-inline: auto; }
}

/* ---------- Prayer team dashboard ---------- */
.pt-gate { max-width: 460px; margin-inline: auto; text-align: center; }
.pt-login { margin-top: 26px; text-align: left; }
.pt-login form { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; }
.pt-login p { margin: 0 0 16px; }
.pt-login label { display: block; margin-bottom: 6px; font-size: 0.84rem; font-weight: 700; color: var(--navy-800); }
.pt-login input[type=text], .pt-login input[type=password] {
  width: 100%; box-sizing: border-box; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 10px; font: inherit; background: var(--paper-2);
}
.pt-login .login-remember { font-size: 0.84rem; }
.pt-login .login-remember label { display: inline; font-weight: 500; }
.pt-login input[type=submit] {
  width: 100%; padding: 13px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--blue-500); color: #fff; font-weight: 800; font-size: 0.95rem;
}

.pt-head { margin-bottom: 34px; }
.pt-hello { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; font-weight: 600; color: var(--navy-800); }
.pt-out { font-size: 0.84rem; color: var(--ink-50); text-decoration: underline; text-underline-offset: 2px; }
.pt-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.pt-tab {
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; font-size: 0.86rem; font-weight: 700; color: var(--navy-800);
}
.pt-tab b { margin-left: 4px; color: var(--blue-500); }
.pt-tab:hover { border-color: var(--navy-800); }

.pt-list { margin-bottom: 40px; scroll-margin-top: 90px; }
.pt-list-t { font-family: Archivo, sans-serif; font-size: 1.15rem; color: var(--navy-800); margin: 0 0 12px; }
.pt-list-t span { font-size: 0.78rem; font-weight: 600; color: var(--ink-50); margin-left: 8px; }
.pt-empty { font-size: 0.9rem; color: var(--ink-50); padding: 14px 16px; background: var(--paper-2); border-radius: var(--r); }

.pt-head + .pt-tabs { margin: -16px 0 30px; }

/* The small Korean echo inside English-first labels, tabs and buttons. */
.pt-hello i, .pt-tab i, .pt-btn i, .pt-fold-t i, .pt-sub-t i {
  font-style: normal; font-weight: 600; font-size: 0.86em; color: var(--ink-50);
}

/* One request = one closed row. The summary line carries who, what, when,
   who's on it and the first words of the prayer, so most scanning happens
   without opening anything — the fix for a wall of tall cards. */
.pt-item {
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--blue-500);
  border-radius: var(--r); margin-bottom: 8px;
}
.pt-item.is-thanks { border-left-color: #caa557; }
.pt-item-h {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; cursor: pointer; list-style: none;
}
.pt-item-h::-webkit-details-marker { display: none; }
.pt-item-h strong { color: var(--navy-800); font-size: 0.92rem; white-space: nowrap; }
.pt-item-h time { font-size: 0.76rem; color: var(--ink-50); white-space: nowrap; }
.pt-mark { font-size: 0.86rem; }
.pt-brief {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.86rem; color: var(--ink-50);
}
.pt-caret {
  flex: none; width: 9px; height: 9px; margin-left: 2px;
  border-right: 2px solid var(--ink-50); border-bottom: 2px solid var(--ink-50);
  transform: rotate(45deg) translateY(-2px); transition: transform .18s ease;
}
details[open] > summary .pt-caret,
details[open] > .pt-fold-t .pt-caret { transform: rotate(-135deg) translateY(-1px); }
.pt-item-open { padding: 2px 16px 14px; border-top: 1px solid var(--line); }
.pt-item-meta { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; }
.pt-item-meta time { font-size: 0.78rem; color: var(--ink-50); }
.pt-badge { font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--paper-2); color: var(--ink-70); }
/* Who is carrying this one. It reads as a person, not a field value: an
   initial in a disc, then the name, sitting on the summary line where the eye
   is already going. The team scans these lists looking for "is anyone on
   this?" — that question should be answerable without reading. */
.pt-point-tag {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 2px 10px 2px 2px; border-radius: 999px;
  background: rgba(45,107,255,0.08);
  font-size: 0.74rem; font-weight: 700; color: var(--blue-500); white-space: nowrap;
}
.pt-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: var(--blue-500); color: #fff;
  font-style: normal; font-size: 0.68rem; font-weight: 800; line-height: 1;
}
.pt-item.is-thanks .pt-point-tag { background: rgba(202,165,87,0.16); color: #8a6a1c; }
.pt-item.is-thanks .pt-avatar { background: #caa557; }
/* An unclaimed request should look unclaimed. */
.pt-item:not(.has-point) .pt-who { border-style: dashed; color: var(--ink-50); }
.pt-item-b { margin-top: 10px; font-size: 0.92rem; line-height: 1.65; color: var(--ink); }
.pt-item-f { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.pt-act { display: inline-flex; gap: 6px; margin: 0; }
.pt-btn {
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; font-size: 0.79rem; font-weight: 700; color: var(--navy-800); cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.pt-btn:hover { border-color: var(--navy-800); }
.pt-btn.is-danger { color: #b3261e; }
.pt-btn.is-danger:hover { border-color: #b3261e; background: #fdf1f0; }
.pt-btn.is-go { border-color: var(--blue-500); color: var(--blue-500); }
.pt-btn.is-go:hover { background: var(--blue-500); color: #fff; }
.pt-btn.is-go:hover i { color: rgba(255,255,255,0.75); }
.pt-act-point { margin-left: auto; align-items: center; }
.pt-who {
  padding: 7px 30px 7px 12px; border: 1px solid var(--line); border-radius: 999px;
  font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--navy-800);
  background: #fff no-repeat right 11px center/9px 6px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath fill='%236b7280' d='M0 0h9L4.5 6z'/%3E%3C/svg%3E");
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.pt-who:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }
/* With JS the menu saves on change, so the button is redundant — it stays in
   the markup for the no-script case and hides itself once main.js takes over. */
html.js .pt-who-go { display: none; }
.pt-who-empty { font-size: 0.78rem; color: var(--ink-50); }

.pt-list-note {
  margin: 0 0 14px; font-size: 0.84rem; line-height: 1.6; color: var(--ink-50);
}
.pt-note {
  margin: 14px 0 0; padding: 10px 14px; border-radius: var(--r);
  background: rgba(45,107,255,0.07); color: var(--navy-800);
  font-size: 0.86rem; font-weight: 600;
}
.pt-note.is-error { background: #fdf1f0; color: #b3261e; }

/* Folded sections — the archive shelf and the team panel. A whole list that
   opens like one big row, so the page ends where the day's work ends. */
.pt-fold { margin-bottom: 24px; scroll-margin-top: 90px; }
.pt-fold-t {
  display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
  padding: 13px 16px; background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r);
  font-family: Archivo, sans-serif; font-weight: 700; font-size: 1rem; color: var(--navy-800);
}
.pt-fold-t::-webkit-details-marker { display: none; }
.pt-fold-t b { color: var(--blue-500); }
.pt-fold-t .pt-caret { order: 9; margin-left: auto; }
.pt-fold-body { padding: 16px 2px 2px; }
.pt-fold .pt-item { background: var(--paper-2); border-left-color: var(--line); }
.pt-fold .pt-item-b { color: var(--ink-70); }
#pt-bin .pt-item, .pt-list.is-bin .pt-item { background: var(--paper-2); border-left-color: var(--line); }

/* 팀원 관리 — leaders only. */
.pt-team .pt-fold-body { padding-top: 20px; }
.pt-sub-t { font-family: Archivo, sans-serif; font-size: 0.95rem; color: var(--navy-800); margin: 22px 0 8px; }
.pt-sub-t:first-child { margin-top: 0; }
.pt-roster { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pt-chip {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  padding: 5px 6px 5px 13px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line);
  font-size: 0.82rem; font-weight: 700; color: var(--navy-800);
}
.pt-chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--paper-2); color: var(--ink-50); font-size: 0.85rem; line-height: 1;
}
.pt-chip-x:hover { background: #fdf1f0; color: #b3261e; }
.pt-team-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 6px; }
.pt-team-form input[type=text], .pt-team-form input[type=password] {
  padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px;
  font: inherit; font-size: 0.84rem; background: #fff; min-width: 0;
}
.pt-accts { list-style: none; margin: 0 0 14px; padding: 0; }
.pt-accts li {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 4px; border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
}
.pt-accts li strong { color: var(--navy-800); }
.pt-accts li form { margin-left: auto; }
.pt-acct-login { font-size: 0.78rem; color: var(--ink-50); }

/* The two-week clock, visible on the card. Week one is the intensive week and
   reads calm; week two warms up; the last two days go amber so "this is about
   to file itself" is legible at a glance rather than a thing you had to have
   been told. */
.pt-days {
  flex: none; padding: 2px 9px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 800; letter-spacing: .01em; white-space: nowrap;
}
.pt-days.is-w1   { background: rgba(45,107,255,0.10); color: var(--blue-500); }
.pt-days.is-w2   { background: rgba(202,165,87,0.18); color: #8a6a1c; }
.pt-days.is-late { background: #fdf1e7; color: #b4600f; }
.pt-days.is-arch { background: var(--paper-2); color: var(--ink-50); }

.pt-hello-r { display: inline-flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.pt-guide {
  font-size: 0.84rem; font-weight: 700; color: var(--blue-500);
  border-bottom: 1px solid rgba(45,107,255,0.35); padding-bottom: 1px;
}
.pt-guide i { font-style: normal; font-weight: 600; color: var(--ink-50); }
.pt-guide:hover { border-bottom-color: var(--blue-500); }

@media (max-width: 560px) {
  .pt-act-point { margin-left: 0; }
  .pt-item-h { flex-wrap: wrap; row-gap: 4px; }
  .pt-brief { flex-basis: 100%; order: 9; }
  .pt-team-form input[type=text], .pt-team-form input[type=password] { flex: 1 1 140px; }
}

/* =====================================================================
   기도팀 사용 설명서 — /prayer-guide/
   A manual read by people who are stuck, often on a phone, often once.
   Every moving part gets a picture first and prose second; Korean leads
   and English follows in the same block rather than in a separate
   version, because the roster is genuinely mixed and two documents drift.
   ===================================================================== */
.pg-wrap { max-width: 860px; }
.pg-sec { padding-top: clamp(40px, 5vw, 64px); }

.pg-ko, .pg-en { font-size: 0.86rem; line-height: 1.65; color: var(--ink-50); margin: 4px 0 0; }
.pg-p  { font-size: 0.98rem; line-height: 1.8; color: var(--ink); margin: 0 0 6px; }
.pg-small { font-size: 0.88rem; color: var(--ink-70); }
.pg-link { font-weight: 700; color: var(--blue-500); border-bottom: 1px solid rgba(45,107,255,0.3); }

/* --- Contents --- */
.pg-toc {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 32px); margin-bottom: 54px;
}
.pg-toc-t { font-family: Archivo, sans-serif; font-size: 1.05rem; color: var(--navy-800); margin: 0 0 14px; }
.pg-toc-t i { font-style: normal; font-weight: 600; font-size: 0.84rem; color: var(--ink-50); margin-left: 6px; }
.pg-toc ol { margin: 0; padding-left: 20px; }
.pg-toc li { margin-bottom: 7px; font-size: 0.94rem; }
.pg-toc a { color: var(--ink); border-bottom: 1px solid transparent; }
.pg-toc a:hover { color: var(--blue-500); border-bottom-color: rgba(45,107,255,0.35); }
.pg-toc-go { margin: 22px 0 0; }

/* --- Section shells --- */
.pg-block { position: relative; margin-bottom: 68px; scroll-margin-top: 90px; }
.pg-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--navy-800); color: #fff;
  font-family: Archivo, sans-serif; font-weight: 800; font-size: 0.9rem;
  margin-bottom: 12px;
}
.pg-h {
  font-family: Archivo, sans-serif; font-size: clamp(1.35rem, 2.6vw, 1.72rem);
  line-height: 1.3; color: var(--navy-800); margin: 0 0 14px;
}
.pg-h i { display: block; font-style: normal; font-size: 0.86rem; font-weight: 600; color: var(--ink-50); margin-top: 5px; }
.pg-h3 { font-family: Archivo, sans-serif; font-size: 1.08rem; color: var(--navy-800); margin: 34px 0 14px; }
.pg-h3 i { font-style: normal; font-size: 0.82rem; font-weight: 600; color: var(--ink-50); margin-left: 7px; }
.pg-tag {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  padding: 3px 11px; border-radius: 999px; background: rgba(202,165,87,0.18);
  font-family: Inter, sans-serif; font-size: 0.7rem; font-weight: 800; color: #8a6a1c;
}

/* --- 1. The fan: one input, three destinations --- */
.pg-fan { margin: 26px 0; }
.pg-fan-in { display: flex; justify-content: center; }
.pg-fan-arrow {
  width: 2px; height: 30px; margin: 0 auto; background: var(--line); position: relative;
}
.pg-fan-arrow::after {
  content: ""; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%);
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 7px solid var(--line);
}
.pg-fan-out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pg-box {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px 16px; text-align: center;
}
.pg-box b { display: block; font-size: 0.92rem; color: var(--navy-800); margin-bottom: 6px; }
.pg-box small { display: block; font-size: 0.78rem; line-height: 1.6; color: var(--ink-50); }
.pg-ic { display: block; font-size: 1.5rem; margin-bottom: 8px; }
.pg-box.is-start { border-color: var(--navy-800); border-width: 2px; min-width: 240px; }
.pg-box.is-a { border-top: 3px solid var(--blue-500); }
.pg-box.is-b { border-top: 3px solid #caa557; }
.pg-box.is-c { border-top: 3px solid #6b7280; }

/* --- Callouts --- */
.pg-note {
  background: rgba(45,107,255,0.05); border-left: 3px solid var(--blue-500);
  border-radius: 0 var(--r) var(--r) 0; padding: 16px 20px; margin: 22px 0;
}
.pg-note b { display: block; font-size: 0.86rem; color: var(--navy-800); margin-bottom: 6px; }
.pg-note p { margin: 0 0 4px; font-size: 0.92rem; line-height: 1.72; }
.pg-note p:last-child { margin-bottom: 0; }
.pg-note.is-warn { background: #fdf6ef; border-left-color: #c8871f; }
.pg-note.is-warn b { color: #8a5a10; }
.pg-note.is-good { background: #f0f7f2; border-left-color: #3f8c5c; }
.pg-note.is-good b { color: #2c6b43; }

/* The Korean echo riding inside an English label — quieter, and on its own
   line where the label is a block so the two languages never interleave. */
.pg-mini > b i, .pg-tab b i, .pg-half h3 i, .pg-faq summary i {
  display: block; font-style: normal; font-weight: 600;
  font-size: 0.84em; color: var(--ink-50); margin-top: 2px;
}
.pg-toc a i, .pg-life-do i {
  font-style: normal; font-weight: 600; font-size: 0.86em; color: var(--ink-50);
}
.pg-toc a i { display: block; margin-top: 1px; }
.pg-faq summary i { margin-top: 3px; font-weight: 600; }

/* --- Three small cards --- */
.pg-cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; }
.pg-mini {
  background: var(--paper-2); border-radius: var(--r); padding: 18px 16px;
}
.pg-mini b { display: block; font-size: 0.88rem; color: var(--navy-800); margin-bottom: 7px; }
.pg-mini p { margin: 0 0 6px; font-size: 0.86rem; line-height: 1.7; }

/* --- 2. Lifecycle --- */
.pg-life { list-style: none; margin: 26px 0 0; padding: 0; }
.pg-life-s { display: flex; gap: 16px; align-items: flex-start; }
.pg-life-dot {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  font-family: Archivo, sans-serif; font-weight: 800; font-size: 0.95rem;
  background: var(--paper-2); color: var(--ink-70); border: 2px solid var(--line);
}
.pg-life-body { flex: 1 1 auto; min-width: 0; padding-bottom: 4px; }
.pg-life-body > b { display: block; font-family: Archivo, sans-serif; font-size: 1.05rem; color: var(--navy-800); margin-bottom: 6px; }
.pg-life-body > b span { font-size: 0.8rem; font-weight: 600; color: var(--ink-50); margin-left: 6px; }
.pg-life-body p { margin: 0 0 5px; font-size: 0.92rem; line-height: 1.72; }
.pg-life-do {
  display: inline-block; margin-top: 8px; padding: 7px 13px; border-radius: 999px;
  background: rgba(45,107,255,0.08); font-size: 0.84rem; font-weight: 600; color: var(--navy-800);
}
.pg-life-note { margin-top: 10px !important; font-size: 0.88rem !important; color: var(--ink-70); }
.pg-life-s.is-new  .pg-life-dot { border-color: var(--blue-500); color: var(--blue-500); background: rgba(45,107,255,0.08); }
.pg-life-s.is-pray .pg-life-dot { border-color: var(--blue-500); color: #fff; background: var(--blue-500); }
.pg-life-s.is-arch .pg-life-dot { border-color: #caa557; color: #8a6a1c; background: rgba(202,165,87,0.16); }
.pg-life-s.is-bin  .pg-life-dot { border-color: #b0b6c0; color: var(--ink-50); }
.pg-life-s.is-gone .pg-life-dot { border-color: #d9b6b2; color: #b3261e; background: #fdf1f0; }

.pg-life-arrow {
  position: relative; margin: 6px 0 6px 18px; padding: 8px 0 8px 34px;
  border-left: 2px dashed var(--line);
}
.pg-life-arrow span {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: var(--paper-2); font-size: 0.78rem; font-weight: 700; color: var(--ink-50);
}
.pg-life-arrow.is-auto span { background: rgba(202,165,87,0.14); color: #8a6a1c; }
.pg-life-arrow.is-auto { border-left-style: solid; border-left-color: rgba(202,165,87,0.4); }

.pg-weeks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 4px; }
.pg-week { border-radius: var(--r); padding: 14px 15px; }
.pg-week b { display: block; font-size: 0.86rem; margin-bottom: 5px; }
.pg-week p { font-size: 0.85rem !important; line-height: 1.65 !important; }
.pg-week.is-w1 { background: rgba(45,107,255,0.07); }
.pg-week.is-w1 b { color: var(--blue-500); }
.pg-week.is-w2 { background: rgba(202,165,87,0.14); }
.pg-week.is-w2 b { color: #8a6a1c; }

/* --- 3. Login --- */
.pg-login { display: grid; grid-template-columns: 1fr 1.15fr; gap: 22px; align-items: start; margin: 24px 0; }
.pg-login-card {
  background: var(--navy-800); border-radius: var(--r-lg); padding: 24px 22px; color: #fff;
}
.pg-login-lbl {
  display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 5px;
}
.pg-code {
  display: block; margin-bottom: 18px; padding: 10px 13px; border-radius: 8px;
  background: rgba(255,255,255,0.1); font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.92rem; color: #fff; word-break: break-all;
}
.pg-code:last-child { margin-bottom: 0; }
.pg-code.is-empty { font-family: inherit; font-size: 0.84rem; color: rgba(255,255,255,0.6); }

.pg-steps { margin: 0; padding-left: 20px; }
.pg-steps li { margin-bottom: 11px; font-size: 0.92rem; line-height: 1.7; }
.pg-steps li b { color: var(--navy-800); }
.pg-steps .pg-ko, .pg-steps .pg-en { display: block; margin-top: 2px; }
.pg-steps.is-big li { margin-bottom: 16px; }

/* --- 4. Card anatomy --- */
.pg-demo { margin: 22px 0; }
.pg-demo-cap { display: block; font-size: 0.78rem; font-weight: 700; color: var(--ink-50); margin-bottom: 8px; }
.pg-row {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--blue-500);
  border-radius: var(--r); padding: 11px 14px; font-size: 0.9rem;
}
.pg-r2 { color: var(--navy-800); white-space: nowrap; }
.pg-r3 { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-50); font-size: 0.86rem; }
.pg-r4 {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px 2px 2px; border-radius: 999px; background: rgba(45,107,255,0.08);
  font-size: 0.74rem; font-weight: 700; color: var(--blue-500); white-space: nowrap;
}
.pg-r4 i, .pg-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; background: var(--blue-500);
  color: #fff; font-style: normal; font-size: 0.68rem; font-weight: 800;
}
.pg-r5, .pg-daydemo {
  flex: none; padding: 2px 9px; border-radius: 999px;
  background: rgba(202,165,87,0.18); color: #8a6a1c;
  font-size: 0.7rem; font-weight: 800; white-space: nowrap;
}
.pg-r6 { flex: none; font-size: 0.76rem; color: var(--ink-50); }
.pg-r7 { flex: none; color: var(--ink-50); }

.pg-legend { list-style: none; margin: 14px 0 0; padding: 0; }
.pg-legend li {
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
  padding: 8px 4px; border-bottom: 1px solid var(--line); font-size: 0.88rem;
}
.pg-legend li > span:first-child {
  flex: none; min-width: 120px; font-weight: 700; color: var(--navy-800);
}
.pg-legend i { font-style: normal; font-size: 0.8rem; color: var(--ink-50); }

.pg-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.pg-tab { border-radius: var(--r); padding: 15px 14px; background: var(--paper-2); border-top: 3px solid var(--line); }
.pg-tab b { display: block; font-size: 0.86rem; color: var(--navy-800); margin-bottom: 6px; }
.pg-tab p { margin: 0 0 4px; font-size: 0.8rem; line-height: 1.6; }
.pg-tab.is-new  { border-top-color: var(--blue-500); }
.pg-tab.is-pray { border-top-color: var(--blue-500); }
.pg-tab.is-ans  { border-top-color: #caa557; }
.pg-tab.is-arch { border-top-color: #b0b6c0; }
.pg-tab.is-bin  { border-top-color: #d9b6b2; }

/* --- 5. Buttons --- */
.pg-btns { margin: 22px 0; }
.pg-btn-row {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.pg-btn-demo {
  flex: none; width: 190px; text-align: center;
  padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; font-size: 0.79rem; font-weight: 700; color: var(--navy-800);
}
.pg-btn-demo i { font-style: normal; font-weight: 600; font-size: 0.86em; color: var(--ink-50); }
.pg-btn-demo.is-go { border-color: var(--blue-500); color: var(--blue-500); }
.pg-btn-demo.is-danger { color: #b3261e; }
.pg-btn-row p { margin: 0 0 4px; font-size: 0.92rem; line-height: 1.72; }

/* --- 7. Two halves --- */
.pg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 24px 0; }
.pg-half {
  background: var(--paper-2); border-radius: var(--r-lg); padding: 24px 22px;
}
.pg-half-ic { display: block; font-size: 1.7rem; margin-bottom: 10px; }
.pg-half h3 { font-family: Archivo, sans-serif; font-size: 1.05rem; color: var(--navy-800); margin: 0 0 10px; }
.pg-half h3 i { font-style: normal; font-size: 0.8rem; font-weight: 600; color: var(--ink-50); margin-left: 7px; }
.pg-half .pg-steps { margin-top: 12px; }
.pg-half .pg-steps li { margin-bottom: 7px; font-size: 0.88rem; }
.pg-half .pg-steps .pg-ko { font-size: 0.8rem; }
.pg-ul { margin: 10px 0; padding-left: 18px; }
.pg-ul li { margin-bottom: 8px; font-size: 0.9rem; line-height: 1.7; }

/* --- 9. FAQ --- */
.pg-faq { margin-top: 20px; }
.pg-faq details { border-bottom: 1px solid var(--line); }
.pg-faq summary {
  list-style: none; cursor: pointer; padding: 15px 30px 15px 0; position: relative;
  font-size: 0.95rem; font-weight: 700; color: var(--navy-800);
}
.pg-faq summary::-webkit-details-marker { display: none; }
.pg-faq summary::after {
  content: ""; position: absolute; right: 6px; top: 20px;
  width: 8px; height: 8px; border-right: 2px solid var(--ink-50); border-bottom: 2px solid var(--ink-50);
  transform: rotate(45deg); transition: transform .18s ease;
}
.pg-faq details[open] summary::after { transform: rotate(-135deg); }
.pg-faq details p { margin: 0 0 10px; padding-right: 20px; font-size: 0.92rem; line-height: 1.75; }

/* --- Closing --- */
.pg-end {
  text-align: center; padding: 40px 24px; margin-top: 20px;
  background: var(--paper-2); border-radius: var(--r-lg);
}
.pg-verse { font-family: Archivo, sans-serif; font-size: 1.2rem; color: var(--navy-800); margin: 0 0 6px; }
.pg-verse span { display: block; font-size: 0.8rem; font-weight: 600; color: var(--ink-50); margin-top: 6px; }
.pg-end-p { font-size: 0.94rem; line-height: 1.8; margin: 18px 0 2px; }
.pg-end .btn { margin-top: 20px; }

@media (max-width: 860px) {
  .pg-fan-out, .pg-cards3, .pg-two, .pg-login, .pg-weeks { grid-template-columns: 1fr; }
  .pg-tabs { grid-template-columns: repeat(2, 1fr); }
  .pg-login-card { order: -1; }
}
@media (max-width: 560px) {
  .pg-btn-row { flex-direction: column; gap: 10px; }
  .pg-btn-demo { width: auto; align-self: flex-start; }
  .pg-tabs { grid-template-columns: 1fr; }
  .pg-row { flex-wrap: wrap; row-gap: 6px; }
  .pg-r3 { flex-basis: 100%; order: 9; }
  .pg-legend li > span:first-child { min-width: 0; flex-basis: 100%; }
  .pg-life-s { gap: 12px; }
}
/* The guide is printed and handed out as often as it is read on screen. */
@media print {
  .pg-toc-go, .pg-end .btn, .site-header, .site-footer, .kfab-wrap, .vfab-wrap { display: none !important; }
  .pg-block { page-break-inside: avoid; margin-bottom: 34px; }
  .pg-faq details { open: true; }
  .pg-faq details p { display: block !important; }
}

/* The seminary link inside the discipleship tools column. */
.dj-link { color: var(--blue-500); font-weight: 700; }
.dj-link:hover { text-decoration: underline; text-underline-offset: 2px; }

/* The assistant's three capabilities, inline under the Ask heading — the
   compact remains of the old "Here to Help You Grow" card section. */
.ask-feats {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: 8px 10px; margin: 18px 0 0; padding: 0;
}
.ask-feats li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line);
  font-size: 0.82rem; font-weight: 700; color: var(--navy-800);
}
.ask-feats .ic { color: var(--blue-500); font-size: 0.9rem; }
.ask-feats em { font-style: normal; font-weight: 600; font-size: 0.76rem; color: var(--ink-50); }

/* ---------- Truths of the Bible — weekly Zoom study (Ministries page) ---------- */
.twb-sec { padding-top: 0; }
.twb-grid {
  display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(30px, 4.6vw, 68px);
  align-items: center;
}
.twb-poster {
  margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow);
  background: var(--paper-2);
}
.twb-poster img { display: block; width: 100%; height: auto; }
.twb-when { display: grid; gap: 4px; margin: 26px 0 30px; }
.twb-when > div {
  display: grid; grid-template-columns: 100px 1fr; gap: 18px;
  padding: 16px 0; border-bottom: 1px solid var(--line); align-items: start;
}
.twb-when > div:first-child { border-top: 1px solid var(--line); }
.twb-when dt {
  font-family: Archivo, sans-serif; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-50); padding-top: 3px;
}
.twb-when dd { margin: 0; font-size: 0.98rem; font-weight: 600; color: var(--navy-800); }
.twb-join { display: inline-flex; }

@media (max-width: 860px) {
  .twb-grid { grid-template-columns: 1fr; }
  .twb-poster { max-width: 360px; margin: 0 auto; }
}

/* =====================================================================
   Events — /events-list/, single event, and the home strip
   The strip became a link, so it needs hover and focus states it never
   had as a static div.
   ===================================================================== */
a.event-strip { text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
a.event-strip:hover { transform: translateY(-2px); }
a.event-strip:hover .ev-link { color: #fff; border-bottom-color: #fff; }
a.event-strip:focus-visible { outline: 2px solid #e3c79c; outline-offset: 3px; }
.event-strip .ev-link { cursor: pointer; }

/* A narrower measure for reading-shaped pages. */
.wrap-narrow { max-width: 880px; }

/* --- The list --- */
/* Two kinds of row share this look: a <details> that opens in place on the
   events page, and a plain link in the "also coming" list. The frame is shared;
   only what carries the grid differs, since a grid on <details> itself would
   lay the open panel out as a third column. */
.ev-list { border-top: 1px solid var(--line); }
.ev-row {
  border-bottom: 1px solid var(--line); text-decoration: none;
  transition: background .3s var(--ease);
}
a.ev-row, .ev-sum-line {
  display: grid; grid-template-columns: 68px 1fr 28px; gap: clamp(14px, 2.4vw, 26px);
  align-items: center; padding: clamp(16px, 2.2vw, 22px) 4px;
}
.ev-sum-line { cursor: pointer; list-style: none; }
.ev-sum-line::-webkit-details-marker { display: none; }
.ev-row:hover { background: rgba(15,22,32,0.025); }
.ev-row:hover .ev-h { color: var(--blue-500); }
.ev-sum-line:focus-visible { outline: 2px solid var(--blue-500); outline-offset: -2px; border-radius: var(--r); }

/* The picture, when there is one. Square so it survives the crop at this size —
   a poster shrunk to 68px is a sliver of a poster. */
.ev-thumb { width: 68px; height: 68px; border-radius: var(--r); overflow: hidden; background: var(--paper-2); }
.ev-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ev-row.is-past .ev-thumb img { filter: grayscale(0.5); opacity: 0.72; }

/* The opened panel. */
.ev-open { padding: 2px 4px 26px 4px; }
.ev-open .ev-sum { display: block; margin: 0 0 18px; font-size: 0.95rem; line-height: 1.7; color: var(--ink-70); }
.ev-facts-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-bottom: 20px; }
.ev-fm { padding: 13px 16px; border-radius: var(--r); background: var(--paper-2); border-left: 3px solid var(--blue-500); }
.ev-fm-l {
  display: block; font-family: Archivo, sans-serif; font-size: 0.64rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-50); margin-bottom: 5px;
}
.ev-fm b { display: block; font-size: 0.95rem; color: var(--navy-800); }
.ev-fm-ko { display: block; font-size: 0.83rem; color: var(--ink-50); margin-top: 2px; }
.ev-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
@media (max-width: 600px) {
  .ev-open { padding-left: 0; padding-right: 0; }
  .ev-actions .btn { flex: 1 1 100%; text-align: center; }
}
/* The date block is the anchor — people scan events by date first. */
.ev-cal {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 68px; padding: 9px 0; border-radius: var(--r);
  background: var(--navy-800); color: #fff; line-height: 1;
}
.ev-cal b {
  font-family: Archivo, sans-serif; font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-400);
}
.ev-cal i { font-style: normal; font-family: Archivo, sans-serif; font-size: 1.5rem; font-weight: 800; margin-top: 3px; }
.ev-main { min-width: 0; }
.ev-h {
  display: block; font-family: Archivo, sans-serif;
  font-size: clamp(1.02rem, 1.7vw, 1.2rem); font-weight: 700; color: var(--navy-800);
  transition: color .25s var(--ease);
}
.ev-h-ko { display: block; font-family: inherit; font-size: 0.88rem; font-weight: 600; color: var(--ink-50); margin-top: 3px; }
.ev-meta { display: block; margin-top: 7px; font-size: 0.84rem; font-weight: 600; color: var(--blue-500); }
.ev-meta-ko { display: block; font-weight: 500; color: var(--ink-50); margin-top: 2px; }
.ev-sum { display: block; margin-top: 9px; font-size: 0.9rem; line-height: 1.65; color: var(--ink-70); }
.ev-sum-ko { display: block; font-size: 0.86rem; color: var(--ink-50); margin-top: 3px; }
.ev-go { color: var(--ink-50); display: flex; justify-content: flex-end; }
.ev-row:hover .ev-go { color: var(--blue-500); }
/* A past event should read as past without becoming unreadable. */
.ev-row.is-past .ev-cal { background: var(--paper-2); color: var(--ink-50); }
.ev-row.is-past .ev-cal b { color: var(--ink-50); }
.ev-row.is-past .ev-h { color: var(--ink-70); }
.ev-row.is-past .ev-meta { color: var(--ink-50); }

.ev-empty {
  padding: 26px 22px; border-radius: var(--r-lg); background: var(--paper-2);
  font-size: 0.95rem; line-height: 1.7; color: var(--ink-70);
}

/* --- Past-events fold --- */
.ev-fold { margin-top: 40px; }
.ev-fold-t {
  display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
  padding: 14px 18px; background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r);
  font-family: Archivo, sans-serif; font-weight: 700; font-size: 1rem; color: var(--navy-800);
}
.ev-fold-t::-webkit-details-marker { display: none; }
.ev-fold-t i { font-style: normal; font-weight: 600; font-size: 0.86em; color: var(--ink-50); }
.ev-fold-t b { color: var(--blue-500); }
.ev-caret {
  order: 9; margin-left: auto; flex: none; width: 9px; height: 9px;
  border-right: 2px solid var(--ink-50); border-bottom: 2px solid var(--ink-50);
  transform: rotate(45deg) translateY(-2px); transition: transform .18s ease;
}
.ev-fold[open] .ev-caret,
.ev-row[open] .ev-caret { transform: rotate(-135deg) translateY(-1px); }
.ev-fold-body { padding-top: 18px; }

/* --- Single event --- */
.ev-single-top { padding-top: clamp(40px, 5vw, 68px); }
.ev-back { margin: 0 0 22px; font-size: 0.86rem; font-weight: 700; }
.ev-back a { color: var(--ink-50); }
.ev-back a:hover { color: var(--blue-500); }
.ev-ko-i { font-style: normal; font-weight: 600; font-size: 0.9em; opacity: 0.72; }
.ev-past-note {
  margin: 0 0 22px; padding: 12px 18px; border-radius: var(--r);
  background: var(--paper-2); color: var(--ink-70); font-size: 0.9rem; font-weight: 600;
}
.ev-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px; margin: 30px 0;
}
.ev-fact {
  padding: 18px 20px; border-radius: var(--r-lg);
  background: var(--paper-2); border-left: 3px solid var(--blue-500);
}
.ev-fact-l {
  display: block; font-family: Archivo, sans-serif; font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-50); margin-bottom: 7px;
}
.ev-fact b { display: block; font-size: 1.02rem; color: var(--navy-800); }
.ev-fact-ko { display: block; font-size: 0.86rem; color: var(--ink-50); margin-top: 3px; }
/* Posters come in every shape — a square card, a portrait flyer, a roll-up
   banner that is two and a half times taller than it is wide. Cap the height
   so a tall one does not turn the page into a corridor. */
.ev-poster { margin: 30px 0; text-align: center; }
.ev-poster img {
  display: block; margin: 0 auto; max-width: 100%; width: auto; height: auto;
  max-height: 760px; border-radius: var(--r-lg);
}
.ev-body { margin: 30px 0; font-size: 1rem; line-height: 1.85; color: var(--ink-70); }
.ev-body p { margin: 0 0 1em; }
.ev-body a { color: var(--blue-500); text-decoration: underline; text-underline-offset: 3px; }
.ev-body h2, .ev-body h3 { font-family: Archivo, sans-serif; color: var(--navy-800); margin: 1.6em 0 .5em; }
.ev-body img { max-width: 100%; height: auto; border-radius: var(--r); }
.ev-body ul, .ev-body ol { margin: 0 0 1em; padding-left: 22px; }
.ev-body ul { list-style: disc; }
.ev-body ol { list-style: decimal; }
.ev-body li { list-style: inherit; }
.ev-body li { margin-bottom: 7px; }
.ev-cta { margin: 34px 0 0; }

@media (max-width: 600px) {
  a.ev-row, .ev-sum-line { grid-template-columns: 56px 1fr 16px; gap: 14px; }
  .ev-cal, .ev-thumb { width: 56px; }
  .ev-thumb { height: 56px; }
  .ev-cal i { font-size: 1.25rem; }
  .ev-go { display: none; }
  a.ev-row { grid-template-columns: 56px 1fr; }
}