/* ============================================================
   Stella & Nick — Wedding RSVP
   Palette drawn from the save-the-date: ivory, gold, wine.
   ============================================================ */
:root{
  --cream:      #faf5ec;
  --cream-2:    #f3e9d8;
  --paper:      #fffdf8;
  --gold:       #b3924f;
  --gold-soft:  #cbb074;
  --gold-line:  #d8c49a;
  --wine:       #7a2c2b;
  --wine-deep:  #5f2120;
  --ink:        #3d3733;
  --muted:      #8a7f72;
  --shadow:     0 18px 50px rgba(90, 60, 20, .12);
  --serif:      "Cormorant Garamond", Georgia, serif;
  --sans:       "Montserrat", system-ui, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--serif);
  color:var(--ink);
  background:var(--cream);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }

/* Shared label style */
.eyebrow,.section-eyebrow,.subhead,.gate-eyebrow{
  font-family:var(--sans);
  font-weight:400;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--gold);
  font-size:.72rem;
}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--sans);
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:.95em 2.1em;
  border-radius:2px;
  cursor:pointer;
  display:inline-block;
  text-decoration:none;
  transition:all .25s ease;
  border:1px solid var(--gold);
}
.btn-solid{ background:var(--wine); color:#fdf6ea; border-color:var(--wine); }
.btn-solid:hover{ background:var(--wine-deep); }
.btn-outline{ background:transparent; color:var(--gold); }
.btn-outline:hover{ background:var(--gold); color:#fff; }

/* ---------- Crest ---------- */
.crest{ display:flex; justify-content:center; }
.crest--hero{ margin-bottom:.4rem; }
.crest--footer{ margin-bottom:.6rem; opacity:.9; }
.crest-img{ display:block; height:auto; }

/* ============================================================
   PASSWORD GATE
   ============================================================ */
.gate{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
  background:
    radial-gradient(120% 90% at 50% 0%, #fffdf8 0%, var(--cream) 55%, var(--cream-2) 100%);
}
.gate-card{
  position:relative;
  width:100%; max-width:420px;
  text-align:center;
  background:var(--paper);
  border:1px solid var(--gold-line);
  box-shadow:var(--shadow);
  padding:3rem 2.2rem 2.6rem;
  border-radius:3px;
}
.gate-card::before{
  content:""; position:absolute; inset:9px;
  border:1px solid var(--gold-line); opacity:.6; pointer-events:none; border-radius:2px;
}
.gate-eyebrow{ margin-bottom:1.1rem; }
.gate-title{
  font-weight:500; font-size:1.7rem; line-height:1.25; color:var(--ink); margin-bottom:.5rem;
}
.gate-sub{ color:var(--muted); font-size:1.05rem; margin-bottom:1.6rem; }
#gateForm{ display:flex; flex-direction:column; gap:.8rem; }
#gateInput{
  font-family:var(--sans); font-size:1rem; letter-spacing:.3em; text-align:center;
  padding:.85em 1em; border:1px solid var(--gold-line); border-radius:2px;
  background:#fffdf8; color:var(--ink); outline:none; transition:border-color .2s;
}
#gateInput:focus{ border-color:var(--gold); }
#gateForm button{
  font-family:var(--sans); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  padding:.95em; background:var(--wine); color:#fdf6ea; border:none; border-radius:2px; cursor:pointer;
  transition:background .25s;
}
#gateForm button:hover{ background:var(--wine-deep); }
.gate-error{ color:var(--wine); font-family:var(--sans); font-size:.8rem; margin-top:.9rem; letter-spacing:.02em; }
.gate-lang{
  position:absolute; top:12px; right:14px;
  background:none; border:none; cursor:pointer;
  font-family:var(--sans); font-size:.7rem; letter-spacing:.15em; color:var(--gold);
}

/* ============================================================
   LANGUAGE TOGGLE
   ============================================================ */
.lang-toggle{
  position:fixed; top:16px; right:16px; z-index:50;
  display:flex; align-items:center; gap:.4rem;
  background:rgba(255,253,248,.85); backdrop-filter:blur(6px);
  border:1px solid var(--gold-line); border-radius:40px;
  padding:.4rem .8rem; cursor:pointer;
  font-family:var(--sans); font-size:.72rem; letter-spacing:.12em; color:var(--gold);
}
.lang-toggle:hover{ border-color:var(--gold); }
.lang-flag{ font-size:1rem; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding:2.2rem 1.1rem 1rem; }
.hero-frame{
  max-width:960px; margin:0 auto;
  background:var(--paper);
  border:1px solid var(--gold-line);
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
  display:grid; grid-template-columns:1fr;
}
.hero-frame::before{
  content:""; position:absolute; inset:10px; border:1px solid var(--gold-line);
  opacity:.5; pointer-events:none; z-index:3;
}
.hero-media{ order:-1; }
.hero-photo{
  width:100%; aspect-ratio:4/5; min-height:320px;
  /* Top: soft wine/gold wash. Middle: the photo. Bottom: gradient
     fallback that shows only until assets/photo-1.jpg exists. */
  background:
    linear-gradient(180deg, rgba(122,44,43,.06), rgba(179,146,79,.10)),
    url("assets/hero.jpg") center/cover no-repeat,
    radial-gradient(90% 70% at 50% 30%, #e9d8bf, #c9a878 70%, #a9814f 100%);
}

.hero-text{ padding:2.6rem 1.6rem 2.8rem; text-align:center; }
.eyebrow{ margin-bottom:1.1rem; }
.names{
  font-weight:500; line-height:.95; color:var(--wine);
  font-size:clamp(3rem, 13vw, 5.4rem);
  display:flex; flex-direction:column; align-items:center; gap:.1rem;
}
.names .amp{
  font-style:italic; font-size:.4em; color:var(--gold); text-transform:lowercase; letter-spacing:0;
  font-family:var(--serif);
}
.subhead{ margin:1rem 0 1.6rem; }

.date-block{
  display:flex; align-items:center; justify-content:center; gap:1rem; margin:1.4rem 0 1.2rem;
}
.date-side{
  font-family:var(--sans); font-size:.9rem; letter-spacing:.2em; color:var(--gold);
  border-top:1px solid var(--gold-line); border-bottom:1px solid var(--gold-line); padding:.35rem 0;
}
.date-main{ display:flex; flex-direction:column; align-items:center; }
.date-month{ font-family:var(--sans); letter-spacing:.32em; font-size:.8rem; color:var(--ink); }
.date-day{ font-family:var(--serif); font-weight:600; font-size:3.4rem; color:var(--wine); line-height:1; }

.venue-name{ font-size:1.7rem; color:var(--ink); margin-top:1rem; }
.venue-city{ font-family:var(--sans); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); margin-top:.2rem; }

.journey{ display:flex; align-items:center; justify-content:center; gap:.6rem; margin:1.6rem 0 .6rem; font-size:1.1rem; }
.journey-line{ width:46px; height:1px; background:var(--gold-line); }
.journey-text{ font-style:italic; color:var(--gold); font-size:1.15rem; }

.invite-line{ max-width:30ch; margin:1.4rem auto 0; color:var(--muted); font-size:1.15rem; }

/* ============================================================
   COUNTDOWN
   ============================================================ */
.countdown-section{ text-align:center; padding:2.8rem 1rem 1rem; }
.section-eyebrow{ margin-bottom:1.3rem; display:block; }
.countdown{ display:flex; justify-content:center; gap:clamp(.7rem,4vw,2.2rem); }
.count-unit{
  display:flex; flex-direction:column; align-items:center; min-width:56px;
}
.count-num{
  font-family:var(--serif); font-weight:600; font-size:clamp(2.2rem,9vw,3.4rem);
  color:var(--wine); line-height:1;
}
.count-label{
  font-family:var(--sans); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin-top:.5rem;
}
.countdown-done{ font-size:1.8rem; color:var(--wine); font-style:italic; }

/* ============================================================
   DIVIDER
   ============================================================ */
.divider{ text-align:center; color:var(--gold); font-size:1.3rem; margin:2.4rem 0; }
.divider span{ position:relative; }
.divider span::before,.divider span::after{
  content:""; position:absolute; top:50%; width:60px; height:1px; background:var(--gold-line);
}
.divider span::before{ right:26px; }
.divider span::after{ left:26px; }

/* ============================================================
   DETAILS
   ============================================================ */
.details{
  max-width:820px; margin:0 auto; padding:1rem 1.2rem;
  display:grid; gap:1.2rem; grid-template-columns:1fr;
}
.detail-card{
  background:var(--paper); border:1px solid var(--gold-line); border-radius:3px;
  padding:2rem 1.6rem; text-align:center;
}
.detail-card h2{
  font-family:var(--sans); font-weight:400; letter-spacing:.2em; text-transform:uppercase;
  font-size:.82rem; color:var(--gold); margin-bottom:.8rem;
}
.detail-card p{ font-size:1.2rem; color:var(--ink); }
.detail-card--solo{ max-width:520px; margin:0 auto; }

/* ============================================================
   SHARED SECTION HEADINGS
   ============================================================ */
.section-title{
  font-family:var(--serif); font-weight:500; color:var(--wine);
  font-size:clamp(2rem, 6vw, 2.6rem); text-align:center; margin:.2rem 0 .3rem;
}
.section-intro{
  max-width:42ch; margin:.4rem auto 0; text-align:center;
  color:var(--muted); font-size:1.18rem;
}

/* ============================================================
   WEDDING EVENTS
   ============================================================ */
.events{ max-width:820px; margin:0 auto; padding:2.4rem 1.2rem 1rem; text-align:center; }
.events-list{ display:grid; gap:1.1rem; margin-top:1.8rem; text-align:left; }
.event-card{
  background:var(--paper); border:1px solid var(--gold-line); border-radius:3px;
  padding:1.6rem 1.5rem; position:relative;
}
.event-card--highlight{ border-color:var(--gold); box-shadow:0 8px 26px rgba(122,44,43,.08); }
.event-date{
  font-family:var(--sans); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.5rem;
}
.event-name{ font-family:var(--serif); font-weight:600; font-size:1.65rem; color:var(--wine); margin-bottom:.55rem; }
.event-body{ color:var(--ink); font-size:1.12rem; }
.event-time{
  font-family:var(--sans); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--wine); margin-top:.8rem; padding-top:.7rem; border-top:1px solid var(--gold-line);
}

