/* ============================================================
   Home — ornate "save the date" design.
   Uses the supplied art: sage paper bg, gold 9-slice frame,
   scalloped venue banners, plaque, cranes, pomegranate, tassel.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
  margin:0;
  overflow-x:hidden;
  background:#DDE3CE url(../images/sage-paper.png) repeat;
  background-size:720px auto;
  color:#2E2519;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:20px;
  font-variant-numeric:lining-nums;
  font-feature-settings:"lnum" 1,"tnum" 0;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
body.lang-ko{font-family:'Nanum Myeongjo','Cormorant Garamond',serif;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}

/* ---------- gold 9-slice frame ---------- */
.frame{
  --frame:clamp(150px,7vw,308px);
  --gutter:clamp(14px,3vw,40px);
  position:relative;
  min-height:100vh;
  margin:0;
  display:flex;
  flex-direction:column;
  padding:calc(var(--frame) + 4px) calc(var(--frame) + var(--gutter)) calc(var(--frame) + 6px);
}
/* the single gold frame, drawn on top of all content (hero images, etc.) */
.frame::after{
  content:"";position:absolute;inset:0;
  border:var(--frame) solid transparent;
  border-image:url(../images/frame-v2.png) 210 / var(--frame) / 0 stretch;
  pointer-events:none;z-index:3;
}

/* ---------- decorative art ---------- */
.deco{position:absolute;inset:0;pointer-events:none;z-index:6;}
.deco img{position:absolute;pointer-events:auto;}
.deco .logo{top:-8px;left:6px;width:104px;filter:drop-shadow(0 4px 10px rgba(90,70,30,.22));}
.deco .tassel{top:200px;left:8px;width:50px;opacity:.96;}
.deco .cranes{top:-4px;left:122px;width:244px;filter:drop-shadow(0 6px 12px rgba(60,50,30,.16));}
.deco .pom{top:30px;right:0;width:196px;filter:drop-shadow(0 6px 12px rgba(60,50,30,.16));}

