/* Version 4 · version 1's whole site (content and layout unchanged) in version 2's look: ZEST in the persimmon
   variant (deep grey-green, linen, persimmon), Pretendard headlines with Big Shoulders Display for English and
   numbers, flat colour fields instead of painted landscapes, square corners. Page titles at section-title size. */
:root{
  --green:#3F4A41; --green-d:#2F3831; --linen:#EAE4D3; --persimmon:#F4A66A; --persimmon-text:#A34E1C;
  --ink:#232A25; --paper:#F3EFE5; --paper-2:#EAE4D3; --night:#3F4A41; --light:#F3EFE5; --muted:#5E655F;
  --muted-l:rgba(243,239,229,.74); --line:rgba(35,42,37,.16); --line-l:rgba(243,239,229,.22); --accent:var(--persimmon);
  --display:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo",sans-serif;
  --tall:"Big Shoulders Display","Pretendard Variable",sans-serif;
  --word-ko:var(--display); --word-en:var(--display); --mono:var(--tall);
}
body{background:var(--green);font-size:18px}
:focus-visible{outline-color:var(--persimmon-text)}

/* paintings redrawn in this palette (v4/img); light sections stay flat linen */
.art{background-color:var(--green)}
.art-night,.art-forest{background-color:var(--green-d)}
.art-paper{background-image:none;background-color:var(--linen)}
.hero,.ghero{background-color:var(--green)}
.hero .shade{background:linear-gradient(180deg,rgba(47,56,49,.6),rgba(47,56,49,.1) 26%,rgba(47,56,49,.25) 50%,rgba(47,56,49,.88))}
.shade-light,.shade-dawn{background:linear-gradient(90deg,rgba(47,56,49,.86),rgba(47,56,49,.5) 55%,rgba(47,56,49,.2))}
.shade-forest,.shade-night{background:linear-gradient(180deg,rgba(47,56,49,.78),rgba(47,56,49,.62))}
.site-head.solid,.chips-bar{background:var(--paper)}

/* type: heavy Pretendard for Korean, tall poster face for English and numbers */
.display{letter-spacing:-.04em;line-height:1.02}
.display [lang="en"],.display:lang(en),.h3 [lang="en"]{font-family:var(--tall);text-transform:uppercase;letter-spacing:.005em;line-height:.95}
.word [lang="en"],.word:lang(en){font-style:normal;font-size:1em}
.mono,.mono [lang]{font-size:1em;letter-spacing:.03em}
.rows small.mono{font-size:20px;font-weight:600;opacity:.88;letter-spacing:.04em}   /* times and dates in lists: the tall face needs more size to read */
.date small{font-size:16px;opacity:.88}
.eyebrow{font-size:16px;font-weight:700}
.h1{font-size:clamp(44px,6.4vw,92px)}       /* page titles at the size of section titles such as "예배" */
.steps .n,.timeline b,.stats strong,.date b{font-weight:800}
.steps .n,.timeline b,.kday>.mono,.ktog .mono,.post-body a{color:var(--persimmon-text)}
.on-dark .steps .n,.on-dark .timeline b{color:var(--persimmon)}
.post-body blockquote{border-left-color:var(--persimmon)}

/* buttons and cards: square, like swatch cards */
.pill{border-radius:4px;font-weight:800}
.pill [lang="en"]{font-family:var(--tall);text-transform:uppercase;letter-spacing:.02em;font-size:1.12em}
.on-dark .pill.light,.site-head .pill.light{background:var(--persimmon);color:var(--green)}
.pill.dark{background:var(--green);color:var(--linen)}
.chips a{border-radius:4px}
.chips a:hover{background:var(--green);color:var(--linen)}
.mcard,.gcard,.plate,.glass,.tile-cta,.give-ways div,.kday,.ktog,.pnav,.card-form,.dd .sub,.gitem,.video,.video-off,
.feature .reveal,.story .reveal,.pcard .reveal,.post-body img,.fld input,.fld textarea,.fld select{border-radius:6px}
.mcard,.gcard{background:var(--green-d)}
.mcard::after{background:linear-gradient(180deg,rgba(47,56,49,0) 35%,rgba(47,56,49,.9))}
.gcard::after{background:linear-gradient(180deg,rgba(47,56,49,0) 30%,rgba(47,56,49,.92))}
.glass{background:rgba(243,239,229,.08);border-color:rgba(243,239,229,.2)}
.print{background:var(--paper)}

