@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=EB+Garamond:ital@0;1&display=swap');

:root{
  --cream:#ede8db;
  --ink:#2f3b30;
  --green:#3f5142;
  --green-soft:#7c9178;
  --gold:#b89b5e;
  --rule:#c9beac;
  --max-width:760px;
}

*{box-sizing:border-box;}

body{
  margin:0;
  position:relative;
  background-color:var(--cream);
  background-image:url('assets/paper-texture.png');
  background-repeat:repeat;
  background-size:200px 200px;
  color:var(--ink);
  font-family:'EB Garamond', Georgia, serif;
  line-height:1.7;
}

.page{
  max-width:var(--max-width);
  margin:0 auto;
  padding:56px 24px 80px;
}

/* --- botanical corner decoration, cropped from the couple's own mockup artwork --- */
.corner{
  position:absolute;
  top:0;
  bottom:0;
  width:110px;
  pointer-events:none;
  z-index:0;
  background-repeat:repeat-y;
  background-size:100px auto;
}
.corner.left{
  left:0;
  background-image:url('assets/vine-left.png');
  background-position:top left;
}
.corner.right{
  right:0;
  background-image:url('assets/vine-right.png');
  background-position:top right;
}

/* Our Story page uses its own border art (kelp + coral fern), matching that page's reference mockup */
body.story-page .corner{
  background-size:85px auto;
}
body.story-page .corner.left{
  background-image:url('assets/story-vine-left.png');
}
body.story-page .corner.right{
  background-image:url('assets/story-vine-right.png');
}
@media (max-width:900px){
  .corner{display:none;}
}

header.site-header{
  text-align:center;
  position:relative;
  z-index:1;
}

nav.site-nav{
  display:flex;
  justify-content:center;
  gap:28px;
  flex-wrap:wrap;
  margin-bottom:48px;
  font-size:13px;
  letter-spacing:0.14em;
  text-transform:uppercase;
}
nav.site-nav a{
  color:var(--ink);
  text-decoration:none;
  padding-bottom:4px;
  border-bottom:1px solid transparent;
}
nav.site-nav a:hover,
nav.site-nav a.active{
  border-bottom:1px solid var(--ink);
}

.eyebrow{
  text-align:center;
  letter-spacing:0.28em;
  text-transform:uppercase;
  font-size:14px;
  color:var(--green);
  margin:0 0 8px;
}

h1.names{
  text-align:center;
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  font-size:52px;
  letter-spacing:0.09em;
  text-transform:uppercase;
  color:var(--green);
  margin:0 0 18px;
}

.divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin:0 0 18px;
  position:relative;
  z-index:2;
}
.divider .line{height:1px;width:90px;background:var(--rule);}
.divider img{width:34px;height:44px;object-fit:contain;display:block;}

.date-line{
  text-align:center;
  letter-spacing:0.22em;
  text-transform:uppercase;
  font-size:16px;
  color:var(--ink);
  margin:0 0 40px;
}

.hero-photo{
  width:100%;
  height:auto;
  display:block;
  margin:0 0 32px;
  object-fit:cover;
  max-height:520px;
  box-shadow:0 0 0 5px var(--cream), 0 0 0 6px #bbb9aa;
}

.venue{
  text-align:center;
  margin:8px 0 40px;
}
.venue .venue-name{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:22px;
  margin:0 0 4px;
}
.venue .venue-loc{
  letter-spacing:0.18em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--green);
}

.venue-illustration{
  display:block;
  width:100%;
  max-width:680px;
  height:auto;
  margin:-42px auto 8px;
  position:relative;
  z-index:1;
}

.tagline{
  text-align:center;
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:22px;
  color:var(--ink);
  margin:32px 0;
}

footer.site-footer{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:22px;
  flex-wrap:nowrap;
  margin-top:56px;
  text-align:center;
}
footer.site-footer a{
  color:var(--ink);
  text-decoration:none;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  flex:0 0 auto;
  width:76px;
}
footer.site-footer img{
  width:70px;
  height:70px;
  object-fit:contain;
  display:block;
  margin:0 auto 10px;
}
footer.site-footer svg{
  width:28px;
  height:28px;
  color:var(--green-soft);
  display:block;
  margin:0 auto 8px;
}
@media (max-width:420px){
  footer.site-footer{gap:10px;}
  footer.site-footer a{width:64px;font-size:9px;}
  footer.site-footer img{width:64px;height:64px;}
}

h2.section-title{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  font-size:34px;
  text-align:center;
  color:var(--green);
  letter-spacing:0.04em;
  margin:0 0 28px;
}

.content-block{
  position:relative;
  z-index:1;
}

.content-block p{
  font-size:17px;
}

.info-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  margin:32px 0;
}
@media (max-width:600px){
  .info-grid{grid-template-columns:1fr;}
}
.info-card{
  border:1px solid var(--rule);
  padding:24px;
  text-align:center;
}
.info-card h3{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  font-size:20px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--green);
  margin:0 0 10px;
}

form.rsvp-form{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-top:24px;
}
form.rsvp-form label{
  font-size:13px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--green);
  display:block;
  margin-bottom:6px;
}
form.rsvp-form input,
form.rsvp-form select,
form.rsvp-form textarea{
  width:100%;
  font-family:'EB Garamond', serif;
  font-size:16px;
  padding:10px 12px;
  border:1px solid var(--rule);
  background:#fff;
  color:var(--ink);
}
form.rsvp-form button{
  align-self:center;
  margin-top:12px;
  padding:12px 36px;
  background:var(--green);
  color:var(--cream);
  border:none;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-size:13px;
  cursor:pointer;
}
form.rsvp-form button:hover{background:var(--ink);}

