/* New Life Vision Church — the only stylesheet.
   Ported from the approved mockup "02 Four-Block Bento" (Bento.tpl.html) and
   EventPoster1-3.dc.html: every inline style became a class, values unchanged. */

:root {
  --f-head: 'Space Grotesk', 'IBM Plex Sans Thai', 'IBM Plex Sans KR', sans-serif;
  --f-body: 'IBM Plex Sans Thai', 'IBM Plex Sans KR', sans-serif;
  --f-latin: 'Space Grotesk', sans-serif;
  --lh-body: 1.65;
  --lh-display: 1.1;
  --lh-verse: 1.5;
  --lh-article: 1.75;
}
html[lang="th"] {
  --lh-body: 1.75;
  --lh-display: 1.3;
  --lh-verse: 1.7;
  --lh-article: 1.85;
}

/* ---------- base (mockup <helmet><style>) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: #FAFAF7; }
body { margin: 0; background: #FAFAF7; }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
/* :where() keeps these as weak as the mockup's tag rules, which its inline colors always beat. */
a { color: #17734B; }
a:where(:hover) { color: #16181D; }
a, button { transition: opacity .2s ease, background-color .2s ease, color .2s ease, text-decoration-color .2s ease; }
a, button { cursor: pointer; }
:focus-visible { outline: 2px solid #1F8A5B; outline-offset: 3px; }
main:focus { outline: none; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 10; padding: 12px 18px; border-radius: 12px; background: #16181D; color: #FAFAF7; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; color: #FAFAF7; }
.hov:hover { opacity: .86; }
.ul:hover { text-decoration-color: currentColor !important; }
.navlink:hover { color: #17734B !important; }
.flink:hover { color: #2FA36B !important; }
svg { flex: none; }
.min0 { min-width: 0; }

.page {
  position: relative;
  padding-bottom: 20px;
  background: #FAFAF7;
  color: #16181D;
  font-family: var(--f-body);
  font-size: 16px;
  line-height: var(--lh-body);
  word-break: normal;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
html[lang="ko"] .page { word-break: keep-all; }

.wrap { max-width: 1304px; margin: 20px auto 0; padding: 0 32px; }
.blk { border-radius: 20px; }

/* ---------- header ---------- */
.site-header { margin: 0 auto; padding: 20px 32px 0; }
.hdr { display: flex; align-items: center; gap: 24px; min-height: 76px; padding: 10px 10px 10px 20px; border: 1px solid #DCDCD4; border-radius: 20px; background: #FFFFFF; }
.brand { display: inline-flex; align-items: center; min-height: 44px; flex: none; color: #16181D; text-decoration: none; }
.brand img { width: 159px; height: 42px; }
.nav { margin-left: auto; min-width: 0; }
.nav-list { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.navlink { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 12px; color: #16181D; font-size: 15px; font-weight: 500; white-space: nowrap; text-decoration: none; }
.navlink[aria-current="page"] { color: #17734B; }

/* language switcher (header: light; footer: dark) */
.lg { display: flex; gap: 4px; flex: none; padding: 4px; border-radius: 14px; background: #EFEFEA; }
.lg-link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 10px; background: transparent; color: #16181D; font-family: var(--f-body); font-size: 14px; font-weight: 500; line-height: 1; text-decoration: none; }
.lg-link[aria-current="true"] { background: #16181D; color: #FAFAF7; }
.lg--dark { display: inline-flex; margin-top: 16px; background: #1F2229; }
.lg-link--dark { color: #FAFAF7; }
.lg-link--dark[aria-current="true"] { background: #FAFAF7; color: #16181D; }

/* ---------- shared bits ---------- */
.ic-none { flex: none; }
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px; border-radius: 12px; font-weight: 600; text-decoration: none; }
.btn-light { background: #FAFAF7; color: #16181D; }
.btn-ink { background: #16181D; color: #FAFAF7; }
.btn-48 { gap: 8px; min-height: 48px; padding: 0 20px; }
.btn-dark { border: 1px solid #2E323B; background: #1F2229; color: #FAFAF7; }
.btn-outline { min-height: 48px; padding: 0 20px; border: 1px solid #16181D; color: #16181D; }
.ul { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; text-decoration: underline; text-underline-offset: 6px; }
.ul-dark { color: #FAFAF7; text-decoration-color: #2FA36B; text-decoration-thickness: 2px; }
.ul-8 { text-underline-offset: 8px; }
.ul-green { color: #17734B; text-decoration-color: transparent; }
.foot-link { margin: auto 0 0; padding-top: 24px; }
.sec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; }
.sec-title { margin: 0; font-family: var(--f-head); font-size: 30px; font-weight: 600; line-height: 1.3; }
.meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 14px; }
.tag { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 8px; background: #E6F2EC; color: #17734B; font-weight: 600; }
.tag-ink { background: #16181D; color: #FAFAF7; }
.meta-date { font-family: var(--f-head); color: #4B5160; }
.ph { position: relative; }
.ph-cap { position: absolute; font-size: 13px; }
.ph-cap--dark { left: 16px; bottom: 14px; color: #B8BCC6; }
.ph-cap--light { left: 20px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; color: #4B5160; }
.card { padding: 36px; border: 1px solid #DCDCD4; background: #FFFFFF; }
/* Stretched link: the whole card is the touch target. */
.stretch::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }

/* ---------- event block ---------- */
.event { margin-top: 20px; }
.ev-blk { padding: 44px 48px; background: #16181D; color: #FAFAF7; }
.evin { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 3fr); gap: 32px 48px; }
.ev-c1 { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.ev-badge-p { margin: 0; }
.ev-badge { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; padding: 0 14px; border: 1px solid #2FA36B; border-radius: 999px; color: #2FA36B; font-size: 14px; font-weight: 500; line-height: 1.4; }
.ev-badge-dot { width: 8px; height: 8px; border-radius: 2px; background: #2FA36B; }
.num { margin: 0; font-family: var(--f-latin); font-size: 176px; font-weight: 600; line-height: 0.8; color: #FAFAF7; }
.ev-dday { margin: 18px 0 0; font-family: var(--f-head); font-size: 26px; font-weight: 600; line-height: 1.3; color: #2FA36B; }
.ev-edition { margin: 0; font-size: 15px; color: #B8BCC6; }
.ev-title { margin: 10px 0 0; font-family: var(--f-head); font-size: clamp(32px, 3.4vw, 48px); font-weight: 600; line-height: var(--lh-display); }
.ev-t1, .ev-t2 { display: block; }
.ev-t2 { color: #2FA36B; }
.in2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ev-info { gap: 12px; list-style: none; margin: 28px 0 0; padding: 0; }
.ev-info li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 12px; background: #1F2229; }
.ev-ic { flex: none; margin-top: 3px; color: #2FA36B; }
.ev-wt { display: block; font-weight: 600; }
.ev-wtime { font-family: var(--f-head); }
.ev-c3 { display: flex; flex-direction: column; gap: 12px; }
.ev-call { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; padding: 12px 20px; border-radius: 14px; background: #2FA36B; color: #16181D; font-weight: 600; text-decoration: none; }
.ev-call-txt { display: flex; flex-direction: column; line-height: 1.35; }
.ev-call-num { font-family: var(--f-latin); font-size: 19px; }
.ev-mail { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px; border: 1px solid #2E323B; border-radius: 14px; background: #1F2229; color: #FAFAF7; text-decoration: none; }
.ev-mail-txt { min-width: 0; overflow-wrap: anywhere; }
.ev-contact { margin: auto 0 0; font-size: 14px; color: #B8BCC6; }
.ev-posters { margin-top: 20px; }
.posters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.poster-card { min-width: 0; overflow: hidden; border-radius: 20px; background: #16181D; }
/* TH/EN poster copy runs a little taller than 2:3; stretch every poster in a row to the
   tallest one (spacers absorb it) instead of showing the card background under shorter ones. */
.poster-card, .ep { display: grid; grid-template-columns: minmax(0, 1fr); }
.ep article { align-self: stretch; }

/* ---------- bento grids ---------- */
.bento { display: grid; gap: 20px; }
.bento-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bento-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: 20px; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }

/* hero (#about) */
.hero { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 400px; padding: 48px; background: #16181D; color: #FAFAF7; }
.hero-eyebrow { margin: 0; font-size: 16px; font-weight: 500; color: #B8BCC6; }
.hero-title { margin: 16px 0 0; font-family: var(--f-head); font-size: clamp(40px, 4.6vw, 66px); font-weight: 600; line-height: var(--lh-display); }
.hero-sub { margin: 20px 0 0; max-width: 500px; font-size: 18px; color: #B8BCC6; }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }

/* verse leaf (mockup #1F8A5B is for graphics only; white text needs the text-safe #17734B) */
.leaf { display: flex; flex-direction: column; justify-content: center; min-height: 400px; margin: 0; padding: 56px 72px; border-radius: 160px 20px 160px 20px; background: #17734B; color: #FFFFFF; }
.leaf-verse { margin: 0; font-size: clamp(24px, 2.1vw, 30px); font-weight: 500; line-height: var(--lh-verse); }
.leaf-ref { margin-top: 28px; font-family: var(--f-head); font-size: 24px; font-weight: 600; line-height: 1.3; }

/* latest sermon */
.sermon { display: flex; flex-direction: column; min-height: 540px; padding: 20px; border-radius: 20px; background: #16181D; color: #FAFAF7; }
.sermon-ph { display: flex; align-items: center; justify-content: center; height: 280px; border-radius: 12px; background: #2A2E36; }
.play { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: #FAFAF7; color: #16181D; }
.sermon-body { padding: 28px 24px 12px; }
.sermon-label { margin: 0; font-size: 15px; font-weight: 500; color: #2FA36B; }
.sermon-title { margin: 10px 0 0; font-family: var(--f-head); font-size: clamp(26px, 2.3vw, 32px); font-weight: 600; line-height: 1.3; }
.sermon-meta { margin: 12px 0 0; font-size: 15px; color: #B8BCC6; }
.sermon-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* worship times */
.worship { display: flex; flex-direction: column; min-height: 540px; padding: 44px 48px; background: #16181D; color: #FAFAF7; }
.worship-title { margin: 0; font-family: var(--f-head); font-size: clamp(28px, 2.4vw, 34px); font-weight: 600; line-height: 1.3; }
.worship-sub { margin: 10px 0 0; font-size: 15px; color: #B8BCC6; }
.worship-list { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid #2E323B; }
.worship-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; padding: 20px 0; border-bottom: 1px solid #2E323B; }
.w-name, .w-time { font-family: var(--f-head); font-size: 20px; line-height: 1.35; }
.w-name { font-weight: 600; }
.w-time { font-weight: 500; color: #2FA36B; text-align: right; }
.w-day, .w-place { font-size: 15px; color: #B8BCC6; }
.w-place { text-align: right; }

/* news */
.news-list { gap: 16px; list-style: none; margin: 20px 0 0; padding: 0; }
.news-item { padding: 22px 22px 26px; border-radius: 14px; background: #FAFAF7; }
.news-title { margin: 14px 0 0; font-family: var(--f-head); font-size: 20px; font-weight: 600; line-height: 1.4; }
.news-sum { margin: 8px 0 0; font-size: 15px; color: #4B5160; }

/* sermon archive */
.archive { display: flex; flex-direction: column; }
.archive-series { margin: 4px 0 0; font-size: 15px; color: #4B5160; }
.archive-list { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.archive-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 20px 16px 20px 22px; border-radius: 14px; background: #FAFAF7; }
.archive-meta { margin: 0; font-family: var(--f-head); font-size: 14px; color: #4B5160; }
.archive-title { margin: 6px 0 0; font-family: var(--f-head); font-size: 20px; font-weight: 600; line-height: 1.4; }
.archive-play { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: #16181D; color: #FAFAF7; }

/* daily column on home */
.col-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px 28px; margin-top: 20px; }
.col-grid--single { grid-template-columns: minmax(0, 1fr); }
.col-title { margin: 16px 0 0; font-family: var(--f-head); font-size: 28px; font-weight: 600; line-height: 1.3; }
.col-ref { margin: 8px 0 0; font-family: var(--f-head); font-size: 15px; font-weight: 600; color: #17734B; }
.col-excerpt { margin: 16px 0 0; font-size: 17px; }
.col-author { margin: 14px 0 0; font-size: 15px; color: #4B5160; }
.col-more { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 0 28px; }
.col-side { display: flex; flex-direction: column; gap: 12px; }
.col-prev { display: flex; flex-direction: column; gap: 12px; list-style: none; margin: 0; padding: 0; }
.col-prev-item { position: relative; padding: 18px 20px; border-radius: 14px; background: #FAFAF7; }
.col-prev-date { display: block; font-family: var(--f-head); font-size: 14px; color: #4B5160; }
.col-prev-title { margin: 6px 0 0; font-family: var(--f-head); font-size: 18px; font-weight: 600; line-height: 1.4; }
.col-prev-title .navlink, .col-index-title .navlink { display: inline; min-height: 0; padding: 0; border-radius: 0; font-size: inherit; font-weight: inherit; white-space: normal; }
.col-side-foot { margin: auto 0 0; }

/* welcome */
.welcome { display: flex; flex-direction: column; padding: 36px; background: #E6F2EC; }
.welcome-body { margin: 12px 0 0; font-size: 17px; }
.steps { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 24px 0 0; padding: 0; }
.steps li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: 14px; background: #FFFFFF; }
.step-num { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 8px; background: #16181D; color: #FAFAF7; font-family: var(--f-latin); font-size: 15px; font-weight: 600; }
.step-text { padding-top: 3px; }

/* ministries */
.in3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.min-list { gap: 16px; list-style: none; margin: 20px 0 0; padding: 0; }
.min-photo { min-height: 168px; border-radius: 72px 14px 72px 14px; background: #EFEFEA; }
.min-item { min-height: 168px; padding: 22px 24px; border-radius: 14px; background: #FAFAF7; }
.min-num { display: block; font-family: var(--f-latin); font-size: 13px; letter-spacing: 0.12em; color: #4B5160; }
.min-name { margin: 10px 0 0; font-family: var(--f-head); font-size: 22px; font-weight: 600; line-height: 1.35; }
.min-desc { margin: 6px 0 0; font-size: 15px; color: #4B5160; }

/* visit */
.visit-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px 28px; }
.visit-dl { margin: 20px 0 0; }
.visit-dl > div { padding: 12px 0; border-bottom: 1px solid #DCDCD4; }
.visit-dl dt { font-size: 14px; color: #4B5160; }
.visit-dl dd { margin: 2px 0 0; }
.visit-ko { word-break: keep-all; }
/* Inline links with a 44px+ hit area that does not change the row height. */
.dd-link { display: inline-block; padding: 9px 0; margin: -9px 0; }
.map-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; }
.map { position: relative; display: flex; align-items: center; justify-content: center; min-height: 320px; border-radius: 14px; background: #EFEFEA; }
.map-pin { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 14px; background: #16181D; color: #FAFAF7; }
.map-cap { position: absolute; left: 18px; bottom: 14px; font-size: 13px; color: #4B5160; }

/* giving */
.give { display: flex; flex-direction: column; padding: 36px; background: #16181D; color: #FAFAF7; }
.give-leaf { color: #2FA36B; }
.give-title { margin-top: 20px; }
.give-body { margin: 12px 0 0; color: #B8BCC6; }
.give-account { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border: 1px solid #2E323B; border-radius: 12px; background: #1F2229; font-family: var(--f-head); font-size: 17px; font-weight: 500; }
.give-account .ev-ic { margin-top: 0; }

/* ---------- footer ---------- */
.ft-blk { padding: 48px; background: #16181D; color: #FAFAF7; }
.ft { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
.ft-brand { display: inline-flex; align-items: center; min-height: 44px; color: #FAFAF7; text-decoration: none; }
.ft-brand img { width: 160px; height: 54px; }
.ft-tagline { margin: 20px 0 0; font-family: var(--f-head); font-size: 22px; font-weight: 600; line-height: 1.35; }
.ft-name { margin: 6px 0 0; color: #B8BCC6; }
.ft-h { margin: 0; font-size: 14px; font-weight: 500; color: #B8BCC6; }
.ft-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; list-style: none; margin: 10px 0 0; padding: 0; }
.flink { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; color: #FAFAF7; text-decoration: none; }
.ft-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 48px; padding-top: 24px; border-top: 1px solid #2E323B; font-size: 14px; color: #B8BCC6; }
.ft-bottom p { margin: 0; }
.ft-bottom .ft-scripture { flex-basis: 100%; font-size: 13px; }

/* ---------- column list + detail ---------- */
.stack { margin-top: 20px; }
.page-title { margin: 0; font-family: var(--f-head); font-size: clamp(32px, 3.4vw, 48px); font-weight: 600; line-height: var(--lh-display); }
.col-page { padding: 48px; }
.col-index { display: flex; flex-direction: column; gap: 16px; list-style: none; margin: 28px 0 0; padding: 0; }
.col-index-item { position: relative; padding: 26px 28px 28px; border-radius: 14px; background: #FAFAF7; }
.col-index-title { margin: 14px 0 0; font-family: var(--f-head); font-size: 24px; font-weight: 600; line-height: 1.35; }
.col-index-excerpt { margin: 10px 0 0; max-width: 68ch; font-size: 16px; color: #4B5160; }
.article { padding: 56px 48px 64px; }
.article-inner { max-width: 68ch; margin: 0 auto; }
.article-back { margin: 0 0 20px; }
.article-back .ul { gap: 8px; }
.article-title { margin: 16px 0 0; font-family: var(--f-head); font-size: clamp(30px, 3.2vw, 44px); font-weight: 600; line-height: var(--lh-display); }
.article-ref { font-size: 16px; }
.prose { margin-top: 36px; font-size: 18px; line-height: var(--lh-article); }
.prose > * { margin: 0; }
.prose > * + * { margin-top: 1.1em; }
.b-p, .b-quote p, .b-verse-line, .b-prayer p { white-space: pre-line; }
.b-quote { margin-left: 0; margin-right: 0; padding: 4px 0; font-family: var(--f-head); font-size: 21px; font-weight: 600; line-height: 1.5; color: #17734B; }
html[lang="th"] .b-quote { line-height: 1.8; }
.b-quote p { margin: 0; }
.prose > .b-quote, .prose > .b-verse, .prose > .b-prayer { margin-top: 1.6em; }
.prose > .b-quote + *, .prose > .b-verse + *, .prose > .b-prayer + * { margin-top: 1.6em; }
.b-verse { padding: 26px 30px 24px; border-radius: 40px 14px 40px 14px; background: #E6F2EC; }
.b-verse-text { margin: 0; }
.b-verse-line { margin: 0; font-size: 18px; font-weight: 500; }
.b-verse-line + .b-verse-line { margin-top: 0.4em; }
.vn { margin-right: 6px; font-family: var(--f-latin); font-size: 0.72em; font-weight: 600; color: #17734B; vertical-align: super; line-height: 0; }
.b-verse-ref { margin-top: 14px; font-family: var(--f-head); font-size: 15px; font-weight: 600; color: #17734B; }
.b-verse-ver { font-weight: 500; color: #4B5160; }
.b-prayer { display: flex; align-items: flex-start; gap: 16px; padding: 28px 30px; border-radius: 20px; background: #16181D; color: #FAFAF7; }
.b-prayer-leaf { flex: none; margin-top: 4px; color: #2FA36B; }
.b-prayer-body { min-width: 0; }
.b-prayer-h { margin: 0 0 6px; font-family: var(--f-head); font-size: 1em; font-weight: 600; line-height: inherit; color: #2FA36B; }
.b-prayer p { margin: 0; }

/* ---------- root language router ---------- */
.router-main { display: flex; align-items: center; justify-content: center; min-height: 80vh; }
.router-card { display: flex; flex-direction: column; align-items: center; gap: 32px; padding: 48px; }
.router-langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; list-style: none; margin: 0; padding: 0; }

/* ---------- event posters (container-query scaled, 2:3) ---------- */
.ep { width: 100%; container-type: inline-size; }
.ep[lang="ko"] { font-family: 'IBM Plex Sans KR', 'Space Grotesk', sans-serif; }
.ep[lang="th"] { font-family: 'IBM Plex Sans Thai', 'Space Grotesk', sans-serif; }
.ep[lang="en"] { font-family: 'Space Grotesk', 'IBM Plex Sans Thai', sans-serif; }
.ep article { position: relative; width: 100%; aspect-ratio: 2 / 3; box-sizing: border-box; display: flex; flex-direction: column; word-break: normal; overflow-wrap: break-word; }
.ep[lang="ko"] article { word-break: keep-all; }
.ep-deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ep-deco > svg { position: absolute; display: block; }
.ep-rel { position: relative; }
.ep-min0 { min-width: 0; }
.ep-sp { flex: 1 1 0; min-height: 1.6cqw; }
.ep-sp13 { flex: 1.3 1 0; }

/* poster 1 */
.ep1 { color: #032A2F; }
.ep1[lang="ko"] { --p1-kick: 5.4cqw; --p1-kickLh: 1.38; --p1-ed: 4.9cqw; --p1-t1: 11cqw; --p1-t2: 9.7cqw; --p1-tLh: 1.12; --p1-sub: 4.9cqw; --p1-date: 7.3cqw; --p1-dateLh: 1.25; --p1-tp: 5.2cqw; --p1-tpLh: 1.35; --p1-wt: 6.8cqw; --p1-wtLh: 1.15; --p1-wtime: 4.9cqw; --p1-dot: inline; --p1-wdesc: 4.1cqw; --p1-wLh: 1.3; --p1-lbl: 2.6cqw; --p1-foot: 2.8cqw; --p1-footLh: 1.25; --p1-rowGap: 2.4cqw; }
.ep1[lang="th"] { --p1-kick: 4.4cqw; --p1-kickLh: 1.5; --p1-ed: 4.4cqw; --p1-t1: 6.8cqw; --p1-t2: 6.1cqw; --p1-tLh: 1.38; --p1-sub: 4.6cqw; --p1-date: 5.8cqw; --p1-dateLh: 1.45; --p1-tp: 4.5cqw; --p1-tpLh: 1.55; --p1-wt: 5.6cqw; --p1-wtLh: 1.4; --p1-wtime: 4.4cqw; --p1-dot: none; --p1-wdesc: 3.5cqw; --p1-wLh: 1.7; --p1-lbl: 2.3cqw; --p1-foot: 2.4cqw; --p1-footLh: 1.6; --p1-rowGap: 1.6cqw; }
.ep1[lang="en"] { --p1-kick: 4.3cqw; --p1-kickLh: 1.3; --p1-ed: 4.4cqw; --p1-t1: 7.2cqw; --p1-t2: 6.4cqw; --p1-tLh: 1.05; --p1-sub: 4.6cqw; --p1-date: 5.7cqw; --p1-dateLh: 1.2; --p1-tp: 4.5cqw; --p1-tpLh: 1.35; --p1-wt: 5.6cqw; --p1-wtLh: 1.15; --p1-wtime: 4.4cqw; --p1-dot: none; --p1-wdesc: 3.5cqw; --p1-wLh: 1.35; --p1-lbl: 2.4cqw; --p1-foot: 2.6cqw; --p1-footLh: 1.35; --p1-rowGap: 1.6cqw; }
.ep1 article { background: #FDF7EE; }
.ep1-br { right: 0; bottom: 0; width: 21.875cqw; height: 15.234cqw; }
.ep1-top { position: relative; background: #043F47; padding: 11cqw 6cqw 8.2cqw; }
.ep1-rings { top: 0; right: 0; width: 31.25cqw; height: 25.391cqw; }
.ep1-bubbles { right: 0; bottom: 0; width: 39.453cqw; height: 53.418cqw; }
.ep1-curve { left: 0; bottom: -0.1cqw; width: 100%; height: 7.1cqw; }
.ep1-kick { margin: 0; max-width: 70cqw; font-size: var(--p1-kick); line-height: var(--p1-kickLh); font-weight: 700; color: #FFFFFF; white-space: pre-line; }
.ep1-ed { margin: 5.2cqw 0 0; font-size: var(--p1-ed); line-height: 1.3; font-weight: 700; color: #FFFFFF; }
.ep1-h { margin: 3.2cqw 0 0; max-width: 60cqw; font-weight: 700; }
.ep1-t1 { display: block; font-size: var(--p1-t1); line-height: var(--p1-tLh); color: #FDF6ED; }
.ep1-t2 { display: block; font-size: var(--p1-t2); line-height: var(--p1-tLh); color: #5FEAD9; }
.ep1-sub { margin: 0.8cqw 0 0; font-family: 'Space Grotesk', 'IBM Plex Sans Thai', sans-serif; font-size: var(--p1-sub); line-height: 1.2; font-weight: 600; color: #FDF6ED; }
.ep1-when { position: relative; display: flex; gap: 2.9cqw; margin: 0 5.7cqw; }
.ep1-bar { flex: none; width: 1.2cqw; background: #02716A; }
.ep1-date { margin: 0; font-size: var(--p1-date); line-height: var(--p1-dateLh); font-weight: 700; color: #032A2F; }
.ep1-tp { margin: 0; font-size: var(--p1-tp); line-height: var(--p1-tpLh); font-weight: 600; color: #032A2F; }
.ep1-tp--first { margin-top: 0.6cqw; }
.ep1-worship { position: relative; margin: 0 4.4cqw; background: #017B72; border-radius: 2.9cqw; padding: 2cqw 5.8cqw 2.2cqw; color: #FFFFFF; }
.ep1-wrow { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1.6cqw; }
.ep1-wt { font-size: var(--p1-wt); line-height: var(--p1-wtLh); font-weight: 700; }
.ep1-wtime { font-size: var(--p1-wtime); line-height: 1.3; font-weight: 700; }
.ep1-dot { display: var(--p1-dot); }
.ep1-rule { height: 0.2cqw; background: rgba(255, 255, 255, 0.85); margin: 1.2cqw 0 1.4cqw; }
.ep1-wdesc { margin: 0; font-size: var(--p1-wdesc); line-height: var(--p1-wLh); font-weight: 500; }
.ep1-foot { position: relative; margin: 0 4cqw; padding: 2.4cqw 9cqw 4.6cqw 0; border-top: 0.2cqw solid #0B1533; display: grid; grid-template-columns: 42cqw 0.2cqw minmax(0, 1fr); column-gap: 2.4cqw; color: #040F18; }
.ep1-dl { margin: 0; display: flex; flex-direction: column; row-gap: var(--p1-rowGap); }
.ep1-dl2 { margin: 0; }
.ep1-item { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6cqw 1.4cqw; }
.ep1-lbl { background: #02393F; color: #FFFFFF; border-radius: 99cqw; padding: 0.3cqw 2.2cqw; font-size: var(--p1-lbl); line-height: 1.45; font-weight: 600; }
.ep1-lbl--wide { padding: 0.3cqw 4cqw; }
.ep1-dd { margin: 0; font-size: var(--p1-foot); line-height: var(--p1-footLh); font-weight: 600; }
.ep1-dd--line { flex-basis: 100%; line-height: 1.25; }
.ep1-dd--first { margin: 0.6cqw 0 0; }
.ep1-vr { background: #0B1533; }
.ep1-page { position: absolute; right: 2.6cqw; bottom: 2.4cqw; margin: 0; font-family: 'Space Grotesk', sans-serif; font-size: 2.9cqw; line-height: 1; font-weight: 700; color: #FDF7EE; }

/* poster 2 */
.ep2 { color: #061822; }
.ep2[lang="ko"] { --p2-title: 4.5cqw; --p2-titleLh: 1.2; --p2-sub: 3.5cqw; --p2-subLh: 1.35; --p2-val: 5.8cqw; --p2-unit: 3.2cqw; --p2-statLbl: 3cqw; --p2-statLh: 1.3; --p2-src: 2.3cqw; --p2-head: 6.6cqw; --p2-headLh: 1.2; --p2-body: 3.2cqw; --p2-bodyLh: 1.5; --p2-bw: 500; --p2-quote: 6.8cqw; --p2-quoteLh: 1.22; --p2-by: 2.9cqw; --p2-byLh: 1.3; --p2-close: 3.1cqw; --p2-closeLh: 1.45; }
.ep2[lang="th"] { --p2-title: 3.7cqw; --p2-titleLh: 1.4; --p2-sub: 2.7cqw; --p2-subLh: 1.6; --p2-val: 5.8cqw; --p2-unit: 3cqw; --p2-statLbl: 2.5cqw; --p2-statLh: 1.6; --p2-src: 2.2cqw; --p2-head: 5.2cqw; --p2-headLh: 1.38; --p2-body: 2.9cqw; --p2-bodyLh: 1.7; --p2-bw: 400; --p2-quote: 4.8cqw; --p2-quoteLh: 1.42; --p2-by: 2.6cqw; --p2-byLh: 1.6; --p2-close: 2.8cqw; --p2-closeLh: 1.7; }
.ep2[lang="en"] { --p2-title: 3.9cqw; --p2-titleLh: 1.15; --p2-sub: 3cqw; --p2-subLh: 1.3; --p2-val: 5.8cqw; --p2-unit: 3cqw; --p2-statLbl: 2.4cqw; --p2-statLh: 1.3; --p2-src: 2.2cqw; --p2-head: 5.2cqw; --p2-headLh: 1.15; --p2-body: 2.8cqw; --p2-bodyLh: 1.42; --p2-bw: 500; --p2-quote: 4.8cqw; --p2-quoteLh: 1.2; --p2-by: 2.6cqw; --p2-byLh: 1.3; --p2-close: 2.8cqw; --p2-closeLh: 1.4; }
.ep2 article { padding-bottom: 10.5cqw; background: #FBF6EE; }
.ep2-bl { left: 0; bottom: 0; width: 32.227cqw; height: 48.438cqw; }
.ep2-br { right: 0; bottom: 0; width: 31.641cqw; height: 15.234cqw; }
.ep2-top { position: relative; background: #0B4B54; padding: 3cqw 5.4cqw 2.6cqw; }
.ep2-tr { top: 0; right: 0; width: 41.406cqw; height: 39.063cqw; }
.ep2-head { position: relative; max-width: 57cqw; }
.ep2-title { margin: 0; font-size: var(--p2-title); line-height: var(--p2-titleLh); font-weight: 700; color: #FDF7EE; }
.ep2-bar { width: 9.3cqw; height: 0.6cqw; background: #2BDAC9; margin: 1.6cqw 0 1.2cqw; }
.ep2-sub { margin: 0; font-size: var(--p2-sub); line-height: var(--p2-subLh); font-weight: 500; color: #FFFFFF; }
.ep2-sp { flex: 1 1 0; min-height: 1.8cqw; }
.ep2-sp12 { flex: 1.2 1 0; }
.ep2-sp08 { flex: 0.8 1 0; }
.ep2-stats { position: relative; list-style: none; margin: 0; padding: 0 3.2cqw; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2cqw; color: #FFFFFF; text-align: center; }
.ep2-stat { display: flex; flex-direction: column; background: #09474F; border-radius: 1.8cqw; padding: 2.6cqw 1.2cqw 2.4cqw; }
.ep2-stat--b { background: #067B75; }
.ep2-stat--c { background: #15847D; } /* mockup #199A92, darkened for 4.5:1 white text */
.ep2-val { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 0.4cqw; }
.ep2-num { font-family: 'Space Grotesk', sans-serif; font-size: var(--p2-val); line-height: 1.1; font-weight: 700; }
.ep2-unit { font-size: var(--p2-unit); line-height: 1.1; font-weight: 700; }
.ep2-srule { height: 0.2cqw; background: rgba(255, 255, 255, 0.6); margin: 1.8cqw 1.4cqw 1.6cqw; }
.ep2-slbl { margin: 0; font-size: var(--p2-statLbl); line-height: var(--p2-statLh); font-weight: 500; }
.ep2-src { position: relative; margin: 1.4cqw 3.4cqw 0; text-align: right; font-size: var(--p2-src); line-height: 1.45; font-weight: 500; color: #062B37; }
.ep2-body { position: relative; padding: 0 5cqw; }
.ep2-heading { margin: 0; font-size: var(--p2-head); line-height: var(--p2-headLh); font-weight: 700; color: #053641; }
.ep2-bar2 { width: 13.7cqw; height: 0.8cqw; background: #F8755C; margin: 1.8cqw 0 2.6cqw; }
.ep2-p { margin: 0; font-size: var(--p2-body); line-height: var(--p2-bodyLh); font-weight: var(--p2-bw); }
.ep2-p--2 { margin-top: 1.6cqw; }
.ep2-fig { position: relative; margin: 0 8cqw; text-align: center; }
.ep2-quote { margin: 0 auto; max-width: 70cqw; font-size: var(--p2-quote); line-height: var(--p2-quoteLh); font-weight: 700; color: #043641; text-wrap: balance; }
.ep2-q { font-family: Georgia, 'Times New Roman', serif; font-size: 1.5em; line-height: 0; vertical-align: -0.2em; color: #127F72; } /* mockup #159888, darkened for 4.5:1 */
.ep2-q--open { margin-right: 0.1em; }
.ep2-q--close { margin-left: 0.05em; }
.ep2-cap { margin: 2.4cqw 0 0; }
.ep2-by { display: inline-block; background: #0B565C; color: #FFFFFF; border-radius: 99cqw; padding: 0.9cqw 3.6cqw; font-size: var(--p2-by); line-height: var(--p2-byLh); font-weight: 600; }
.ep2-close { position: relative; display: flex; gap: 2.2cqw; margin: 0 5cqw 0 32cqw; }
.ep2-closebar { flex: none; width: 0.8cqw; background: #20C3B5; }
.ep2-closep { margin: 0; padding: 0.3cqw 0; min-width: 0; font-size: var(--p2-close); line-height: var(--p2-closeLh); font-weight: 500; color: #040F18; }
.ep2-page { position: absolute; right: 3.2cqw; bottom: 2.8cqw; margin: 0; font-family: 'Space Grotesk', sans-serif; font-size: 3.5cqw; line-height: 1; font-weight: 700; color: #061822; } /* mockup #FDF7EE was 2.7:1 on the teal circle */

/* poster 3 */
.ep3 { color: #022C2D; }
.ep3[lang="ko"] { --p3-badge: 3.9cqw; --p3-badgeLh: 1.3; --p3-title: 9.2cqw; --p3-titleLh: 1.15; --p3-date: 5.9cqw; --p3-dateLh: 1.25; --p3-tp: 3.9cqw; --p3-tpLh: 1.35; --p3-cardT: 4.9cqw; --p3-cardTLh: 1.25; --p3-li: 2.8cqw; --p3-liLh: 1.4; --p3-dotTop: 1.16cqw; --p3-wT: 6cqw; --p3-wTLh: 1.15; --p3-wTime: 7.6cqw; --p3-wDesc: 2.75cqw; --p3-wDescLh: 1.25; --p3-fT: 4.7cqw; --p3-f: 3.1cqw; --p3-fLh: 1.4; --p3-f2: 3.2cqw; --p3-f2Lh: 1.4; }
.ep3[lang="th"] { --p3-badge: 3.1cqw; --p3-badgeLh: 1.5; --p3-title: 6cqw; --p3-titleLh: 1.38; --p3-date: 5cqw; --p3-dateLh: 1.4; --p3-tp: 3.4cqw; --p3-tpLh: 1.55; --p3-cardT: 3.6cqw; --p3-cardTLh: 1.4; --p3-li: 2.5cqw; --p3-liLh: 1.6; --p3-dotTop: 1.2cqw; --p3-wT: 4.6cqw; --p3-wTLh: 1.4; --p3-wTime: 5.6cqw; --p3-wDesc: 2.5cqw; --p3-wDescLh: 1.7; --p3-fT: 3.8cqw; --p3-f: 2.7cqw; --p3-fLh: 1.55; --p3-f2: 2.5cqw; --p3-f2Lh: 1.6; }
.ep3[lang="en"] { --p3-badge: 3.1cqw; --p3-badgeLh: 1.3; --p3-title: 5.6cqw; --p3-titleLh: 1.1; --p3-date: 4.4cqw; --p3-dateLh: 1.2; --p3-tp: 3.4cqw; --p3-tpLh: 1.35; --p3-cardT: 3.6cqw; --p3-cardTLh: 1.2; --p3-li: 2.5cqw; --p3-liLh: 1.3; --p3-dotTop: 0.83cqw; --p3-wT: 4.4cqw; --p3-wTLh: 1.15; --p3-wTime: 6.2cqw; --p3-wDesc: 2.5cqw; --p3-wDescLh: 1.35; --p3-fT: 3.8cqw; --p3-f: 2.7cqw; --p3-fLh: 1.35; --p3-f2: 2.7cqw; --p3-f2Lh: 1.35; }
.ep3 article { background: #FDF7ED; }
.ep3-tr { top: 0; right: 0; width: 37.5cqw; height: 41.992cqw; }
.ep3-top { position: relative; padding: 4.4cqw 3.2cqw 0; }
.ep3-badge { display: inline-block; margin: 0; background: #055454; color: #FFFFFF; border-radius: 99cqw; padding: 1.1cqw 3.6cqw; font-size: var(--p3-badge); line-height: var(--p3-badgeLh); font-weight: 600; }
.ep3-title { margin: 3cqw 0 0 0.7cqw; max-width: 82cqw; font-size: var(--p3-title); line-height: var(--p3-titleLh); font-weight: 700; color: #022C2D; white-space: pre-line; }
.ep3-when { position: relative; display: flex; gap: 3cqw; margin: 0 4.4cqw; }
.ep3-bar { flex: none; width: 1.2cqw; background: #20B6A6; }
.ep3-date { margin: 0; font-size: var(--p3-date); line-height: var(--p3-dateLh); font-weight: 700; color: #043538; }
.ep3-tp { margin: 0.4cqw 0 0; font-size: var(--p3-tp); line-height: var(--p3-tpLh); font-weight: 600; color: #043538; }
.ep3-grid { position: relative; display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 56.2fr); gap: 1.8cqw; padding: 0 2cqw; }
.ep3-col { display: flex; flex-direction: column; gap: 2cqw; }
.ep3-card { position: relative; flex: 1 1 auto; background: #E3F0DF; border-radius: 2.4cqw; padding: 2.8cqw 2.6cqw 2.4cqw; }
.ep3-card--c1 { padding: 3cqw 2.6cqw 7.5cqw; }
.ep3-card--c3 { padding: 2.8cqw 2.6cqw 5.5cqw; }
.ep3-card--c1 > :not(.ep3-carddeco), .ep3-card--c3 > :not(.ep3-carddeco) { position: relative; }
.ep3-carddeco { position: absolute; inset: 0; overflow: hidden; border-radius: 2.4cqw; pointer-events: none; }
.ep3-cardsvg { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; display: block; }
.ep3-cardT { margin: 0; font-size: var(--p3-cardT); line-height: var(--p3-cardTLh); font-weight: 700; color: #042C2D; }
.ep3-rule { height: 0.3cqw; background: #37B89C; margin: 1.2cqw 0 1.9cqw; }
.ep3-list { list-style: none; margin: 0; padding: 0; }
.ep3-li { display: flex; gap: 1.6cqw; align-items: flex-start; margin: 0 0 0.8cqw; font-size: var(--p3-li); line-height: var(--p3-liLh); font-weight: 500; color: #030303; }
.ep3-dot { flex: none; width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #10B8A2; margin-top: var(--p3-dotTop); }
.ep3-worship { position: relative; flex: 1 1 auto; background: #055457; border-radius: 2.4cqw; padding: 2.6cqw 2cqw 2.6cqw; color: #FFFFFF; }
.ep3-wT { margin: 0 0 0 1.2cqw; font-size: var(--p3-wT); line-height: var(--p3-wTLh); font-weight: 700; }
.ep3-wTime { margin: 1.6cqw 0 0; background: #FDF7EA; color: #032B2E; border-radius: 2.2cqw; padding: 0.8cqw 2cqw; text-align: center; font-size: var(--p3-wTime); line-height: 1.2; font-weight: 700; }
.ep3-wDesc { margin: 1.8cqw 1.2cqw 0; font-size: var(--p3-wDesc); line-height: var(--p3-wDescLh); font-weight: 500; }
.ep3-foot { position: relative; background: #054D51; color: #FFFFFF; padding: 3cqw 3.2cqw 3.2cqw 5.4cqw; display: grid; grid-template-columns: minmax(0, 38.5fr) 0.2cqw minmax(0, 44fr); column-gap: 4cqw; }
.ep3-fT { margin: 0 0 1.2cqw; font-size: var(--p3-fT); line-height: 1.3; font-weight: 700; }
.ep3-clist { list-style: none; margin: 0; padding: 0; }
.ep3-cli { display: flex; align-items: center; gap: 2cqw; margin: 0 0 0.6cqw; font-size: var(--p3-f); line-height: var(--p3-fLh); font-weight: 500; }
.ep3-cli:last-child { margin: 0; }
.ep3-cic { flex: none; width: 3cqw; height: 3cqw; display: block; }
.ep3-vr { background: #FFFFFF; }
.ep3-fright { min-width: 0; display: flex; flex-direction: column; }
.ep3-dl { margin: 0; padding-top: 1.4cqw; }
.ep3-drow { display: flex; flex-wrap: wrap; column-gap: 2cqw; font-size: var(--p3-f2); line-height: var(--p3-f2Lh); }
.ep3-drow + .ep3-drow { margin-top: 1cqw; }
.ep3-drow dt { font-weight: 700; }
.ep3-drow dd { margin: 0; font-weight: 500; }
.ep3-page { align-self: flex-end; margin: auto 0 0; padding-top: 2cqw; }
.ep3-page span { display: inline-block; background: #FDF7EC; color: #03242C; border-radius: 99cqw; padding: 0.7cqw 2.6cqw; font-family: 'Space Grotesk', sans-serif; font-size: 2.9cqw; line-height: 1.1; font-weight: 700; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- responsive (mockup breakpoints) ---------- */
@media (max-width: 1080px) {
  .hdr { flex-wrap: wrap; gap: 4px 12px; }
  .nav { order: 3; width: 100%; margin-left: 0; overflow-x: auto; }
  .lg { margin-left: auto; }
  .lg--dark { margin-left: 0; }
  .leaf { padding: 48px 44px; }
  /* Not in the mockup: three event columns are too narrow below 1080px (phone and email
     overflow), so the CTA column moves under the title as a 2x2 row. */
  .evin { grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); }
  .ev-c3 { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 12px 20px; }
  .ev-contact { margin: 0; }
}
@media (max-width: 760px) {
  .wrap, .site-header { padding-left: 16px; padding-right: 16px; }
  .hdr { padding-left: 12px; padding-right: 8px; }
  .lg-link:not(.lg-link--dark) { padding: 0 8px; }
  .bento-2, .bento-12 { grid-template-columns: minmax(0, 1fr); }
  .bento > * { grid-column: 1 / -1; }
  .in2, .in3, .evin, .ft, .col-grid, .visit-grid { grid-template-columns: minmax(0, 1fr); }
  .ev-c3 { display: flex; align-items: stretch; }
  .ev-blk, .hero, .worship, .card, .welcome, .give, .ft-blk, .col-page, .article { padding: 28px 24px; }
  .leaf { padding: 48px 32px; border-radius: 96px 20px 96px 20px; }
  .tall { min-height: 0; }
  .posters { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
  .posters > * { scroll-snap-align: start; }
  .num { font-size: 132px; }
  .sermon-ph, .min-photo { height: 200px; }
  .map { min-height: 220px; }
  .prose { font-size: 17px; }
  .b-verse, .b-prayer { padding: 22px 20px; }
}