/* Two separate planes give the portrait a gentle entrance over the landscape. */
.hero:before{background-image:linear-gradient(90deg,#25121799 0%,#32161a55 52%,#32161a33 100%),url('hero.png');animation:landscape-arrive 1.5s ease-out both}
.hero:after{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;background:url('couple-cutout.png') no-repeat right 3% bottom;background-size:auto 82%;filter:drop-shadow(-14px 8px 20px #3e1d1c55);animation:portrait-arrive 1.65s .3s cubic-bezier(.2,.7,.2,1) both}
.hero-content{position:relative;z-index:1}
.hero-foreground{display:none}
.music{padding:0;border-radius:3px;bottom:max(12px,env(safe-area-inset-bottom));right:12px}.music summary{cursor:pointer;list-style:none;color:#552129;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:12px 15px;min-height:44px}.music summary::-webkit-details-marker{display:none}.music summary:focus-visible{outline:3px solid #d29e54;outline-offset:2px}.music audio{margin:0 10px 10px;width:230px;max-width:calc(100vw - 54px)}
@keyframes landscape-arrive{from{opacity:.45;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}
@keyframes portrait-arrive{from{opacity:0;transform:translateX(65px) scale(.96)}to{opacity:1;transform:translateX(0) scale(1)}}
.intro:before,.intro:after,.closing:before,.details:before,.end:before,.end:after{opacity:.09}
.intro:before,.closing:before{background-image:url('floral-corner.svg');opacity:.12}
.schedule:after{content:"";position:absolute;z-index:-1;pointer-events:none;right:-125px;top:0;width:330px;height:330px;background:url('floral-corner.svg') center/contain no-repeat;opacity:.10;transform:scaleX(-1)}
.details:after{content:"";position:absolute;bottom:18px;left:0;right:0;height:28px;pointer-events:none;background:url('woven-border.svg') center/auto 28px repeat-x;opacity:.12}
@media(max-width:650px){.hero:before{background-position:center;background-image:linear-gradient(0deg,#281319ef 0%,#32161a99 37%,#32161a22 70%),url('hero.png')}.hero:after{background-position:center bottom 100px;background-size:auto 78%;opacity:.78}.hero-content{text-shadow:0 2px 18px #241010,0 1px 6px #241010}.schedule:after{width:210px;height:210px;right:-110px}}
@media(prefers-reduced-motion:reduce){.hero:before,.hero:after,.hero-content{animation:none}}

/* Scroll adds a second, slower plane after the opening animation has played. */
.hero:before{inset:-24px 0;animation-fill-mode:backwards;translate:0 var(--landscape-shift,0px)}
.hero:after{animation-fill-mode:backwards;translate:var(--portrait-drift,0px) var(--portrait-shift,0px);opacity:1}
.hero:after{mask-image:linear-gradient(to bottom,#000 0%,#000 82%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 82%,transparent 100%)}
.hero-content{animation-fill-mode:backwards;translate:var(--copy-drift,0px) var(--copy-shift,0px);opacity:1}
@media(prefers-reduced-motion:reduce){.hero:before,.hero:after,.hero-content{translate:none!important;opacity:1!important}}

/* Phone layout: portrait above the invitation copy, with generous tap targets. */
@media(max-width:650px){
  body{font-size:16px;line-height:1.7}
  header{padding:max(18px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 12px max(20px,env(safe-area-inset-left))}
  header button{min-width:70px;min-height:44px}
  .hero{min-height:100svh;min-height:100dvh;place-items:end center}
  .hero:before{background-image:linear-gradient(180deg,#28131938 0%,#2813191c 40%,#281319d9 78%,#281319 100%),url('hero.png')}
  .hero:after{background-position:right -10px top 68px;background-size:auto min(57%,500px)}
  .hero:after{mask-image:linear-gradient(to bottom,#000 0%,#000 calc(68px + 44%),transparent calc(68px + 57%));-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 calc(68px + 44%),transparent calc(68px + 57%))}
  .hero-foreground{display:block;position:absolute;z-index:1;left:0;right:0;top:calc(68px + 57% - 155px);height:150px;pointer-events:none;translate:var(--portrait-drift,0px) var(--portrait-shift,0px);background:url('foreground-flowers.png') center bottom/100% auto no-repeat}
  .hero-content{z-index:2}
  .hero-content{width:100%;padding:70px 20px max(68px,env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent 0%,#28131980 32%,#281319e8 72%,#281319ef 100%)}
  .hero h1{font-size:clamp(56px,13vw,75px);line-height:.98;margin:16px 0}
  .hero .date{font-size:clamp(19px,5vw,24px);line-height:1.3}
  .hero .eyebrow{font-size:9px;letter-spacing:.18em}
  .hero .outline,.details .button{min-height:48px;display:inline-flex;align-items:center;justify-content:center}
  .hero .outline{margin-top:22px;padding:12px 24px}
  .intro,.details{padding:72px 22px}
  .intro h2,.schedule h2,.closing h2,.rsvp-area h2{font-size:clamp(39px,10vw,52px);line-height:1.05}
  .intro p{line-height:1.75}
  .date-feature{gap:14px;margin:42px auto 30px}
  .day-number{font-size:clamp(90px,29vw,125px)}
  .date-weekday{font-size:26px}.date-month{font-size:clamp(24px,7vw,32px)}
  .place h3{font-size:clamp(34px,9vw,42px);line-height:1.05;margin:14px 0 8px}
  .place p{max-width:300px;margin:auto}
  .schedule,.closing{padding:70px 22px;gap:28px}
  .closing{padding-top:0}
  .schedule-photo img,.closing-photo img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 18%}
  .timeline div{padding:16px 0}
  .end{padding:64px 22px max(65px,env(safe-area-inset-bottom))}
  .rsvp-area{margin-bottom:55px}
  .rsvp-form input,.rsvp-form textarea,.rsvp-form select{font-size:16px;min-height:48px}
  .rsvp-choice span,.rsvp-submit{min-height:50px}
  .music{max-width:calc(100vw - 24px)}
  .music audio{max-width:100%}
}
@media(max-width:360px){
  .hero h1{font-size:clamp(50px,13vw,58px)}
  .hero-content{padding-inline:14px}
  .date-feature{gap:10px}.date-feature>div+div{padding-left:10px}
  .rsvp-choices{gap:8px}
}
@media(max-width:650px) and (max-height:600px){
  .hero{min-height:600px}
  .hero:after{background-size:auto 57%;background-position:right -10px top 55px}
  .hero:after{mask-image:linear-gradient(to bottom,#000 0%,#000 calc(55px + 44%),transparent calc(55px + 57%));-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 calc(55px + 44%),transparent calc(55px + 57%))}
}