:root{
  --bg: #dceaf1;
  --bg-deep: #cbdfe9;
  --paper: #ffffff;
  --ink: #14161a;
  --ink-soft: #33363c;
  --pink: #f4b6b4;
  --pink-deep: #c05c59;
  --pink-pale: #f9e7e7;
  --line: rgba(20, 22, 26, 0.16);
  --serif: 'Bodoni Moda', Georgia, serif;
  --serif-italic: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:1;
  opacity:0.045; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.eyebrow{
  font-family:var(--sans);
  font-size:0.72rem;
  letter-spacing:0.34em;
  text-transform:uppercase;
  color:var(--pink-deep);
  font-weight:500;
}

/* ---------- Hero ---------- */
.hero{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:6rem 1.5rem 4rem;
  position:relative;
  background:
    radial-gradient(ellipse at 50% 0%, var(--bg-deep) 0%, var(--bg) 62%);
}

.hero-frame{
  max-width:640px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.9rem;
}

.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.hero-scene{
  width:100%;
  max-width:380px;
  margin:0 auto;
}

.date-text{
  display:block;
  width:70%;
  margin:0 auto;
  height:auto;
}

.chairs-only{
  display:block;
  width:62%;
  margin:0.6rem auto 0;
  height:auto;
}

.hero-lemon{
  width:140px;
  height:auto;
  margin:0.5rem 0 0.1rem;
}

.date-plate-img{
  display:block;
  width:100%;
  max-width:290px;
  height:auto;
}

.place{
  color:var(--ink-soft);
  text-transform:uppercase;
  font-size:0.78rem;
  letter-spacing:0.14em;
}

.countdown{
  display:flex;
  gap:1.6rem;
  margin-top:1.6rem;
}
.countdown-unit{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:3.2rem;
}
.countdown-unit .num{
  font-family:var(--serif);
  font-size:1.9rem;
  color:var(--ink);
  font-weight:500;
}
.countdown-unit .label{
  font-size:0.65rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--pink-deep);
  margin-top:0.25rem;
}

.btn{
  margin-top:1.8rem;
  display:inline-block;
  padding:0.85rem 2.1rem;
  border:1px solid var(--ink);
  border-radius:999px;
  color:var(--ink);
  text-decoration:none;
  font-size:0.82rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  transition:background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn:hover{
  background:var(--ink);
  color:var(--paper);
}

.scroll-cue{
  position:absolute;
  bottom:2rem;
  left:50%;
  transform:translateX(-50%);
  color:var(--ink-soft);
  animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob{
  0%,100%{transform:translate(-50%,0);}
  50%{transform:translate(-50%,6px);}
}

/* ---------- Intro ---------- */
.intro{
  max-width:620px;
  margin:0 auto;
  padding:4rem 1.5rem;
  text-align:center;
}
.intro-img{
  width:100%;
  max-width:480px;
  height:auto;
}

/* ---------- Section shared ---------- */
.section-head{
  text-align:center;
  margin-bottom:2.8rem;
}
.section-head h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.1rem, 5vw, 3rem);
  margin-top:0.4rem;
  color:var(--ink);
}

.venue, .travel, .flowers{
  max-width:1040px;
  margin:0 auto;
  padding:5rem 1.5rem;
}

.venue, .flowers{
  border-top:1px solid var(--line);
}

.flowers-photos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.9rem;
  width:100%;
  max-width:560px;
  margin:0 auto;
}
.flowers-photos img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
  border-radius:2px;
}

.venue-single{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:1.6rem;
}

.venue-photos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.9rem;
  width:100%;
  max-width:480px;
}
.venue-photos img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
  border-radius:2px;
}

.venue-line{
  max-width:480px;
  font-size:1.1rem;
  color:var(--ink-soft);
}

.link-out{
  display:inline-block;
  margin-top:0.2rem;
  color:var(--pink-deep);
  text-decoration:none;
  font-size:0.9rem;
  letter-spacing:0.03em;
  border-bottom:1px solid var(--pink-deep);
  padding-bottom:2px;
}
.link-out:hover{color:var(--ink); border-color:var(--ink);}

.travel{
  border-top:1px solid var(--line);
}

.travel-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2rem;
}

.travel-card{
  background-color:var(--paper);
  background-image:
    linear-gradient(rgba(255,255,255,0.62), rgba(255,255,255,0.62)),
    url("../images/sprig.pattern.png");
  background-repeat:no-repeat, repeat;
  background-size:auto, 210px 314px;
  background-position:0 0, 0 -30px;
  border:1px solid var(--line);
  border-top:3px solid var(--pink);
  border-radius:2px;
  padding:2rem 1.7rem;
}
.travel-card h3{
  font-family:var(--serif);
  font-size:1.3rem;
  font-weight:500;
  color:var(--ink);
  margin-bottom:0.7rem;
}
.travel-card p{
  font-size:0.95rem;
  color:var(--ink-soft);
}

.travel-note-img{
  display:block;
  margin:2.8rem auto 0;
  width:100%;
  max-width:420px;
  height:auto;
}

.site-footer{
  text-align:center;
  padding:4.5rem 1.5rem;
  font-size:0.75rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--paper);
  background:url("../images/flowers.jpg") center/cover no-repeat;
}

.footer-chip{
  display:inline-block;
  background:var(--ink);
  padding:0.5rem 0.9rem;
  line-height:1;
}

.footer-sep{
  display:inline-block;
  margin:0 0.5rem;
  color:var(--paper);
  text-shadow:0 1px 3px rgba(0,0,0,0.7);
}

@media (max-width: 760px){
  .venue-art .arch{max-width:180px;}
  .travel-grid{grid-template-columns:1fr;}
  .countdown{gap:1rem;}
  .countdown-unit{min-width:2.6rem;}
}