.rsvp-lookup{
  max-width:460px;
  margin:32px auto 0;
  text-align:center;
}
.rsvp-lookup label{
  display:block;
  font-size:13px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:8px;
}
.rsvp-search-row{
  display:flex;
  gap:10px;
}
.rsvp-search-row input{
  flex:1;
  font-family:'EB Garamond', serif;
  font-size:16px;
  padding:10px 12px;
  border:1px solid var(--rule);
  background:#fff;
  color:var(--ink);
}
.rsvp-search-row button{
  padding:10px 22px;
  background:var(--green);
  color:var(--cream);
  border:none;
  letter-spacing:0.1em;
  text-transform:uppercase;
  font-size:13px;
  cursor:pointer;
}
.rsvp-search-row button:hover{background:var(--ink);}

.rsvp-matches{
  max-width:460px;
  margin:20px auto 0;
  text-align:center;
}
.rsvp-match-btn{
  display:block;
  width:100%;
  margin:8px 0;
  padding:12px;
  background:#fff;
  border:1px solid var(--rule);
  font-family:'EB Garamond', serif;
  font-size:16px;
  color:var(--ink);
  cursor:pointer;
}
.rsvp-match-btn:hover{border-color:var(--green);}

#rsvp-party-form{
  max-width:460px;
  margin:24px auto 0;
}
.rsvp-member-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
  border-bottom:1px solid var(--rule);
}
.rsvp-member-name{
  font-size:17px;
}
.rsvp-plusone-name{
  flex:1;
  font-family:'EB Garamond', serif;
  font-size:16px;
  padding:8px 10px;
  border:1px solid var(--rule);
  background:#fff;
  color:var(--ink);
}
.rsvp-toggle-group{
  display:flex;
  gap:8px;
  flex:0 0 auto;
}
.rsvp-toggle{
  padding:8px 18px;
  background:#fff;
  border:1px solid var(--rule);
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  cursor:pointer;
  color:var(--ink);
}
.rsvp-toggle.is-selected.rsvp-toggle-yes{
  background:var(--green);
  border-color:var(--green);
  color:var(--cream);
}
.rsvp-toggle.is-selected.rsvp-toggle-no{
  background:#8a5a4a;
  border-color:#8a5a4a;
  color:var(--cream);
}
#rsvp-party-form button[type="submit"]{
  display:block;
  margin:24px auto 0;
  padding:12px 36px;
  background:var(--green);
  color:var(--cream);
  border:none;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-size:13px;
  cursor:pointer;
}
#rsvp-party-form button[type="submit"]:hover{background:var(--ink);}

.rsvp-public{
  max-width:460px;
  margin:56px auto 0;
  text-align:center;
  border-top:1px solid var(--rule);
  padding-top:32px;
}
.rsvp-public-title{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  font-size:24px;
  color:var(--green);
  margin:0 0 8px;
}
.rsvp-public-list{
  list-style:none;
  padding:0;
  margin:16px 0 0;
  columns:2;
  gap:8px;
  text-align:left;
}
.rsvp-public-list li{
  font-size:15px;
  padding:4px 0;
  break-inside:avoid;
}
.rsvp-public-empty{
  color:var(--green-soft);
  font-style:italic;
}

.story-hero{
  display:block;
  width:100%;
  height:auto;
  margin:0 0 28px;
  box-shadow:0 0 0 5px var(--cream), 0 0 0 6px #bbb9aa;
}

.story-collage{
  position:relative;
  width:100%;
  aspect-ratio:808/700;
  margin:0 0 8px;
}
.sc-photo{
  position:absolute;
  object-fit:cover;
  width:100%;
  height:100%;
  box-sizing:border-box;
  box-shadow:0 0 0 5px var(--cream), 0 0 0 6px #bbb9aa;
}
.sc-photo1{ left:0%;    top:2%;   width:26.7%; height:41.4%; }
.sc-photo2{ left:70.8%; top:2%;   width:29.2%; height:41.4%; }
.sc-photo3{ left:55.1%; top:49.6%; width:33.8%; height:41%; }
.sc-text{
  position:absolute;
}
.sc-text1{ left:28.8%; top:2%;    width:39.6%; }
.sc-text2{ left:15.1%; top:50.1%; width:36%; }
.sc-text p{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:14px;
  line-height:1.55;
  color:var(--ink);
}
.sc-text .divider{ margin:10px 0; }
.sc-text .divider .line{ width:36px; }
.sc-text .divider img{ width:16px; height:20px; }

.story-bottom{
  display:block;
  width:78%;
  max-width:560px;
  height:auto;
  margin:8px auto 8px;
}

@media (max-width:700px){
  .story-collage{
    position:static;
    aspect-ratio:auto;
    display:flex;
    flex-direction:column;
    gap:20px;
  }
  .sc-photo, .sc-text{
    position:static;
    width:100% !important;
    height:auto !important;
  }
  .sc-text p{ font-size:16px; }
}

.gallery-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:32px;
}
.gallery-grid .ph{
  aspect-ratio:4/5;
  border:1px solid var(--rule);
  background:#efe8d9;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--green-soft);
  text-align:center;
  padding:10px;
}
@media (max-width:600px){
  .gallery-grid{grid-template-columns:1fr;}
}

.note{
  font-size:13px;
  color:var(--green-soft);
  text-align:center;
  margin-top:8px;
}