/* ============================================================
   TRAVEL & ACCOMMODATIONS
   ============================================================ */
.travel{ max-width:700px; margin:0 auto; padding:2.4rem 1.4rem; text-align:center; }
.travel-body{ margin-top:1.4rem; }
.travel-body p{ color:var(--ink); font-size:1.18rem; margin-bottom:1.1rem; }
.travel-body p:last-child{ margin-bottom:0; }
.travel-hood strong{ color:var(--wine); font-weight:600; }
.travel-hotels{
  list-style:none;
  margin:0 auto 1.1rem;
  max-width:560px;
  border-top:1px solid var(--gold-line);
}
.travel-hotels li{
  padding:.7rem .2rem;
  border-bottom:1px solid var(--gold-line);
  font-size:1.1rem;
  color:var(--ink);
}
.hotel-tier{
  display:block;
  font-family:var(--sans);
  font-size:.68rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:.25rem;
}

/* ============================================================
   VENUE
   ============================================================ */
.venue{ text-align:center; padding:2.6rem 1.2rem; }
.venue-title{ font-size:2.4rem; color:var(--wine); font-weight:500; margin:.2rem 0; }
.venue-address{ font-family:var(--sans); font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-bottom:1.6rem; }

/* ============================================================
   RSVP
   ============================================================ */
