@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}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.site-shell{min-height:100vh;overflow:hidden;position:relative}
.content{position:relative;z-index:2}

/* Delicate watercolor leaf accents, confined to the top of the page only.
   The fade toward the centre and the fade at the bottom edge are baked
   directly into each PNG's alpha channel (no CSS opacity/transform on these
   elements), so there is never a hard edge or compositing seam. */
.leaf-accent{
  position:absolute;top:0;z-index:0;pointer-events:none;
  width:300px;height:auto;
  display:block;
}
.leaf-accent-left{left:0}
.leaf-accent-right{right:0}

@media(max-width:1180px){
  .leaf-accent{width:220px}
}
@media(max-width:700px){
  .leaf-accent{width:150px}
}

.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;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.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;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.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}

@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}
}