:root{
  --bg: #f8efe6;
  --card: #ffffff;
  --accent: #cfa28b;
  --muted: #6b6b6b;
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(ellipse at top left, #fff6f0 0%, #fffaf8 40%, #fff 100%);
  color:#222;
  -webkit-font-smoothing:antialiased;
  scroll-snap-type:y mandatory;
}
.intro-video{ position:fixed; inset:0; background:#000; z-index:10000; display:flex; align-items:center; justify-content:center }
.intro-video video{ width:100%; height:100%; object-fit:cover; display:block }
.intro-video.hidden{ opacity:0; visibility:hidden; pointer-events:none; transition:opacity 500ms ease }
.video-active{ overflow:hidden }
.video-active .card{ pointer-events:none }

body.intro-active{
  overflow:hidden;
}

.intro-video-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:1;
  will-change:opacity;
  transition:opacity 1200ms ease;
}

body.intro-active .card{
  position:relative;
  z-index:1;
}

body.intro-reveal .intro-video-overlay{
  opacity:0;
}

.intro-video-overlay.is-hidden{
  opacity:0;
  pointer-events:none;
}

.intro-video-player{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.card{
  max-width:920px;
  margin:0 auto;
  background:var(--card);
  border-radius:22px;
  padding:0;
  box-shadow:0 18px 60px rgba(17,17,17,0.06);
}

.page-section{
  height:100svh;
  min-height:100svh;
  max-height:100svh;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
}

.hero.page-section{
  justify-content:center;
  padding:0;
}

.scroll-animated .page-section{
  opacity:0;
  transform:translateY(26px);
  transition:opacity 700ms ease, transform 700ms ease;
}

.scroll-animated .page-section.is-visible{
  opacity:1;
  transform:none;
}

/* apply padding to all direct children of .card except the header (hero) */
.card > :not(.hero){
  padding:36px;
}
.hero{ padding:0; display:flex; flex-direction:column; gap:0; align-items:center; width:100%; height:100% }
.banner{ width:100%; position:relative; height:100%; border-radius:0; overflow:hidden }
.banner-img{ width:100%; height:100%; object-fit:cover; display:block }
.banner::after{ content:""; position:absolute; left:0; right:0; top:0; bottom:0; background:linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.45) 100%); pointer-events:none }
.names{ font-family: 'Playfair Display', serif; font-size:clamp(32px,6vw,64px); font-weight:700; letter-spacing:0.5px; padding:0; text-align:center }
.overlay{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:#fff; text-shadow:0 12px 32px rgba(0,0,0,0.6); z-index:2; width:90%; max-width:800px }

/* Banner date-card (over banner) */
.date-card--banner{ position:absolute; top:18px; right:18px; width:100px; height:100px; border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(180deg,#fff 0%, #fff7ea 100%); box-shadow:0 18px 40px rgba(0,0,0,0.12); z-index:3 }
.date-card--banner .month{ font-size:11px; color:var(--muted); text-transform:uppercase; }
.date-card--banner .day{ font-size:36px; font-weight:800; color:#b85f2e }
.date-card--banner .year{ font-size:11px; color:var(--muted) }
.event-info{ display:flex; align-items:center; gap:12px; justify-content:center; margin:14px 0 }

/* Separate info block with calendar + location */
.info-block{ background:var(--card); border-radius:12px; padding:12px; margin:18px 0; box-shadow:0 8px 30px rgba(11,11,11,0.04) }
.info-inner{ display:flex; gap:14px; align-items:center }
.date-card--side{ width:100px; height:100px; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(180deg,#fff 0%, #fff7ea 100%); box-shadow:0 10px 26px rgba(0,0,0,0.08) }
.date-card--side .month{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.6px }
.date-card--side .day{ font-size:30px; font-weight:800; color:#b85f2e }
.date-card--side .year{ font-size:11px; color:var(--muted) }
.location h3{ margin:0 0 6px; font-size:16px }
.location .place{ margin:0; font-weight:700 }
.location .address, .location .phone{ margin:6px 0; color:var(--muted); font-size:14px }
.map-wrap{ margin-top:8px; width:100%; max-width:420px }
.map-wrap iframe{ width:100%; height:180px; border:0; border-radius:10px }
.map-btn{ display:inline-block; margin-top:8px; color:var(--accent); text-decoration:none; padding:8px 12px; border-radius:8px; background:rgba(207,162,139,0.08) }

@media(max-width:640px){
  .info-inner{ flex-direction:row; align-items:center }
  .date-card--side{ width:84px; height:84px }
}

@media(min-width:900px){
  .info-inner{ align-items:center }
}

/* full-width band container */
.info-band{ width:100%; background:transparent; margin-top:18px }
.info-band-inner{ max-width:920px; margin:0 auto; }
.info-band .info-block{ margin:0 }

/* date and location blocks inside main card */
.date-block{ display:flex; justify-content:center; padding:0 }
.location-block{ padding:0 }
.location-inner{ max-width:720px; margin:0 auto }

/* full-bleed map */
.map-full{ width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; overflow:hidden }
.map-full iframe{ width:100%; height:320px; border:0 }
.venue{ color:var(--muted); font-size:14px }

/* two-column details layout */
.layout-grid{ display:grid; grid-template-columns:1fr; gap:24px; align-items:start }
.layout-grid .left{ max-width:560px; margin:0 auto }
.lead{ color:#333; font-size:18px; line-height:1.6; text-align:center }
.program{ margin-top:22px; text-align:center }
.program-title{ margin:0 0 24px; letter-spacing:2px; text-transform:uppercase; color:#9f845f; font-weight:500 }
.schedule{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:18px 44px; max-width:820px; margin:0 auto }
.schedule-line{ position:absolute; left:50%; top:18px; bottom:185px; width:1px; background:#b69768; transform:translateX(-50%) }
.schedule-item{ position:relative; text-align:left; max-width:320px }
.schedule-item::before{ content:""; position:absolute; left:calc(100% + 22px); top:8px; width:8px; height:8px; border-radius:50%; border:1px solid #b69768; background:#fff }
.schedule-item--left{ justify-self:end }
.schedule-item--right{ grid-column:2; justify-self:start; margin-top:180px }
.schedule-item--right::before,
.schedule-item--full::before{ left:auto; right:calc(100% + 22px) }
.schedule-item--full{ grid-column:1 / -1; justify-self:center; text-align:center; max-width:680px; margin-top:6px }
.schedule-date{ margin:0 0 6px; font-family:'Playfair Display', serif; font-style:italic; color:#496356; font-size:28px; line-height:1 }
.schedule-item h3{ margin:0; text-transform:uppercase; letter-spacing:2px; color:#9f845f; font-weight:500; font-size:36px }
.schedule-time{ margin:10px 0 10px; color:#28463d; font-size:28px }
.schedule-desc{ margin:0; color:#2f4b42; line-height:1.5; font-size:19px }
.schedule-btn{ margin-top:14px; background:#9f845f; color:#fff; border:0; border-radius:0; padding:10px 20px; font-size:16px; cursor:pointer }
.schedule-item--full::before {left: unset; right: unset; top: 0;}
.dresscode{ margin-top:20px; text-align:center }
.dresscode h2{ margin:0 0 8px }
.dresscode-palette{ display:grid; grid-template-columns:1fr 1px 1fr; gap:26px; align-items:center; max-width:720px; margin:0 auto }
.dresscode-col{ display:flex; flex-direction:column; gap:16px; align-items:center }
.dresscode-divider{ width:1px; height:226px; background:#d9b483; justify-self:center }
.dresscode-color{ width:100%; max-width:320px; height:68px; border-radius:14px; border:1px solid rgba(0,0,0,0.06); box-shadow:0 3px 10px rgba(0,0,0,0.04) }
.dresscode-color.white{ background:#efebe5 }
.dresscode-color.soft-yellow{ background:#e7cfad }
.dresscode-color.beige{ background:#d8cbc0 }
.dresscode-color.brown{ background:#c6c7b9 }
.dresscode-color.black{ background:#6c8493 }

.bottom-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start }
.map-side h2{ margin:12px 0 8px }
.map-side iframe{ width:100%; min-height:340px; border:0; border-radius:12px; box-shadow:0 6px 16px rgba(0,0,0,0.06) }

/* RSVP styles adjustments in right column */
.rsvp h2{ font-size:22px; margin-bottom:12px }
.rsvp label{ display:block; margin:10px 0 }

@media(max-width:820px){
  .page-section{ overflow-y:auto; overflow-x:hidden }
  .layout-grid{ grid-template-columns:1fr; padding:20px 16px }
  .message h2{ font-size:18px; margin-bottom:8px }
  .message p{ font-size:14px; line-height:1.4 }
  .message p:nth-of-type(3){ display:none }
  .dresscode-palette{ grid-template-columns:1fr; gap:14px; }
  .dresscode-divider{ display:none }
  .dresscode-color{ max-width:360px }
  .program{ margin-top:0 }
  .program-title{ margin:0 0 16px; font-size:14px }
  .schedule{ grid-template-columns:1fr; gap:16px; max-width:100%; padding:0 }
  .schedule-line{ left:10px; top:8px; bottom:8px; transform:none }
  .schedule-item,
  .schedule-item--left,
  .schedule-item--right,
  .schedule-item--full{ grid-column:1; justify-self:start; max-width:100%; text-align:left; margin-top:0; padding-left:28px }
  .schedule-item::before,
  .schedule-item--right::before,
  .schedule-item--full::before{ left:7px; right:auto }
  .schedule-item::before{ top:2px }
  .schedule-date{ font-size:16px; margin:0 0 4px }
  .schedule-item h3{ font-size:24px; line-height:1.1 }
  .schedule-time{ font-size:18px; margin:6px 0 6px }
  .schedule-desc{ font-size:14px; line-height:1.4 }
  .schedule-btn{ margin-top:10px; padding:8px 16px; font-size:14px }
  .names{ padding:0; font-size:clamp(28px,7vw,48px) }
  .overlay{ left:50%; top:50%; transform:translate(-50%,-50%); width:90% }
}

/* date card */
.date-card{ width:84px; height:84px; background:linear-gradient(180deg,#fff 0%, #fff7ea 100%); border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(0,0,0,0.06) }
.date-card .month{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:0.6px }
.date-card .day{ font-size:34px; font-weight:800; color:#b85f2e }
.date-card .year{ font-size:11px; color:var(--muted) }
.message{ margin:14px 0; text-align:center; color:#444 }
.countdown-block{ grid-column:1 / -1; text-align:center; margin-top:4px }
.countdown-block h2{ margin:0 0 12px }
.countdown{ display:grid; grid-template-columns:repeat(4, minmax(80px, 1fr)); gap:12px; max-width:760px; margin:0 auto }
.countdown-item{ background:#fff7ea; border-radius:12px; padding:14px 10px; box-shadow:0 6px 16px rgba(0,0,0,0.06) }
.countdown-item span{ display:block; font-size:34px; font-weight:800; color:#b85f2e; line-height:1.1 }
.countdown-item small{ color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:0.4px }
.countdown-note{ margin-top:10px; color:var(--muted); min-height:20px }
.details h2:not(.program-title), .rsvp h2{ margin:12px 0 8px }
.details ul{ padding-left:18px; margin:6px 0 12px }
.map{ display:inline-block; color:var(--accent); text-decoration:none }
.rsvp{ margin-top:12px }
form label{ display:block; margin:8px 0; font-size:14px }
input[type="text"], input[type="number"], select, textarea{
  width:100%; padding:10px; margin-top:6px; border-radius:8px; border:1px solid #eee; font-size:15px
}
.btn{ background:var(--accent); color:#fff; border:none; padding:12px 16px; border-radius:10px; width:100%; font-size:16px; margin-top:8px }
.result{ margin-top:10px; color:green }
.contact{ text-align:center; color:var(--muted); font-size:13px; margin-top:12px }

/* Larger screens */
@media(min-width:720px){
  .card{ display:grid; gap:22px; align-items:start }
  .hero{ grid-column:1 / -1; flex-direction:row; justify-content:space-between }
}

@media(max-width:560px){
  .countdown{ grid-template-columns:repeat(2, minmax(100px, 1fr)); }
  .countdown-item span{ font-size:28px }
  .message p:nth-of-type(2){ display:none }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  body{ scroll-snap-type:none }
  .page-section{
    height:auto;
    min-height:auto;
    max-height:none;
    overflow:visible;
  }
  .scroll-animated .page-section{
    opacity:1;
    transform:none;
    transition:none;
  }
}