.rsvp{ max-width:520px; margin:0 auto; padding:1rem 1.4rem 3rem; text-align:center; }
.rsvp-title{ font-size:3rem; color:var(--wine); font-weight:500; margin:.2rem 0 .4rem; }
.rsvp-sub{ color:var(--muted); font-size:1.1rem; margin-bottom:2rem; }
.rsvp-form{ display:flex; flex-direction:column; gap:1.2rem; text-align:left; }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field label,.field legend{
  font-family:var(--sans); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
}
.field input[type=text]{
  font-family:var(--serif); font-size:1.2rem; padding:.7em .9em;
  border:1px solid var(--gold-line); border-radius:2px; background:var(--paper); color:var(--ink);
  outline:none; transition:border-color .2s;
}
.field input[type=text]:focus{ border-color:var(--gold); }
.field--radio{ border:none; }
.field--radio legend{ margin-bottom:.7rem; }
.radio{
  display:flex; align-items:center; gap:.7rem; padding:.85em 1em; margin-bottom:.6rem;
  border:1px solid var(--gold-line); border-radius:2px; cursor:pointer; font-size:1.15rem;
  transition:border-color .2s, background .2s;
}
.radio:hover{ border-color:var(--gold-soft); }
.radio input{ accent-color:var(--wine); width:1.1em; height:1.1em; }
.radio:has(input:checked){ border-color:var(--wine); background:#fbf4ec; }
.btn-solid{ align-self:center; margin-top:.6rem; width:100%; max-width:320px; }
.form-msg{
  font-family:var(--sans); font-size:.9rem; letter-spacing:.02em; text-align:center;
  padding:1rem; border-radius:3px; margin-top:.4rem;
}
.form-msg.success{ background:#f0f5ec; color:#456a35; border:1px solid #cddcc0; }
.form-msg.error{ background:#f9edec; color:var(--wine); border:1px solid #e6c9c7; }

/* ============================================================
   GALLERY (photo strip)
   ============================================================ */
.gallery{ max-width:960px; margin:0 auto; padding:1rem 1.1rem; text-align:center; }
.gallery-grid{ display:grid; gap:.7rem; grid-template-columns:1fr; margin-top:1.3rem; }
.gallery-photo{
  aspect-ratio:3/4; border:1px solid var(--gold-line); border-radius:2px;
  background:
    var(--img) center/cover no-repeat,
    linear-gradient(160deg, #e9d8bf, #c9a878 70%, #a9814f 100%);
}

/* ============================================================
   FILM (video)
   ============================================================ */
.film{ max-width:560px; margin:0 auto; padding:2rem 1.1rem 1rem; text-align:center; }
.film-frame{
  margin-top:1.3rem; border:1px solid var(--gold-line); border-radius:3px;
  background:var(--paper); padding:10px; box-shadow:var(--shadow);
}
.film-frame video{ width:100%; display:block; border-radius:2px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ text-align:center; padding:3rem 1rem 3.5rem; background:var(--cream-2); margin-top:2.5rem; }
.footer-names{ font-size:1.8rem; color:var(--wine); }
.footer-date{ font-family:var(--sans); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-top:.4rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width:760px){
  .hero-frame{ grid-template-columns:1fr 1fr; }
  .hero-media{ order:1; }
  .hero-photo{ height:100%; aspect-ratio:auto; }
  .hero-text{ padding:3.4rem 2.4rem; display:flex; flex-direction:column; justify-content:center; }
  .details{ grid-template-columns:1fr 1fr; }
  .gallery-grid{ grid-template-columns:repeat(3, 1fr); }
}

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