@font-face {
  font-family: "Wedding WenKai";
  src: url("assets/wedding-wenkai.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: light;
  --paper: #f7f0e4;
  --cinnabar: #9b382b;
  --ink: #533d32;
  --gold: #b69a6b;
  font-family: "Wedding WenKai", "Kaiti SC", "STKaiti", "KaiTi", serif;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); }
.invitation-view { height: 100svh; height: 100dvh; overflow: hidden; overscroll-behavior: none; }
button { font: inherit; cursor: pointer; color: inherit; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 2px solid var(--cinnabar); outline-offset: 5px; }
.invitation { width: min(100%, 1320px); height: 100%; padding: 22px 36px 18px; margin: auto; display: flex; flex-direction: column; }
.masthead { min-height: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.masthead p { margin: 0; font-size: .875rem; letter-spacing: .18em; }
.masthead p span { margin: 0 9px; font-size: .75rem; color: #806a53; }
.masthead-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 14px; }
.music-toggle { font-size: .8125rem; color: var(--cinnabar); letter-spacing: .05em; text-decoration: none; }
.music-toggle { padding: 4px 0; border: 0; background: transparent; }
[hidden] { display: none !important; }
[data-copy] { white-space: pre-line; overflow-wrap: anywhere; }
.replay { padding: 4px 2px; background: none; border: 0; font-size: .875rem; letter-spacing: .14em; }
.js:not(.is-open) .replay { visibility: hidden; }
.scroll-stage { --edge: 0px; --roll-width: 13px; --curl-width: 12px; --curve: 0deg; --shade: .14; --shadow-blur: 3px; position: relative; flex: 1; min-height: 0; margin: 22px 0 0; perspective: 1200px; }
.paper-window { position: absolute; inset: 0; clip-path: inset(0 var(--edge)); box-shadow: 0 8px 26px #71512e12; background: #f9f2e7; }
.handscroll { display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none; }
.handscroll::-webkit-scrollbar { display: none; }
.js .handscroll { overflow-x: hidden; scroll-snap-type: none; touch-action: pinch-zoom; }
.scene { --painting: url("assets/mineral-scroll-display.webp"); --photo-x: 36px; --photo-y: 18px; --photo-turn: 1deg; --copy-turn: -.7deg; flex: 0 0 100%; height: 100%; min-width: 0; min-height: 0; position: relative; overflow: hidden; overscroll-behavior: none; scroll-snap-align: start; display: grid; grid-template-columns: .95fr 1.05fr; grid-template-rows: auto minmax(0, 1fr) auto; gap: 20px 32px; padding: 48px 8% 48px 14%; }
.mineral-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mineral-field::before { content: ""; position: absolute; inset: -16px; background: var(--painting) center / cover; transform: translate3d(var(--drift, 0px), 0, 0) scale(1.02); }
.scene:not(.is-painted) .mineral-field::before, .scene:not(.is-painted) .identity, .scene:not(.is-painted) .story-copy, .scene:not(.is-painted) .event-details, .scene:not(.is-painted) .location-details, .scene:not(.is-painted) .rsvp-details { background-image: none; }
.scene > .gilded-atmosphere { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.gilded-atmosphere::before { content: ""; position: absolute; inset: 0; opacity: .5; background: radial-gradient(ellipse 3px 1px at 14% 18%, #e2bc76 98%, transparent), radial-gradient(ellipse 2px 4px at 89% 13%, #c69a52 98%, transparent), radial-gradient(ellipse 3px 2px at 24% 77%, #e6c486 98%, transparent), radial-gradient(ellipse 2px 3px at 84% 88%, #d8ab5b 98%, transparent), radial-gradient(ellipse 1px 2px at 73% 48%, #dfbd82 98%, transparent); transform: translate3d(var(--foil-drift, 0px), 0, 0); }
.gilded-atmosphere::after { content: ""; position: absolute; inset: 0; background: linear-gradient(112deg, transparent 34%, #fff5d522 45%, #fff3cb44 48%, transparent 60%); transform: translateX(-100%); opacity: 0; }
.scene > :not(.mineral-field):not(.gilded-atmosphere) { position: relative; z-index: 1; }
.title-block { grid-column: 1; grid-row: 1 / 3; align-self: start; transform: translate3d(var(--title-drift, 0px), 0, 0); }
.eyebrow { margin: 0 0 18px; font-size: .75rem; letter-spacing: .22em; color: #765344; }
h1 { margin: 0; writing-mode: vertical-rl; font-family: "STXingkai", "STKaiti", "KaiTi", "Wedding WenKai", serif; font-size: clamp(4rem, 7.7vw, 6.75rem); font-weight: 400; line-height: 1.25; letter-spacing: .08em; color: var(--cinnabar); }
h2 { margin: 0; font: 400 clamp(2.5rem, 4.7vw, 4.5rem)/1.45 "STKaiti", "KaiTi", "Wedding WenKai", serif; letter-spacing: .08em; color: var(--cinnabar); }
.title-line { display: block; }
.mini-seal { display: inline-block; margin-right: 10px; padding: 4px 3px 3px 5px; border: 1px solid #9b382b88; color: var(--cinnabar); font-size: 1rem; line-height: 1; }
.scene-photo { margin: 0; grid-column: 2; grid-row: 1 / 4; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; transform: translate3d(var(--photo-drift, 0px), 0, 0); }
.scene-photo img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border: 6px solid #fbf7ef; box-shadow: 0 16px 32px #65402828, 0 0 0 1px #b99c6b6b; }
.js .scene-photo:not(.is-loaded)::before { content: "照片载入中"; position: absolute; inset: 0; display: grid; place-items: center; color: #806a53; font-size: .8125rem; letter-spacing: .12em; }
.js .scene-photo:not(.is-loaded) img { opacity: 0; }
.scene-photo img { transition: opacity .45s ease; }
.identity { grid-column: 1; grid-row: 3; justify-self: start; max-width: 100%; padding: 17px 22px 18px; background: linear-gradient(105deg, #fff8eccf, #f6ebd6ed), url("assets/mineral-silk-v4-display.webp") center / cover; border-left: 2px solid #a34531; border-bottom: 1px solid #b99c6b8f; box-shadow: 2px 5px 12px #65402813; }
.names { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 13px; font-size: 1.5rem; letter-spacing: .09em; }
.names i { font-size: .8125rem; font-style: normal; color: #87684c; }
.verse { margin: 14px 0 16px; font-size: .9375rem; line-height: 1.9; letter-spacing: .07em; }
.identity time { font-size: .8125rem; line-height: 1.8; letter-spacing: .1em; }
.story-copy { grid-column: 1; grid-row: 3; align-self: end; padding: 15px 0; font-size: 1rem; line-height: 1.9; letter-spacing: .08em; }
.story-copy p { margin: 0; }
.story-copy p + p { margin-top: 12px; }
.reverse { --photo-x: -38px; --photo-turn: -1.3deg; --copy-turn: .8deg; grid-template-columns: 1.05fr .95fr; padding-left: 8%; padding-right: 10%; }
.reverse .scene-photo { grid-column: 1; }
.reverse .title-block, .reverse .story-copy { grid-column: 2; }
.reverse .title-block { padding: 10px 14px; }
.companionship { --painting: url("assets/mineral-silk-v4-display.webp"); }
.companionship .story-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 18px 0; border-top: 1px solid #bda16e; border-bottom: 1px solid #bda16e70; }
.companionship .story-copy p + p { margin-top: 0; padding-left: 20px; border-left: 1px solid #bda16e70; }
.companionship .scene-photo img { border-width: 8px; box-shadow: 10px 10px 0 #d6c3a144, 0 15px 28px #60433226; }
.centered { --painting: url("assets/mineral-strata-v4-display.webp"); --photo-x: 0px; --photo-y: 42px; --photo-turn: 0deg; }
.centered .title-block { align-self: center; }
.centered .scene-photo img { border: 7px double #c2a577; background: #f9f1e2; }
.centered .story-copy { padding: 17px 20px; background: linear-gradient(#fcf6e8d9, #f9efdded), url("assets/mineral-silk-v4-display.webp") 70% center / 250%; clip-path: polygon(0 6px, 8px 0, 48% 2px, 78% 0, 100% 4px, 100% calc(100% - 4px), 65% 100%, 28% calc(100% - 2px), 0 100%); box-shadow: inset 0 1px #c8ac7d; }
.playful { --painting: url("assets/mineral-bloom-v4-display.webp"); --photo-y: -12px; --photo-turn: -2deg; --copy-turn: -2deg; }
.playful .scene-photo img { box-shadow: 0 16px 32px #65402828, 0 0 0 1px #b99c6b6b, 8px 8px 0 #9b382b; }
.playful .title-block { background: #fbf6eccc; border-right: 1px solid #b99c6b8f; }
.playful .story-copy { padding: 14px 22px; color: #fff0d8; background: linear-gradient(125deg, #ac3529, #8e2d22); box-shadow: inset 0 0 0 1px #e4be8199, 0 8px 15px #813a2720; clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px)); }
.outdoors { --painting: url("assets/mineral-strata-v4-display.webp"); --photo-x: 26px; --photo-y: 28px; --copy-turn: 0deg; }
.outdoors .mineral-field::before { background-position: left bottom; background-size: 125% auto; }
.outdoors .scene-photo img { border-color: #fffaf1; box-shadow: -10px 10px 0 #d8b59455, 0 15px 35px #75584428; }
.outdoors .story-copy { margin-right: 22px; padding: 12px 18px; border-left: 4px solid #c8a86d; background: linear-gradient(100deg, #fcf4e5ed, #f7e6d2dd), url("assets/mineral-silk-v4-display.webp") right center / 200%; }
.joy { --painting: url("assets/mineral-vermilion-v4-display.webp"); --photo-x: 0px; --photo-y: 35px; --photo-turn: 0deg; background-color: #a12f23; }
.joy h2, .joy .eyebrow { color: #fff1d8; text-shadow: 0 1px 12px #63261b22; }
.joy .scene-photo img { border: 6px double #e6c789; background: #fff2dc; box-shadow: 0 18px 34px #691c2240; }
.joy .story-copy { display: flex; align-items: center; gap: 22px; color: #fff1d8; padding: 17px 0; border-top: 1px solid #e5c2829c; border-bottom: 1px solid #e5c2829c; }
.joy .story-copy > div { flex: 1; }
.joy .story-copy p + p { margin-top: 10px; }
.joy .joy-seal { padding: 7px; color: #f6dfad; border: 1px solid #e5c282; box-shadow: inset 0 0 0 3px #e5c28222; font: 2.75rem/1.1 "STKaiti", "KaiTi", "Wedding WenKai", serif; }
.invitation-scene { --painting: url("assets/mineral-silk-v4-display.webp"); --photo-x: 30px; --photo-y: 0px; --photo-turn: .6deg; }
.invitation-scene .mineral-field::before { background-position: right top; background-size: 130% auto; }
.invitation-copy { padding: 24px 25px; border: 1px solid #c4a36e; outline: 1px solid #c4a36e66; outline-offset: -6px; background: linear-gradient(#fffaf0ed, #fffaf0ed), url("assets/mineral-silk-v4-display.webp") center / cover; box-shadow: 0 10px 24px #76512d16; font-size: .9375rem; line-height: 1.85; transform-origin: left center; }
.invitation-copy::after { content: ""; position: absolute; right: 0; top: 0; width: 25px; height: 25px; background: linear-gradient(225deg, #e6d2b2 49%, #f7e8cb 50%, #fff8e955 60%, transparent 61%); }
.sign-off { color: var(--cinnabar); }
.sign-off span { padding-left: 8px; font-size: .8125rem; }
.event-scene { display: flex; align-items: safe center; justify-content: center; padding: 24px 12%; text-align: center; }
.event-scene { --painting: url("assets/mineral-bloom-v4-display.webp"); }
.event-scene .mineral-field::before { background-position: 60% top; }
.event-details { width: min(100%, 620px); padding: 12px 25px; background: linear-gradient(#fff9eceb, #fff9eceb), url("assets/mineral-silk-v4-display.webp") center / cover; border: 1px solid #c5a270; box-shadow: 6px 6px 0 #f1e2c9, 7px 7px 0 #c5a27088, 0 16px 40px #68251420; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }
.event-seal { margin: 0 0 6px; color: var(--cinnabar); font: 2rem/1 "STKaiti", "KaiTi", "Wedding WenKai", serif; }
.event-details .eyebrow { margin-bottom: 6px; }
.event-details h2 { font-size: 2rem; line-height: 1.25; }
.wedding-calendar { width: 100%; margin: 3px 0 0; table-layout: fixed; border-spacing: 3px 1px; }
.wedding-calendar caption { padding: 4px 0 6px; color: var(--cinnabar); font-size: 1.1rem; letter-spacing: .15em; }
.wedding-calendar th { padding: 2px 0 4px; color: #92744e; font-size: .8125rem; font-weight: 400; border-bottom: 1px solid #c5a27066; }
.wedding-calendar td { padding: 0; }
.wedding-calendar time { display: flex; flex-direction: column; align-items: center; padding: 0; }
.wedding-calendar time span { font-size: 1.1rem; line-height: 1.2; }
.wedding-calendar small { color: #897352; font-size: .75rem; line-height: 1.2; }
.wedding-calendar .wedding-day time { color: #fff4df; background: var(--cinnabar); border: 1px solid #c4a36e; border-radius: 3px; box-shadow: 0 0 0 1px #9b382b22; }
.wedding-day small { color: inherit; }
.calendar-selected { margin: 8px 0 0; color: var(--cinnabar); font-size: .9375rem; line-height: 1.6; }
.calendar-selected span { display: block; color: #876446; font-size: .8125rem; }
address { font-style: normal; font-size: .875rem; line-height: 1.8; letter-spacing: .04em; }
address p { margin: 0; }
.venue { margin-bottom: 9px; font-size: 1.25rem; color: var(--cinnabar); letter-spacing: .1em; }
.closing-verse { margin: 8px 0; font-size: .875rem; line-height: 1.8; }
.event-signature { margin: 0; font-size: .875rem; letter-spacing: .14em; }
.location-scene { --painting: url("assets/mineral-silk-v4-display.webp"); display: flex; align-items: safe center; justify-content: center; padding: 24px 12%; text-align: center; }
.location-details { width: min(100%, 720px); padding: 16px 26px; background: linear-gradient(#fff8e9e8, #fff8e9e8), url("assets/mineral-bloom-v4-display.webp") center / cover; border: 1px solid #c5a270; box-shadow: 0 14px 34px #6825141c; }
.location-details h2 { font-size: 2.25rem; }
.location-details .eyebrow { margin-bottom: 9px; }
.location-verse { margin: 7px 0 10px; font-size: .9375rem; letter-spacing: .08em; }
.venue-location { position: relative; margin: 10px 0 12px; }
.map-search, .map-switch { color: var(--cinnabar); text-decoration: none; font-size: .875rem; }
.venue-map { display: block; width: 100%; height: 140px; object-fit: cover; object-position: center 68%; border: 5px solid #fffaf1; outline: 1px solid #c5a27077; }
.map-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 9px; }
.map-switch { padding: 0; border: 0; background: none; }
.couple-contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.couple-contacts button { display: flex; align-items: center; flex-direction: column; padding: 10px 8px; color: var(--ink); background: #f4e8d888; border: 0; border-top: 1px solid #b99c6b; border-bottom: 1px solid #b99c6b66; }
.couple-contacts span { font-size: .875rem; }
.couple-contacts strong { margin: 6px 0; color: var(--cinnabar); font-size: clamp(.875rem, 3.6vw, 1.05rem); font-weight: 400; letter-spacing: .02em; }
.couple-contacts small { color: #8b7153; font-size: .75rem; }
.arrival-note { margin: 15px 0 0; font-size: .875rem; line-height: 1.7; }
.to-rsvp, .rsvp-submit, .contact-call { display: inline-block; margin-top: 14px; padding: 9px 24px; border: 1px solid #b99c6b; background: var(--cinnabar); color: #fff2dc; font-size: 1rem; text-decoration: none; }
.rsvp-scene { --painting: url("assets/mineral-bloom-v4-display.webp"); display: flex; align-items: safe center; justify-content: center; padding: 28px 12%; text-align: center; }
.rsvp-details { width: min(100%, 620px); padding: 28px 32px; border: 1px solid #c5a270; background: linear-gradient(#fff9eceb, #fff9eceb), url("assets/mineral-silk-v4-display.webp") center / cover; }
.rsvp-details h2 { font-size: 2.25rem; }
.rsvp-intro { margin: 14px 0 20px; font-size: 1rem; line-height: 1.8; }
#rsvp-form label { display: block; margin: 14px 0; text-align: left; font-size: 1rem; }
#rsvp-form input, .local-login input { display: block; width: 100%; margin-top: 8px; padding: 10px 12px; border: 1px solid #c5a270; border-radius: 0; background: #fffdf6; color: var(--ink); font: inherit; font-size: 1rem; }
#rsvp-form small { display: block; margin-top: 5px; color: #82684d; font-size: .875rem; }
.rsvp-privacy { font-size: .875rem; color: #82684d; }
.rsvp-status { min-height: 1.8em; font-size: .9375rem; line-height: 1.8; color: var(--cinnabar); }
#rsvp-form .rsvp-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(100%); }
.rsvp-submit:disabled { opacity: .65; cursor: wait; }
.invite-dialog { width: min(420px, calc(100% - 32px)); max-height: calc(100svh - 40px); padding: 26px; border: 1px solid #b99c6b; background: var(--paper); color: var(--ink); box-shadow: 0 20px 70px #29170e50; text-align: center; }
.invite-dialog::backdrop { background: #35231866; backdrop-filter: blur(3px); }
.invite-dialog h2 { margin: 18px 0; font-size: 1.8rem; }
.dialog-close { display: block; margin-left: auto; padding: 3px 0; background: transparent; border: 0; font-size: .875rem; }
.map-options { display: grid; gap: 12px; }
.map-options a { padding: 12px; border: 1px solid #b99c6b; color: var(--cinnabar); text-decoration: none; font-size: 1rem; }
.dialog-note { margin-top: 20px; font-size: .875rem; line-height: 1.8; color: #82684d; }
.contact-status { font-size: 1.3rem; overflow-wrap: anywhere; }
.guest-summary { display: flex; gap: 20px; padding: 20px 0; color: var(--cinnabar); }
.guest-summary strong { font-size: 2rem; font-weight: 400; }
.guest-table-wrap { overflow-x: auto; }
.guest-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.guest-table th, .guest-table td { padding: 14px 12px; border-bottom: 1px solid #c5a27066; text-align: left; font-weight: 400; }
.guest-table td:first-child { overflow-wrap: anywhere; }
.admin-status { line-height: 1.8; color: var(--cinnabar); }
.admin-login { display: inline-block; padding: 10px 16px; background: var(--cinnabar); color: #fff2dc; text-decoration: none; }
.prelude { display: none; }
.js .prelude { display: flex; position: absolute; z-index: 5; inset: 0; flex-direction: column; align-items: center; justify-content: center; padding: 24px 0; overflow: hidden; text-align: center; }
.prelude > * { flex-shrink: 0; }
.prelude-label { margin: 0 0 24px; font-size: .875rem; letter-spacing: .25em; }
.prelude-seal { display: block; width: 36px; margin: 0 auto 17px; padding: 5px 3px 5px 5px; background: var(--cinnabar); color: #fdf0d6; border: 1px solid #d1b17b; font: 1.4rem/1 "STKaiti", "KaiTi", "Wedding WenKai", serif; box-shadow: 0 0 0 3px #9b382b; }
.prelude h2 { margin: 0; writing-mode: vertical-rl; font: 400 3rem/1.2 "STKaiti", "KaiTi", "Wedding WenKai", serif; letter-spacing: .18em; color: var(--cinnabar); }
.prelude-names { margin: 25px 0 24px; font-size: .9375rem; letter-spacing: .12em; }
.open-scroll { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; width: 5.125rem; padding: 10px 8px; border: 1px solid #ba9a65; background: var(--cinnabar); color: #fff0d7; font-size: 1rem; letter-spacing: .2em; transition: background .2s; }
.open-scroll:hover { background: #842c22; }
.button-line { width: 20px; height: 1px; background: #b99c6b; }
.prelude time { margin-top: 23px; font-size: .875rem; letter-spacing: .15em; }
.roller { position: absolute; z-index: 4; top: -6px; bottom: -6px; width: var(--roll-width); pointer-events: none; background: linear-gradient(90deg, #c7b79f 0%, #e8dcc3 13%, #faf4e8 43%, #efe5d2 65%, #d3c3a5 95%); box-shadow: 0 2px var(--shadow-blur) #6d4e2b50; border-radius: 45% / 3px; transform-style: preserve-3d; }
.roller::before, .roller::after { content: ""; position: absolute; left: 0; right: 0; height: 5px; border-radius: 50%; background: linear-gradient(90deg, #a98e61, #decfa7 45%, #bca074); box-shadow: 0 1px 2px #8d77573b; }
.roller::before { top: 0; }
.roller::after { bottom: 0; }
.roller-left { left: var(--edge); transform: translateX(-50%) rotateY(var(--curve)); }
.roller-right { right: var(--edge); transform: translateX(50%) rotateY(calc(-1 * var(--curve))); background: linear-gradient(270deg, #c7b79f 0%, #e8dcc3 13%, #faf4e8 43%, #efe5d2 65%, #d3c3a5 95%); }
.curl { position: absolute; top: 6px; bottom: 6px; width: var(--curl-width); opacity: var(--shade); }
.roller-left .curl { left: 85%; border-radius: 50% 0 0 50%; background: linear-gradient(90deg, #5d3c1899, #6c482142 35%, transparent); }
.roller-right .curl { right: 85%; border-radius: 0 50% 50% 0; background: linear-gradient(270deg, #5d3c1899, #6c482142 35%, transparent); }
.js .scene:not(.is-seen) > :not(.mineral-field) { visibility: hidden; }
.is-open .prelude { animation: prelude-away .5s both; pointer-events: none; }
.is-open .is-seen .scene-photo.is-loaded img { animation: photo-arrive 1.2s cubic-bezier(.16, .75, .2, 1) .08s both; }
.is-open .is-seen .title-line { animation: ink-reveal 1.1s cubic-bezier(.2, .65, .2, 1) calc(.2s + var(--line-order, 0) * .22s) both; }
.is-open .is-seen .eyebrow { animation: title-arrive .9s ease .1s both; }
.is-open .is-seen .story-copy { animation: note-arrive 1.05s cubic-bezier(.2, .65, .2, 1) .4s both; }
.is-open .is-seen .story-copy p { animation: identity-arrive .9s ease .55s both; }
.is-open .is-seen .story-copy p + p { animation-delay: .72s; }
.is-open .is-seen .invitation-copy { animation: letter-open 1.3s cubic-bezier(.16, .65, .2, 1) .25s both; }
.is-open .is-seen .event-details { animation: letter-open 1.25s cubic-bezier(.16, .65, .2, 1) .1s both; }
.is-open .is-seen .event-seal, .is-open .is-seen .joy-seal { animation: seal-imprint .8s cubic-bezier(.2, .7, .3, 1.08) .8s both; }
.is-open .is-seen .wedding-calendar, .is-open .is-seen address { animation: identity-arrive 1s ease .65s both; }
.is-open .is-seen .location-details { animation: letter-open 1.25s cubic-bezier(.16, .65, .2, 1) .1s both; }
.is-open .is-seen .venue-location { animation: identity-arrive 1s ease .3s both; }
.is-open .is-seen .couple-contacts { animation: identity-arrive 1s ease .6s both; }
.is-open .is-seen .event-signature { animation: ink-reveal 1.2s ease 1s both; }
.is-open .cover.is-seen .scene-photo.is-loaded img { animation-duration: 1.25s; animation-delay: .75s; }
.is-open .cover.is-seen .title-block { animation: title-arrive 1.1s cubic-bezier(.22, .65, .25, 1) 1.15s both; }
.is-open .is-seen .identity { animation: identity-arrive .9s ease 1.65s both; }
.is-open .is-active .mineral-field::before { animation: mineral-breathe 9s ease-in-out infinite alternate; }
.is-open .is-active .gilded-atmosphere::before { animation: foil-drift 7s ease-in-out infinite alternate; }
.is-open .is-seen .gilded-atmosphere::after { animation: foil-glide 3s ease 1.2s both; }
@keyframes prelude-away { to { opacity: 0; visibility: hidden; transform: translateY(-12px); } }
@keyframes photo-arrive { from { opacity: 0; transform: perspective(1000px) translate3d(var(--photo-x), var(--photo-y), 0) rotateY(-5deg) rotate(var(--photo-turn)) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes title-arrive { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes identity-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ink-reveal { from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-6px); } to { opacity: 1; clip-path: inset(0); transform: none; } }
@keyframes note-arrive { from { opacity: 0; transform: translateY(24px) rotate(var(--copy-turn)); } to { opacity: 1; transform: none; } }
@keyframes letter-open { from { opacity: 0; transform: perspective(1000px) rotateY(-18deg) translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes seal-imprint { 0% { opacity: 0; transform: scale(1.22) rotate(-8deg); } 70% { opacity: 1; transform: scale(.97) rotate(1deg); } 100% { opacity: 1; transform: none; } }
@keyframes mineral-breathe { from { transform: translate3d(calc(var(--drift, 0px) - 6px), 10px, 0) scale(1.025); } to { transform: translate3d(calc(var(--drift, 0px) + 10px), -10px, 0) scale(1.07); } }
@keyframes foil-drift { from { opacity: .35; transform: translate3d(var(--foil-drift, 0px), 5px, 0); } to { opacity: .8; transform: translate3d(calc(var(--foil-drift, 0px) - 9px), -10px, 0); } }
@keyframes foil-glide { 0% { opacity: 0; transform: translateX(-100%); } 35% { opacity: .75; } 100% { opacity: 0; transform: translateX(100%); } }
footer { flex-shrink: 0; margin-top: 19px; text-align: center; }
.reader-controls { display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 10px; }
.reader-controls button { padding: 7px 9px; border: 0; background: transparent; font-size: .8125rem; letter-spacing: .08em; color: var(--cinnabar); }
.reader-controls button:disabled { color: #988e7d; cursor: default; }
.js:not(.is-open) .reader-controls { visibility: hidden; }
.position-indicator { width: 80px; }
.position { margin: 0 0 3px; font-size: .875rem; letter-spacing: .12em; }
.position span { color: #ab977b; margin: 0 5px; }
progress { display: block; width: 100%; height: 2px; border: 0; background: #e2d5bf; accent-color: var(--cinnabar); }
progress::-webkit-progress-bar { background: #e2d5bf; }
progress::-webkit-progress-value { background: var(--cinnabar); }
.reading-note { margin: 0; font-size: .8125rem; letter-spacing: .17em; color: #816c58; }
@media (max-width: 680px) and (orientation: portrait) {
  .invitation { padding: 17px 17px 16px; }
  .masthead p { font-size: .8125rem; letter-spacing: .12em; }
  .scroll-stage { margin-top: 19px; }
  .scene { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto; gap: 13px; padding: 24px 20px 23px; }
  .mineral-field::before { background-position: 43% center; }
  .title-block { grid-column: 1; grid-row: 1; margin-left: 7px; }
  .eyebrow { margin-bottom: 10px; font-size: .75rem; letter-spacing: .12em; }
  h1 { font-size: min(3.35rem, 18vw); line-height: 1.14; }
  h2 { font-size: 2rem; line-height: 1.4; }
  .scene-photo { grid-column: 1; grid-row: 2; justify-content: flex-end; padding-left: 12%; }
  .scene-photo img { border-width: 4px; }
  .identity { grid-column: 1; grid-row: 3; padding: 12px 15px; }
  .names { gap: 10px; font-size: 1.25rem; }
  .verse { margin: 7px 0 8px; font-size: .875rem; line-height: 1.6; }
  .identity time { font-size: .8125rem; letter-spacing: .04em; }
  .story-copy { grid-column: 1; grid-row: 3; padding: 10px 14px; font-size: .9375rem; line-height: 1.75; }
  .companionship .story-copy { padding: 13px 0; gap: 12px; font-size: .875rem; }
  .companionship .story-copy p + p { padding-left: 12px; }
  .reverse .scene-photo { grid-column: 1; grid-row: 1; justify-content: flex-start; padding: 0 12% 0 0; }
  .reverse { grid-template-rows: minmax(0, 1fr) auto auto; }
  .reverse .title-block { grid-column: 1; grid-row: 2; margin: 0 0 0 auto; text-align: right; }
  .reverse .story-copy { grid-column: 1; grid-row: 3; }
  .centered .title-block { text-align: center; margin: 0; }
  .centered .scene-photo { justify-content: center; padding: 0 6%; }
  .centered .story-copy { text-align: center; border-left: 0; border-top: 1px solid #b99c6b8f; }
  .joy .story-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
  .joy .story-copy > div { flex: 1 1 160px; }
  .joy .joy-seal { font-size: 2.6rem; }
  .invitation-copy { padding: 16px 18px; font-size: .875rem; line-height: 1.8; }
  .invitation-copy p + p { margin-top: 8px; }
  .invitation-scene { grid-template-rows: auto minmax(0, 1fr) auto; }
  .event-scene { padding: 25px 20px; }
  .event-details { padding: 18px 14px; }
  .event-details h2 { font-size: 1.9rem; }
  .venue { font-size: 1.125rem; }
  .closing-verse { margin: 10px 0; }
  .wedding-calendar { border-spacing: 2px 1px; }
  .wedding-calendar caption { font-size: 1rem; }
  .calendar-selected { font-size: .875rem; }
  .location-scene { padding: 25px 20px; }
  .location-details { padding: 18px 14px; }
  .location-details h2 { font-size: 1.9rem; }
  .venue-map { height: 180px; }
  .rsvp-scene { padding: 25px 20px; }
  .rsvp-details { padding: 22px 18px; }
  .rsvp-details h2 { font-size: 1.9rem; }
  .masthead-actions { gap: 11px; }
  .prelude h2 { font-size: 2.6rem; }
  .prelude-label { margin-bottom: 19px; }
  footer { margin-top: 14px; }
  .reader-controls { gap: 18px; margin-bottom: 6px; }
  .reading-note { letter-spacing: .08em; font-size: .75rem; }
}
@media (max-height: 550px) and (orientation: landscape) {
  .invitation { padding: 12px 25px; }
  .scroll-stage { margin-top: 12px; }
  .scene { padding: 22px 9% 22px 14%; gap: 12px 25px; }
  h1 { writing-mode: horizontal-tb; font-size: 2.8rem; line-height: 1.15; }
  h1 br { display: none; }
  .eyebrow { margin-bottom: 10px; }
  .identity { padding: 9px 12px; }
  .names { font-size: 1.125rem; }
  .verse { margin: 5px 0; font-size: .8125rem; }
  .identity time { font-size: .75rem; }
  h2 { font-size: 1.7rem; line-height: 1.3; }
  .story-copy { font-size: .8125rem; padding: 8px 12px; line-height: 1.6; }
  .story-copy p + p { margin-top: 8px; }
  .reverse { padding-left: 9%; padding-right: 9%; }
  .invitation-copy { font-size: .75rem; }
  .event-scene { padding: 20px 15%; }
  .event-details { padding: 18px 22px; }
  .event-details h2 { font-size: 1.8rem; }
  .event-seal { font-size: 1.75rem; }
  .closing-verse { margin: 14px 0; }
  .js .prelude { justify-content: flex-start; padding: 20px 0; }
  .prelude-label { margin-bottom: 11px; font-size: .75rem; }
  .prelude-seal { display: inline-block; width: auto; margin: 0 12px 0 0; font-size: 1rem; }
  .prelude h2 { writing-mode: horizontal-tb; font-size: 1.6rem; }
  .prelude-names { margin: 11px 0; font-size: .8125rem; }
  .open-scroll { padding: 5px 8px; gap: 4px; }
  .prelude time { margin-top: 10px; }
  footer { margin-top: 10px; }
  .reader-controls { margin-bottom: 4px; }
  .event-scene, .location-scene, .rsvp-scene { padding: 10px 7%; }
  .event-details, .location-details, .rsvp-details { padding: 10px 14px; display: grid; grid-template-columns: 1fr 1.2fr; column-gap: 22px; }
  .event-details > :not(.wedding-calendar) { grid-column: 1; }
  .event-details .wedding-calendar { grid-column: 2; grid-row: 1 / 7; align-self: center; }
  .event-details h2 { font-size: 1.25rem; }
  .wedding-calendar caption { font-size: .9375rem; padding: 3px 0 4px; }
  .wedding-calendar th { font-size: .75rem; padding: 2px 0; }
  .wedding-calendar time span { font-size: 1rem; line-height: 1.1; }
  .wedding-calendar small { font-size: .6875rem; line-height: 1.1; }
  .event-seal { font-size: 1.1rem; margin-bottom: 2px; }
  .event-details .eyebrow { margin-bottom: 2px; font-size: .625rem; }
  .calendar-selected { margin-top: 3px; font-size: .75rem; line-height: 1.3; }
  .calendar-selected span { font-size: .6875rem; }
  .closing-verse { margin: 4px 0; font-size: .75rem; line-height: 1.4; }
  .event-signature { font-size: .75rem; }
  .location-details > * { grid-column: 1; margin: 0; }
  .location-details h2, .rsvp-details h2 { font-size: 1.4rem; line-height: 1.25; }
  .location-details .eyebrow { margin-bottom: 3px; }
  .location-verse, .arrival-note { font-size: .75rem; line-height: 1.4; }
  .location-details address { font-size: .75rem; line-height: 1.4; }
  .location-details .venue { margin-bottom: 3px; font-size: 1rem; }
  .location-details .venue-location { grid-column: 2; grid-row: 1 / 5; }
  .location-details .venue-map { height: 100px; }
  .location-details .couple-contacts { grid-column: 2; grid-row: 5 / 7; gap: 8px; }
  .couple-contacts button { padding: 5px; }
  .couple-contacts strong { margin: 3px 0; }
  .location-details .to-rsvp { padding: 6px 12px; font-size: .875rem; }
  .rsvp-details > :not(form) { grid-column: 1; }
  .rsvp-details form { grid-column: 2; grid-row: 1 / 4; display: grid; grid-template-columns: 1.4fr .8fr; column-gap: 12px; }
  .rsvp-details .eyebrow { align-self: end; margin-bottom: 5px; }
  .rsvp-intro { font-size: .8125rem; line-height: 1.5; margin: 7px 0; }
  #rsvp-form label { font-size: .8125rem; margin: 4px 0; }
  #rsvp-form input { margin-top: 4px; padding: 6px 8px; }
  #rsvp-form small { font-size: .6875rem; }
  .rsvp-privacy, .rsvp-submit, .rsvp-status { grid-column: 1 / -1; margin: 4px 0; }
  .rsvp-privacy { font-size: .75rem; }
  .rsvp-submit { padding: 6px; font-size: .875rem; }
  .rsvp-status { min-height: 1.4em; font-size: .75rem; line-height: 1.4; }
  .invite-dialog { width: min(600px, calc(100% - 32px)); padding: 14px 20px; }
  .invite-dialog h2 { margin: 6px 0; font-size: 1.4rem; }
  .invite-dialog p { margin: 6px 0; }
  .map-options { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .map-options a { padding: 8px; font-size: .875rem; }
  .dialog-note { font-size: .75rem; line-height: 1.4; }
}
@media (max-height: 740px) and (orientation: portrait) {
  .invitation { padding: 12px 14px; }
  .scroll-stage { margin-top: 12px; }
  footer { margin-top: 10px; }
  .reader-controls { margin-bottom: 0; }
  .reading-note { display: none; }
  .scene { padding: 16px 15px; gap: 10px; }
  h1 { font-size: 2.7rem; }
  h2 { font-size: 1.65rem; line-height: 1.25; }
  .eyebrow { margin-bottom: 7px; font-size: .6875rem; }
  .story-copy, .companionship .story-copy, .invitation-copy { padding: 8px 10px; font-size: .8125rem; line-height: 1.55; }
  .story-copy p + p, .invitation-copy p + p { margin-top: 6px; }
  .identity { padding: 9px 12px; }
  .verse { font-size: .8125rem; }
  .event-scene, .location-scene, .rsvp-scene { padding: 12px 10px; }
  .event-details, .location-details, .rsvp-details { padding: 12px 10px; }
  .event-details h2 { font-size: 1.4rem; line-height: 1.25; }
  .event-details .title-line { display: inline; }
  .event-details .title-line + .title-line { margin-left: 8px; }
  .event-seal { font-size: 1.15rem; margin-bottom: 4px; }
  .event-details .eyebrow { font-size: .6875rem; margin-bottom: 4px; }
  .wedding-calendar caption { font-size: .8125rem; padding: 3px 0 4px; }
  .wedding-calendar th { font-size: .6875rem; padding: 2px 0; }
  .wedding-calendar time span { font-size: .875rem; line-height: 1.05; }
  .wedding-calendar small { font-size: .625rem; line-height: 1.1; }
  .calendar-selected { margin-top: 6px; font-size: .75rem; line-height: 1.3; }
  .calendar-selected span { font-size: .75rem; }
  .closing-verse { margin: 6px 0; font-size: .75rem; line-height: 1.5; }
  .event-signature { font-size: .75rem; }
  .location-details h2, .rsvp-details h2 { font-size: 1.4rem; line-height: 1.25; }
  .location-verse { font-size: .8125rem; margin: 6px 0; }
  .location-details address { font-size: .75rem; line-height: 1.5; }
  .location-details .venue { font-size: 1rem; margin-bottom: 4px; }
  .venue-location { margin: 7px 0; }
  .venue-map { height: 88px; }
  .map-actions { margin-top: 6px; }
  .map-search, .map-switch { font-size: .75rem; }
  .couple-contacts button { padding: 6px 8px; }
  .couple-contacts strong { margin: 3px 0; }
  .arrival-note { margin-top: 6px; font-size: .75rem; line-height: 1.5; }
  .to-rsvp, .rsvp-submit { margin-top: 8px; padding: 7px 16px; font-size: .875rem; }
  .rsvp-intro { margin: 8px 0 10px; font-size: .8125rem; line-height: 1.5; }
  #rsvp-form label { margin: 8px 0; font-size: .875rem; }
  #rsvp-form input { margin-top: 4px; padding: 7px 10px; }
  #rsvp-form small, .rsvp-privacy { font-size: .75rem; }
  .rsvp-status { margin: 6px 0 0; min-height: 1.5em; font-size: .8125rem; line-height: 1.5; }
}
.copy-editor { padding: 28px 18px; }
.editor-paper { width: min(100%, 860px); margin: auto; padding: 32px; background: #fff9ee; border: 1px solid #c5a270; }
.editor-paper h1 { writing-mode: horizontal-tb; font-size: 2.25rem; }
.editor-paper header > p:last-child, .editor-help { font-size: .875rem; line-height: 1.8; color: #82684d; }
.editor-actions { display: flex; flex-wrap: wrap; gap: 12px; position: sticky; top: 0; z-index: 2; padding: 12px 0; background: #fff9ee; border-bottom: 1px solid #c5a27066; }
.editor-actions button, .editor-actions a { padding: 8px 12px; border: 1px solid #b99c6b; background: transparent; color: var(--cinnabar); font: inherit; font-size: .9375rem; text-decoration: none; }
.editor-actions button[type="submit"] { color: #fff2dc; background: var(--cinnabar); }
.editor-status { min-height: 1.8em; font-size: .9375rem; line-height: 1.8; color: var(--cinnabar); }
.copy-editor fieldset { margin: 28px 0; padding: 20px; border: 1px solid #c5a27088; }
.copy-editor legend { padding: 0 10px; font-size: 1.4rem; color: var(--cinnabar); }
.copy-editor label { display: block; margin-bottom: 18px; font-size: .875rem; color: #866c51; }
.copy-editor label:last-child { margin-bottom: 0; }
.copy-editor textarea { display: block; width: 100%; margin-top: 7px; padding: 12px; border: 1px solid #bda16e88; border-radius: 0; background: #fffdf8; color: var(--ink); font: 1rem/1.8 "Wedding WenKai", "KaiTi", serif; resize: vertical; }
.copy-editor textarea:focus { outline: 1px solid var(--cinnabar); outline-offset: 1px; }
@media (max-width: 680px) {
  .editor-paper { padding: 20px 14px; }
  .copy-editor fieldset { padding: 14px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; transition: none !important; }
  .mineral-field::before, .gilded-atmosphere::before, .gilded-atmosphere::after { animation: none !important; transform: none !important; }
  .scene-photo, .title-block { transform: none; }
}