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

:root{
  --butter:#FFF4B8;
  --cream:#FFF9EE;
  --fuchsia:#E7197D;
  --blush:#F7D7DF;
  --plum:#54233F;
  --ink:#402433;
  --muted:#7a5a69;
  --line:rgba(84,35,63,.16);
  --shadow:0 18px 45px rgba(84,35,63,.12)
}

body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,var(--butter),#fff8d9 45%,#fffdf6);
  min-height:100vh
}

button,input,textarea{font:inherit}
button{cursor:pointer}

.shell{
  width:min(1120px,calc(100% - 32px));
  margin:auto
}

.site-header{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px max(18px,calc((100vw - 1120px)/2));
  background:rgba(255,244,184,.9);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(84,35,63,.08)
}

.brand{
  text-decoration:none;
  color:var(--plum);
  display:flex;
  gap:8px;
  align-items:baseline
}

.brand span{
  font-family:cursive;
  color:var(--fuchsia);
  font-size:1.2rem
}

.pill-link,
.primary,
.paypal{
  border-radius:999px;
  padding:12px 17px;
  text-decoration:none;
  font-weight:800
}

.pill-link{
  background:var(--plum);
  color:white
}

.hero{
  position:relative;
  padding:80px 0 50px
}

.eyebrow{
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.15em;
  color:var(--fuchsia);
  text-transform:uppercase
}

.hero h1,
.context h2,
.gallery h2,
.rhythm h2,
.booking h2,
.confirmation h2{
  font-family:Georgia,serif;
  color:var(--plum);
  letter-spacing:-.04em
}

.hero h1{
  font-size:clamp(3.2rem,8vw,6.8rem);
  line-height:.94;
  margin:.14em 0
}

.hero h1 em{
  color:var(--fuchsia)
}

.lead{
  font-size:1.15rem;
  line-height:1.7;
  max-width:760px
}

.meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap
}

.meta span,
.availability-pill{
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,249,238,.75);
  padding:9px 13px;
  font-size:.85rem;
  font-weight:700
}

.sil-card{
  margin-top:28px;
  width:min(420px,100%);
  display:flex;
  align-items:center;
  gap:16px;
  background:var(--cream);
  padding:18px;
  border-radius:24px;
  box-shadow:var(--shadow)
}

.monogram{
  width:74px;
  height:74px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--fuchsia);
  color:white;
  font-size:1.8rem;
  font-family:Georgia,serif
}

.sil-card small,
.sil-card span{
  display:block;
  color:var(--muted)
}

.sil-card strong{
  display:block;
  color:var(--plum);
  font-size:1.15rem
}

.flower{
  position:absolute;
  right:0;
  top:30px;
  width:120px;
  height:120px;
  border-radius:50%;
  background:
    radial-gradient(circle at center,#f4c75e 0 10%,transparent 11%),
    conic-gradient(
      from 20deg,
      #ef78ad 0 12%,
      transparent 12% 20%,
      #f6b6cf 20% 32%,
      transparent 32% 40%,
      #ef78ad 40% 52%,
      transparent 52% 60%,
      #f6b6cf 60% 72%,
      transparent 72% 80%,
      #ef78ad 80% 92%,
      transparent 92%
    );
  opacity:.55
}

.context{
  background:rgba(255,249,238,.85);
  border:1px solid var(--line);
  border-radius:26px;
  padding:30px;
  box-shadow:var(--shadow)
}

.context h2,
.gallery h2,
.rhythm h2,
.booking h2,
.confirmation h2{
  font-size:clamp(2.3rem,5vw,4rem);
  margin:.15em 0
}

.context p:last-child{
  max-width:820px;
  line-height:1.7
}

.gallery,
.rhythm,
.booking,
.confirmation{
  padding:78px 0
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:210px;
  gap:12px
}

.gallery-grid figure{
  position:relative;
  margin:0;
  overflow:hidden;
  border-radius:22px;
  background:var(--blush)
}

.gallery-grid figure.wide{
  grid-column:span 2
}

.gallery-grid img{
  width:100%;
  height:100%;
  object-fit:cover
}

.gallery-grid figcaption{
  position:absolute;
  left:10px;
  bottom:10px;
  background:rgba(255,249,238,.9);
  padding:8px 10px;
  border-radius:999px;
  font-size:.68rem;
  font-weight:800;
  color:var(--plum)
}

.note{
  font-size:.82rem;
  color:var(--muted);
  line-height:1.5
}

.rhythm-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px
}

.rhythm-grid article{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:22px;
  padding:22px
}

.rhythm-grid time{
  color:var(--fuchsia);
  font-size:.72rem;
  font-weight:800
}

.rhythm-grid h3,
.step h3,
.payment h3{
  font-family:Georgia,serif;
  color:var(--plum)
}

.rhythm-grid p{
  color:var(--muted);
  line-height:1.6
}

