@font-face{font-family:WeddingSong;src:url('assets/wedding-song.woff2') format('woff2');font-weight:400 600;font-display:swap}
@font-face{font-family:WeddingRoman;src:url('assets/wedding-roman.otf') format('opentype');font-weight:400 600;font-display:swap}
:root{--red:#c51f32;--deep-red:#8d1223;--cream:#ffe5b4;--gold:#f4ce88;--song:WeddingSong,'Songti SC','Noto Serif CJK SC',serif;--sans:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;--viewport-height:100vh;color-scheme:dark}
@supports(height:100dvh){:root{--viewport-height:100dvh}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding:0}
body{margin:0;background:var(--deep-red);color:var(--cream);font:18px/1.7 var(--song);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-weight:500}a{color:inherit;text-underline-offset:5px}img{display:block;max-width:100%}button{font:inherit;cursor:pointer}a,button,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--cream);outline-offset:6px}[hidden]{display:none!important}
.invitation{--page-height:var(--viewport-height);width:100%;max-width:430px;margin:0 auto}
.page{position:relative;isolation:isolate;min-height:var(--page-height);background:linear-gradient(155deg,#e43a43b3,#ac0e21d9),url('assets/crimson-paper.webp') center/100% 100% no-repeat;background-color:var(--red);overflow:clip}
.page::after{content:"";position:absolute;z-index:3;inset:10px;border:1px solid #f4ce883d;border-radius:5px;pointer-events:none}
.page+.page{border-top:1px solid #f4ce8855}
.decoration{pointer-events:none;user-select:none}
.button{display:flex;align-items:center;justify-content:center;gap:16px;width:100%;min-height:clamp(44px,calc(var(--page-height)*.065),54px);padding:7px 20px;border:1px solid #ffe4a9;border-radius:999px;background:linear-gradient(110deg,#f2c77e,#ffe0a2,#edc078);color:var(--deep-red);font:600 clamp(20px,calc(var(--page-height)*.03),24px)/1.35 var(--song);text-decoration:none;letter-spacing:.04em;cursor:pointer;transition:background .15s,transform .15s}
.button img,.map-links img{flex:none;width:25px;height:25px;opacity:.8}
.button:hover{background:#ffe0a2}.button:active{transform:translateY(1px)}
.skip-link{position:fixed;z-index:10;left:12px;top:12px;transform:translateY(-200%);padding:8px 16px;background:var(--cream);color:var(--red);font:16px/1.5 var(--sans)}.skip-link:focus{transform:none}
.cover{display:flex;flex-direction:column}
.cover-art{position:relative;height:calc(var(--page-height)*.56);flex:none;overflow:hidden}
.cover-seal{position:absolute;z-index:0;width:clamp(112px,calc(var(--page-height)*.205),180px);height:auto;left:50%;top:calc(var(--page-height)*.018);transform:translateX(-50%)}
.couple{position:absolute;z-index:1;bottom:0;left:0;width:100%;height:74%;object-fit:cover;object-position:50% 7%;mask-image:linear-gradient(to bottom,#000 0%,#000 85%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 85%,transparent 100%)}
.cover-copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;flex:1;margin-top:calc(var(--page-height)*-.025);padding:0 24px max(calc(var(--page-height)*.025),env(safe-area-inset-bottom));text-align:center}
.cover h1{color:var(--gold);font-size:clamp(64px,min(25vw,calc(var(--page-height)*.12)),108px);font-weight:700;line-height:1.08;letter-spacing:.02em;white-space:nowrap}
.names-rule{width:48%;border-top:1px solid #f4ce8899;margin:calc(var(--page-height)*.012) 0 calc(var(--page-height)*.01)}
.couple-names{font-size:clamp(21px,calc(var(--page-height)*.035),29px);line-height:1.35;letter-spacing:.1em;white-space:nowrap}.couple-names span{margin:0 .15em}
.cover-date{font-size:clamp(14px,calc(var(--page-height)*.024),19px);line-height:1.5;margin-top:calc(var(--page-height)*.006);white-space:nowrap}.cover-date span{margin:0 .12em}
.cover-place{font-size:clamp(17px,calc(var(--page-height)*.028),23px);line-height:1.45;letter-spacing:.12em;margin-bottom:calc(var(--page-height)*.012)}
.cover .button{margin-top:auto}
.letter{display:grid;grid-template-rows:auto minmax(140px,1fr) auto;padding:calc(var(--page-height)*.024) 0 max(calc(var(--page-height)*.025),env(safe-area-inset-bottom))}
.letter-copy{padding:0 26px}.small-seal{width:clamp(28px,calc(var(--page-height)*.052),44px);height:auto;margin-bottom:calc(var(--page-height)*.012)}
.letter h2{font-size:clamp(27px,min(10vw,calc(var(--page-height)*.052)),42px);font-weight:700;line-height:1.35;white-space:nowrap;letter-spacing:-.025em}
.letter-body{font-size:clamp(16px,calc(var(--page-height)*.025),20px);line-height:1.65;margin-top:calc(var(--page-height)*.02)}.letter-body p+p{margin-top:calc(var(--page-height)*.016)}
.letter-photo{position:relative;width:100%;margin-top:calc(var(--page-height)*.026);overflow:hidden}.letter-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:54% 50%}
.letter-action{padding:calc(var(--page-height)*.024) 24px 0;margin-top:auto}
.venue{display:flex;flex-direction:column;align-items:center;padding:calc(var(--page-height)*.035) 26px max(calc(var(--page-height)*.025),env(safe-area-inset-bottom));text-align:center;gap:0}
.date-stamp{position:relative;width:min(90%,calc(var(--page-height)*.34));aspect-ratio:1/1;flex:none;display:grid;place-items:center;margin-bottom:calc(var(--page-height)*.03);border:1px solid var(--gold);border-radius:50%;background:#9b10252e;color:var(--gold)}
.date-stamp::before{content:"";position:absolute;inset:6px;border:1px solid #f4ce8877;border-radius:50%;pointer-events:none}
.date-stamp time{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;width:100%;height:100%;font-family:WeddingRoman,var(--song);font-variant-numeric:lining-nums;font-weight:700}
.year{font-size:clamp(26px,calc(var(--page-height)*.05),42px);line-height:1.2}.date-rule{width:40px;border-top:1px solid var(--gold);margin:calc(var(--page-height)*.008) 0}.month-day{font-size:clamp(68px,min(28vw,calc(var(--page-height)*.125)),105px);line-height:1.1;letter-spacing:-.05em}
.venue-copy{width:100%;margin-bottom:calc(var(--page-height)*.025)}.venue h2{font-size:clamp(29px,min(10vw,calc(var(--page-height)*.052)),43px);line-height:1.4;white-space:nowrap}.venue-rule{display:block;width:50px;border-top:1px solid var(--cream);margin:calc(var(--page-height)*.014) auto calc(var(--page-height)*.018)}.banquet-time{font-size:clamp(32px,calc(var(--page-height)*.058),49px);line-height:1.2;white-space:nowrap}
.venue-actions{width:100%;margin-top:auto}.map-picker summary{list-style:none}.map-picker summary::-webkit-details-marker{display:none}.map-picker[open] summary>img{transform:rotate(90deg)}
.map-content{padding:24px 4px 0;text-align:left;font-family:var(--sans)}.map-content h3{font:500 22px/1.6 var(--song)}.address{font-size:16px;line-height:1.8;margin:10px 0 18px;user-select:text}.map-links{border-top:1px solid #f4efeb55}.map-links a{display:flex;align-items:center;justify-content:space-between;min-height:52px;border-bottom:1px solid #f4efeb55;text-decoration:none;font-size:17px}.map-links img{filter:brightness(0) invert(1);width:20px;height:20px;opacity:.9}
.copy-address{border:1px solid #f4efeb77;background:transparent;color:var(--cream);border-radius:8px;width:100%;min-height:46px;margin-top:18px;font:16px/1.5 var(--sans)}.copy-address:hover{background:#f4efeb14}.map-status{font:14px/1.6 var(--sans);margin-top:10px}.map-status:empty{display:none}
.map-links .wechat-navigation{min-height:76px;padding:12px;background:#f4efeb12}.wechat-navigation span{display:flex;flex-direction:column;gap:3px}.wechat-navigation small{font-size:13px;opacity:.8}
.back-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:calc(var(--page-height)*.014);font:16px/1.5 var(--sans)}
@media(min-width:600px){body{padding:24px 0}.invitation{--page-height:max(640px,calc(var(--viewport-height) - 48px));box-shadow:0 10px 60px #3c0b1733}}
@media(max-width:360px){.cover-copy,.letter-copy{padding-left:20px;padding-right:20px}.letter-action{padding-left:20px;padding-right:20px}.venue{padding-left:22px;padding-right:22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}