/* Readability, a clear moon, the owner's song and a continuous floral theme. */
.opening-scene{display:none}
@media screen{
  .hero-content{z-index:1;padding-top:185px;padding-bottom:165px}
  .hero-eyebrow{display:table;position:relative;z-index:2;max-width:100%;margin:0 auto 28px;padding:8px 18px;background:#080d1bed;font-size:14px;line-height:1.65;letter-spacing:3px;text-wrap:balance}
  .hero-together{font-size:23px;margin-bottom:26px}
  .hero-tagline{font-size:25px}
  .hero-date{font-size:13px;letter-spacing:1.7px}
  .hero-time{font-size:12px;letter-spacing:1px;flex-wrap:wrap}
  .hero-frame{inset:154px 0 127px}
  .hero-frame::after{inset:13px}
  .hero-art{opacity:.9;mask-image:linear-gradient(to bottom,transparent 0,transparent 180px,#000 340px);-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 180px,#000 340px)}
  .hero-moon{position:absolute;top:117px;right:5.5%;width:190px;height:190px;z-index:0;pointer-events:none}
  .moon-surface{display:block;width:100%;height:100%;background:var(--moon-image,url('../images/luminous-moon.webp')) center/contain no-repeat;filter:drop-shadow(0 0 22px #e9d7b433)}
  .hero-foot{z-index:2}
  .hero-location,.hero-foot .text-button{font-size:12px}
  .hero-buttons .button{font-size:13px}
  .eyebrow{line-height:1.8}
  .site-header{gap:22px}
  .brand-date{font-size:11px;letter-spacing:1.7px}
  .site-nav{gap:23px}
  .site-nav>a{font-size:14px}
  .site-nav .nav-rsvp{font-size:12px;gap:15px}
  .music-toggle{width:auto;min-width:132px;height:44px;border-radius:25px;padding:0 14px;gap:10px;background:#080d1b66;flex-shrink:0}
  .music-symbol{position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 20px;width:20px;height:22px}
  .music-slash{left:-2px;top:50%;margin-top:-1px}
  .music-label{font-size:12px;line-height:1;letter-spacing:.1px;white-space:nowrap}
  .music-toggle[data-state=waiting]{border-color:#d8be91a6;background:#d8be9112}
  .music-toggle[data-state=waiting]:hover{background:#d8be9129}
  .music-toggle[aria-busy=true]{border-color:var(--gold)}
  .form-field label,.attendance-fieldset legend{font-size:14px;letter-spacing:.2px}
  .form-field input,.form-field textarea,.personalize-details input{font-size:16px;min-height:50px}
  .form-field input::placeholder,.form-field textarea::placeholder,.personalize-details input::placeholder{font-size:14px}
  .optional,.input-hint{font-size:12px;letter-spacing:0}
  .form-note,.venue-hint,.countdown-zone{font-size:13px;line-height:1.85;color:#c5c2c8}
  .field-error{font-size:13px}
  .form-feedback{font-size:14px}
  .form-feedback p,.form-feedback a{font-size:13px}
  .attendance-options span{font-size:13px;white-space:normal;padding-left:30px}
  .attendance-options input{width:14px;height:14px;top:17px}
  .form-submit,.form-copy{font-size:13px}
  .contact-item .phone-number{font-size:15px}
  .contact-actions .text-button{font-size:13px}
  .wishes-form .form-note{font-size:13px}
  .wish-actions>.button,.wish-actions>.text-button{font-size:12px}
  .share-dialog>.eyebrow{font-size:12px}
  .share-dialog>p:not(.eyebrow){font-size:15px}
  .share-dialog .button,.personalize-details summary{font-size:13px}
  .personalize-details label,.personalize-details .text-button{font-size:13px}
  .personalize-details .form-note{font-size:12px}
  .footer-inner,.footer-inner>.text-button{font-size:12px}
  .card-intro{font-size:14px;max-width:330px}
  .card-eyebrow{font-size:11px;letter-spacing:1.7px}
  .card-times p,.card-venue,.card-date span{font-size:12px}
  .card-address{font-size:13px;max-width:300px}
  .card-note,.card-closing{font-size:18px;max-width:330px}
  .schedule-item .eyebrow{font-size:11px;letter-spacing:1.4px}
  .schedule-item p:not(.eyebrow){font-size:14px;line-height:1.8}
  .calendar-dropdown summary,.schedule-actions>.text-button{font-size:12px}
  .calendar-options>a,.calendar-options>button{font-size:14px}
  .section-heading>p:last-child,.beginning-copy>p:not(.eyebrow):not(.serif-lead),.closing-body{font-size:16px}
  /* The same white roses appear gently along every chapter of the invitation. */
  .floral-section{position:relative;isolation:isolate}
  .celebration-section{z-index:1}
  .floral-section:not(.closing-section)::before,.floral-section::after{content:'';position:absolute;pointer-events:none;z-index:-1;bottom:0;width:clamp(170px,22vw,345px);height:450px;background-image:var(--hero-image,url('../images/moonlit-garden.webp'));background-repeat:no-repeat;background-size:auto 670px;opacity:.32}
  .floral-section:not(.closing-section)::before{left:0;background-position:left bottom;mask-image:radial-gradient(ellipse at bottom left,#000 10%,#000b 43%,transparent 76%);-webkit-mask-image:radial-gradient(ellipse at bottom left,#000 10%,#000b 43%,transparent 76%)}
  .floral-section::after{right:0;background-position:right bottom;opacity:.25;mask-image:radial-gradient(ellipse at bottom right,#000 10%,#000c 43%,transparent 76%);-webkit-mask-image:radial-gradient(ellipse at bottom right,#000 10%,#000c 43%,transparent 76%)}
  .floral-section:nth-of-type(even)::before{opacity:.22}
  .floral-section:nth-of-type(even)::after{opacity:.37}
  .countdown-section::before,.countdown-section::after{height:250px;background-size:auto 460px}
  .rsvp-panel{isolation:isolate}
  .rsvp-panel::after{content:'';position:absolute;top:0;right:0;width:115px;height:150px;background:var(--hero-image,url('../images/moonlit-garden.webp')) right bottom/auto 320px no-repeat;mask-image:radial-gradient(ellipse at top right,#000,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at top right,#000,transparent 75%);opacity:.3;pointer-events:none;z-index:-1}
  /* Automatic opening: no click is needed, and CSS provides a timed fail-safe. */
  .intro-enabled .opening-scene{display:grid;place-items:center;position:fixed;inset:0;z-index:90;background:#050811;pointer-events:none;animation:opening-away .6s var(--ease) calc(var(--opening-duration,2100ms) - 600ms) forwards}
  .opening-content{width:min(420px,calc(100% - 48px));text-align:center;transform:translateY(-14px)}
  .opening-moon{width:112px;height:112px;margin:0 auto 25px;animation:opening-moon-in .65s var(--ease) both}
  .opening-line{height:1px;background:#d8be912b;width:210px;max-width:80%;margin:0 auto 23px;overflow:hidden}
  .opening-line>span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#cfa9a3,#e9d7b4);transform-origin:left;animation:opening-progress calc(var(--opening-duration,2100ms) - 700ms) var(--ease) both}
  .opening-content>p{font-family:var(--serif);color:var(--gold);font-size:14px;letter-spacing:2.8px;line-height:1.8;text-transform:uppercase}
  .intro-enabled .hero-content>*{animation-delay:calc(var(--opening-duration,2100ms) - 430ms)}
  .intro-enabled .hero-content>h1{animation-delay:calc(var(--opening-duration,2100ms) - 300ms)}
  .intro-enabled .hero-content>.hero-tagline{animation-delay:calc(var(--opening-duration,2100ms) - 190ms)}
  .intro-enabled .hero-content>.hero-buttons{animation-delay:var(--opening-duration,2100ms)}
  .intro-skipped .hero-content>*{animation:none;opacity:1;transform:none}
  @keyframes opening-away{to{opacity:0;visibility:hidden}}
  @keyframes opening-moon-in{from{opacity:.35;transform:translateY(7px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
  @keyframes opening-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
@media screen and (max-width:1100px){
  .site-nav{gap:17px}.site-nav>a{font-size:13px}.site-nav .nav-rsvp{font-size:12px;padding:9px 15px}
  .hero-moon{right:3%;width:170px;height:170px;top:126px}
  .hero-eyebrow{font-size:13px}
  .hero-together{font-size:22px}
  .hero-tagline{font-size:24px}
}
@media screen and (max-width:800px){
  .site-header{padding:0 14px;gap:12px;min-height:68px}
  .site-nav>a{font-size:15px;padding:14px 8px}
  .site-nav .nav-rsvp{font-size:14px;padding:14px}
  .music-toggle{min-width:110px;padding:0 11px;gap:8px}
  .music-label{font-size:11px}
  .menu-toggle{width:40px;height:44px}
  .hero-content{padding-top:227px;padding-bottom:160px}
  .hero-moon{right:5%;top:92px;width:140px;height:140px}
  .hero-frame{inset:203px 0 128px}
  .hero-eyebrow{font-size:12px;letter-spacing:2.2px;margin-bottom:25px;padding:7px 14px}
  .hero-together{font-size:22px}
  .hero-tagline{font-size:23px}
  .hero-time{font-size:12px;letter-spacing:.9px}
  .hero-date{font-size:12px;letter-spacing:1.3px;gap:14px}
  .hero-foot .share-trigger{font-size:12px}
  .scroll-cue{font-size:10px;letter-spacing:1.3px}
  .hero-foot{bottom:28px}
  .card-intro{font-size:14px;max-width:330px}
  .card-address{font-size:13px}
  .card-note,.card-closing{font-size:18px}
  .section-heading>p:last-child,.beginning-copy>p:not(.eyebrow):not(.serif-lead),.closing-body{font-size:15px}
  .wishes-copy>p:last-child,.venue-address,.rsvp-intro>p:not(.eyebrow),.invitation-intro>p:not(.eyebrow){font-size:15px}
  .floral-section:not(.closing-section)::before,.floral-section::after{width:180px;height:360px;background-size:auto 560px;opacity:.24}
  .floral-section:nth-of-type(even)::after{opacity:.32}
  .countdown-section::before,.countdown-section::after{height:220px;background-size:auto 420px}
}
@media screen and (max-width:600px){
  .attendance-options{display:grid;grid-template-columns:1fr;gap:10px}
  .attendance-options label{display:block}
  .attendance-options span{justify-content:flex-start;min-height:50px;padding:12px 14px 12px 42px;font-size:14px}
  .attendance-options input{width:15px;height:15px;top:18px;left:15px}
  .attendance-options .icon{display:none}
  .form-grid{grid-template-columns:1fr;gap:0}
  .form-field{margin-bottom:22px}
  .form-field label,.attendance-fieldset legend{font-size:14px}
  .form-note,.wishes-form .form-note{font-size:12px}
  .optional,.input-hint{font-size:12px}
  .form-submit{font-size:12px;gap:9px;padding:15px 10px}
  .form-copy{font-size:12px}
  .wish-actions{flex-direction:column;gap:4px}
  .wish-actions>.button{width:100%;font-size:12px}
  .wish-actions>.text-button{font-size:12px}
  .schedule-item{grid-template-columns:27px minmax(0,1fr) auto;gap:13px}
  .schedule-item .eyebrow{font-size:10px;letter-spacing:1px}
  .schedule-item p:not(.eyebrow){font-size:13px}
  .schedule-item time{font-size:26px}
  .schedule-actions{gap:14px}
  .calendar-dropdown summary,.schedule-actions>.text-button{font-size:11px}
  .hero-names{font-size:94px}
  .hero-content{padding-top:216px;padding-bottom:110px}
  .hero-moon{width:132px;height:132px;right:5%;top:95px}
  .hero-frame{width:calc(100% - 40px);inset:207px 0 125px}
  .hero-eyebrow{font-size:11px;letter-spacing:1.8px;padding:7px 13px}
  .hero-together{font-size:21px;line-height:1.35;margin-bottom:20px}
  .hero-names em{margin-top:10px;margin-bottom:7px}
  .hero-eyebrow{margin-bottom:20px}
  .hero-tagline{font-size:22px;line-height:1.3;max-width:330px;margin:22px auto 0}
  .hero-names{text-shadow:0 2px 18px #080d1b,0 1px 4px #080d1b}
  .hero-shade{background:linear-gradient(0deg,var(--navy),transparent 24%,#080d1b22 65%,#080d1b33),linear-gradient(90deg,#080d1b22,#080d1b66 45%,#080d1b44 85%,#080d1b22)}
  .hero-buttons{max-width:300px;margin-top:23px;gap:10px}
  .hero-buttons .button{font-size:12px;min-height:48px}
  .hero-date{font-size:12px;letter-spacing:.8px;gap:11px;margin-top:21px}
  .hero-time{font-size:11px;letter-spacing:.6px;gap:7px;line-height:1.6;margin-top:7px}
  .hero-foot .share-trigger{font-size:11px}
  .scroll-cue{font-size:9px;letter-spacing:1px}
  .countdown small{font-size:11px;letter-spacing:1px}
  .countdown-zone{font-size:12px}
  .card-inner{padding:31px 18px}
  .card-eyebrow{font-size:10px;letter-spacing:1px}
  .card-intro{font-size:13px;line-height:1.9}
  .card-note,.card-closing{font-size:17px;line-height:1.5}
  .card-date span,.card-times p{font-size:11px;letter-spacing:1px}
  .card-venue{font-size:11px;letter-spacing:1px}
  .card-address{font-size:12px;max-width:260px}
  .footer-inner,.footer-inner>span:nth-child(2),.footer-inner>.text-button{font-size:11px}
  .footer-inner{gap:10px 15px}
  .site-footer{padding:22px 18px}
  .back-top{position:static;width:36px;height:36px}
  .venue-arch>span{font-size:12px;letter-spacing:1.6px}
  .venue-arch>small{font-size:11px;letter-spacing:2px}
  .date-plaque>span{font-size:12px;letter-spacing:1.7px}
  .celestial-caption{font-size:10px;letter-spacing:1px;left:20%}
  .closing-date{font-size:12px;letter-spacing:1.5px}
  .opening-content>p{font-size:12px;letter-spacing:2px}
}
@media screen and (max-width:360px){
  .site-header{padding:0 11px;gap:8px}
  .header-actions{gap:4px}
  .music-toggle{min-width:101px;padding:0 8px;gap:6px}
  .music-label{font-size:10.5px}
  .brand-mark{font-size:26px}
  .hero-names{font-size:81px}
  .hero-content{padding-left:12px;padding-right:12px}
  .hero-eyebrow{font-size:10px;letter-spacing:1.5px}
  .hero-date{font-size:10.5px;gap:8px;letter-spacing:.7px}
  .hero-time{font-size:10px;gap:5px;letter-spacing:.5px}
  .hero-tagline{font-size:20px}
  .hero-buttons{max-width:260px}
  .hero-buttons .button{font-size:11px;padding-left:16px;padding-right:16px}
  .hero-foot .share-trigger{font-size:10px}
  .scroll-cue{font-size:8px;letter-spacing:.7px}
  .countdown small{font-size:10px;letter-spacing:.7px}
  .card-inner{padding:29px 13px}
  .card-intro{font-size:12px}
  .card-names{font-size:28px}
  .card-venue{font-size:10px}
  .form-submit{font-size:11px}
  .schedule-item .eyebrow{font-size:9px;letter-spacing:.6px}
  .schedule-item p:not(.eyebrow){font-size:12px}
  .schedule-item time{font-size:24px}
  .calendar-dropdown summary,.schedule-actions>.text-button{font-size:10px}
  .floral-section:not(.closing-section)::before,.floral-section::after{width:145px}
}
@media(prefers-reduced-motion:reduce){
  .intro-enabled .opening-scene{display:none}
  .intro-enabled .hero-content>*{animation:none;opacity:1;transform:none}
}