:root{
  --ivory:#f6f9f4;
  --ivory-deep:#e6efe0;
  --card:#ffffff;
  --forest:#33502f;
  --forest-deep:#182c17;
  --accent:#4f7a52;
  --accent-soft:#b7d1ac;
  --accent-line: rgba(79,122,82,0.35);
  --ink:#243024;
  --ink-soft:#57634f;
  --shadow: 0 30px 60px -20px rgba(24,44,23,0.25);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--ivory-deep);
  color:var(--ink);
  font-family:"EB Garamond", Georgia, "Times New Roman", serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body.locked{overflow:hidden; height:100vh;}

h1,h2,h3{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-weight:500;
  margin:0;
  text-wrap:balance;
  color:var(--forest-deep);
}

.eyebrow{
  font-family:"Jost", sans-serif;
  font-weight:400;
  font-size:0.72rem;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--accent);
}

.script{
  font-family:"Mrs Saint Delafield", cursive;
  font-weight:400;
  line-height:1;
}

a{color:inherit;}

/* ---------- page frame: reads like a printed card on a table ---------- */
.page{
  max-width:640px;
  margin:0 auto;
  background:var(--ivory);
  box-shadow:var(--shadow);
  position:relative;
  min-height:100vh;
}
@media(min-width:700px){
  .page{ margin:2.5rem auto; min-height:calc(100vh - 5rem); border-radius:2px; }
  body{ padding:0 1rem; }
}

/* ---------- ornaments ---------- */
.bloom-cluster{ display:block; margin:0 auto; }
.divider{
  display:flex; align-items:center; justify-content:center; gap:0.9rem;
  margin:2rem auto; width:min(320px, 70%);
}
.divider .line{ height:1px; flex:1; background:linear-gradient(90deg, transparent, var(--accent-line), transparent); }
.divider svg{ flex-shrink:0; opacity:0.85; }

.aisle-strip{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:0.55rem;
  padding:0.5rem 0 1.75rem;
}
.aisle-strip .stem{ width:1px; height:34px; background:linear-gradient(var(--accent-line), transparent); }
.aisle-strip .dot-row{ display:flex; gap:0.9rem; align-items:flex-end; }
.aisle-strip .dot{ border-radius:50%; background:var(--card); box-shadow:0 0 0 1px var(--accent-line), inset 0 -2px 4px rgba(79,122,82,0.18); }

.corner-spray{
  position:absolute;
  width:76px; height:76px;
  opacity:0.9;
  z-index:-1;
  pointer-events:none;
}
.corner-bl{ bottom:-6px; left:-6px; }
.corner-br{ bottom:-6px; right:-6px; transform:scaleX(-1); }
.corner-tl{ top:-6px; left:-6px; transform:scaleY(-1); }
.corner-tr{ top:-6px; right:-6px; transform:scale(-1,-1); }

/* envelope clips overflow (for the flap animation), so keep sprays inside its bounds */
.envelope .corner-spray{ width:44px; height:44px; opacity:0.95; }
.envelope .corner-bl{ bottom:1px; left:1px; }
.envelope .corner-br{ bottom:1px; right:1px; }

/* ================= COVER ================= */
#cover{
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(120% 90% at 50% -10%, #ffffff 0%, var(--ivory) 45%, var(--ivory-deep) 100%);
  transition:opacity 0.9s ease, visibility 0.9s ease;
}
#cover.closing{ opacity:0; visibility:hidden; pointer-events:none; }

.cover-inner{
  width:min(420px, 86vw);
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
  animation:rise 1.1s ease both;
}
@keyframes rise{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }

/* ---------- envelope (the frame itself) ---------- */
.cover-frame.envelope{
  position:relative;
  width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  gap:0.4rem;
  padding:1.1rem 1.8rem 0.9rem;
  border:1px solid var(--accent-line);
  overflow:hidden;
}
.cover-frame::before, .cover-frame::after{
  content:""; position:absolute; width:14px; height:14px;
  border:1px solid var(--accent);
  z-index:2;
}
.cover-frame::before{ top:-8px; left:-8px; border-width:1px 0 0 1px; }
.cover-frame::after{ bottom:-8px; right:-8px; border-width:0 1px 1px 0; }

.env-flap{
  position:absolute; top:0; left:0; width:100%; height:38%;
  background:linear-gradient(155deg, var(--card) 0%, var(--ivory-deep) 100%);
  border-bottom:1px solid var(--accent-line);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  transform-origin:top center;
  transform:translateY(0) scaleY(1);
  opacity:1;
  transition:transform 0.85s cubic-bezier(.5,0,.2,1), opacity 0.6s ease 0.15s;
  z-index:0;
  pointer-events:none;
}
.envelope.open .env-flap{
  transform:translateY(-60%) scaleY(0.35);
  opacity:0;
}

.env-top{ position:relative; z-index:1; text-align:center; }
.env-top .eyebrow{ margin:0; }
.env-bottom{ position:relative; z-index:1; text-align:center; }

.cover-names{
  font-size:clamp(1.4rem, 7vw, 1.8rem);
  color:var(--forest-deep);
  margin:0.25rem 0 0;
}
.amp-inline{
  font-family:"Jost", sans-serif; font-size:0.5em;
  color:var(--accent); vertical-align:middle;
}
.cover-date{
  font-family:"Jost", sans-serif;
  letter-spacing:0.16em;
  font-size:0.66rem;
  color:var(--ink-soft);
  margin:0.25rem 0 0;
}