/* ---------- top bar ---------- */
.topbar{position:relative;top:10px;z-index:5;display:flex;justify-content:center;padding-top:2px;margin-top:calc(8px - var(--frame));}
.nav{display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:center;}
.nav a{
  font-size:14px;letter-spacing:2px;text-transform:uppercase;color:#8A6D3B;
  padding-bottom:3px;border-bottom:2px solid transparent;transition:color .2s,border-color .2s;
}
.nav a:hover{color:#5E4A24;}
.nav a.active{color:#5E4A24;border-color:#C8A22E;}
body.lang-ko .nav a{letter-spacing:1px;}

.btn-rsvp{
  display:inline-flex;align-items:center;justify-content:center;line-height:1;
  background:linear-gradient(115deg,#A88436 0%,#C29C40 30%,#F3E29B 50%,#C29C40 70%,#A88436 100%);
  color:#5A4413 !important;border:1px solid #C8A24A;
  border-radius:999px;padding:7px 22px;font-size:13px;letter-spacing:2px;font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 2px 7px -3px rgba(150,110,25,.4);
}
.btn-rsvp:hover{filter:brightness(1.07);}

.lang{position:absolute;top:3px;right:8px;z-index:6;display:flex;align-items:center;gap:10px;}
.lang-btn{
  border:none;background:transparent;cursor:pointer;
  font-family:inherit;font-size:14px;letter-spacing:1.5px;color:#9A8154;
  padding:3px 1px;border-bottom:2px solid transparent;transition:color .2s,border-color .2s;
}
.lang-btn:hover{color:#5E4A24;}
.lang-btn.active{color:#5E4A24;font-weight:700;border-bottom-color:#C8A22E;}
.lang .sep{color:#C2AE84;font-size:13px;}

/* ---------- content ---------- */
.content{position:relative;z-index:2;max-width:1120px;margin:0 auto;
  width:100%;flex:1 1 auto;display:flex;flex-direction:column;}
.content > *{flex-shrink:0;}
/* footer line sits a consistent distance from the bottom on every page */
.content .foot-line,.content .kfoot,.content .sfoot,.content .rfoot{margin-top:auto;margin-bottom:0;padding-top:36px;position:relative;z-index:4;top:calc(var(--frame) - 34px);}

/* ---------- dividers ---------- */
.divider{display:block;margin:0 auto;opacity:.95;}
.divider.sm{width:240px;}
.divider.md{width:360px;}
.divider.lg{width:520px;}

/* ---------- hero ---------- */
.hero{text-align:center;max-width:840px;margin:0 auto;padding-top:172px;}
.eyebrow{
  font-size:17px;letter-spacing:5px;text-transform:uppercase;color:#574013;
  margin:18px 0 14px;
}
body.lang-ko .eyebrow{letter-spacing:2px;}
.couple{
  margin:0;font-family:'Pinyon Script',cursive;font-weight:400;color:#8A6A2E;
  font-size:clamp(60px,9vw,126px);line-height:.9;
  text-shadow:0 1px 0 rgba(255,255,255,.4);
}
.couple .amp{font-size:.82em;}
body.lang-ko .hero-title{font-weight:700;line-height:1.18;}
.hero-intro{
  margin:22px auto 16px;max-width:560px;font-size:21px;line-height:1.6;color:#2E2519;
}

/* ---------- place sections (Korea / Spain) ---------- */
.place{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
  margin:8px auto;max-width:1080px;
}
.banner img{width:100%;filter:drop-shadow(0 10px 22px rgba(70,55,25,.18));}
.place-text{text-align:center;padding:0 8px;}
.place-eyebrow{font-size:15px;letter-spacing:3.5px;text-transform:uppercase;color:#574013;margin-bottom:8px;}
body.lang-ko .place-eyebrow{letter-spacing:1.5px;}
.place-title{
  margin:0;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;
  font-size:clamp(26px,2.9vw,38px);line-height:1.08;
}
body.lang-ko .place-title{letter-spacing:0;text-transform:none;}
.place-date{
  margin:10px 0 0;font-size:15px;letter-spacing:1.5px;text-transform:uppercase;font-weight:600;
}
body.lang-ko .place-date{letter-spacing:1px;}
.place-desc{margin:16px auto 0;max-width:380px;font-size:18px;line-height:1.6;color:#2E2519;}
.korea .place-title,.korea .place-date{color:#8E2A2C;}
.spain .place-title,.spain .place-date{color:#27447E;}

.detail-btn{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:20px;width:240px;aspect-ratio:1059/248;
  background:url(../images/details.png) no-repeat center/100% 100%;
  font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:#7A5E2C;font-weight:600;
  padding-right:20%;
  filter:drop-shadow(0 2px 5px rgba(90,70,30,.22));
  transition:filter .2s;
}
.detail-btn:hover{filter:drop-shadow(0 3px 7px rgba(90,70,30,.28)) brightness(1.04);}
body.lang-ko .detail-btn{letter-spacing:1px;}

.section-divider{margin:26px auto;}

/* ---------- rsvp plaque ---------- */
.plaque{display:block;position:relative;max-width:900px;margin:64px auto 0;}
.plaque img{width:100%;}
.plaque-text{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:0 14% 1.5%;
}
.plaque-title{
  margin:0;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:#7A5E2C;
  font-size:clamp(15px,1.9vw,24px);line-height:1.06;white-space:nowrap;
}
body.lang-ko .plaque-title{letter-spacing:1.5px;}
.plaque-sub{
  margin:7px 0 0;font-size:clamp(10px,1.15vw,14px);letter-spacing:2px;text-transform:uppercase;color:#574013;
}
body.lang-ko .plaque-sub{letter-spacing:.5px;text-transform:none;}

/* ---------- footer line ---------- */
.foot-line{text-align:center;margin:18px 0 2px;font-size:14px;letter-spacing:2px;color:#574013;}
body.lang-ko .foot-line{letter-spacing:.5px;}

/* ---------- reveal (pure CSS — visible by default, entrance only) ---------- */
.reveal{animation:fadeup .9s ease both;}
.reveal.r2{animation-delay:.12s;}
.reveal.r3{animation-delay:.24s;}
@keyframes fadeup{from{transform:translateY(16px);}to{transform:none;}}

/* hero text: longer rise that starts at rest and settles 50px higher */
.khero-inner.reveal,.shero-inner.reveal,.rhero-inner.reveal{animation:heroRise 1.8s ease both;}
@keyframes heroRise{from{transform:translateY(0);}to{transform:translateY(-50px);}}
@media (prefers-reduced-motion:reduce){
  .reveal{animation:none;}
  html{scroll-behavior:auto;}
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .deco .cranes,.deco .pom,.deco .tassel{display:none;}
  .deco .logo{width:92px;}
  .hero{padding-top:40px;}
  .lang{position:static;justify-content:center;margin-top:14px;}
  .topbar{flex-direction:column;gap:6px;}
}
@media (max-width:760px){
  body{font-size:19px;}
  .place{grid-template-columns:1fr;gap:22px;}
  .spain .banner{order:-1;}
  .plaque-text{padding:0 12% 2%;}
}