/* without the paintings the banners only carry a title, so they need less height */
.page-hero.hero{min-height:0}
.page-hero.hero .wrap{padding-top:160px;padding-bottom:52px}
.hero{min-height:min(720px,92svh)}
@media (max-width:860px){.page-hero.hero .wrap{padding-top:120px;padding-bottom:36px}}

/* ---------- home: version 2's main (chips + ROOTED poster), in persimmon ---------- */
body:has(.v4-zhero){background:var(--linen)}
body:has(.v4-zhero) .site-head{color:var(--ink)}
body:has(.v4-zhero) .site-head .lang-btn,body:has(.v4-zhero) .site-head .menu-btn{color:var(--ink);border-color:rgba(35,42,37,.35)}
.v4-zhero{background:var(--linen);color:var(--ink);padding:112px 0 clamp(70px,9vw,120px)}
.v4-zhero .zhero-grid{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:stretch}
.v4-zhero .stack{display:flex;flex-direction:column;gap:18px}
.v4-zhero .chip{display:flex;flex-direction:column;background:#fff;border-radius:3px;overflow:hidden;text-decoration:none;color:var(--ink);
  box-shadow:0 18px 40px -26px rgba(30,36,32,.55),0 1px 0 rgba(0,0,0,.06);transition:transform .5s var(--ease)}
.v4-zhero .chip:hover{transform:translateX(10px) rotate(-1.5deg)}
.v4-zhero .sw{display:block;height:clamp(110px,12vw,160px)}
.v4-zhero .lab{display:flex;flex-direction:column;gap:2px;padding:14px 16px 16px}
.v4-zhero .lab b{font-weight:900;font-size:17px;letter-spacing:-.01em}.v4-zhero .lab sup{font-size:.55em}
.v4-zhero .code{font-family:var(--tall);font-weight:700;font-size:16px;letter-spacing:.03em;color:var(--muted)}
.v4-zhero .vs{font-size:15px;font-weight:500;color:var(--muted);line-height:1.4}
.v4-zhero .nm{margin-top:8px;font-weight:800;font-size:18px}.v4-zhero .nm [lang="en"]{font-family:var(--tall);text-transform:uppercase;font-size:1.1em}
.v4-zhero .poster{position:relative;background:var(--green);color:var(--linen);border-radius:4px;overflow:hidden;min-height:min(80vh,780px);
  padding:clamp(24px,3.4vw,48px);display:flex;flex-direction:column;box-shadow:0 30px 60px -36px rgba(30,36,32,.7)}
.v4-zhero .fruit-wrap{position:absolute;left:8%;bottom:20%;width:clamp(220px,30vw,420px)}
.v4-zhero .fruit{display:block;width:100%;aspect-ratio:1.18/1;rotate:-14deg;border-radius:50% 48% 52% 50% / 56% 54% 46% 44%;background:var(--persimmon);box-shadow:inset -14px -18px 0 rgba(0,0,0,.06)}
.v4-zhero .poster-tree{position:absolute;left:50%;top:50%;translate:-50% -54%;width:44%;height:auto;filter:brightness(.25) sepia(1) hue-rotate(60deg) saturate(.6)}
.v4-zhero .poster-word{position:absolute;left:clamp(16px,2.5vw,36px);bottom:-.12em;margin:0;overflow:hidden;padding-top:.04em;font-family:var(--tall);font-weight:900;
  font-size:clamp(110px,15vw,240px);line-height:.85;letter-spacing:-.01em;color:var(--linen)}