.step{
  display:grid;
  grid-template-columns:70px 1fr;
  gap:18px;
  padding:30px 0;
  border-top:1px solid var(--line)
}

.num{
  width:52px;
  height:52px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--plum);
  color:white;
  font-weight:800
}

.step h3{
  font-size:1.9rem;
  margin:0
}

.helper{
  color:var(--muted)
}

.choice-grid{
  display:grid;
  gap:10px
}

.people-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))
}

.meeting-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))
}

.choice-grid button,
.idea-grid button,
.date-grid button,
.time-grid button{
  border:1px solid var(--line);
  background:var(--cream);
  color:var(--plum);
  border-radius:16px;
  padding:14px;
  font-weight:800
}

.choice-grid button.selected,
.date-grid button.selected,
.time-grid button.selected{
  background:var(--fuchsia);
  color:white;
  border-color:var(--fuchsia)
}

.greeting{
  padding:12px 14px;
  background:rgba(247,215,223,.65);
  border-left:4px solid var(--fuchsia);
  border-radius:12px;
  font-weight:800
}

.idea-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px
}

.idea-grid button{
  text-align:left
}

.idea-grid button strong{
  display:block;
  font-family:Georgia,serif;
  font-size:1.18rem
}

.idea-grid button span{
  display:block;
  color:var(--muted);
  font-size:.88rem;
  line-height:1.5;
  margin-top:5px
}

.idea-grid button.selected{
  outline:3px solid rgba(231,25,125,.18);
  border-color:var(--fuchsia)
}

.field{
  display:grid;
  gap:7px;
  margin-top:15px
}

.field span{
  font-weight:800;
  color:var(--plum)
}

.field small{
  font-weight:400;
  color:var(--muted)
}

.field input,
.field textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  background:rgba(255,249,238,.9);
  color:var(--ink)
}

.field-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 12px
}

.date-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px
}

.date-grid button{
  display:grid;
  text-align:center
}

.date-grid .dow,
.date-grid .month{
  font-size:.7rem;
  letter-spacing:.1em
}

.date-grid .day{
  font-family:Georgia,serif;
  font-size:2rem
}

.time-grid{
  display:flex;
  gap:10px;
  flex-wrap:wrap
}

.review,
.payment{
  background:rgba(255,249,238,.92);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  border-radius:26px;
  padding:26px;
  margin-top:22px
}

.review dl{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  margin:0
}

.review dl>div{
  border-top:1px solid var(--line);
  padding-top:10px
}

dt{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  font-weight:800
}

dd{
  margin:5px 0 0;
  color:var(--plum);
  font-weight:800
}

.payment{
  background:linear-gradient(145deg,#fff9ee,#fce7ee)
}

.price{
  font-family:Georgia,serif;
  color:var(--fuchsia);
  font-size:4rem;
  font-weight:700
}

.line{
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding:10px 0
}

.payment p{
  line-height:1.65
}

.payment details{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:12px 0;
  margin:15px 0
}

.payment summary{
  font-weight:800;
  color:var(--plum)
}

.primary,
.paypal{
  display:inline-block;
  width:100%;
  text-align:center;
  border:0;
  background:var(--fuchsia);
  color:white;
  font-size:1rem
}

.paypal{
  background:#0070ba
}

.primary:disabled{
  opacity:.6
}

.message{
  font-weight:800;
  color:#a11555
}

.confirmation>p{
  max-width:760px;
  line-height:1.6
}

footer{
  text-align:center;
  padding:60px 20px 90px;
  color:var(--muted)
}

.signature{
  font-family:cursive;
  font-size:3rem;
  color:var(--fuchsia);
  margin:0
}

@media(max-width:900px){
  .gallery-grid{
    grid-template-columns:repeat(2,1fr);
    grid-auto-rows:180px
  }

  .rhythm-grid{
    grid-template-columns:repeat(2,1fr)
  }

  .people-grid{
    grid-template-columns:repeat(2,1fr)
  }
}

@media(max-width:620px){
  .shell{
    width:calc(100% - 22px)
  }

  .hero{
    padding-top:55px
  }

  .hero h1{
    font-size:3.15rem
  }

  .meta{
    display:grid
  }

  .gallery,
  .rhythm,
  .booking,
  .confirmation{
    padding:55px 0
  }

  .gallery-grid{
    grid-auto-rows:155px;
    gap:8px
  }

  .gallery-grid figcaption{
    font-size:.58rem;
    left:6px;
    bottom:6px;
    padding:6px
  }

  .rhythm-grid{
    grid-template-columns:1fr
  }

  .step{
    grid-template-columns:1fr
  }

  .meeting-grid,
  .idea-grid,
  .field-grid{
    grid-template-columns:1fr
  }

  .date-grid{
    grid-template-columns:repeat(2,1fr)
  }

  .review dl{
    grid-template-columns:1fr
  }

  .flower{
    opacity:.2;
    right:-25px
  }
  }