:root{
  /* Beach palette */
  --sand:#fbf6ee;
  --foam:#f7fbff;
  --sea:#1687a7;
  --sea-2:#0f6f92;
  --sunset:#c85a6a;

  /* Neutrals */
  --ink:#1f1f1f;
  --muted:#6b6b6b;
  --rule:#2a2a2a;
  --paper:#ffffff;
  --max:1100px;
}

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

body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(1200px 500px at 50% 0%, rgba(22,135,167,.10), transparent 60%),
    linear-gradient(180deg, var(--sand) 0%, var(--foam) 55%, #ffffff 100%);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Masthead */
.masthead{
  text-align:center;
  padding:26px 16px 10px;
}
.masthead .title{
  font-family:"Playfair Display", "Cormorant Garamond", Georgia, serif;
  font-size: clamp(40px, 6.5vw, 78px);
  letter-spacing:.02em;
  line-height:1;
  margin:0;
}
.rules{
  max-width:var(--max);
  margin:12px auto 0;
  padding:0 16px;
}
.rule{
  height:2px;
  background:var(--rule);
  margin:0 auto;
  max-width:var(--max);
}
.rule.thin{height:1px; margin-top:4px; opacity:.65}

/* Top block */
.hero{
  text-align:center;
  padding: 38px 16px 18px;
}
.names{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size: clamp(42px, 6vw, 64px);
  letter-spacing:.10em;
  font-weight:600;
  margin:0;
  text-transform:uppercase;
}
.date,.countdown{
  margin:14px 0 0;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
}
.countdown{margin-top:8px}
.countdown strong{color:var(--ink); font-weight:700}
.photo {
  width: 100%;
  max-width: 1100px;     /* Optional: keeps it classy on wide screens */
  margin: 30px auto;
  overflow: hidden;
  border-radius: 16px;
}

.photo img {
  width: 100%;
  height: 20px;         /* Adjust height */
  object-fit: cover;     /* Crops it without stretching */
  object-position: center 35%; /* shifts focus upward slightly */
  display: block;
}


/* Nav */
.nav-wrap{
  position:sticky;
  top:0;
  z-index:10;
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(0,0,0,.08);
}
nav{
  max-width:var(--max);
  margin:0 auto;
  padding: 12px 16px;
  display:flex;
  gap:18px;
  justify-content:center;
  flex-wrap:wrap;
}
nav a{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--muted);
  padding:6px 2px;
  border-bottom:2px solid transparent;
}
nav a:hover, nav a:focus-visible{
  color:var(--ink);
  border-bottom-color:var(--ink);
  outline:none;
}
nav a.active{color:var(--ink); border-bottom-color:var(--ink)}

/* Content */
main{
  max-width:var(--max);
  margin:0 auto;
  padding: 0 16px 56px;
}

.photo{
  margin:26px auto 0;
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.10);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  background:#fff;
}
.photo img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}

.center{text-align:center}

.btn{
  display:inline-block;
  margin:18px auto 0;
  padding:11px 18px;
  border:1px solid rgba(0,0,0,.20);
  background: linear-gradient(180deg, rgba(22,135,167,.98), rgba(15,111,146,.98));
  color:#fff;
  text-decoration:none;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  border-radius:10px;
  box-shadow: 0 10px 22px rgba(15,111,146,.18);
}
.btn:hover{filter:brightness(1.05)}

.section{
  padding: 34px 0;
  border-bottom:1px solid rgba(0,0,0,.12);
}
.section:last-child{border-bottom:none}

.h{
  margin:0;
  text-align:center;
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size: 30px;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-weight:600;
}
.subline{
  margin:10px 0 0;
  text-align:center;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
}
.meta{
  margin:14px auto 0;
  max-width: 760px;
  text-align:center;
  font-size:16px;
  line-height:1.7;
  color:var(--ink);
}
.meta small{color:var(--muted)}

/* Events blocks */
.event{padding: 18px 0}
.event + .event{border-top:1px solid rgba(0,0,0,.12)}
.event .meta{margin-top:10px}