.v4-zhero .poster-word span{display:inline-block}
.v4-zhero .poster-copy{position:relative;margin-left:auto;max-width:540px;display:flex;flex-direction:column;gap:20px;text-align:right;align-items:flex-end}
.v4-zhero .title{font-size:clamp(40px,4.6vw,68px);line-height:1.08;color:var(--linen)}
.v4-zhero .title [lang="en"]{color:var(--persimmon);line-height:1}
.v4-zhero .poster-info{margin:0;display:flex;flex-direction:column;gap:8px;font-weight:700;font-size:18px}
/* arrival, once: chips deal in with their colour filling like ink; the fruit rolls in, ROOTED rises letter by letter */
.v4-anim .v4-zhero [data-deal] .chip{opacity:0;transform:translateY(40px)}
.v4-anim .v4-zhero [data-deal].in .chip{opacity:1;transform:none;transition:opacity .7s var(--ease),transform 1s cubic-bezier(.2,1.25,.4,1)}
.v4-anim .v4-zhero [data-deal].in .chip:nth-child(2){transition-delay:.12s}.v4-anim .v4-zhero [data-deal].in .chip:nth-child(3){transition-delay:.24s}
.v4-anim .v4-zhero [data-deal] .sw{clip-path:inset(100% 0 0 0)}
.v4-anim .v4-zhero [data-deal].in .sw{clip-path:inset(0 0 0 0);transition:clip-path 1s cubic-bezier(.65,0,.2,1) .25s}
.v4-anim .v4-zhero [data-deal].in .chip:nth-child(2) .sw{transition-delay:.4s}.v4-anim .v4-zhero [data-deal].in .chip:nth-child(3) .sw{transition-delay:.55s}
.v4-anim .v4-zhero .poster{opacity:0;transform:translateY(30px) scale(.98)}
.v4-anim .v4-zhero .poster.in{opacity:1;transform:none;transition:opacity .8s var(--ease) .15s,transform 1s var(--ease) .15s}
.v4-anim .v4-zhero .fruit-wrap{opacity:0;transform:translateX(-80px) rotate(-70deg) scale(.7)}
.v4-anim .v4-zhero .poster.in .fruit-wrap{opacity:1;transform:none;transition:opacity .6s ease .35s,transform 1.4s cubic-bezier(.2,1.2,.35,1) .35s}
.v4-anim .v4-zhero .poster-tree{opacity:0;scale:.6}
.v4-anim .v4-zhero .poster.in .poster-tree{opacity:1;scale:1;transition:opacity .6s ease 1.1s,scale 1s cubic-bezier(.2,1.3,.4,1) 1.1s}
.v4-anim .v4-zhero .poster-word span{transform:translateY(105%)}
.v4-anim .v4-zhero .poster.in .poster-word span{transform:none;transition:transform .9s cubic-bezier(.2,.9,.25,1) calc(.7s + var(--i) * 70ms)}
.v4-anim .v4-zhero .poster-copy{opacity:0;transform:translateY(16px)}
.v4-anim .v4-zhero .poster.in .poster-copy{opacity:1;transform:none;transition:opacity .8s ease .5s,transform .9s var(--ease) .5s}
.v4-zhero .poster.in .fruit{animation:v4bob 7s ease-in-out 2s infinite alternate}
@keyframes v4bob{from{translate:0 0}to{translate:0 -8px}}
@media (max-width:860px){
  .v4-zhero{padding-top:96px}
  .v4-zhero .zhero-grid{grid-template-columns:minmax(0,1fr)}
  .v4-zhero .stack{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}
  .v4-zhero .stack .chip{flex:none;width:62vw;scroll-snap-align:start}
  .v4-zhero .poster{min-height:0;padding-bottom:150px}
  .v4-zhero .fruit-wrap{position:relative;left:auto;bottom:auto;width:min(260px,70vw);margin:34px 0 0 -6px}
  .v4-zhero .poster-copy{text-align:left;align-items:flex-start;margin-left:0}
}
@media (prefers-reduced-motion: reduce){
  .v4-anim .v4-zhero [data-deal] .chip,.v4-anim .v4-zhero .poster,.v4-anim .v4-zhero .fruit-wrap,.v4-anim .v4-zhero .poster-tree,.v4-anim .v4-zhero .poster-copy{opacity:1;transform:none;scale:1}
  .v4-anim .v4-zhero .sw{clip-path:none}.v4-anim .v4-zhero .poster-word span{transform:none}.v4-zhero .poster.in .fruit{animation:none}
}