@charset "UTF-8";
:root{font-family:"Songti SC","SimSun","Noto Serif SC",serif;color:#5d2720;background:#240409;--red:#8d1720;--deep:#590812;--paper:#f7ead8;--paper-2:#f2dfc7;--gold:#c99652;--ink:#5d2720}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#240409}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid #e0b66f;outline-offset:3px}
.invitation-page{width:100%;max-width:480px;margin:auto;overflow:hidden;background:var(--paper);box-shadow:0 0 40px #0009}.page-loader{position:fixed;inset:0;z-index:30;display:grid;place-content:center;gap:12px;text-align:center;background:var(--deep);color:#f4d9a9;transition:opacity .45s,visibility .45s}.page-loader.is-hidden{opacity:0;visibility:hidden}.loader-mark{font:52px serif}.loader-line{display:block;width:112px;height:4px;background:#8d2630;overflow:hidden}.loader-line i{display:block;width:20%;height:100%;background:#dfb36b;animation:loadline 1.2s ease-in-out infinite}.page-loader small{font:11px Arial;color:#edcf9f}@keyframes loadline{from{transform:translateX(-120%)}to{transform:translateX(700%)}}
/* 封面增加 45px 高度并同步增加底部留白，抵消卷轴上移的 21px；卷轴位于首屏下方 24px，动态视口适配手机地址栏伸缩。 */
.cover{position:relative;min-height:calc(100vh + 45px);min-height:calc(100dvh + 45px);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:42px 24px 117px;overflow:hidden;background:#79131d;color:#f7e2ba;text-align:center}.cover-image{position:absolute;inset:0;z-index:0;margin:0;overflow:hidden;background:#6e1018}.cover-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#3e050933 0%,#7b14204d 38%,#4a0712f0 100%)}.cover-image img{width:100%;height:100%;object-fit:cover;object-position:center 42%;filter:saturate(.9) contrast(1.05)}.cover>*:not(.cover-image){position:relative;z-index:1}.cover>.eyebrow{align-self:flex-start;margin:0 auto auto;color:#d62d2f;font:italic 25px/1.1 "Brush Script MT","Segoe Script",cursive;letter-spacing:0;text-shadow:0 1px 4px #3b030688}.cover .seal,.cover-seal{display:none}.cover h1{display:flex;align-items:flex-start;justify-content:center;gap:0;margin:0;padding:.06em .08em;color:#f7d995;font:400 clamp(94px,30vw,138px)/1.05 "Invitation Cover Brush","STKaiti","KaiTi",serif;letter-spacing:0;text-shadow:0 2px 3px #4c0b1740}
/* 字形错位由排版承担，整组上浮动画不覆盖单字位置；留出笔锋边界，避免完成后被裁断。 */
.cover h1 span{display:block}
.cover h1 span:last-child{margin-top:.25em;margin-left:-.04em}
@supports (background-clip:text){.cover h1 span{background:linear-gradient(135deg,#fff1bd 5%,#e7bc69 52%,#f9dfa0 80%,#d4a150);background-clip:text;-webkit-background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 2px 2px #4c0b1733)}}
@font-face{font-family:"Invitation Cover Brush";src:url("/fonts/MaShanZheng-Cover.ttf?v=1") format("truetype");font-weight:400;font-style:normal;font-display:swap}
.names{max-width:100%;margin:25px 0 0;color:#fae8c4;font:20px "STKaiti","KaiTi",serif;letter-spacing:4px;text-shadow:0 1px 5px #39040a}.names b{padding:0 8px;color:#f0c980;font:16px Georgia,serif}.names:before{content:"WEDDING INVITATION";display:block;margin-bottom:9px;color:#e8bc73;font:9px Arial;letter-spacing:4px}.cover-date{margin:18px 0 0;color:#fae8c4;font:13px Georgia,serif;letter-spacing:2px}.cover .gold-rule{width:54px;margin:18px auto 0;border-top:1px solid #e2b76e}.cover .names>span,.cover .names>b{display:inline-block}
/* 上下卷轴共用轴筒和轴头样式；负边距使卷轴跨在纸张边界，两侧红边直接接入轴筒。 */
.scroll-roll{position:relative;z-index:5;width:100%;height:42px;margin:-21px 0 -21px;pointer-events:none;opacity:1}
.scroll-roll-body{position:absolute;inset:4px 12px;border-radius:5px;border-top:1px solid #f39170;border-bottom:1px solid #510b13;background:repeating-linear-gradient(105deg,transparent 0 7px,#f9b17b08 8px,transparent 9px 16px),linear-gradient(180deg,#8b1820 0%,#c34539 16%,#e07452 29%,#b8302d 45%,#8d1820 72%,#570c15 94%,#a63b2a 100%);box-shadow:inset 0 1px 2px #f9b78d88,inset 0 -3px 5px #39050a88,0 5px 6px #410b1555}
.scroll-roll:before,.scroll-roll:after{content:"";position:absolute;z-index:1;top:0;bottom:0;width:15px;border:1px solid #966130;border-radius:3px;background:linear-gradient(90deg,#80532d 0%,#e0b675 18%,#fff0c4 30%,#b78343 40%,#e8c48b 62%,#9c6936 76%,#f0d298 88%,#8f5b2d 100%);box-shadow:inset 0 2px 1px #ffe6b4aa,inset 0 -3px 3px #54321999,0 3px 4px #410b1544}
.scroll-roll:before{left:0}.scroll-roll:after{right:0}

.paper{position:relative;margin:0 13px;padding:30px 7px;background:var(--paper);border-inline:7px solid #8e2b25;box-shadow:inset 2px 0 #d3a66c,inset -2px 0 #d3a66c}.paper:before,.paper:after{content:"";display:block;height:12px;margin:0 12px;border-top:2px solid #c99652;border-bottom:2px solid #c99652;background:linear-gradient(90deg,#8d1720 0 5%,#efd2a3 5% 8%,transparent 8% 92%,#efd2a3 92% 95%,#8d1720 95%)}.section{padding:58px 20px;text-align:center}.story{padding-top:28px;background:linear-gradient(var(--paper),var(--paper-2))}.eyebrow{margin:0 0 14px;color:#a56b3c;font:10px Arial;letter-spacing:3px}.eyebrow.light{color:#edc27b}.section h2{margin:10px 0 23px;color:var(--red);font:400 32px/1.5 "STKaiti","KaiTi","Songti SC",serif;letter-spacing:2px}.portrait-frame{height:290px;margin:0 14px 24px;padding:6px;background:#fff9ef;box-shadow:0 4px 12px #7b1a2430}.portrait-frame img{width:100%;height:100%;object-fit:cover}.copy{margin:0;color:#82434a;font-size:14px;line-height:2}.couple-portraits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin:34px auto 0;max-width:310px}.couple-portraits>div{display:flex;min-width:0;flex-direction:column;align-items:center;gap:8px}.couple-portraits img{width:126px;height:126px;border-radius:50%;object-fit:cover;box-shadow:0 5px 14px #7b1a2430}.couple-portraits strong{color:var(--red);font:700 13px Georgia,serif;letter-spacing:1px}.couple-portraits span{max-width:130px;overflow-wrap:anywhere;color:#5d302d;font:20px "STKaiti","KaiTi",serif;line-height:1.2}
/* 本地字体保证手机端连笔英文与细宋体一致；仅包含本区固定文案，授权见 fonts 目录。 */
@font-face{font-family:"Invitation Sweet Script";src:url("/fonts/OoohBaby-Story.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Invitation Story Serif";src:url("/fonts/NotoSerifSC-Story.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
/* 照片置顶并保留白边；横向相框聚焦人物，手写题字略叠在下沿，复现参考图的图文次序。 */
.story .portrait-frame{height:auto;aspect-ratio:4/3;margin:0 10px;padding:5px;box-shadow:0 3px 10px #7b1a2414}
.story .portrait-frame img{object-position:center 35%}
.story h2.story-script{position:relative;z-index:1;margin:-20px -4px 22px;text-align:left;color:#b22b36;font:400 clamp(46px,14vw,66px)/1.2 "Invitation Sweet Script",cursive;letter-spacing:0;white-space:nowrap}
.story .copy{margin:0;color:#726353;font:400 clamp(12px,3.6vw,16px)/2.5 "Invitation Story Serif","Songti SC","SimSun",serif;letter-spacing:.8px}
.story .copy span{display:block}
.story .copy-promise{margin-top:38px}
.story .couple-portraits{margin-top:42px}
@media(max-width:360px){.story .portrait-frame{margin-inline:4px}.story .copy{font-size:12px;letter-spacing:.3px}.story .copy-promise{margin-top:32px}}
/* 书法标题使用本地 Long Cang 字体子集；授权和字符范围见 public/fonts。 */
@font-face{font-family:"Invitation Long Cang";src:url("/fonts/LongCang-Regular.ttf?v=3") format("truetype");font-weight:400;font-style:normal;font-display:swap}
.feature{position:relative;margin:0;padding:44px 20px 38px;background:radial-gradient(ellipse at 25% 0%,#a33830 0%,transparent 65%),linear-gradient(160deg,#81211f,#64131c);color:#f6dbb6;overflow:hidden}
.feature:before{content:"";position:absolute;inset:12px;border:1px solid #d9aa6540;pointer-events:none}
.feature-heading{position:relative;margin:0 auto 28px;max-width:310px}
.feature .eyebrow{margin:0 0 20px;color:#dbb478;font-size:9px;letter-spacing:3px}
.feature h2{margin:0;color:#f5dcaa;font:400 clamp(44px,12vw,62px)/1.2 "Invitation Long Cang","STKaiti","KaiTi",serif;letter-spacing:2px;text-shadow:0 2px 2px #38071030}
.feature h2 span{display:block;white-space:nowrap}
.feature h2 span:first-child{text-align:left;padding-left:8px}
.feature h2 span:last-child{text-align:right;margin-top:4px;padding-right:8px}
/* 按上传照片原比例展示完整画面；入场变换在相框上，避免与图片视差叠加裁切。 */
.feature-image{position:relative;padding:6px;border:1px solid #dbb47899;background:#f5e5ca;box-shadow:0 10px 24px #31071140}
.feature-image img{width:100%;height:auto;object-fit:contain}
.feature-caption{position:relative;margin:26px 0 0;color:#f5dcaa;font:400 clamp(24px,7vw,30px)/1.7 "Invitation Long Cang","STKaiti","KaiTi",serif;letter-spacing:1px;text-shadow:0 2px 2px #38071030}
.feature-caption-rule{display:block;width:32px;height:1px;margin:0 auto 16px;background:#d1a45e}
.feature-caption span{display:block}
@media(max-width:360px){.feature{padding:38px 16px 32px}.feature h2{font-size:42px}}
.gallery{background:var(--paper-2)}
/* 手写标题使用补齐字形的本地字体；字号随屏宽收缩，保留引号且避免单字折行。 */
.gallery h2{margin:10px -8px 26px;color:#bb5260;font:400 clamp(21px,6.1vw,29px)/1.6 "Invitation Long Cang","STKaiti","KaiTi",serif;letter-spacing:.4px;white-space:nowrap}
/* 横幅合影配左小右大的竖幅，固定比例预留空间，懒加载不会挤动后续内容。 */
.gallery-grid{display:grid;gap:16px}
.gallery-main,.gallery-pair>div{overflow:hidden;background:#eadcc8}
.gallery-main{aspect-ratio:3/2}
.gallery-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:18px;align-items:start}
.gallery-pair>div{aspect-ratio:2/3}
.gallery-left{margin-top:12px}
.gallery-grid img{width:100%;height:100%;object-fit:cover}
.gallery-main img{object-position:center 40%}
.english-note{margin:31px 0 0;color:#9b7054;font:11px/2 Georgia,serif}
/* 顶部纸色渐变固定在交界处；背景从区块中部上浮，移动边缘用透明蒙版柔化，与纸张底色融合。 */
.calendar:before{content:"";position:absolute;inset:0 0 auto;height:96px;z-index:3;pointer-events:none;background:linear-gradient(180deg,var(--paper-2) 0%,#f2dfc7e6 18%,#f2dfc780 48%,#f2dfc726 76%,#f2dfc700 100%)}
/* 日期区独立使用本地数字与中文字体；子集包含农历月份、干支和空状态，避免手机回退宋体。 */
@font-face{font-family:"Invitation Calendar Numbers";src:url("/fonts/Nunito-Calendar.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Invitation Calendar Sans";src:url("/fonts/NotoSansSC-Calendar.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
/* 照片保留原色，日历直接叠在画面上；上方留出人物空间，透明表格不覆盖照片细节。 */
.calendar{position:relative;isolation:isolate;width:100%;min-width:0;min-height:520px;aspect-ratio:2/3;margin:0;padding:0;display:flex;align-items:flex-end;overflow:hidden;background:var(--paper-2);color:#fff}
.calendar-backdrop{position:absolute;inset:-32px 0;-webkit-mask-image:linear-gradient(180deg,transparent,#000 64px);mask-image:linear-gradient(180deg,transparent,#000 64px)}
.calendar-backdrop img{width:100%;height:calc(100% + 32px);margin-top:-16px;object-fit:cover;object-position:center;transform:translateY(var(--parallax-y,0))}
.calendar-content{position:relative;z-index:1;width:100%;padding:clamp(170px,52vw,220px) 16px 28px;font-family:"Invitation Calendar Sans",sans-serif;text-shadow:0 1px 2px #0009}
.calendar-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.calendar h2{display:flex;align-items:baseline;gap:2px;margin:0;color:#fff;font:600 40px/1 "Invitation Calendar Numbers",sans-serif;letter-spacing:-1px}
.calendar h2 small{font:600 17px/1 "Invitation Calendar Numbers",sans-serif;letter-spacing:0}
.calendar-year{margin:0;color:#fff;font:600 19px/1.2 "Invitation Calendar Numbers","Invitation Calendar Sans",sans-serif;letter-spacing:-.3px;white-space:nowrap}
.lunar-date{margin:10px 0 16px;text-align:left;color:#ffffffe6;font:400 10px/1.6 "Invitation Calendar Sans",sans-serif;letter-spacing:.4px}
.calendar-board{width:100%;margin:0;padding:0;border:0;background:transparent}
.calendar-weekdays,.calendar-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px 2px;text-align:center}
.calendar-weekdays{padding-bottom:10px;border-bottom:1px solid #ffffff80;color:#fff;font:400 10px/1.4 "Invitation Calendar Sans",sans-serif}
.calendar-days{padding-top:10px;min-height:185px;align-items:center}
.calendar-day{display:grid;place-items:center;align-content:center;gap:3px;min-width:0;height:32px;margin:0;color:#fff}
.calendar-day b{display:grid;place-items:center;width:22px;height:22px;font:600 12px/1 "Invitation Calendar Numbers",sans-serif;font-variant-numeric:tabular-nums}
.calendar-day small{font:400 9px/1 "Invitation Calendar Sans",sans-serif;color:#ffffffd9;white-space:nowrap}
.calendar-day.is-empty{visibility:hidden}
/* 红色标记仅落在婚礼当天的公历数字上，农历仍在下方清晰显示。 */
.calendar-day.is-wedding b{border-radius:50%;background:#e52532;color:#fff;text-shadow:none;box-shadow:0 1px 4px #710b2440}
.calendar-empty{grid-column:1/-1;color:#fff;font-size:13px}

.place{padding:58px 20px 64px;background:var(--paper)}.place-date{margin:8px 0 24px;font:20px Georgia,serif;letter-spacing:2px}.map{height:180px;margin:0 10px;padding:18px;display:grid;place-content:center;gap:8px;border:6px solid #eadac2;background:#e2d5bf;color:#8b5b46;font:11px Arial}.map img{width:28px;margin:auto}.place h3{margin:26px 0 8px;color:var(--red);font:27px "STKaiti","KaiTi",serif}.place>p:last-child{margin:0 14px;white-space:pre-line;font-size:13px;line-height:1.8}.closing{padding:54px 24px 62px;text-align:center;background:linear-gradient(180deg,#65101a 0%,#4b0711 100%);color:#f5d7ab}.closing p{margin:0 0 24px;font:20px/1.8 "STKaiti","KaiTi",serif}.closing span{font:46px serif;color:#d9a65b}.load-notice{max-width:480px;margin:auto;padding:16px;background:var(--paper);color:#714522;font-size:13px;line-height:1.7}footer{max-width:480px;margin:auto;display:flex;justify-content:space-between;padding:17px 24px;background:#3d070e;color:#e8c99b;font:11px Arial}footer a{padding:10px 0}
@media(max-width:360px){.cover h1{font-size:96px;letter-spacing:0}.scroll-roll{height:36px;margin:-18px 0 -18px}.paper{margin-inline:10px;padding-block:24px}.paper:before,.paper:after{margin-inline:8px;height:9px}.section{padding-inline:16px}.portrait-frame{height:260px}.couple-portraits{gap:16px;margin-top:28px}.couple-portraits img{width:104px;height:104px}.couple-portraits strong{font-size:11px}.couple-portraits span{font-size:17px}}

/* 每个红色区块独立裁切装饰层，禁止粒子跨入黄色纸张；绝对定位不占位、不拦截触摸。 */
.gold-dust-host{position:relative;isolation:isolate;overflow:hidden}
.gold-dust-host>.gold-dust{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;user-select:none;contain:paint}
/* 轨道与区块等高，光点位于轨道底部；平移一个轨道高度便从区块顶部落到底部。 */
.gold-speck{position:absolute;top:0;left:var(--dust-x);width:var(--dust-size);height:100%;opacity:0;animation:gold-fall var(--dust-duration) var(--dust-delay) linear infinite;animation-play-state:paused}
.gold-speck:before{content:"";position:absolute;bottom:0;left:0;width:100%;height:var(--dust-size);border-radius:50%;background:#ffda63;box-shadow:0 0 3px #ffc83b99}
.gold-speck:nth-child(3n):before{height:calc(var(--dust-size) * 1.7);border-radius:1px;background:#f4bd38}
.gold-dust.is-drifting .gold-speck{animation-play-state:running}
@keyframes gold-fall{0%{opacity:0;transform:translate3d(0,-100%,0)}12%{opacity:var(--dust-alpha)}55%{opacity:var(--dust-alpha);transform:translate3d(var(--dust-drift),-45%,0)}88%{opacity:var(--dust-alpha)}100%{opacity:0;transform:translate3d(0,0,0)}}
@media(prefers-reduced-motion:reduce){.gold-dust-host>.gold-dust{display:none}.gold-speck{animation:none!important}}

/* 同一套入场节奏用于所有内容：只在 JS 确认可播放时隐藏，避免脚本缺失时出现空白页。
   观察元素使用原始占位，位移仅在触发后执行；各元素只播放一次，不拖慢触摸滚动。 */
[data-motion]{--motion-duration:1.4s;--motion-x:0px;--motion-y:24px}
[data-motion="photo"]{--motion-duration:1.8s;--motion-y:40px}
[data-motion="left"]{--motion-duration:1.8s;--motion-x:-40px;--motion-y:0px}
[data-motion="right"]{--motion-duration:1.8s;--motion-x:40px;--motion-y:0px}
.couple-portraits strong[data-motion],.couple-portraits span[data-motion]{--motion-duration:1.4s}
.closing>span[data-motion]{display:inline-block}
.scroll-roll[data-motion]{--motion-y:12px}
[data-motion].motion-pending{opacity:0}
[data-motion].motion-visible{animation:motion-float var(--motion-duration) var(--motion-delay,0s) cubic-bezier(.3,.1,.3,1) both}
.cover h1.motion-visible{animation:motion-title 1.8s cubic-bezier(.3,.1,.3,1) both}
[data-motion="line"].motion-visible{transform-origin:center;animation:motion-line 1.4s var(--motion-delay,0s) ease both}
/* 日期背景保留从区块一半高度上浮，日期标题、农历与表格各自独立触发。 */
[data-motion="calendar"].motion-visible{animation:motion-calendar 2s cubic-bezier(.3,.1,.3,1) both}
@keyframes motion-float{from{opacity:0;transform:translate(var(--motion-x),var(--motion-y))}to{opacity:1;transform:none}}
@keyframes motion-title{from{opacity:0;transform:translateY(36px);clip-path:inset(100% -8% -8%)}to{opacity:1;transform:none;clip-path:inset(-8%)}}
@keyframes motion-line{from{opacity:0;transform:scaleX(.3)}to{opacity:1;transform:scaleX(1)}}
@keyframes motion-calendar{from{opacity:0;transform:translateY(50%)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}[data-motion].motion-pending,[data-motion].motion-visible,.cover h1.motion-visible{opacity:1;animation:none!important;transform:none;clip-path:none}.calendar-backdrop img{transform:none}.loader-line i{animation:none}}

/* 装饰线和两行寄语各自观察；文字从较近的位置持续减速浮现，不被装饰线提前触发。
   行高预留书法笔锋空间，缩小位移以免文字在屏幕下沿停留过久。 */
.feature-caption-text[data-motion]{--motion-duration:1.6s;--motion-y:16px;white-space:nowrap}
.feature-caption-text[data-motion].motion-visible{animation-timing-function:cubic-bezier(.22,.61,.36,1)}

/* 地图保持原始比例，不裁切高德标识；错误时保留导航入口，无坐标时不可跳转。 */
.venue-map{margin:0 10px;border:5px solid #eadac2;background:#e8decb;color:#795a44;font:12px/1.7 Arial,sans-serif}
.venue-map a{display:flex;flex-direction:column;min-height:180px;align-items:center;justify-content:center;text-decoration:none;color:inherit}
.venue-map img{display:block;width:100%;height:auto;margin:0}
.venue-map [hidden]{display:none!important}
#venue-map-status{padding:32px 15px;text-align:center}
#venue-map-action{display:block;width:100%;padding:10px;background:#f0e1cc;color:#8e2630;text-align:center;letter-spacing:1px}
.venue-map a:focus-visible{outline:2px solid #8e2630;outline-offset:4px}

/* 导航提示留在地图下方，手动唤起入口不继承地图预览的高度。 */
#venue-navigation-note{margin:0;padding:12px 16px;text-align:center}
#venue-navigation-retry{min-height:44px;margin:0 16px 12px;padding:8px 14px;background:#8e2630;color:#fff;border-radius:4px;text-align:center}