:root{
  --paper:#f5f2eb;
  --ink:#272521;
  --muted:#6f6c65;
  --line:#8e8a80;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif;font-weight:300;overflow-x:hidden}
a{text-decoration:none;color:inherit}

.topbar{
  position:fixed;z-index:50;top:18px;left:50%;transform:translateX(-50%);
  width:min(820px,calc(100% - 32px));min-height:52px;
  border:1px solid rgba(39,37,33,.25);
  display:grid;grid-template-columns:90px 1fr 110px;align-items:center;
  padding:0 12px;background:rgba(245,242,235,.72);backdrop-filter:blur(14px);
  animation:navIn .75s cubic-bezier(.22,1,.36,1) .15s both;
}
.desktop-nav{display:flex;justify-content:center;gap:28px}
.topbar a{font-size:13px}
.monogram{font-family:'EB Garamond',serif;font-size:25px!important;line-height:1}
.rsvp-pill{display:inline-flex;align-items:center;justify-content:center;justify-self:end;background:#222;color:#fff!important;padding:10px 16px;font-size:13px;transition:transform .25s ease,background-color .25s ease,opacity .25s ease}
.rsvp-pill:hover{transform:translateY(-2px)}
.rsvp-pill:active{transform:translateY(0)}
.desktop-rsvp{display:inline-flex}
.menu-toggle,.mobile-menu{display:none}
.menu-toggle{appearance:none;background:none;border:0;padding:0;margin:0;cursor:pointer;justify-self:end;width:34px;height:34px;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.menu-toggle span{display:block;width:24px;height:1.7px;background:rgba(39,37,33,.76);transition:transform .25s ease,opacity .25s ease}
.mobile-menu{
  position:absolute;left:-1px;right:-1px;top:calc(100% + 8px);background:rgba(245,242,235,.97);
  border:1px solid rgba(39,37,33,.25);padding:18px 18px 22px;box-shadow:0 20px 38px rgba(39,37,33,.08)
}
.mobile-menu[hidden]{display:none!important}
.mobile-menu-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.mobile-menu-monogram{font-family:'EB Garamond',serif;font-size:25px;line-height:1}
.menu-close{appearance:none;background:none;border:0;color:rgba(39,37,33,.76);font-family:Manrope,Arial,sans-serif;font-size:34px;line-height:1;cursor:pointer;padding:0 2px}
.mobile-menu-nav{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;margin:12px 0 20px}
.mobile-menu-nav a{font-family:'EB Garamond',serif;font-size:32px;line-height:1.2}
.mobile-rsvp{justify-self:center;min-width:120px;margin:0 auto}
.topbar.menu-open .menu-toggle span:nth-child(1){transform:translateY(6.7px) rotate(45deg)}
.topbar.menu-open .menu-toggle span:nth-child(2){opacity:0}
.topbar.menu-open .menu-toggle span:nth-child(3){transform:translateY(-6.7px) rotate(-45deg)}

.hero{height:100svh;min-height:660px;position:relative;overflow:hidden;isolation:isolate}
.hero-image{width:100%;height:100%;object-fit:cover;object-position:center 44%;display:block;position:relative;z-index:0;transform:scale(1.035);animation:heroSettle 1.8s cubic-bezier(.22,1,.36,1) .05s both;will-change:transform}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(245,242,235,.32),rgba(245,242,235,.02) 55%,rgba(245,242,235,.12));z-index:1}
.hero-copy{position:absolute;top:120px;left:50%;transform:translateX(-50%);width:min(920px,92%);text-align:center;color:#2b2825;z-index:3}
.hero-kicker,.hero-names,.hero-date{opacity:0;transform:translateY(14px);animation:heroTextIn .9s cubic-bezier(.22,1,.36,1) both}
.hero-kicker{font-size:13px;margin-bottom:4px;animation-delay:.35s}
.hero-names{font-family:'Great Vibes',cursive;font-size:clamp(62px,7vw,112px);line-height:.92;white-space:nowrap;animation-delay:.48s}
.hero-names span{font-family:'EB Garamond',serif;font-size:.68em}
.hero-date{font-family:'EB Garamond',serif;font-size:20px;letter-spacing:.12em;margin-top:10px;animation-delay:.62s}
.hero::after{
  content:"";position:absolute;z-index:2;left:0;right:0;bottom:-1px;height:23%;pointer-events:none;
  background:linear-gradient(to bottom,rgba(245,242,235,0) 0%,rgba(245,242,235,.18) 28%,rgba(245,242,235,.62) 66%,var(--paper) 98%);
}

.section-pad{padding:110px 24px}
.intro{display:flex;justify-content:center;text-align:center}
.intro-copy{max-width:820px}
.intro h1{font-family:'EB Garamond',serif;font-weight:400;font-size:clamp(30px,3.6vw,54px);line-height:1.05;margin:0 0 20px}
.intro p{font-size:16px;line-height:1.7;margin:8px auto}
.signature{font-size:13px!important;color:var(--muted)}

.date-story{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:var(--max);margin:0 auto;padding:0 24px 120px}
.date-card{position:relative;aspect-ratio:3/4;overflow:hidden;opacity:0;transform:translateY(32px);transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1)}
.date-card.is-visible{opacity:1;transform:none}
.date-card img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.035);transition:transform 1.25s cubic-bezier(.22,1,.36,1)}
.date-card.is-visible img{transform:scale(1)}
.date-card span{position:absolute;left:24px;bottom:-8px;color:#f7f3eb;font-family:'EB Garamond',serif;font-size:clamp(92px,10vw,150px);line-height:.8;font-weight:400;opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .9s cubic-bezier(.22,1,.36,1);transition-delay:.18s}
.date-card.is-visible span{opacity:1;transform:translateY(0)}
.date-card:nth-child(2){transition-delay:.08s}.date-card:nth-child(3){transition-delay:.16s}

.section-heading{max-width:760px;margin:0 auto 64px;text-align:center}
.section-heading h2{font-family:'EB Garamond',serif;font-weight:400;font-size:38px;letter-spacing:.03em;margin:0 0 18px}
.section-heading p{line-height:1.7;font-size:15px}

.timeline{position:relative;max-width:980px;margin:0 auto}
.timeline:before{content:"";position:absolute;left:50%;top:12px;bottom:12px;width:1px;background:var(--ink)}
.event{position:relative;display:grid;grid-template-columns:1fr 64px 1fr;min-height:190px;align-items:center;opacity:0;transition:opacity .75s ease,transform .85s cubic-bezier(.22,1,.36,1)}
.event.left{transform:translateX(-24px)}
.event.right{transform:translateX(24px)}
.event.is-visible{opacity:1;transform:none}
.event:before{content:"";position:absolute;left:50%;top:0;transform:translate(-50%,-1px);width:10px;height:10px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 7px var(--paper)}
.event.left .event-copy{grid-column:1;text-align:right;padding-right:34px}
.event.right .event-copy{grid-column:3;text-align:left;padding-left:34px}
.event.left>.desktop-icon{grid-column:3;justify-self:start;margin-left:8px}
.event.right>.desktop-icon{grid-column:1;justify-self:end;margin-right:8px}
.event-copy time{font-size:13px;color:var(--muted)}
.event-copy h3{font-family:'EB Garamond',serif;font-weight:400;font-size:34px;margin:8px 0 10px}
.event-copy p{font-size:14px;line-height:1.6;margin:0}
.event-icon{object-fit:contain;opacity:.72;transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .7s ease}
.event-icon.desktop-icon{width:92px;height:92px}
.event.is-visible .event-icon{animation:iconSettle .75s cubic-bezier(.22,1,.36,1) .12s both}
.mobile-icon{display:none}

.venue{max-width:var(--max);margin:0 auto}
.venue-image{width:100%;display:block;aspect-ratio:16/7;object-fit:cover;transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.venue-copy{text-align:center;max-width:900px;margin:28px auto 0}
.venue-copy h3{font-family:'EB Garamond',serif;font-size:36px;font-weight:400;margin:0}
.eyebrow{font-size:13px;color:var(--muted);margin:6px 0 18px}
.venue-copy p{font-size:14px;line-height:1.75}
.dark-button{display:inline-block;background:#2b2a26;color:#fff;padding:12px 18px;margin-top:12px;font-size:13px;transition:transform .25s ease,background-color .25s ease,opacity .25s ease}
.dark-button:hover{transform:translateY(-2px)}
.dark-button:active{transform:translateY(0)}

.details{max-width:var(--max);margin:0 auto}
.faq{border-top:1px solid rgba(39,37,33,.22)}
details{border-bottom:1px solid rgba(39,37,33,.22);padding:0}
summary{list-style:none;cursor:pointer;padding:22px 48px 22px 0;position:relative;font-family:'EB Garamond',serif;font-size:23px}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:#5b625b;color:#fff;display:grid;place-items:center;font-family:Manrope;font-size:18px;transition:transform .35s cubic-bezier(.22,1,.36,1),background-color .25s ease}
details[open] summary:after{content:"−";transform:translateY(-50%) rotate(180deg)}
details p{margin:0 0 24px;max-width:920px;line-height:1.7;font-size:14px}
details[open] p{animation:faqIn .42s cubic-bezier(.22,1,.36,1) both}
summary:hover:after{background:#424942}

.rsvp{max-width:var(--max);margin:0 auto}
.rsvp-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:44px;align-items:stretch}
.rsvp-grid>img{width:100%;height:100%;object-fit:cover;min-height:720px;transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
form{padding:6px 0}
form h2{font-family:'EB Garamond',serif;font-size:44px;font-weight:400;line-height:1.03;margin:0 0 12px}
.form-lead{color:var(--muted);margin:0 0 28px}
label,legend{font-size:13px}
label{display:block;margin:0 0 22px}
input[type=text],textarea{width:100%;border:0;border-bottom:1px solid rgba(39,37,33,.32);background:transparent;padding:12px 0;font:inherit;outline:none}
textarea{min-height:76px;resize:vertical}
fieldset{border:0;padding:0;margin:0 0 24px}
fieldset legend{margin-bottom:10px}
.choice{display:flex;align-items:center;gap:10px;margin:8px 0;cursor:pointer;min-height:44px;padding:9px 12px;border:1px solid rgba(39,37,33,.18);transition:border-color .2s ease,background-color .2s ease}
.choice:has(input:checked){border-color:rgba(39,37,33,.62);background:rgba(39,37,33,.045)}
.choice input{accent-color:#444;flex:0 0 auto}
.choice span{font-size:14px}
button[type=submit]{width:100%;border:0;background:#7a8578;color:#fff;padding:14px;font-size:15px;cursor:pointer;transition:transform .25s ease,background-color .25s ease,opacity .25s ease}
button[type=submit]:hover{transform:translateY(-2px)}
button[type=submit]:active{transform:translateY(0)}
.form-note{font-size:11px;color:var(--muted);line-height:1.5;margin-top:10px}

.closing-image{height:34vw;min-height:280px;max-height:540px;overflow:hidden}
.closing-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.22,1,.36,1)}

.motion{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);will-change:opacity,transform}
.motion.is-visible{opacity:1;transform:translateY(0)}
.motion.motion-left{transform:translateX(-28px)}
.motion.motion-right{transform:translateX(28px)}
.motion.motion-left.is-visible,.motion.motion-right.is-visible{transform:translateX(0)}
.venue-image.motion-image{transform:scale(1.025)}
.venue-image.motion-image.is-visible{transform:scale(1)}
.rsvp-grid>img.motion-image{transform:scale(1.02)}
.rsvp-grid>img.motion-image.is-visible{transform:scale(1)}
.parallax-media{will-change:transform}

@keyframes navIn{from{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes heroSettle{from{opacity:.88;transform:scale(1.075)}to{opacity:1;transform:scale(1.035)}}
@keyframes heroTextIn{to{opacity:1;transform:translateY(0)}}
@keyframes iconSettle{from{opacity:0;transform:scale(.88) rotate(-2deg)}to{opacity:.72;transform:scale(1) rotate(0)}}
@keyframes faqIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:800px){
  .topbar{
    top:10px;width:calc(100% - 28px);min-height:52px;padding:0 14px;
    grid-template-columns:54px 1fr 34px
  }
  .desktop-nav,.desktop-rsvp{display:none}
  .menu-toggle{display:flex}

  .hero{min-height:620px}
  .hero-copy{top:96px}
  .hero-names{font-size:clamp(52px,15vw,78px);white-space:normal}
  .hero-date{font-size:16px}
  .hero::after{height:20%;background:linear-gradient(to bottom,rgba(245,242,235,0),rgba(245,242,235,.30) 35%,rgba(245,242,235,.78) 74%,var(--paper) 100%)}

  .section-pad{padding:78px 18px}
  .date-story{grid-template-columns:1fr;gap:10px;padding:0 18px 86px}
  .date-card{aspect-ratio:4/5}
  .date-card span{font-size:120px}
  .date-card:nth-child(2),.date-card:nth-child(3){transition-delay:0s}
  .section-heading{margin-bottom:44px}
  .section-heading h2{font-size:32px}

  .timeline:before{left:22px}
  .event{grid-template-columns:44px 1fr;min-height:220px;align-items:start;padding-top:0}
  .event.left,.event.right{transform:translateY(18px)}
  .event.is-visible{transform:none}
  .event:before{left:22px;top:0}
  .event.left .event-copy,.event.right .event-copy{
    grid-column:2;grid-row:1;text-align:left;padding:0 0 0 22px
  }
  .event>.desktop-icon{display:none}
  .event-copy .mobile-icon{
    display:block;width:80px;height:80px;margin:14px 0 12px 0;opacity:.68;object-fit:contain
  }
  .event-copy h3{margin:8px 0 0;font-size:29px}
  .event-copy p{margin-top:0;max-width:300px}

  .venue-image{aspect-ratio:4/3}
  .rsvp-grid{grid-template-columns:1fr;gap:28px}
  .rsvp-grid>img{min-height:0;aspect-ratio:4/5}
  .rsvp form h2{font-size:38px}
  .closing-image{height:48vw}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .motion,.date-card,.event{opacity:1!important;transform:none!important}
}

/* --- v4: Framer-accurate mobile nav + fluid mobile timeline rhythm --- */
@media(max-width:800px){
  /* The open menu is an expansion of the same navigation panel, not a second card. */
  .topbar{
    align-items:center;
    transition:min-height .28s cubic-bezier(.22,1,.36,1),background-color .25s ease;
  }
  .topbar.menu-open{
    grid-template-columns:54px 1fr 34px;
    grid-template-rows:52px auto;
    align-items:center;
    background:rgba(245,242,235,.985);
    backdrop-filter:blur(18px);
  }
  .topbar.menu-open .monogram{grid-column:1;grid-row:1}
  .topbar.menu-open .menu-toggle{grid-column:3;grid-row:1}
  .mobile-menu{
    position:static;
    grid-column:1 / -1;
    grid-row:2;
    border:0;
    border-top:0;
    box-shadow:none;
    padding:40px 0 44px;
    background:transparent;
  }
  .mobile-menu-nav{
    gap:19px;
    margin:0 0 28px;
  }
  .mobile-menu-nav a{
    font-size:33px;
    line-height:1.16;
  }
  .mobile-rsvp{
    display:flex;
    width:max-content;
    margin:0 auto;
    padding:11px 22px;
    font-size:13px!important;
  }

  /* Timeline height follows content, so the center rule always extends correctly. */
  .timeline{
    padding-top:2px;
  }
  .timeline:before{
    top:0;
    bottom:0;
  }
  .event{
    min-height:0;
    height:auto;
    align-items:start;
    padding:0 0 54px 0;
  }
  .event:last-child{padding-bottom:18px}
  .event:before{top:0}
  .event.left .event-copy,.event.right .event-copy{
    padding:0 0 0 22px;
  }
  .event-copy time{
    display:block;
    margin:0 0 13px;
  }
  .event-copy h3{
    margin:0;
  }
  .event-copy .mobile-icon{
    margin:17px 0 13px 0;
  }
  .event-copy p{
    margin:0;
    line-height:1.55;
    max-width:320px;
  }
}


/* --- v5: translucent mobile navigation, link feedback, uncropped closing photo --- */
.desktop-nav a,
.mobile-menu-nav a,
.monogram{
  transition:color .2s ease,opacity .2s ease;
}
.desktop-nav a:hover,
.desktop-nav a:focus-visible,
.mobile-menu-nav a:hover,
.mobile-menu-nav a:focus-visible,
.monogram:hover,
.monogram:focus-visible{
  color:#8b8983;
}
.desktop-nav a:active,
.mobile-menu-nav a:active,
.monogram:active{
  color:#a09d96;
}

/* Preserve the full final photograph on every screen. */
.closing-image{
  height:auto;
  min-height:0;
  max-height:none;
  overflow:visible;
  line-height:0;
}
.closing-image img,
.closing-image img.parallax-media{
  width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
  object-position:center;
  transform:none!important;
  display:block;
}

@media(max-width:800px){
  .topbar.menu-open{
    background:rgba(245,242,235,.78);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
  }
  .mobile-menu{
    background:transparent;
  }
  .mobile-menu-nav a{
    transition:color .18s ease,opacity .18s ease;
  }
  .mobile-menu-nav a:hover,
  .mobile-menu-nav a:focus-visible,
  .mobile-menu-nav a:active{
    color:#8b8983;
  }
  .closing-image{height:auto;min-height:0;max-height:none}
}

.hero-names-image{
display:block;
width:min(820px,82vw);
height:auto;
margin:0 auto;
mix-blend-mode:multiply;
}

@media(max-width:800px){
.hero-names-image{
width:min(92vw,560px);
}
}

.monogram{
display:flex;
align-items:center;
justify-content:flex-start;
}

.monogram-image{
width:38px;
height:38px;
object-fit:contain;
display:block;
mix-blend-mode:multiply;
}

@media(max-width:800px){
.monogram-image{
width:42px;
height:42px;
}
}

.hero-date{
position:absolute;
top:14%;
left:46%;
transform:translateX(-50%);
z-index:4;
font-family:'EB Garamond',serif;
font-size:18px;
letter-spacing:.12em;
white-space:nowrap;
}

/*дата сверху надписи
/* @media(max-width:800px){
.hero-date{
top:12%;
left:34%;
font-size:15px;
letter-spacing:.06em;
}
} */

@media(max-width:800px){
.hero-date{
top:22%;
left:38%;
font-size:15px;
letter-spacing:.06em;
}
}

.hero-picture{
position:absolute;
inset:0;
width:100%;
height:100%;
display:block;
}

.hero-picture img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

@media(max-width:800px){
.hero-image{
object-fit:cover;
object-position:center center;
}
}

.closing-image{
position:relative;
overflow:hidden;
}

.closing-image::before{
content:"";
position:absolute;
z-index:2;

top:0;
left:0;
right:0;

height:22%;

pointer-events:none;

background:linear-gradient(
to bottom,
var(--paper) 0%,
rgba(245,242,235,.82) 28%,
rgba(245,242,235,.35) 62%,
rgba(245,242,235,0) 100%
);
}