/* Simple details blocks (Travel/Stay) */
details{
  max-width: 920px;
  margin: 0 auto;
  border:1px solid rgba(0,0,0,.12);
  padding:14px 16px;
  border-radius:12px;
  background:rgba(255,255,255,.88);
}
details + details{margin-top:12px}
summary{
  cursor:pointer;
  list-style:none;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink);
  font-weight:600;
  outline:none;
}
summary::-webkit-details-marker{display:none}
.details-body{
  margin-top:12px;
  color:var(--ink);
  font-size:16px;
  line-height:1.7;
}
.details-body a{color:var(--sea-2); font-weight:700; text-decoration:none}
.details-body a:hover{text-decoration:underline}

/* RSVP form */
.form{max-width:640px; margin:18px auto 0; text-align:left}
.row{margin-top:12px}

.inline{display:flex; gap:10px; align-items:stretch}
.inline input{flex:1}

.btn-secondary{
  white-space:nowrap;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.14);
  border-radius:12px;
  background:rgba(255,255,255,.92);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
  cursor:pointer;
}
.btn-secondary:disabled{opacity:.55; cursor:not-allowed}

.hint{
  margin:8px 2px 0;
  font-size:13px;
  color:var(--muted);
  line-height:1.5;
}

.status{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.70);
  color:var(--ink);
  display:none;
}

.status.ok{border-color:rgba(19,120,88,.35); background:rgba(236,248,243,.80)}
.status.bad{border-color:rgba(170,46,46,.35); background:rgba(255,241,241,.85)}

fieldset{border:0; padding:0; margin:0}
fieldset[disabled]{
  opacity:.55;
  filter:saturate(.7);
}
label{
  display:block;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:6px;
}
input, select, textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.18);
  border-radius:12px;
  font-size:14px;
  font-family:inherit;
  background:rgba(255,255,255,.92);
}
textarea{min-height:96px; resize:vertical}
.submit{
  width:100%;
  margin-top:14px;
  padding:12px 14px;
  border:1px solid rgba(0,0,0,.14);
  background: linear-gradient(180deg, rgba(22,135,167,.98), rgba(15,111,146,.98));
  color:#fff;
  border-radius:12px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow: 0 10px 22px rgba(15,111,146,.18);
}

/* Footer */
.footer{
  text-align:center;
  padding: 22px 16px 32px;
  border-top:1px solid rgba(0,0,0,.12);
  color:var(--muted);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.monogram{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:22px;
  color:var(--ink);
  letter-spacing:.18em;
}
.footer-meta{margin-top:8px}

@media (max-width:520px){
  .names{letter-spacing:.06em}
  nav{gap:12px}
}

/* Falling petals + cupid (global) */
#petals{position:fixed; inset:0; pointer-events:none; z-index:8; overflow:hidden}
#petals .petal{
  position:absolute;
  width:12px;
  height:8px;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.95), rgba(240,213,218,.85));
  border-radius:60% 40% 60% 40%;
  opacity:.75;
  filter: blur(.1px);
  animation: petalFall 14s linear infinite;
}
@keyframes petalFall{
  0%{ transform: translateY(-15vh) translateX(0) rotate(0deg); }
  100%{ transform: translateY(120vh) translateX(8vw) rotate(360deg); }
}

/* Cupid */
.cupid{position:fixed; top:16%; left:-160px; height:100px; width:180px; opacity:0; pointer-events:none; z-index:95}
@keyframes flyCupid{
  0%{transform: translateX(-180px) translateY(0) scale(1); opacity:0;}
  10%{opacity:1;}
  50%{transform: translateX(50vw) translateY(-100px) scale(1.05); opacity:1;}
  90%{opacity:1;}
  100%{transform: translateX(120vw) translateY(40px) scale(1); opacity:0;}
}
.flyCupid{animation: flyCupid 18s ease-in-out forwards}

.heart{position:fixed; font-size:22px; color:var(--sunset); opacity:0; z-index:94; pointer-events:none; animation: floatHeart 2.6s ease-in-out forwards;}
@keyframes floatHeart{
  0%{ transform: scale(.9) translateY(0); opacity:0; }
  15%{ opacity:1; }
  100%{ transform: scale(1.2) translateY(-80px); opacity:0; }
}


/* Utility */
.hidden{display:none !important;}