@import url('https://fonts.googleapis.com/css2?family=Allura&family=Cormorant+Garamond:wght@300;400;500;600&family=Montserrat:wght@300;400;500&display=swap');

:root{
  --paper:#f8f6f0;
  --paper2:#fbfaf6;
  --sage:#667768;
  --sage-dark:#4e6254;
  --eucalyptus:#aabcae;
  --ink:#3f4941;
  --muted:#7c847d;
  --gold:#c9a36a;
  --taupe:#a18f78;
  --line:rgba(102,119,104,.26);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 15% 15%, rgba(201,163,106,.05), transparent 28%),
    radial-gradient(circle at 85% 75%, rgba(102,119,104,.05), transparent 32%),
    var(--paper);
  font-family:'Cormorant Garamond',serif;
  font-size:18px;
  line-height:1.65;
}
a{color:inherit}
.site-shell{min-height:100vh;overflow:hidden;position:relative}
.watercolor{position:absolute;pointer-events:none;z-index:0}
.wc-top{width:min(480px,55vw);right:-70px;top:-90px;opacity:.78;transform:rotate(4deg)}
.wc-bottom{width:min(470px,58vw);left:-90px;bottom:-140px;opacity:.66;transform:rotate(-7deg)}
.wc-side{width:260px;right:-100px;top:46%;opacity:.24;transform:rotate(15deg)}
.content{position:relative;z-index:2}

.topbar{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;justify-content:flex-end;align-items:center;
  padding:20px 28px;
  background:linear-gradient(to bottom, rgba(248,246,240,.95), rgba(248,246,240,0));
  pointer-events:none;
}
.lang-switch{
  pointer-events:auto;
  display:flex;gap:4px;padding:4px;
  border:1px solid rgba(102,119,104,.23);
  border-radius:999px;background:rgba(251,250,246,.88);
  backdrop-filter:blur(8px);
  box-shadow:0 8px 30px rgba(60,70,60,.08);
}
.lang-switch a{
  text-decoration:none;
  font:500 11px/1 'Montserrat',sans-serif;
  letter-spacing:.14em;text-transform:uppercase;
  padding:10px 14px;border-radius:999px;color:var(--sage);
}
.lang-switch a.active{background:var(--sage);color:#fff}

.hero{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:105px 24px 80px;text-align:center;position:relative;
}
.hero-inner{max-width:1050px;width:100%}
.kicker{
  font:500 12px/1.3 'Montserrat',sans-serif;
  letter-spacing:.32em;text-transform:uppercase;color:var(--sage);
  margin-bottom:28px;
}
.names{
  margin:0;color:var(--sage-dark);
  font:400 clamp(76px,11vw,160px)/.72 'Allura',cursive;
  letter-spacing:-.035em;
}
.names .amp{
  font:300 .48em/.9 'Cormorant Garamond',serif;color:var(--gold);
  vertical-align:middle;margin:0 .08em;
}
.hero-rule{width:110px;height:1px;background:var(--gold);margin:42px auto 30px;opacity:.85}
.date{
  font:400 15px/1.4 'Montserrat',sans-serif;letter-spacing:.34em;
  text-transform:uppercase;color:var(--sage-dark);margin-left:.34em;
}
.place{
  margin:30px 0 0;
  font:400 clamp(40px,5vw,70px)/1 'Allura',cursive;color:var(--sage-dark);
}
.place-sub{
  margin-top:12px;font:400 11px/1.4 'Montserrat',sans-serif;
  letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
}

.nav{
  position:relative;z-index:5;
  max-width:1100px;margin:-15px auto 70px;padding:0 24px;
  display:flex;justify-content:center;gap:8px;flex-wrap:wrap;
}
.nav a{
  text-decoration:none;text-transform:uppercase;
  font:500 10px/1 'Montserrat',sans-serif;letter-spacing:.16em;
  color:var(--sage-dark);padding:13px 16px;
  border-bottom:1px solid transparent;
}
.nav a:hover{border-color:var(--gold)}

.section{
  max-width:900px;margin:0 auto;padding:100px 26px;
  position:relative;
}
.section-head{text-align:center;margin-bottom:55px}
.section-number{
  font:400 12px/1 'Montserrat',sans-serif;letter-spacing:.25em;color:var(--gold);
  text-transform:uppercase;margin-bottom:16px;
}
.section-title{
  margin:0;font:400 clamp(44px,6vw,68px)/1 'Allura',cursive;color:var(--sage-dark);
}
.section-lead{
  max-width:680px;margin:22px auto 0;text-align:center;color:#687168;
  font-size:20px;
}
.divider{width:55px;height:1px;background:var(--gold);margin:28px auto}

.prose{max-width:720px;margin:0 auto}
.prose p{margin:0 0 1.2em}
.prose strong{font-weight:600;color:var(--sage-dark)}

.ring-intro{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:34px 0;margin-bottom:50px;
}
.ring-intro p:last-child{margin-bottom:0}
.ring-vows{max-width:720px;margin:58px auto 0;padding-top:48px;border-top:1px solid var(--line)}
.ring-vow{text-align:center;padding:0 10px}.ring-vow + .ring-vow{margin-top:52px;padding-top:48px;border-top:1px solid rgba(102,119,104,.14)}
.ring-vow-name{font:400 39px/1 'Allura',cursive;color:var(--sage-dark);margin-bottom:24px}
.ring-vow p{margin:0 0 1.25em}
.ring-vow p:last-child{margin-bottom:0}

.vow-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:760px;margin:0 auto}
.vow-card{
  text-decoration:none;text-align:center;padding:42px 28px;
  border:1px solid var(--line);background:rgba(251,250,246,.72);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position:relative;overflow:hidden;
}
.vow-card:before{
  content:"";position:absolute;inset:8px;border:1px solid rgba(201,163,106,.22);pointer-events:none
}
.vow-card:hover{transform:translateY(-4px);box-shadow:0 18px 50px rgba(60,70,60,.09);border-color:rgba(102,119,104,.4)}
.vow-name{font:400 45px/1 'Allura',cursive;color:var(--sage-dark)}
.vow-cta{margin-top:18px;font:500 10px/1.5 'Montserrat',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--sage)}
.lock-note{margin-top:14px;color:var(--muted);font-size:15px;font-style:italic}

