@media(max-width:700px){
  html{scroll-behavior:auto}
  .grand-opening{height:calc(var(--scene-height,100svh) * 2.6)}
  .envelope-scroll{height:calc(var(--scene-height,100svh) * 3)}
  .grand-stage,.envelope-stage{height:var(--scene-height,100svh)}
  .rings-scroll{height:calc(var(--scene-height,100svh) * 1.2);margin-top:0}
  .rings-stage{height:calc(var(--scene-height,100svh) * .72)}
  .opening-butterfly{transform:translate(-50%,calc(-50% - var(--butterfly,0)*var(--scene-height,100svh)*.27)) scale(calc(.6 + var(--butterfly,0)*.4))}
  .reveal,.photo-composition.reveal,.interlude-frame.reveal{transform:none;transition:opacity 1.3s ease}
  .interlude-frame.reveal.visible{transform:none}
  .invitation-card,.photo-memory,.interlude-frame,.event-sketch,.ring,.botanical{animation:none;rotate:none;translate:none}
  .air-feather{transform:rotate(var(--angle));transition:opacity 2.8s ease}
  .air-feather>span{animation-name:mobile-air-breath}
  .butterfly-flight{animation-duration:24s}
  .butterfly-wing{animation-duration:6s}
  #program.timeline{margin-top:24px}
  .program-section{padding-left:18px;padding-right:18px}
  #program .event-scene{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:16px;min-height:0;padding:24px 0 30px;text-align:left;align-items:center}
  #program .event-scene:nth-child(even){grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
  #program .event-scene:nth-child(even) .event-art{order:2}
  #program .event-scene:nth-child(even) .event-info{order:1}
  #program .event-art:has(.event-sketch),#program .event-info{max-width:none;min-width:0;opacity:1;transform:none}
  #program .event-sketch{transform:none}
  #program time{display:block;font-size:29px;margin:0;line-height:1.05}
  #program h3{font-size:28px;line-height:1.08;margin:8px 0 10px;overflow-wrap:normal}
  #program .event-info>p{font-size:11px;line-height:1.55;margin-left:0;margin-right:0}
  #program .event-place{font-size:12px;margin-top:13px}
  #program .event-address{font-size:11px;margin-top:4px}
  #program .event-routes{display:flex;flex-direction:column;align-items:flex-start;gap:7px;margin-top:12px}
  #program .event-routes a{font-size:10px;line-height:1.4;padding:10px 11px;max-width:100%;white-space:normal}
  #program .route-hint{font-size:10px!important;line-height:1.5!important;margin-top:9px!important}
}
@keyframes mobile-air-breath{0%,100%{opacity:.65}50%{opacity:1}}
@media(max-width:360px){#program .event-scene{gap:11px}#program h3{font-size:25px}#program time{font-size:27px}#program .event-routes a{padding:9px 8px;font-size:9px}}
.invitation-card{opacity:var(--card-visible,0)}
@media(max-width:700px){
  body:before{display:none}
  .grand-cue{bottom:85px}
  .envelope-back,.envelope-front{filter:none}
  /* Keep the sticky scene in 2D; only the flap rotates in its own perspective. */
  .envelope-object{perspective:none;transform:none}
  .envelope-flap{filter:none;will-change:transform;backface-visibility:visible;transform:perspective(1300px) rotateX(var(--flap-angle,178deg))}
  .envelope-stage.flap-rest .envelope-flap{transform:none;will-change:auto}
  .card-window{clip-path:inset(-1500px 0 6.6% 0)}
  .invitation-card{opacity:var(--card-visible,0);will-change:transform;box-shadow:none;transform:translate3d(0,calc(var(--card-offset,0px) * -1),0)}
  .feather img{animation:none;will-change:auto}
  .music-button{backdrop-filter:none}
  .hourglass-turn{transform-box:view-box;transform-origin:50% 50%}
  .form-section input:not([type=radio]),.form-section textarea{font-size:16px}
}
@media(prefers-reduced-motion:reduce){.invitation-card{opacity:1}}
@media(max-width:700px) and (prefers-reduced-motion:reduce){.grand-opening,.envelope-scroll,.rings-scroll{height:auto}.grand-stage{height:850px}.envelope-stage{height:auto}.opening-butterfly{transform:translate(-50%,-50%)}.air-feather>span{animation:none}.invitation-card{transition:none;opacity:1}}