:root{--cream:#fbf5e9;--gold:#967440;--ink:#695535;--line:#b6986259;--display:'Amiri',serif;--body:'Noto Sans Arabic',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scrollbar-color:#baa16d var(--cream)}body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.95 var(--body);overflow-x:hidden}[hidden]{display:none!important}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #95703a;outline-offset:6px}img{max-width:100%;display:block}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-family:var(--display);font-weight:400}
.cover{min-height:100svh;padding:32px 28px 76px;display:flex;align-items:center;justify-content:center;position:relative;text-align:center;isolation:isolate;perspective:1400px}.cover:before,.cover:after{content:'';position:absolute;inset:14px;border:1px solid #b79b6650;pointer-events:none;z-index:-1}.cover:after{inset:21px;border-color:#b79b6627}.cover-content{width:min(900px,100%);margin:auto;animation:cover-arrive 1.4s ease both}.art-monogram{object-fit:contain;mix-blend-mode:multiply}.cover-monogram{width:106px;height:106px;margin:0 auto 7px}.cover-prelude{font:21px/1.7 var(--display);color:#8a7043}.cover-names{display:flex;align-items:center;justify-content:center;gap:28px;font-size:59px;line-height:1.4;color:#86632f;margin-top:4px}.cover-names>span{font:32px/1.5 var(--display);color:#b19054;margin-top:9px}.english-names{font:36px/1.5 'Great Vibes',cursive;color:#a18751;letter-spacing:.02em}.cover .english-names{font-size:31px}
.envelope{display:block;position:relative;width:min(730px,100%);margin:-7px auto -14px;padding:0;isolation:isolate;perspective:1200px;animation:envelope-breathe 7s ease-in-out 1.5s infinite;transform-style:preserve-3d}.envelope img.envelope-closed,.envelope img.envelope-open{width:100%;height:auto;mix-blend-mode:multiply;transform-origin:50% 40%;will-change:transform,opacity}.envelope-closed{position:relative;z-index:2;transition:opacity .55s ease .2s,transform 1s cubic-bezier(.2,.65,.2,1)}.opened-envelope-layer{position:absolute;inset:0;opacity:0;z-index:1;transform:translateY(20px) scale(.97);transition:opacity .65s ease,transform 1.25s cubic-bezier(.2,.7,.2,1)}.seal-monogram{position:absolute;left:50%;top:58.9%;transform:translate(-50%,-50%);z-index:3;width:7.3%;aspect-ratio:1;mix-blend-mode:multiply;filter:brightness(.7);transition:transform .6s ease,opacity .45s ease;pointer-events:none}.seal-monogram img{width:100%;height:100%;object-fit:contain}.envelope:focus-visible{outline-offset:-30px}.envelope:hover .envelope-closed{transform:translateY(-3px)}.open-caption{font:22px/1.7 var(--display);border-bottom:1px solid #a1885555;padding:0 6px 2px;transition:opacity .3s}.cover-date{font:17px/1.7 Georgia,serif;letter-spacing:4px;margin-top:18px;color:#9a7e46;transition:opacity .3s}.cover-date span{padding:0 7px;color:#bca477}
.cover.is-opening .envelope{animation:none}.cover.is-opening .seal-monogram{transform:translate(-50%,-95%) rotate(-14deg) scale(1.22);opacity:0}.cover.is-opening .open-caption,.cover.is-opening .cover-date{opacity:0}.cover.flap-opening .envelope-closed{opacity:0;transform:rotateX(-22deg) translateY(15px) scale(.98)}.cover.flap-opening .opened-envelope-layer{opacity:1;transform:translateY(-4px) scale(1)}.cover.card-rising .opened-envelope-layer{transform:translateY(-34px) scale(1.025)}.cover.is-leaving{opacity:0;transform:scale(1.035);transition:opacity .65s ease,transform .65s ease}
.invitation{max-width:810px;margin:26px auto 70px;padding:0 20px;outline:none}.letter{border:1px solid #b9a17455;background:var(--cream);box-shadow:0 10px 60px #7e673912;position:relative}.letter:after{content:'';position:absolute;inset:8px;border:1px solid #b9a17422;pointer-events:none}.formal-letter{background:var(--cream) url('assets/invitation-paper.webp') center/100% 100% no-repeat;text-align:center;padding:42px 64px 66px}.letter-monogram{height:115px;width:115px;margin:0 auto 20px}.bismillah{font:27px/1.85 var(--display);margin-bottom:23px}.verse-frame{position:relative;border:1px solid #b3975b75;padding:37px 24px 25px;margin:0 auto 36px;background:#fbf5e980;max-width:565px}.verse-frame:before{content:'';position:absolute;inset:6px;border:1px solid #b3975b30;pointer-events:none}.verse{font:26px/2.05 var(--display);color:#826333;text-wrap:pretty}.verse-flourish{position:absolute;top:-24px;left:50%;transform:translateX(-50%);font:38px/1 var(--display);background:var(--cream);padding:0 20px;color:#a78a51}.bottom-flourish{top:auto;bottom:-18px;transform:translateX(-50%) rotate(180deg);font-size:31px}.verse-source{display:block;font:14px/1.7 var(--body);margin-top:16px;color:#967b48}.opening-words{font:24px/1.9 var(--display);margin:34px 0 20px}.couple{display:grid;grid-template-columns:1fr 30px 1fr;align-items:start;gap:10px;margin:0 -9px}.honorific{font:19px/1.8 var(--display);color:#9c824e}.person h2{font:62px/1.5 var(--display);color:#86632f}.person>p{font:21px/1.7 var(--display);max-width:215px;margin:auto}.ampersand{font:italic 35px/1.5 Georgia,serif;color:#b29a68;align-self:center;margin-top:-25px}.invite-words{font:26px/1.85 var(--display);margin-top:28px}.ornament{display:flex;align-items:center;justify-content:center;gap:18px;font:30px/1 Georgia,serif;color:#b19962;margin:37px auto;max-width:220px}.ornament span{width:65px;height:1px;background:linear-gradient(90deg,transparent,#b79d6577)}.ornament span:last-child{transform:rotate(180deg)}.wedding-date{display:flex;align-items:center;justify-content:center;gap:24px;font:25px/1.4 var(--display)}.wedding-date strong{font-weight:400;font-size:82px;line-height:1.2;padding:0 24px;border-inline:1px solid var(--line);color:#9b7e43}.wedding-date>div{display:flex;flex-direction:column;gap:5px}.wedding-date>div>span:last-child{font-size:21px}.wedding-time{font:25px/1.85 var(--display);margin:19px auto}.hall-name{font-size:41px;line-height:1.7;color:#947741}.hall-address{font:23px/1.85 var(--display)}.delicate-link{display:inline-flex;gap:15px;align-items:center;justify-content:center;border:1px solid #aa90596e;border-radius:2px;padding:7px 22px;font-size:14px;min-height:45px;margin-top:22px;transition:background .25s,transform .25s}.delicate-link:hover{background:#eee4d0;transform:translateY(-2px)}.delicate-link>span{font-family:Arial;font-size:20px}.letter-blessing{font:24px/1.8 var(--display);margin-top:27px}
.inset-section{margin:0 auto;text-align:center;padding:24px 63px}.inset-section h2{font-size:37px;line-height:1.8;color:#8d6e37}.small-intro{font:21px/1.9 var(--display);margin-bottom:8px}.henna{padding-top:0;padding-bottom:15px}.henna .ornament{margin-top:15px}.henna-date{font:25px/1.8 var(--display);margin:12px 0 2px}.henna>p:last-child{font:23px/1.8 var(--display)}.keepsake{padding-top:18px}.keepsake h2{font-size:33px;line-height:1.65}.keepsake-intro{font:23px/1.9 var(--display);margin:14px 0 0}.story-chapter{padding-top:38px;margin:0 auto 18px;max-width:590px}.chapter-marker{display:flex;align-items:center;justify-content:center;gap:17px;margin:0 auto 24px;color:#8c703c}.chapter-marker:before,.chapter-marker:after{content:'';width:68px;height:1px;background:var(--line)}.chapter-marker span{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;font:18px/1 var(--display)}.chapter-kicker{font-size:14px;color:#8a7448;margin-bottom:8px}.story-chapter h3{font-size:36px;color:#8e703a;line-height:1.65}.story-chapter figcaption>p:last-child{font:23px/1.9 var(--display);margin:8px 0 24px}.story-picture{padding:8px;border:1px solid #b99b6157;background:#fffaf1;box-shadow:0 8px 28px #84682f09}.story-picture img{display:block;width:100%;height:auto;object-fit:contain}.wedding-chapter .story-picture{max-width:470px;margin:auto}.venue{padding-top:18px}.venue-photo{margin-top:24px;border:1px solid #ad92584f;padding:8px;background:#fffaf0}.venue-photo img{height:auto;width:100%;object-fit:contain}.venue-address{font:22px/1.8 var(--display);margin-top:20px}.closing{padding-bottom:65px}.countdown-label{font:23px/1.8 var(--display)}.countdown{display:flex;gap:20px;align-items:center;justify-content:center;margin:22px 0 36px}.countdown>div{min-width:58px;display:flex;flex-direction:column}.countdown strong{font:400 36px/1.4 var(--display);color:#a0854e;font-variant-numeric:tabular-nums}.countdown span{font-size:14px;color:#8a7959}.countdown>i{font:normal 22px Georgia;margin-top:-20px;color:#bba374}.closing-line{font:28px/1.9 var(--display);margin-bottom:18px}.closing .english-names{font-size:32px}.return-envelope{font:17px/1.8 var(--display);border-bottom:1px solid #b49b6570;margin-top:35px;padding:0 0 3px}
.music-control{position:fixed;left:18px;bottom:18px;z-index:10}.music-control>button{display:flex;align-items:center;gap:9px;font-size:14px;min-height:44px;padding:8px 14px;border:1px solid #ac925978;background:#fbf5e9ed;border-radius:30px;box-shadow:0 2px 14px #6f592210}.music-control>button>span:first-child{font-size:20px;line-height:1}.music-control>button[aria-pressed="true"]>span:first-child{animation:sound 1.5s ease-in-out infinite alternate}
.invitation.appearing{transform-origin:50% 0;animation:unfold 1.35s cubic-bezier(.2,.7,.2,1) both}.appearing .formal-letter>.art-monogram,.appearing .bismillah,.appearing .verse-frame,.appearing .opening-words,.appearing .couple,.appearing .invite-words{animation:ink-appear 1.1s ease both}.appearing .bismillah{animation-delay:.18s}.appearing .verse-frame{animation-delay:.3s}.appearing .opening-words{animation-delay:.45s}.appearing .couple{animation-delay:.58s}.appearing .invite-words{animation-delay:.7s}.will-reveal{opacity:0;transform:translateY(35px);transition:opacity 1s ease,transform 1.15s cubic-bezier(.2,.7,.2,1)}.will-reveal .story-picture{transform:translateY(12px) scale(.97);transition:transform 1.4s cubic-bezier(.2,.7,.2,1) .15s}.will-reveal.is-visible{opacity:1;transform:none}.will-reveal.is-visible .story-picture{transform:none}.is-visible .chapter-marker:before,.is-visible .chapter-marker:after{animation:line-draw 1.3s ease both}@keyframes unfold{from{opacity:0;transform:perspective(1400px) rotateX(5deg) translateY(45px) scale(.97)}to{opacity:1;transform:none}}@keyframes ink-appear{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes sound{to{opacity:.4;transform:translateY(-2px)}}@keyframes cover-arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@keyframes envelope-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes line-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(min-width:700px) and (max-height:850px){.cover{padding-top:24px;padding-bottom:70px}.cover-monogram{width:83px;height:83px}.cover-prelude{font-size:20px}.cover-names{font-size:52px}.cover .english-names{font-size:29px}.envelope{max-width:640px;margin-top:-12px}.cover-date{margin-top:12px}}
@media(max-width:650px){.cover{padding:36px 12px 78px}.cover:before{inset:9px}.cover:after{inset:15px}.cover-monogram{width:100px;height:100px;margin-bottom:12px}.cover-prelude{font-size:20px}.cover-names{font-size:clamp(44px,12vw,58px);gap:22px;margin-top:8px}.cover-names>span{font-size:28px}.cover .english-names{font-size:29px;margin-top:3px}.envelope{width:100%;margin:15px auto 8px}.open-caption{font-size:21px}.cover-date{font-size:16px;margin-top:24px}.invitation{padding:0 9px;margin:9px auto 35px}.letter:after{inset:5px}.formal-letter{padding:35px 25px 52px}.letter-monogram{width:99px;height:99px;margin-bottom:22px}.bismillah{font-size:23px;margin-bottom:29px}.verse-frame{padding:31px 15px 27px;margin-bottom:31px}.verse{font-size:22px;line-height:2}.verse-source{font-size:13px;margin-top:13px}.verse-flourish{font-size:33px;top:-19px}.bottom-flourish{top:auto;bottom:-16px;font-size:28px}.opening-words{font-size:22px;margin:24px 0 23px}.couple{grid-template-columns:1fr 22px 1fr;gap:4px;margin-inline:-11px}.honorific{font-size:17px}.person h2{font-size:47px;line-height:1.55}.person>p{font-size:19px;line-height:1.7;max-width:145px}.ampersand{font-size:26px;margin-top:-27px}.invite-words{font-size:23px;margin-top:26px}.ornament{font-size:26px;gap:15px;margin-block:30px}.ornament span{width:50px}.wedding-date{gap:14px;font-size:22px}.wedding-date strong{font-size:68px;padding-inline:20px}.wedding-date>div>span:last-child{font-size:20px}.wedding-time{font-size:23px;margin:18px auto}.hall-name{font-size:36px}.hall-address{font-size:22px}.letter-blessing{font-size:22px;margin-top:25px}.inset-section{padding:18px 24px}.inset-section h2{font-size:33px}.small-intro{font-size:20px}.henna{padding-top:0}.henna .ornament{margin-top:5px}.henna-date{font-size:24px}.henna>p:last-child{font-size:22px}.keepsake h2{font-size:28px}.keepsake-intro{font-size:21px}.story-chapter{padding-top:30px;margin-bottom:10px}.story-chapter h3{font-size:31px}.story-chapter figcaption>p:last-child{font-size:21px;line-height:1.8;margin-bottom:20px}.chapter-marker{margin-bottom:22px}.story-picture,.venue-photo{padding:5px}.venue-address{font-size:21px}.closing{padding-bottom:80px}.closing-line{font-size:26px}.closing .english-names{font-size:29px}.music-control{left:10px;bottom:10px}.music-control>button{padding:7px 11px;font-size:14px}.countdown{gap:16px}.countdown-label{font-size:22px}}
@media(max-width:360px){.formal-letter{padding-inline:20px}.verse-frame{padding-inline:12px}.verse{font-size:21px}.person h2{font-size:42px}.person>p{font-size:18px}.wedding-date{gap:11px}.wedding-date strong{padding-inline:15px}.inset-section{padding-inline:19px}.cover .english-names{font-size:27px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.will-reveal,.will-reveal .story-picture{opacity:1;transform:none}}
@media print{.cover,.music-control,.return-envelope{display:none!important}#invitation[hidden]{display:block!important}.invitation{margin:0;padding:0;max-width:none}.letter{box-shadow:none}.formal-letter{break-after:page}.will-reveal{opacity:1;transform:none}.story-chapter{break-inside:avoid}}

@media(min-width:700px) and (max-height:850px){.cover{padding-top:16px;padding-bottom:60px}.cover-monogram{width:76px;height:76px}.cover-prelude{font-size:19px}.cover-names{font-size:48px}.cover .english-names{font-size:27px}.envelope{max-width:570px;margin-top:-7px;margin-bottom:-8px}.cover-date{margin-top:12px}}

.envelope-closed,.envelope-open{mask-image:linear-gradient(to right,transparent,#000 6% 94%,transparent),linear-gradient(to bottom,transparent,#000 6% 94%,transparent);mask-composite:intersect}
/* A restrained closing action and matching keepsake-style guest note form. */
.closing .guest-message-button{margin-top:22px;min-height:48px;padding:10px 24px;border:1px solid #a88a55;border-radius:999px;background:linear-gradient(135deg,#fffdf8,#f4ead7);color:#72542b;font:20px/1.4 var(--display);box-shadow:0 5px 18px #775b2912;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.closing .guest-message-button span{margin-inline-start:8px;color:#a1844d}
.closing .guest-message-button:hover{transform:translateY(-2px);box-shadow:0 9px 22px #775b2920;background:#fffdf8}
.closing .guest-message-button:focus-visible,.message-dialog button:focus-visible,.message-dialog input:focus-visible,.message-dialog select:focus-visible,.message-dialog textarea:focus-visible{outline:2px solid #947345;outline-offset:3px}
.message-dialog{position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:min(480px,calc(100vw - 32px));max-height:min(90svh,760px);overflow:auto;padding:0;border:1px solid #b9a17488;border-radius:8px;background:#fbf5e9;color:#675138;box-shadow:0 24px 90px #2d211c45}
.message-dialog::backdrop{background:#2d241d88;backdrop-filter:blur(3px)}
.message-dialog form{position:relative;padding:34px clamp(22px,6vw,44px) 30px;display:flex;flex-direction:column;align-items:stretch;text-align:right}
.message-dialog form:before{content:'';position:absolute;inset:9px;border:1px solid #b9a17435;pointer-events:none}
.message-dialog form>*{position:relative}
.message-dialog .message-close{position:absolute;inset:12px 12px auto auto;width:35px;height:35px;border:1px solid #b9a17455;border-radius:50%;background:transparent;color:#806844;font-size:25px;line-height:1;cursor:pointer}
.message-dialog .ornament{align-self:center;margin:0 auto 10px;font-size:23px}
.message-dialog .message-kicker{text-align:center;margin:0 0 4px;color:#977847;font-size:16px}
.message-dialog h2{margin:0 0 22px;text-align:center;font:30px/1.5 var(--display);color:#76582d}
.message-dialog label{margin:12px 0 6px;font-size:17px;color:#705c3f}
.message-dialog input,.message-dialog select,.message-dialog textarea{width:100%;border:1px solid #b9a17466;border-radius:4px;background:#fffdf8;color:#554633;padding:11px 13px;font:17px/1.6 var(--display)}
.message-dialog textarea{resize:vertical;min-height:106px}
.message-dialog input::placeholder,.message-dialog textarea::placeholder{color:#a79a83}
.message-dialog .message-privacy{margin:13px 0 8px;text-align:center;color:#8e8068;font-size:14px;line-height:1.7}
.message-dialog .message-send{align-self:center;margin-top:8px;min-height:46px;padding:9px 25px;border:1px solid #9c7b46;border-radius:999px;background:#9c7b46;color:#fffaf1;font:18px/1.4 var(--display);cursor:pointer;transition:background .2s ease}
.message-dialog .message-send:hover{background:#806136}
.message-dialog .message-status{min-height:1.5em;margin:8px 0 0;text-align:center;color:#705c3f;font-size:14px}
.message-dialog .honeypot{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}
.message-dialog .message-send:disabled{opacity:.65;cursor:wait}
.closing .countdown{gap:clamp(5px,1.7vw,14px);margin:18px 0 24px}
.closing .countdown>div{min-width:46px}
.closing .countdown strong{font-size:clamp(27px,6vw,36px)}
.guestbook-board{width:min(580px,100%);margin:4px auto 0;padding-top:10px;border-top:1px solid #b9a17445}
.guestbook-board h2{margin:0;color:#8d6e37;font:26px/1.5 var(--display)}
.guestbook-intro{margin:1px 0 9px;color:#8a7959;font:15px/1.6 var(--display)}
.guestbook-list{max-height:clamp(90px,22svh,190px);overflow:auto;overscroll-behavior:contain;padding:0 3px 3px;scrollbar-color:#b9a17480 transparent;scrollbar-width:thin}
.guestbook-note{margin:0 0 8px;padding:9px 13px;border:1px solid #b9a17445;border-radius:5px;background:#fffdf7c9;text-align:right;animation:guestbook-appear .35s ease both}
.guestbook-author{display:block;color:#806136;font:17px/1.5 var(--display)}
.guestbook-words{margin:3px 0 0;color:#66563d;font:16px/1.65 var(--display);white-space:pre-wrap;overflow-wrap:anywhere}
.guestbook-date{display:block;margin-top:2px;color:#a1937c;font:12px/1.5 var(--display)}
.guestbook-state,.guestbook-feedback{margin:6px 0;color:#8a7959;font:15px/1.6 var(--display)}
.guestbook-feedback{min-height:1.4em}
@keyframes guestbook-appear{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:650px){.closing .guest-message-button{margin-top:18px;font-size:19px}.message-dialog form{padding:32px 22px 23px}.message-dialog h2{font-size:27px;margin-bottom:15px}}
@media(max-width:650px){.guestbook-board h2{font-size:23px}.guestbook-intro{font-size:14px}.guestbook-note{padding:8px 10px}}
@media(prefers-reduced-motion:reduce){.closing .guest-message-button{transition:none}.guestbook-note{animation:none}}
/* Keep the envelope clear of both caption lines, including its gentle float. */
.cover .envelope{margin-top:30px;margin-bottom:28px}
@media(max-width:650px){.cover .envelope{margin-top:26px;margin-bottom:26px}}
.envelope .opened-envelope-layer>.envelope-open{position:relative;display:block;opacity:1;transform:none;transition:none;width:100%;height:auto}
.inner-card-inscription{position:absolute;z-index:2;top:26%;left:25%;width:50%;height:21%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;opacity:0;pointer-events:none;transition:opacity .55s ease .3s}
.inner-card-inscription img{height:42%;width:auto;object-fit:contain;mix-blend-mode:multiply}
.inner-card-inscription em{display:block;font:26px/1.35 var(--display);color:#785629;white-space:nowrap}
.flap-opening .inner-card-inscription{opacity:1}.flap-opening .inner-card-inscription em{animation:write-names .85s ease .35s both}
@keyframes write-names{from{opacity:0;clip-path:inset(0 0 0 100%)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@media(max-width:650px){.inner-card-inscription{gap:2px}.inner-card-inscription em{font-size:18px}}

/* Each sheet has its own viewport and snap point; long or enlarged text remains scrollable. */
html.invitation-open{scroll-snap-type:y mandatory;scroll-padding-block:0}
.invitation{max-width:none;margin:0;padding:0}
.letter{border:0;box-shadow:none;background:none}
.letter:after{display:none}
.invitation-page{position:relative;width:min(810px,100%);min-height:100svh;max-width:none;margin:0 auto;padding:48px 62px 92px;border:1px solid #b9a17455;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;scroll-snap-align:start;scroll-snap-stop:always;isolation:isolate}
.invitation-page:before{content:'';position:absolute;inset:11px;border:1px solid #b9a17425;pointer-events:none;z-index:-1}
.invitation-page>*{flex-shrink:0;max-width:100%}
.blessing-page,.formal-letter{background:var(--cream) url('assets/invitation-paper.webp') center/100% 100% no-repeat}
.blessing-page .letter-monogram{width:100px;height:100px;margin:0 auto 28px}
.blessing-page .verse-frame{margin:10px 0 20px}
.formal-letter{padding-top:26px;padding-bottom:74px}
.formal-letter .opening-words{font-size:22px;line-height:1.6;margin:0 0 12px}
.formal-letter .couple{width:100%;margin:0}
.formal-letter .honorific{line-height:1.6}
.formal-letter .person h2{font-size:52px;line-height:1.35}
.formal-letter .person>p{line-height:1.6}
.formal-letter .invite-words{font-size:24px;line-height:1.4;margin-top:12px}
.formal-letter .ornament{font-size:24px;margin:14px auto}
.formal-letter .wedding-date strong{font-size:68px;line-height:1.05}
.formal-letter .wedding-time{font-size:22px;line-height:1.5;margin:8px auto}
.formal-letter .hall-name{font-size:34px;line-height:1.35}
.formal-letter .hall-address{font-size:21px;line-height:1.5}
.formal-letter .delicate-link{line-height:1.5;min-height:44px;padding-block:4px;margin-top:12px}
.formal-letter .letter-blessing{font-size:21px;line-height:1.6;margin-top:15px}
.keepsake,.story-sequence{display:contents}
.story-chapter.invitation-page{padding-top:36px;padding-bottom:88px}
.story-intro .ornament{display:none}
.story-intro{margin-bottom:20px}
.story-intro h2{font-size:29px;line-height:1.6}
.story-intro .keepsake-intro{font-size:20px;line-height:1.65;margin:9px 0 0}
.invitation-page .chapter-marker{margin:0 auto 16px}
.invitation-page .chapter-kicker{margin-bottom:4px}
.invitation-page figcaption>p:last-child{margin:5px 0 20px;font-size:22px;line-height:1.75}
.story-picture{width:fit-content;max-width:100%;margin:0 auto;padding:7px}
.story-picture img{width:auto;max-width:100%;height:auto;max-height:max(180px,calc(100svh - 400px));object-fit:contain}
.memory-page .story-picture img{max-height:max(180px,calc(100svh - 550px))}
.wedding-chapter .story-picture{margin:0 auto;max-width:100%}
.venue.invitation-page{padding-top:36px}
.venue .ornament{margin:0 auto 22px}
.venue-photo{margin-top:20px;width:fit-content;max-width:100%}
.venue-photo img{width:auto;height:auto;max-width:100%;max-height:max(180px,calc(100svh - 520px))}
.venue-address{margin-top:18px}
.closing .ornament{margin:0 auto 35px}
.closing .return-envelope{margin-top:32px}
.page-turn{position:absolute;bottom:max(17px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:52px;min-height:52px;color:#967440;line-height:1;transition:color .25s}
.page-arrow{font:24px/1 Georgia,serif}
.page-turn:hover{color:#604619}
.opened .music-control>button{width:44px;height:44px;padding:0;justify-content:center;border-radius:50%}
.opened #music-status{display:none}
.invitation.appearing{animation:invitation-arrive .9s ease both}
@keyframes invitation-arrive{from{opacity:0}to{opacity:1}}
@media(max-width:650px){
 .invitation-page{padding:38px 27px 88px}
 .invitation-page:before{inset:8px}
 .blessing-page .letter-monogram{width:88px;height:88px;margin-bottom:24px}
 .blessing-page .verse-frame{padding-inline:17px}
 .formal-letter .couple{width:calc(100% + 10px);max-width:calc(100% + 10px);gap:3px;grid-template-columns:1fr 20px 1fr}
 .formal-letter .person h2{font-size:45px}
 .formal-letter .person>p{font-size:19px}
 .formal-letter .opening-words{font-size:21px;line-height:1.7;margin-bottom:14px}
 .formal-letter .invite-words{font-size:22px;margin-top:16px}
 .formal-letter .ornament{margin:18px auto}
 .formal-letter .wedding-time{font-size:22px;margin:10px auto}
 .formal-letter .hall-name{font-size:34px;line-height:1.5}
 .formal-letter .hall-address{font-size:21px}
 .formal-letter .letter-blessing{font-size:21px}
 .story-chapter.invitation-page{padding:32px 23px 86px}
 .story-intro h2{font-size:25px;line-height:1.6}
 .story-intro .keepsake-intro{font-size:18px}
 .story-intro{margin-bottom:18px}
 .invitation-page .chapter-marker{margin-bottom:12px}
 .invitation-page h3{font-size:29px}
 .invitation-page figcaption>p:last-child{font-size:20px;line-height:1.7;margin-bottom:18px}
 .story-picture,.venue-photo{padding:5px}
 .story-picture img{max-height:max(230px,calc(100svh - 330px))}
 .memory-page .story-picture img{max-height:max(200px,calc(100svh - 450px))}
 .venue .ornament{margin-bottom:19px}
 .venue .small-intro{font-size:19px}
 .venue-photo img{max-height:max(200px,calc(100svh - 390px))}
}
@media(prefers-reduced-motion:reduce){html.invitation-open{scroll-snap-type:y proximity}.invitation.appearing{animation:none}}
@media print{html.invitation-open{scroll-snap-type:none}.invitation-page{min-height:auto;break-after:page;break-inside:avoid;padding:35px}.page-turn{display:none}.story-picture img,.memory-page .story-picture img,.venue-photo img{max-height:75vh}}