/* 良辰有约 · 绢本工笔。画面为衬，文辞为主。 */
:root{--paper:#f5efdf;--ink:#3e4b41;--gold:#987e54;--red:#984538;--deep:#57202a;--camera-y:0px;--bird-y:0px}
body{background:#f1e8d3;color:var(--ink)}
.world-stage{position:fixed;inset:0;z-index:-1;overflow:hidden;background:#f1e8d3}
.world-camera{position:absolute;inset:-2% 0;transform:translateY(var(--camera-y));will-change:transform}
.world-landscape{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.world-mist{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,#f7f0df44,transparent 65%)}
.masthead{padding:27px 5vw}.brand{color:#5d6150;font-size:23px}.brand span{border-color:#96826444;font-size:12px}#motion-toggle{border-color:#96826444;color:#686654;background:#f6f0e199;font-size:11px;padding:8px 12px}
.invitation{background:transparent;isolation:auto;overflow:hidden;min-height:1030px;padding:128px 24px 55px}.invitation:before{display:none}
.letter{width:min(100%,560px);border:0;outline:0;padding:33px 25px;background:radial-gradient(ellipse,#f7f0e177 25%,transparent 74%);box-shadow:none;color:#465143;z-index:2}.corner{display:none}
.small-heading{font-size:11px;letter-spacing:3px;color:#8b7758}.title-row{margin:23px 0 12px;gap:24px}.title-row h1{font-size:52px;color:#a24c3f;text-shadow:none}.title-line{width:30px;background:#9c845044}.title-line:after{border-color:#a99571;width:4px;height:4px}
.hero-title{font-size:56px;letter-spacing:9px;color:#934638;margin:10px 0 32px;font-weight:400}.couple{gap:26px;margin-bottom:29px}.couple>span:not(.join){font-size:27px;color:#475342}.name-blank{border-color:#9e90704d}.join{font-size:14px;color:#8c816b}
.invitation-copy{font-size:16px;line-height:2.35;letter-spacing:2px;color:#4b5141}.event-details{margin:32px auto 26px;color:#645e4e;font-size:14px}.detail-label{border-color:#b1a08055;color:#8b7655;font-size:11px}.detail-blank{border-color:#a7977644}.signature{color:#8b785a;font-size:11px;gap:28px}.seal{color:#a15143;border:1px solid #a15143aa;outline:1px solid #a1514333;background:transparent;transform:rotate(-3deg);font-size:19px}

.magpie-pair{position:absolute;top:163px;left:calc(50% - 560px);width:330px;z-index:1;pointer-events:none;transform:translateY(var(--bird-y));animation:branch-breath 10s ease-in-out infinite;transform-origin:15% 65%}.magpie-pair img{display:block;width:100%;height:auto}
.scroll-cue{color:#8c7b5f;font-size:11px;letter-spacing:2px;z-index:2;margin-top:31px}.scroll-stroke{height:26px;background:linear-gradient(#9c875e88,transparent)}
.event-details>div{display:flex;flex-direction:column;gap:7px;align-items:center;text-align:center;margin:24px 0}.event-details .detail-label{display:flex;align-items:center;gap:12px;border:0;padding:0 0 0 3px;font-size:11px;letter-spacing:3px;line-height:1.6}.event-details .detail-label:before,.event-details .detail-label:after{content:'';width:22px;height:1px;background:#ad98735c}#event-date,#event-venue{white-space:pre-line;line-height:1.85;font-size:15px;letter-spacing:1px;color:#625b49}#event-date::first-line,#event-venue::first-line{font-size:18px;color:#4f5746}#event-address{white-space:pre-line;font-size:13px;line-height:1.9;letter-spacing:.4px;margin:3px 0 0;color:#827b68;opacity:1}
.album-section{background:linear-gradient(#f5efdf00,#f5efdf 110px);color:#4b5141;padding-top:110px}.album-section:before{display:none}.section-heading h2{font-size:39px;color:#4b5947;letter-spacing:2px}.section-heading p{color:#84816c;font-size:14px}.eyebrow{font-size:11px;letter-spacing:4px;color:#98815a}.heading-rule{background:#baa98288;height:34px}
.photo-frame{background:#f8f3e7;padding:10px;border:1px solid #b5a48666;box-shadow:5px 9px 25px #51493409;transform:none!important}.photo-placeholder{background:linear-gradient(135deg,#e9e4d5,#eeeadf);color:#81846e}.photo-placeholder:before,.photo-placeholder:after{border-color:#a79c8129;outline:none}.placeholder-title{font-size:47px;letter-spacing:14px}.placeholder-sub{font-size:11px;letter-spacing:3px;color:#9c9075}.album-number{color:#9a8a70;font-size:11px}.album-caption h3{color:#984f42;font-size:39px}.album-caption p{color:#66705e;font-size:16px}
.rsvp-section{background:linear-gradient(120deg,#681c27,#42121b);color:#e4d7b8;padding-top:100px;padding-bottom:90px;overflow:hidden}.rsvp-section:before{background-image:url('../assets/art/gongbi-landscape.webp');background-size:cover;background-position:center 65%;opacity:.035}.rsvp-intro h2{color:#eddfbd;font-size:38px;line-height:1.6}.rsvp-intro p{font-size:15px;letter-spacing:1.5px}.rsvp-intro .eyebrow{color:#c7ac82}.big-seal{font-size:39px;border:1px solid #c3a17c66;color:#d0b791;padding:9px 12px;transform:rotate(-4deg);opacity:.55}.rsvp-card{background:#f4efdf;color:#5c5547;border-color:#b7a078;outline-color:#b7a07844;box-shadow:none}.availability{color:#8a7661}.submit-button{background:#782433;border-color:#782433;color:#f5e9cd}.submit-button:hover{background:#521621}.consent{color:#716958}input:not([type=checkbox]),select{color:#5b5b4a}legend{color:#6d735d}#form-message{color:#984538}
footer{background:#351018;color:#ddcfad}.footer-happiness{font-size:32px;opacity:.55}footer p{font-size:15px;letter-spacing:2px}footer>span:last-child{font-size:10px;opacity:.5}
.bottom-nav{background:#f8f3e5f0;color:#626c58;border-color:#ae946755;box-shadow:0 4px 18px #3a3d2e0b;padding:10px 25px;gap:23px}.bottom-nav a{font-size:13px;opacity:.8}.bottom-nav a.active{color:#9f493d}.bottom-nav>span{font-size:6px;opacity:.4}
dialog{background:#f5efdf;color:#4b5141;border-color:#ad926b}#close-photo{color:#6b6855;border-color:#ad926b66}
.enter{animation-duration:1.7s}.motion-ready .reveal{transform:translateY(14px);transition:opacity 1.2s,transform 1.2s}.motion-ready .reveal.visible{transform:none}
.motion-paused .world-camera,.motion-paused .magpie-pair{transform:none!important}.background-paused *{animation-play-state:paused!important}
@keyframes branch-breath{0%,100%{rotate:-.85deg;translate:0 0}42%{rotate:.95deg;translate:0 -2px}74%{rotate:-.15deg;translate:0 -.5px}}
@media(min-width:1200px){.world-landscape{object-fit:contain}.world-camera:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#f1e8d3 0%,transparent 28%,transparent 72%,#f1e8d3 100%)}}
@media(max-width:1000px){.magpie-pair{left:-22px;top:150px;width:260px;opacity:.95}}
@media(max-width:600px){.masthead{padding:22px 23px}.brand{font-size:22px}.world-camera{inset:-2% -1%}.world-landscape{object-position:center}.world-mist{background:linear-gradient(90deg,#f7f0df33,transparent 75%)}.invitation{min-height:965px;padding:152px 20px 50px}.letter{padding:37px 9px 30px;background:radial-gradient(ellipse,#f7f0e199 25%,transparent 74%)}.magpie-pair{top:64px;left:9px;width:180px;opacity:1}.small-heading{font-size:10px;letter-spacing:2px}.title-row{margin-top:23px;margin-bottom:10px}.title-row h1{font-size:44px}.hero-title{font-size:46px;letter-spacing:7px;margin-bottom:29px}.couple{margin-bottom:29px}.couple>span:not(.join){font-size:25px}.invitation-copy{font-size:15px;letter-spacing:.7px;line-height:2.3}.event-details{margin:29px auto 25px;font-size:13px}.signature{gap:22px;font-size:10px}.seal{font-size:18px}.scroll-cue{margin-top:24px}.album-section{padding:90px 29px 68px}.section-heading h2{font-size:30px;letter-spacing:1px}.section-heading p{font-size:13px}.album-item{margin-bottom:50px;gap:23px}.album-caption h3{font-size:32px}.album-caption p{font-size:15px}.placeholder-title{font-size:45px}.rsvp-section{padding:62px 30px}.rsvp-intro h2{font-size:30px;letter-spacing:1px}.rsvp-intro p{font-size:14px}.rsvp-card{padding:27px 24px}.bottom-nav{gap:20px;padding:10px 24px}.bottom-nav a{font-size:12px}footer p{font-size:13px}}
.photo-frame.photo-full{aspect-ratio:1;min-width:0}.photo-full .photo-button{position:relative;width:100%;height:100%;aspect-ratio:1}.photo-full .photo-button img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}.photo-full .photo-button:hover img{transform:none}
/* Brush inscriptions: alternate image/text on desktop; keep short poems beside photos on phones. */
.album-item{grid-template-columns:minmax(0,1.3fr) minmax(290px,1fr);gap:58px}
.album-item:nth-child(even){grid-template-columns:minmax(290px,1fr) minmax(0,1.3fr)}
.album-caption{min-width:0;padding:0;border:0;text-align:left;display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:flex-start;gap:14px}
.poem-heading{display:flex;flex-direction:column;align-items:center;gap:16px;flex-shrink:0}
.album-number{display:block;font-family:var(--serif);writing-mode:vertical-rl;text-orientation:upright;font-size:10px;line-height:1.4;letter-spacing:2px;margin:0;white-space:nowrap}
.album-index{display:inline;text-combine-upright:all;letter-spacing:0;margin-inline-end:9px}
.album-number:after{display:none}
.poem-inscription{display:flex;flex-direction:row-reverse;justify-content:flex-start;gap:22px;width:max-content;max-width:100%}
.poem-inscription h3,.poem-inscription p{font-family:var(--brush);writing-mode:vertical-rl;text-orientation:upright;margin:0;font-weight:400;white-space:pre}
.poem-inscription h3{font-size:36px;letter-spacing:7px;line-height:1.2;color:#984f42}
.poem-inscription p{font-size:24px;letter-spacing:3px;line-height:1.55;max-width:none;color:#56634d}
.poem-source{display:block;flex-shrink:0;align-self:flex-end;writing-mode:vertical-rl;text-orientation:upright;max-height:270px;max-width:none;margin:0;font-family:var(--serif);font-style:normal;font-size:10px;line-height:1.6;letter-spacing:1px;color:#8c7b62}
html.photo-viewer-open{overflow:hidden}
#photo-dialog{width:max-content;max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);padding:54px 24px 24px;overflow:hidden;overscroll-behavior:contain}
#photo-dialog .photo-viewer{display:flex;flex-flow:row nowrap;align-items:center;gap:clamp(14px,3vw,32px);min-width:0;min-height:0}
#photo-dialog,#photo-dialog *{-webkit-text-size-adjust:100%;text-size-adjust:100%}
#photo-dialog .photo-verse{position:relative;flex:none;min-width:0;min-height:0}
#photo-dialog #large-photo{flex:none;display:block;max-width:none;max-height:none;object-fit:contain;margin:0}
#photo-dialog #large-caption{position:absolute;top:0;left:0;width:max-content;height:max-content;transform-origin:top left;font-family:var(--brush);font-size:clamp(16px,2.2vw,27px);writing-mode:vertical-rl;text-orientation:upright;white-space:pre;line-height:1.65;letter-spacing:2px;margin:0;text-align:start;max-width:none;max-height:none}
#photo-dialog #close-photo{position:absolute;top:10px;right:10px;margin:0;width:36px;height:36px;line-height:1;z-index:1}
@media(max-width:600px){#photo-dialog{padding:52px 12px 16px}#photo-dialog #close-photo{top:6px;right:6px;width:40px;height:40px}}
@media(max-width:800px){.album-item{gap:30px}}
@media(max-width:600px){
  .album-item,.album-item:nth-child(even){grid-template-columns:1fr;gap:26px;margin-bottom:62px}
  .album-caption{width:max-content;max-width:100%;margin:0 auto;gap:10px}
  .album-number{font-size:9px;margin:0;letter-spacing:2px}
  .poem-inscription{gap:16px}
  .poem-inscription h3{font-size:30px;letter-spacing:6px}
  .poem-inscription p{font-size:22px;line-height:1.45;letter-spacing:3px}
  .poem-source{font-size:9px;margin:0;letter-spacing:.5px;max-height:240px;line-height:1.4}
  .album-item.album-short-poem{--caption-width:126px;grid-template-columns:minmax(0,1fr) var(--caption-width);gap:14px}
  .album-item.album-one-column{--caption-width:96px}
  .album-item.album-three-columns{--caption-width:156px}
  .album-item.album-short-poem:nth-child(even){grid-template-columns:var(--caption-width) minmax(0,1fr)}
  .album-short-poem:nth-child(even) .photo-frame{order:2}
  .album-short-poem .album-caption{width:var(--caption-width);margin:0}
  .album-short-poem .album-number{font-size:8px;letter-spacing:1px;white-space:nowrap;margin:0}
  .album-short-poem .album-number:after{display:none}
  .album-short-poem .poem-inscription{gap:9px}
  .album-short-poem .poem-inscription h3{font-size:27px;letter-spacing:5px}
  .album-short-poem .poem-inscription p{font-size:21px;line-height:1.45;letter-spacing:2px}
  .album-short-poem .poem-source{font-size:9px;line-height:1.4;letter-spacing:.5px}
}
#motion-toggle{margin-right:77px}#music-toggle{position:fixed;z-index:12;top:27px;right:5vw;min-width:64px;padding:8px 11px;border:1px solid #96826455;border-radius:30px;background:#f6f0e1ed;color:#6b6955;font-family:var(--serif);font-size:12px;line-height:1.3;letter-spacing:1px;box-shadow:0 2px 8px #63523708}#music-toggle.is-playing{color:#984538;border-color:#98453866}#music-toggle>span:first-child{font-size:15px;margin-right:3px}#music-message{position:fixed;z-index:13;top:70px;right:5vw;max-width:230px;margin:0;padding:10px 14px;border:1px solid #b3a08566;background:#f6f0e1;color:#784e40;font-size:12px;line-height:1.8}#background-music{display:none}
#music-toggle.needs-gesture{color:#984538;border-color:#98453888;background:#fbf1df;box-shadow:0 0 0 3px #9845380a}
@media(max-width:600px){#music-toggle{top:22px;right:23px;padding:8px 9px;min-width:60px;font-size:11px}#motion-toggle{margin-right:70px;padding:8px 9px;font-size:10px}#music-message{top:64px;right:23px}}
@media(prefers-reduced-motion:reduce){.world-camera,.magpie-pair{transform:none!important;animation:none!important}}

/* 两侧竖题共用一个居中容器；窄屏合为正文下方的横题。 */
.invitation-couplet{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(calc(100% - 96px),680px);display:flex;justify-content:space-between;align-items:center;color:#80816a;z-index:2;pointer-events:none}
.invitation-couplet>span{writing-mode:vertical-rl;font-family:var(--brush);font-size:22px;line-height:1.5;letter-spacing:10px;white-space:nowrap}
@media(max-width:1200px){.invitation-couplet{position:relative;top:auto;left:auto;transform:none;width:auto;max-width:100%;margin:12px auto 0;gap:36px}.invitation-couplet>span{writing-mode:horizontal-tb;font-size:16px;letter-spacing:3px;line-height:1.8}.invitation-couplet:after{content:'';position:absolute;left:50%;top:50%;width:1px;height:12px;transform:translate(-50%,-50%);background:#a291704d}}

/* 独立画层随风轻摆，支点留在枝根，节奏不齐步。 */
.lotus-spray,.plum-spray{position:absolute;z-index:1;pointer-events:none}

.lotus-spray{width:300px;right:max(-35px,calc(50% - 650px));bottom:-70px}
.plum-spray{width:390px;right:max(-45px,calc(50% - 630px));top:-22px}
.lotus-spray img,.plum-spray img{display:block;width:100%;height:auto;will-change:transform}
.lotus-spray img{transform-origin:87% 96%;animation:lotus-breeze 7.8s ease-in-out -2.6s infinite}
.plum-spray img{transform-origin:99% 6%;animation:plum-breeze 10.6s ease-in-out -6.1s infinite}
.magpie-pair{animation-duration:8.6s;animation-delay:-3.4s}
.magpie-pair img{transform-origin:48% 72%;animation:magpie-rest 5.7s ease-in-out -1.9s infinite}
@keyframes lotus-breeze{0%,100%{transform:rotate(-1.7deg) translateX(-2px)}43%{transform:rotate(2deg) translateX(2px)}73%{transform:rotate(.4deg)}}
@keyframes plum-breeze{0%,100%{transform:rotate(1.3deg)}38%{transform:rotate(-1.7deg)}72%{transform:rotate(-.2deg)}}
@keyframes magpie-rest{0%,100%{transform:translateY(0) rotate(-.2deg) scaleY(1)}46%{transform:translateY(-1.7px) rotate(.35deg) scaleY(1.009)}72%{transform:translateY(-.4px) rotate(0deg) scaleY(1.002)}}
@media(max-width:1000px){.lotus-spray{width:300px;right:-45px}.plum-spray{width:310px;right:-45px}}
@media(min-width:1200px){.world-landscape{width:auto;max-width:100%;margin:auto;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}}
@media(max-width:600px){.lotus-spray{width:190px;right:-30px;bottom:-40px}.plum-spray{width:255px;right:-45px;top:-8px}}
@media(prefers-reduced-motion:reduce){.lotus-spray img,.plum-spray img,.magpie-pair img{animation:none!important;transform:none!important}.magpie-pair{translate:none;rotate:none}}
.rsvp-section.farewell-section{display:flex;justify-content:center;text-align:center;min-height:480px;padding:90px 24px}.farewell-section .rsvp-intro{margin:0}.farewell-section .big-seal{display:inline-block;margin-top:26px;font-size:34px;padding:9px 11px}@media(max-width:600px){.rsvp-section.farewell-section{min-height:390px;padding:65px 24px}.farewell-section .big-seal{font-size:28px}}
.couple>span.couple-person{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:100px;max-width:42%}
/* A quiet destination inscription within the closing invitation. */
@font-face{font-family:FamilySignature;src:url('../assets/fonts/huimen-signature.woff2') format('woff2');font-display:swap;font-weight:400}
.parent-signatures{margin:32px auto 0;padding-top:24px;border-top:1px solid #c3a17c33;width:fit-content;max-width:100%;min-width:230px}
.parent-signatures-label,.parent-signatures-note{display:block;font-family:var(--serif);font-size:11px;line-height:1.8;letter-spacing:3px;color:#c7b397}
.parent-names{display:flex;justify-content:center;gap:28px;margin:14px 0 9px;flex-wrap:wrap}
.parent-names>span{font-family:FamilySignature,var(--brush);font-size:38px;line-height:1.4;font-weight:400;white-space:nowrap;color:#eddfbd}
@media(max-width:600px){.parent-names{gap:22px}.parent-names>span{font-size:34px}}
.farewell-section .rsvp-intro{width:100%;max-width:620px}
.venue-guide{margin:30px auto 0;max-width:360px;color:#e4d7b8}
.venue-guide-rule{display:block;width:72px;height:1px;margin:0 auto 24px;background:#c3a17c66;position:relative}
.venue-guide-rule:after{content:'';position:absolute;left:calc(50% - 2px);top:-2px;width:5px;height:5px;background:#c3a17c;transform:rotate(45deg)}
.rsvp-intro .venue-guide-name{white-space:pre-line;font-size:14px;line-height:1.9;letter-spacing:2px;margin:0;opacity:1}
.venue-guide-name::first-line{font-size:19px;color:#eddfbd}
.rsvp-intro .venue-guide-address{white-space:pre-line;font-size:12px;line-height:1.9;letter-spacing:.5px;color:#c7b397;margin:10px 0 20px;opacity:1}
.venue-guide-link{display:inline-flex;align-items:center;justify-content:center;gap:15px;min-height:48px;padding:9px 23px;border:1px solid #c3a17c88;color:#eddfbd;background:#e4d7b805;transition:background .2s,border-color .2s}
.venue-guide-link>span{font-family:var(--brush);font-size:26px;letter-spacing:4px}
.venue-guide-link svg{width:18px;height:20px;flex:none;opacity:.8}
.venue-guide-link:hover,.venue-guide-link:focus-visible{background:#e4d7b814;border-color:#d0b791}
.venue-guide-hint{display:block;margin-top:11px;font-size:10px;line-height:1.8;letter-spacing:1px;color:#c7b397}
@media(max-width:600px){.venue-guide{margin-top:26px}.venue-guide-rule{margin-bottom:20px}.venue-guide-link>span{font-size:24px}.venue-guide-name::first-line{font-size:18px}}
.couple-person small{font-family:var(--serif);font-size:11px;font-weight:400;line-height:1.5;letter-spacing:4px;padding-left:4px;color:#8c7b62}
.couple-person>span{font-family:var(--brush);font-size:29px;line-height:1.4;white-space:nowrap}
.couple .join{align-self:flex-end;line-height:1.4;margin-bottom:10px}
.bottom-nav .nav-diamond{width:3px;height:3px;background:currentColor;transform:rotate(45deg)}
@media(max-width:600px){.couple{gap:17px}.couple>span.couple-person{min-width:88px}.couple-person>span{font-size:26px}.couple-person small{font-size:10px}.couple .join{margin-bottom:8px}}
#event-time{font-size:17px;line-height:1.6;letter-spacing:1px;color:#934638;white-space:nowrap}
/* Put the practical invitation details within the first phone screen after opening. */
@media(max-width:600px){
  .invitation{min-height:0;padding:76px 20px 36px}
  .letter{display:flex;flex-direction:column;padding:10px 4px 20px}
  .small-heading{order:0;font-size:9px;letter-spacing:1.5px}
  .title-row{order:1;margin:10px 0 3px}
  .title-row h1{font-size:38px}
  .hero-title{order:2;font-size:38px;line-height:1.2;margin:5px 0 14px}
  .couple{order:3;margin-bottom:14px}
  .couple>span.couple-person{gap:3px}
  .event-details{order:4;width:100%;margin:0 auto 17px;padding:12px 0 14px;border-block:1px solid #ad98733d}
  .event-details>div{margin:0;gap:3px}
  .event-details>div+div{margin-top:10px}
  .event-details .detail-label{font-size:10px;line-height:1.5}
  #event-date,#event-venue{font-size:13px;line-height:1.65;letter-spacing:.6px}
  #event-date::first-line,#event-venue::first-line{font-size:17px}
  #event-time{font-size:16px;line-height:1.6;letter-spacing:.6px}
  #event-address{font-size:12px;line-height:1.65;margin:2px 0 0;letter-spacing:.3px}
  .invitation-copy{order:5;font-size:14px;line-height:2;letter-spacing:.5px}
  .signature{order:6;margin-top:18px}
  .magpie-pair{top:74px;left:-15px;width:135px}
  .invitation-couplet{margin-top:2px;gap:26px}
  .invitation-couplet>span{font-size:14px;letter-spacing:2px}
  .scroll-cue{margin-top:16px}
}
@media(max-width:600px) and (max-height:650px){
  .invitation{padding-top:64px}
  .small-heading{display:none}
  .title-row{margin-top:5px}
  .title-row h1{font-size:32px}
  .hero-title{font-size:34px;margin-bottom:10px}
  .couple{margin-bottom:10px}
  .magpie-pair{top:65px;left:-36px;width:110px}
}