/* Phone invitation: a compact cover, clear hierarchy, and restrained gold ornament. */
@media(max-width:760px){
 html{scroll-padding-top:18px}
 body{background:radial-gradient(ellipse at 50% 0,#68253b 0,#361020 55%,#250b17);background-attachment:scroll;-webkit-text-size-adjust:100%}
 body:after{display:none}
 .topbar{justify-content:center;text-align:center;padding:15px 18px 17px;background:#290d19;border-bottom:1px solid #d6b66f45}
 .brand{font-size:29px;line-height:1.4;letter-spacing:.2px}
 .topbar small{font-size:16px;line-height:1.5;letter-spacing:.4px;margin-top:5px}
 .opening{margin:15px 12px 52px;padding:27px 20px 21px;border-radius:150px 150px 8px 8px / 12px 12px 8px 8px;outline-offset:-7px;background:radial-gradient(ellipse at 50% 10%,#71304466,transparent 60%),linear-gradient(155deg,#461326,#2b0c19 75%);box-shadow:0 16px 40px #12040d55}
 .opening:before{width:170px;height:170px;left:-110px;top:35%;opacity:.12}
 .opening:after{width:180px;height:180px;right:-120px;bottom:25px;opacity:.14}
 .corner{width:39px;height:39px;top:12px;opacity:.5}
 .tl{left:11px}.tr{right:11px}
 .opening>.eyebrow{position:relative;margin:6px 0 0;padding:5px 0 14px;font-size:27px;line-height:1.5;letter-spacing:.3px;background:none;color:#f6dfaa}
 .opening>.eyebrow:after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:90px;height:1px;background:linear-gradient(90deg,transparent,#d6b66f,transparent)}
 .opening>.eyebrow span{font-size:14px;line-height:1.6;letter-spacing:1.6px;margin-top:5px}
 .opening-grid{padding:27px 0 24px;gap:25px;grid-template-columns:minmax(0,1fr)}
 .couple-frame{grid-row:1;width:86%;max-width:300px;padding:8px;margin:0 auto 8px;border-radius:170px 170px 6px 6px;box-shadow:0 0 0 4px #d6b66f0c,0 0 0 5px #d6b66f44,0 15px 30px #16040d70}
 .couple-frame img{height:auto;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:160px 160px 0 0;object-position:center}
 .couple-frame figcaption{font-size:23px;line-height:1.5;padding:12px 5px 13px;background:linear-gradient(135deg,#4f192c,#310d1c)}
 .couple-frame figcaption span{font-size:13px;line-height:1.6;letter-spacing:1.8px;margin-top:3px}
 .couple-frame:after{width:76px;height:76px;right:-20px;bottom:-21px;opacity:.8}
 .couple-frame:before{display:none}
 .opening-copy{padding:0 2px}
 .kicker{font-size:15px;line-height:1.9;margin:0 0 13px;color:#e1c698;text-wrap:balance}
 .opening h1{font-size:clamp(39px,11.5vw,62px);line-height:1.5;letter-spacing:0;text-shadow:0 3px 20px #efc56c18}
 .opening h1 em{font-size:32px;line-height:1.1;margin:2px 0}
 .english-names{font-size:clamp(29px,8.3vw,39px);line-height:1.35;margin:12px 0 14px;text-wrap:balance}
 .rule{height:40px;background-size:135px 40px;margin:15px 0 20px}
 .greeting{font-size:21px;line-height:1.95;margin-bottom:10px;text-wrap:pretty}
 .muted{font-size:23px;line-height:1.55}
 .opening .button{width:100%;min-height:61px;gap:5px 12px;padding:15px 12px;margin:17px 0 15px;border-radius:7px;border:1px solid #f3da9d;box-shadow:inset 0 1px 0 #fff1c6aa,0 8px 22px #13050966;font-size:19px}
 .opening .button span{font-size:23px;line-height:1.4}
 .button:disabled{transform:none;opacity:.6}
 .personal{font-size:18px;line-height:1.8;margin:13px 0 0;color:#e1c392}
 .personal small{font-size:21px;line-height:1.5;margin-top:4px}
 .opening .poetry{margin:2px 0 27px;padding:23px 3px 22px;background:radial-gradient(ellipse at center,#d6b66f09,transparent 75%);border-color:#d6b66f38}
 .poetry-ornament{width:95px;height:31px;background-size:95px 31px;margin-bottom:16px}
 .poetry .poetry-bn{font-size:clamp(24px,6.8vw,31px);line-height:1.95;margin-bottom:15px;text-wrap:balance}
 .poetry .poetry-en{font-size:23px;line-height:1.55;margin-bottom:19px}
 .poetry figcaption{font-size:15px;line-height:1.85}
 .poetry figcaption span{font-size:20px;line-height:1.5;margin-top:4px}
 .poetry figcaption small{font-size:13px;line-height:1.7;margin-top:7px}
 .opening-action{padding:0 0 13px}
 .opening-action .button{margin:0 0 12px}
 .opening-bottom{padding:17px 2px 0;gap:5px;font-size:14px;line-height:1.8;letter-spacing:.2px;color:#d9bd8e}
 .opening-bottom span:last-child{font:15px/1.7 var(--english-font);letter-spacing:1.1px}
 .section{margin:0 12px 50px;padding:30px 5px}
 .section>.eyebrow{font-size:15px;line-height:1.9;letter-spacing:.4px;margin-bottom:15px;text-wrap:balance}
 h2{font-size:clamp(30px,8.9vw,42px);line-height:1.65;margin-bottom:21px}
 h2 small{font-size:29px;line-height:1.4;margin-top:9px}
 .poetry-couple{margin:27px 0 35px;padding:25px 5px}
 .family-grid{gap:24px;margin-top:28px}
 .family-card{padding:40px 22px 19px;border-radius:8px;outline-offset:-7px;box-shadow:0 12px 30px #14050d44}
 .family-card:before{height:43px;background-size:136px 43px;opacity:.34}
 .family-card>.eyebrow{font-size:21px;line-height:1.6;margin:20px 0}
 .portrait{width:230px;max-width:94%;height:auto;aspect-ratio:4/5;padding:7px;border-radius:140px 140px 5px 5px}
 .family-card h3{font-size:38px;line-height:1.6;margin:20px 0}
 .family-card h3 small{font-size:30px;line-height:1.45}
 .family-card p{font-size:20px;line-height:1.9;margin-bottom:23px}
 .family-card p:not(:last-child){padding-bottom:17px;border-bottom:1px solid #be985633}
 .family-card small{font-size:23px;line-height:1.55}
 .field-label{font-size:15px;line-height:1.8;letter-spacing:0;margin-bottom:7px}
 .portrait-stage{min-height:445px;margin-top:24px}
 .stage-person h3{font-size:36px}.stage-person h3 small{font-size:30px}
 .event,.reception-section .event{padding:65px 22px 30px;border-radius:8px;background-size:150px 48px,cover;background-position:top 12px center,center;outline-offset:-7px}
 .event .lotus{height:50px;background-size:73px 52px;margin:15px 0}
 .event .eyebrow{font-size:15px;line-height:1.9;margin-top:8px;letter-spacing:.5px}
 .event h2{font-size:clamp(29px,8.5vw,39px);line-height:1.65}
 .event h2 small{font-size:29px}
 .event>p{font-size:20px;line-height:1.95}
 .event>.muted{font-size:24px;line-height:1.55}
 .event-grid{gap:0;margin:28px 0 15px;padding:0;border:0;font-size:20px}
 .event-grid>div{padding:21px 0;border-top:1px solid #b48c4c4d}
 .event-grid small{font-size:24px;line-height:1.5}
 .event .text-button{display:block;font-size:17px;line-height:1.85;padding:15px 0 3px}
 .reception-section{padding:20px 0}
 .envelope{padding:35px 22px 28px;border-radius:9px;outline-offset:-7px}
 .envelope strong{font-size:clamp(27px,7.8vw,36px);line-height:1.8;margin:20px 0 8px}
 .envelope>span:not(.seal){font-size:18px;line-height:1.65;letter-spacing:1px}
 .envelope small{font-size:17px;line-height:1.9;margin-top:20px}
 .seal{width:72px;height:72px;font-size:30px}
 .poetry-reception{padding:24px 9px;margin-bottom:28px}
 .countdown{gap:7px;margin:28px 0}
 .countdown div{padding:15px 3px 13px;min-width:0;border-radius:7px}
 .countdown b{font-size:35px;line-height:1.2}
 .countdown span{font-size:12px;line-height:1.8;margin-top:8px}
 .reception-section iframe{height:260px;border-width:3px;border-radius:8px;margin:0 0 20px}
 #close-invitation{width:100%;border-radius:7px;min-height:60px}
 .modal{padding:18px 12px max(18px,env(safe-area-inset-bottom))}
 .modal-card{padding:28px 23px 25px;border-radius:10px;max-height:calc(100dvh - 36px);outline-offset:-7px}
 .modal-card h2{font-size:32px}.modal-card h2 small{font-size:27px}
 .modal-card .lotus{height:52px;margin:10px 0 15px;background-size:75px 52px}
 .modal-card label{font-size:18px}.modal-card input{font-size:21px;border-radius:6px;padding:14px}
 .modal-card .button{font-size:17px;line-height:1.8;padding:14px 9px;border-radius:6px;min-height:59px}
 footer{font-size:20px;line-height:1.8;padding:30px 20px max(35px,env(safe-area-inset-bottom))}
 footer span{font-size:23px;line-height:1.5;margin-top:5px}
 .preview-note{font-size:14px;line-height:1.8;padding:10px 16px}
 .invalid{margin:25px auto;padding:70px 24px 30px;width:calc(100% - 24px);border-radius:8px}
 .invalid h1{font-size:31px}.invalid h2{font-size:29px}.invalid p{font-size:19px}
}
@media(max-width:360px){
 .opening{margin-left:10px;margin-right:10px;padding-left:17px;padding-right:17px}
 .opening>.eyebrow{font-size:25px}
 .opening>.eyebrow span{font-size:13px;letter-spacing:1.4px}
 .couple-frame{width:88%}
 .couple-frame figcaption{font-size:21px}
 .couple-frame figcaption span{font-size:12px}
 .kicker{font-size:14px}
 .opening h1{font-size:39px}
 .opening .button{font-size:18px}.opening .button span{font-size:22px}
 .greeting{font-size:20px}
 .poetry .poetry-bn{font-size:24px}
 .family-card,.event,.reception-section .event{padding-left:18px;padding-right:18px}
 .countdown span{font-size:11px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}