.quote{
  max-width:740px;margin:0 auto;padding:42px 35px;
  border-left:2px solid var(--gold);
  background:rgba(255,255,255,.22);
}
.quote p{font-size:24px;line-height:1.45;margin:0}
.quote .quote-source{margin-top:18px;font:500 10px/1.4 'Montserrat',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

.footer{
  text-align:center;padding:85px 24px 110px;position:relative;
}
.footer-names{font:400 64px/1 'Allura',cursive;color:var(--sage-dark)}
.footer-date{margin-top:14px;font:400 10px/1.4 'Montserrat',sans-serif;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}

.vows-page .hero{min-height:auto;padding-top:150px;padding-bottom:65px}
.vows-page .names{font-size:clamp(66px,9vw,120px)}
.back{
  display:inline-block;margin-bottom:28px;text-decoration:none;
  font:500 10px/1 'Montserrat',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--sage);
}
.vows-page .prose{font-size:21px}
.vows-page .prose p{margin-bottom:1.25em}
.vows-page .prose .standalone{
  text-align:center;font-size:27px;line-height:1.4;margin:45px 0;color:var(--sage-dark)
}
.signature{
  text-align:center;margin-top:55px;
  font:400 47px/1 'Allura',cursive;color:var(--sage-dark)
}

@media(max-width:700px){
  body{font-size:17px}
  .topbar{padding:14px 16px}
  .wc-top{width:360px;right:-115px;top:-75px}
  .wc-bottom{width:350px;left:-120px;bottom:-100px}
  .hero{padding-top:110px}
  .kicker{font-size:10px;letter-spacing:.22em}
  .names{font-size:78px}
  .date{font-size:11px;letter-spacing:.23em}
  .place{font-size:49px}
  .nav{margin-bottom:20px;gap:0}
  .nav a{padding:11px 9px;font-size:8px;letter-spacing:.11em}
  .section{padding:75px 21px}
  .section-title{font-size:50px}
  .section-lead{font-size:18px}
  .vow-grid{grid-template-columns:1fr}
  .ring-vows{margin-top:48px;padding-top:40px}
  .ring-vow{padding:0}.ring-vow + .ring-vow{margin-top:42px;padding-top:38px}
  .vow-card{padding:35px 22px}
  .quote{padding:30px 22px}
  .quote p{font-size:21px}
  .vows-page .prose{font-size:19px}
}

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

/* Language landing page */
.landing-page .landing-hero{min-height:100vh;padding-top:70px;padding-bottom:70px}
.language-prompt{
  margin:70px auto 34px;
  font:400 clamp(29px,4vw,43px)/1.2 'Cormorant Garamond',serif;
  color:var(--ink);
}
.language-grid{
  max-width:760px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:38px;
}
.language-card{
  min-height:300px;padding:42px 30px;text-decoration:none;text-align:center;
  border:1px solid var(--line);background:rgba(251,250,246,.78);
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.language-card:before{content:"";position:absolute;inset:9px;border:1px solid rgba(201,163,106,.24);pointer-events:none}
.language-card:hover{transform:translateY(-4px);box-shadow:0 18px 50px rgba(60,70,60,.09);border-color:rgba(102,119,104,.4)}
.language-code{
  width:88px;height:88px;border:2px solid var(--gold);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font:400 22px/1 'Montserrat',sans-serif;color:var(--gold);letter-spacing:.05em;
}
.language-name{margin-top:40px;font:400 48px/1 'Cormorant Garamond',serif;color:var(--ink)}
.language-cta{margin-top:34px;font:500 12px/1 'Montserrat',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#aa8061}
.vows-intro{margin:-8px auto 52px;text-align:left}
.vows-intro p{margin-bottom:1.25em}
.vows-intro .vows-instruction{margin-top:28px;text-align:center;font-style:italic;color:var(--sage-dark)}

@media(max-width:700px){
  .landing-page .landing-hero{padding-top:85px;padding-bottom:55px}
  .language-prompt{margin-top:55px;font-size:30px}
  .language-grid{grid-template-columns:1fr;gap:18px;max-width:430px}
  .language-card{min-height:240px;padding:30px 20px}
  .language-name{font-size:42px;margin-top:28px}
  .language-cta{margin-top:24px}
}