.env-seal{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:0.3rem;
  background:transparent; border:none; padding:0.2rem;
  cursor:pointer;
  transition:opacity 0.5s ease, transform 0.5s ease;
}
.env-seal-badge{
  width:38px; height:38px;
  border-radius:50%;
  background:var(--accent);
  border:1px solid rgba(255,255,255,0.45);
  box-shadow:0 3px 10px rgba(24,44,23,0.3);
  display:flex; align-items:center; justify-content:center;
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.env-seal-badge svg{ width:20px; height:12px; }
.env-seal:hover .env-seal-badge, .env-seal:focus-visible .env-seal-badge{
  transform:scale(1.08);
  box-shadow:0 6px 16px rgba(24,44,23,0.38);
}
.env-seal:focus-visible{ outline:2px solid var(--forest); outline-offset:4px; }
.env-seal-hint{
  font-family:"Jost", sans-serif;
  font-size:0.54rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-soft);
}
.envelope.open .env-seal{ opacity:0; transform:scale(0.7); pointer-events:none; }

.cover-to-label{
  font-size:0.76rem;
  color:var(--ink-soft);
  margin:0;
}
#guestName{
  display:block; margin-top:0.1rem;
  font-family:"Cormorant Garamond", serif;
  font-size:1.05rem; font-weight:600;
  color:var(--forest-deep);
}

/* ================= SECTIONS ================= */
section{ padding:4rem 1.6rem; position:relative; z-index:0; }
.reveal{ opacity:0; transform:translateY(18px); transition:opacity 0.8s ease, transform 0.8s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ transition:none; opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* hero / opening */
.hero{
  text-align:center;
  padding-top:3.2rem;
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(143,181,133,0.18), transparent 70%);
}
.hero .script{ font-size:clamp(2.3rem, 10vw, 3rem); color:var(--forest-deep); }
.hero p{
  max-width:34ch; margin:1.2rem auto 0;
  font-size:1.08rem; line-height:1.75; color:var(--ink-soft);
}

.quote{
  text-align:center;
  background:var(--ivory-deep);
  padding:3.6rem 1.8rem;
}
.quote blockquote{
  margin:0 auto; max-width:30ch;
  font-family:"Cormorant Garamond", serif;
  font-style:italic; font-weight:500;
  font-size:clamp(1.3rem, 5vw, 1.6rem);
  line-height:1.55;
  color:var(--forest-deep);
}
.quote cite{
  display:block; margin-top:1rem;
  font-family:"Jost", sans-serif; font-style:normal;
  font-size:0.72rem; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--accent);
}

/* couple */
.couple{ text-align:center; }
.couple-grid{
  display:flex; flex-direction:column; gap:2.6rem;
  margin-top:2.4rem;
}
@media(min-width:560px){
  .couple-grid{ flex-direction:row; align-items:flex-start; gap:1.4rem; }
  .couple-grid > .person{ flex:1; }
}
.person .role{
  font-family:"Jost", sans-serif; font-size:0.68rem; letter-spacing:0.26em;
  text-transform:uppercase; color:var(--accent); margin-bottom:0.7rem;
}
.person .name{
  font-size:clamp(1.6rem, 6vw, 2rem);
  line-height:1.25;
  margin-bottom:0.8rem;
}
.person .parents{
  font-size:0.98rem; color:var(--ink-soft); line-height:1.7;
}
.amp{
  font-family:"Mrs Saint Delafield", cursive;
  font-size:2.2rem; color:var(--accent);
  align-self:center;
  padding:0 0.4rem;
}

/* event */
.event{
  text-align:center;
  background:var(--card);
  border-top:1px solid var(--accent-line);
  border-bottom:1px solid var(--accent-line);
}
.event-date{
  font-size:clamp(1.7rem, 6.5vw, 2.2rem);
  color:var(--forest-deep);
  margin-top:0.6rem;
}

.countdown{
  display:flex; justify-content:center; gap:0.7rem;
  margin:2.2rem 0 2.4rem;
  flex-wrap:wrap;
}
.countdown .cell{
  width:72px;
  padding:0.9rem 0 0.7rem;
  background:var(--ivory);
  border:1px solid var(--accent-line);
}
.countdown .num{
  font-family:"Jost", sans-serif; font-weight:500;
  font-size:1.5rem; color:var(--forest-deep);
  font-variant-numeric:tabular-nums;
}
.countdown .lbl{
  font-family:"Jost", sans-serif; font-size:0.6rem;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:0.3rem; display:block;
}

.venue-name{ font-size:1.5rem; margin-top:0.3rem; }
.venue-city{
  font-family:"Jost", sans-serif; font-size:0.78rem;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:0.4rem;
}

.map-link{
  display:inline-block; margin-top:1.6rem;
  font-family:"Jost", sans-serif; font-size:0.78rem;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--forest-deep);
  text-decoration:none;
  border-bottom:1px solid var(--accent);
  padding-bottom:0.2rem;
}
.map-link:hover{ color:var(--accent); }

/* closing */
.closing{
  text-align:center;
  padding-bottom:5rem;
}
.closing p{
  max-width:32ch; margin:1.2rem auto 0;
  font-size:1.05rem; line-height:1.75; color:var(--ink-soft);
}
.closing .script{
  font-size:clamp(2.2rem, 9vw, 2.7rem);
  color:var(--forest-deep);
  margin-top:1.8rem;
}
.closing .thanks{
  font-family:"Jost", sans-serif; font-size:0.7rem;
  letter-spacing:0.3em; text-transform:uppercase;
  color:var(--accent); margin-top:0.5rem;
}

footer{
  text-align:center; padding:1.6rem;
  font-family:"Jost", sans-serif; font-size:0.65rem;
  letter-spacing:0.1em; color:var(--ink-soft);
  background:var(--ivory-deep);
}