/* Tomato red, clean paper and one lemon sticker: a cheerful invitation.
   The folio is the opening poster; photographs lead into facts, a letter and a reply.
   Keep the unfolding, photo handoff and tactile controls in their existing sequence. */
:root {
  --paper: #fffcf4;
  --cream: #fffcf4;
  --ink: #252a2d;
  --muted: #6f7472;
  --red: #f2453d;
  --red-ink: #c6322c;
  --deep-red: #c6322c;
  --ceremony-red: #f2453d;
  --lemon: #eaf28a;
  --line: #e8e5dd;
  --sans: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --serif: var(--sans);
}
html,body,body[data-mode=before] { background: #efeee8; }
body { color: var(--ink); }
::selection { background: var(--lemon); color: var(--ink); }
dialog::backdrop { background: #202322b8; }
#invite { background: var(--paper); box-shadow: 0 0 60px #252a2d0c; }
.arrival:before,.receipt:before,.letter-scene:before,.invite-paper:before,
.envelope-front:after,.envelope-back:after,.reply-paper:after { background-image: none; }

/* The opening object keeps its paper depth, without antique texture or metallic trim. */
#home-opening { background: var(--paper); color: var(--ink); }
#home-opening:before { background: none; }
#home-opening:after { display: none; }
.opening-ribbon,.opening-sprig { display: none; }
.opening-confetti { position: absolute; display: block; }
.opening-confetti-loop { top: 10%; left: -30px; width: 108px; height: 108px; color: var(--red); transform: rotate(-16deg); opacity: .8; }
.opening-confetti-loop svg { display: block; width: 100%; height: 100%; }
.opening-confetti-dot { right: -29px; bottom: 12%; width: 85px; height: 85px; border-radius: 50%; background: var(--lemon); }
.opening-confetti-spark { top: 17%; right: 13%; color: var(--red); font: 34px/1 var(--sans); transform: rotate(13deg); }
#home-opening .home-opening-skip { color: #626760; letter-spacing: 0; }
#home-opening .home-opening-skip:focus-visible { outline-color: var(--red-ink); }
.opening-invitation { color: var(--paper); border-radius: 7px; }
.opening-invitation:focus-visible .opening-seal { outline-color: var(--ink); }
.opening-paper-stack { background: #fffefb; border-radius: 7px; box-shadow: 2px 3px 0 #e3e1d8,4px 6px 0 #fffefb,5px 7px 0 #d9dbd1,8px 16px 26px #30372e13,18px 30px 44px #30372e0c; }
.opening-inner-card { background: var(--paper); color: var(--ink); border-color: var(--line); border-radius: 4px; box-shadow: none; }
.opening-inner-heading { font-weight: 650; letter-spacing: .01em; }
.opening-inner-signature { font-weight: 600; letter-spacing: 0; }
.opening-inner-signature i { font-family: var(--sans); font-style: normal; color: var(--red-ink); }
.opening-door,.opening-door-right { background: var(--red); box-shadow: inset 0 1px 0 #ffffff40,inset 0 -1px 1px #9b2c2529; }
.opening-door-left { border-radius: 7px 0 0 7px; }
.opening-door-right { border-radius: 0 7px 7px 0; }
.opening-door:before { border: 0; }
.opening-door:after { width: 3px; background: linear-gradient(90deg,transparent,#ab29212b); }
.opening-door-right:after { width: 2px; background: #fffafa20; }
.opening-cover-print { color: var(--paper); text-shadow: none; }
.opening-dedication { top: 13%; font: 500 12px/1.5 var(--sans); letter-spacing: .09em; text-indent: .09em; color: #211715; }
.opening-cover-title { top: 25%; font: 750 clamp(46px,14.8cqw,70px)/1.15 var(--sans); letter-spacing: -.06em; text-indent: -.06em; }
.opening-cover-title:after { content: ''; display: block; width: 29%; height: 5px; margin: 15px auto 0; border-radius: 50%; border-bottom: 3px solid var(--paper); transform: rotate(-5deg); }
.opening-cover-names { font: 600 15px/1.5 var(--sans); letter-spacing: .02em; color: #211715; }
.opening-cover-names i { font-family: var(--sans); font-style: normal; color: #211715; }
.opening-cover-date { font: 500 11px/1.5 var(--sans); letter-spacing: .16em; color: #211715; }
.opening-seal { border-radius: 50%; background: var(--lemon); box-shadow: 0 2px 0 #8e9a4c66,0 5px 8px #762b251a; }
.opening-seal-rim { border: 0; box-shadow: none; }
.opening-seal-face { font: 700 17px/1.3 var(--sans); color: #252a2d; text-shadow: none; }
.opening-seal-face:after { content: '↗'; display: block; font: 25px/1 var(--sans); margin-top: 1px; }
.opening-seal-glint:after { background: linear-gradient(90deg,transparent,#ffffff4d,transparent); }
.opening-tap-ring { border-color: #eaf28a85; }
#home-opening .opening-touch-hint { color: var(--ink); font: 600 15px/1.7 var(--sans); letter-spacing: .02em; }
.opening-auto-note { color: #6c716c; letter-spacing: 0; }
.opening-photo-bridge { background: var(--red); }
@media (hover:hover) {
  #invite[data-home-motion=waiting] .opening-invitation:hover .opening-seal { box-shadow: 0 2px 0 #8e9a4c66,0 7px 12px #762b2526; }
}

/* The photographs keep their own color; the masthead and dialogue are fresh print. */
.hero-edition { background: var(--paper); color: var(--ink); border-bottom: 0; font-weight: 650; letter-spacing: 0; }
.hero-edition i { font-family: var(--sans); font-style: normal; color: var(--red-ink); }
.hero-edition-date { color: #5f6661; font-weight: 500; letter-spacing: .02em; }
.hero-edition .hero-edition-mark { background: transparent; color: var(--ink); outline: none; box-shadow: none; }
.hero-edition #fortune-entry>span { outline: none; }
#hero-carousel .greeting-bubble { color: var(--red-ink); }
#hero-carousel .bubble-paper { fill: var(--paper); filter: drop-shadow(0 2px 1px #20262215); }
#hero-carousel .greeting-bubble:active .bubble-paper { fill: var(--lemon); }
#hero-carousel .person-name { color: var(--paper); }
#hero-carousel .hero-slide-body-notes .person-bride { color: var(--red-ink); }
#hero-carousel .hero-slide-body-notes :is(.bubble-trace,.name-trace) path:nth-child(2) { stroke: var(--red-ink); }
#hero-carousel .wedding-countdown { text-shadow: 0 1px 6px #24141270; }
#hero-carousel .hero-photo-shade { background: linear-gradient(180deg,#37151324,transparent 24%,transparent 70%,#241a1a24 84%,#241a1a78); }

/* Clear invitation facts, ample white space, then the letter and reply. */
#invite .invite-paper { background: var(--paper); color: var(--ink); box-shadow: none; clip-path: none; }
#invite .paper-curl { display: none; }
#invite .clear-wedding-info { background: var(--paper); padding-top: 38px; }
#invite .wedding-information:before { background: var(--paper); }
#invite .wedding-information:after { display: none; }
.invitation-sentence { color: var(--red-ink); }
.info-eyebrow { color: var(--muted); letter-spacing: .08em; }
#invite #wedding-info { font-family: var(--sans); font-weight: 700; letter-spacing: -.03em; }
.clear-wedding-time { color: #606863; }
.clear-wedding-time>span { color: #898f87; }
.clear-wedding-time>strong { font-weight: 700; }
.venue-map { border-color: var(--line); }
.venue-map .venue-map-copy>strong { font-weight: 650; letter-spacing: -.02em; }
.venue-map .venue-map-copy>span { color: var(--muted); }
.venue-map-copy>.venue-hall { color: var(--red-ink); font-weight: 600; }
.venue-map .venue-map-action { min-height: 58px; border: 0; border-radius: 14px; color: var(--red-ink); background: #f8eeea; box-shadow: none; font-weight: 600; }
.venue-map .venue-map-action:before { display: none; }
.venue-map:active .venue-map-action { background: #f8e4dd; box-shadow: none; }
#invite .home-actions { background: var(--paper); }
#invite .home-actions>h2 { font-weight: 650; letter-spacing: 0; }
#invite .home-actions>h2:after { background: var(--line); }
.home-actions .home-action { border: 1px solid var(--line); border-radius: 14px; }
.home-actions .home-action:before { display: none; }
.home-actions .home-action-copy>strong { font-weight: 650; letter-spacing: -.02em; }
.home-actions .home-action-copy>span { color: var(--muted); }
.home-actions .home-action-arrow { background: var(--paper); color: var(--ink); border: 0; box-shadow: none; font-family: var(--sans); }
#write-rsvp { color: #211715; border-color: transparent; background: var(--red); box-shadow: 0 4px 0 #d3352e; }
#write-rsvp:before,#write-rsvp:after { display: none; }
#write-rsvp #rsvp-button-text { color: var(--paper); font-weight: 700; letter-spacing: .01em; text-shadow: none; }
#write-rsvp .home-action-copy>span { color: #211715; }
#write-rsvp .home-action-arrow { background: var(--lemon); color: var(--ink); border: 0; box-shadow: none; }
#write-rsvp:active { box-shadow: 0 1px 0 #d3352e; }
.home-actions .rsvp-action-art { filter: drop-shadow(0 3px 2px #2117151a); }
.craft-letter { background: var(--paper); border-color: #e8e5dd; box-shadow: none; }
.craft-letter>i { background: #a8ada4; }
.craft-envelope { background: #e9eadf; border-color: #f5f4e9; box-shadow: none; }
.craft-envelope:before { background: #fffef9; }
.craft-envelope:after { background: #f1f1e7; }
.craft-wax-seal { background: var(--lemon); color: var(--ink); border: 0; border-radius: 50%; box-shadow: 0 1px 2px #252a2d15; text-shadow: none; font-weight: 600; }
.home-actions .postcard-action { background: #f3f3ec; border-color: transparent; box-shadow: none; }
.home-actions .postcard-action:after { display: none; }
.home-actions .postcard-action:active { box-shadow: none; background: #eceee3; }
.home-actions .postcard-action-art { background: #fffefb; box-shadow: 1px 3px 5px #252a2d1a; }
.home-actions .postcard-action-art:before { background: var(--lemon); border: 0; box-shadow: 0 1px 3px #252a2d12; }
.home-actions .postcard-action-art img { border-color: transparent; }
.home-actions .tiny-postmark { color: var(--ink); background: var(--lemon); border: 0; box-shadow: none; font-weight: 600; }
.home-actions .home-action:focus-visible { outline-color: var(--red-ink); }
#invite .clear-signature { color: var(--muted); background: var(--paper); }
#invite .clear-signature>span { color: var(--ink); font-weight: 600; letter-spacing: .02em; }
#invite .clear-signature i { color: var(--red-ink); font-family: var(--sans); font-style: normal; }
#invite .clear-signature>p { letter-spacing: 0; }
.home-help-link { color: var(--muted); }
@media (hover:hover) and (pointer:fine) {
  #write-rsvp:hover { box-shadow: 0 5px 0 #d3352e,0 8px 16px #f2453d1a; }
  .home-actions .postcard-action:hover { background: #eceee3; box-shadow: 0 5px 12px #252a2d0b; }
  .postcard-action:hover .postcard-action-art { box-shadow: 1px 6px 8px #252a2d20; }
}

/* A personal letter on contemporary stationery. */
.public-letter-eyebrow { color: var(--red-ink); letter-spacing: .04em; }
#invite .public-letter-entry h2 { font-weight: 650; letter-spacing: -.02em; line-height: 1.4; }
.public-letter-entry-note { color: var(--muted); }
.public-letter-envelope { background: #f0f1e8; color: var(--ink); border: 1px solid #e0e3d6; border-radius: 6px; box-shadow: 0 4px 0 -1px #fffef9,0 5px 0 -1px #dce0d1,0 10px 16px #252a2d08; }
.public-envelope-fold { background: linear-gradient(152deg,transparent 49.7%,#d2d7c760 50%,#fffefb4d 50.3%,transparent 71%); }
.public-envelope-fold:before { background: #fffef97a; }
.public-envelope-address small { color: #62695f; }
.public-envelope-address strong { font-weight: 600; letter-spacing: .03em; }
.public-envelope-stamp { width: 48px; height: 48px; color: var(--ink); background: var(--lemon); border: 0; outline: none; border-radius: 50%; font-weight: 600; font-size: 12px; letter-spacing: .02em; }
.public-envelope-bottom>span:first-child { color: #62695f; }
.public-envelope-open { color: var(--red-ink); font-weight: 600; }
.public-letter-dialog { background: var(--paper); color: var(--ink); scrollbar-color: #ced2c6 var(--paper); }
.public-letter-dialog::backdrop { background: #202322b8; }
.public-letter-dialog.is-fallback-modal[open] { box-shadow: 0 0 0 100vmax #202322b8; }
.public-letter-toolbar { background: #fffcf4f5; border-color: var(--line); color: #62695f; }
.public-letter-progress { background: var(--red); }
.public-letter-meta { color: var(--muted); letter-spacing: .04em; }
.public-letter-meta>span { color: var(--red-ink); }
.public-letter-paper h2 { color: var(--red-ink); font-weight: 700; letter-spacing: -.025em; line-height: 1.4; }
.public-letter-copy { letter-spacing: 0; line-height: 2; }
.public-letter-copy .public-letter-heart { color: var(--red-ink); border-color: var(--red); font-weight: 600; letter-spacing: 0; }
.public-letter-signoff { color: var(--muted); }
.public-letter-signoff strong { color: var(--ink); font-weight: 650; letter-spacing: .02em; }
.public-letter-endmark { color: var(--red-ink); }
.public-letter-endmark span { background: var(--line); }
.public-letter-continue { background: var(--lemon); color: var(--ink); border: 0; border-radius: 12px; font-weight: 600; }
@media (hover:hover) {
  .public-letter-envelope:hover { box-shadow: 0 4px 0 -1px #fffef9,0 5px 0 -1px #dce0d1,0 15px 23px #252a2d12; }
}

/* Shared forms, day-of letters, details and photo albums. */
.primary-button { color: var(--paper); background: var(--red-ink); border-radius: 10px; font-weight: 600; letter-spacing: .02em; }
.primary-button:hover { background: #ad2b26; }
.sheet-dialog,.album-dialog { background: var(--paper); border-top: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -12px 70px #252a2d26; }
.sheet-dialog h2,.album-header h2,.receipt h1,.letter-content h1,.arrival h1 { font-weight: 650; letter-spacing: -.02em; }
.attendance-options span,#album-favorite,.note-entry-button { border-color: #d8dcd1; border-radius: 9px; }
.attendance-options input:checked+span { background: var(--lemon); border-color: #a4b25b; color: var(--ink); }
#guest-name,.stepper { border-color: #bec5b9; }
#guest-name::placeholder,.note-writing textarea::placeholder { color: var(--muted); }
.reply-stationery { background: var(--paper); background-image: none; color: var(--ink); box-shadow: 2px 10px 20px #252a2d0f; }
.reply-fold-shadow { border-top-color: #fffefb; border-bottom-color: #e1e5d7; background: none; }
#invite .clear-rsvp:is([data-reply-state=editing],[data-reply-state=folding],[data-reply-state=kept]) { background: var(--paper) !important; border-color: #d8dcd1; border-radius: 14px; box-shadow: none; }
.reply-envelope-top,.reply-kept-top,.reply-envelope-address>span { color: var(--muted); }
.reply-pull,.reply-edit,.reply-kept-top { border-color: #d8dcd1; }
.reply-ink-stamp { color: var(--red-ink); border-color: var(--red-ink); outline-color: var(--red-ink); }
.reply-kept h3,.reply-kept-title { font-weight: 650; }
.detail-date>span { color: var(--red-ink); }
.calendar-download,.reply-paper .text-button,.underlined,.voice-signature b,.voice-restart { border-color: #bec5b9; }
.calendar-download { color: var(--red-ink); }
.album-paper-behind { background: var(--lemon); }
.album-viewer,.album-grid button,.album-thumbs button { background: #fffefb; }
.album-viewer>img,.letter-photo.has-selected-photo { background: #f0f1e8; }
.album-back { background: var(--paper); }
.album-thumbs { scrollbar-color: #c1c8b8 transparent; }
#album-favorite[aria-pressed=true] { background: var(--lemon); color: var(--ink); border-color: #a4b25b; }
.photo-dialog,.photo-dialog::backdrop { background: #202322; }
.photo-tools { background: #202322ed; }
.photo-dialog [aria-pressed=true] { color: var(--lemon); }
.reply-paper,.personal-letter,.kept-paper,.seat-paper { background: var(--paper); border-color: var(--line); }
.reply-paper-top,.seat-paper { border-color: var(--line); }
.note-entry-button:hover { background: #f0f1e8; }
.note-writing textarea { border-color: #bec5b9; background-image: repeating-linear-gradient(transparent 0,transparent 31px,#d9dfd470 31px,#d9dfd470 32px); }
.kept-paper:after { background: linear-gradient(176deg,#eff1e6 48%,#d9dfce 49%,#fffefb 51%); }
.voice-progress,.voice-progress::-webkit-progress-bar { background: #dfe4d5; }
.ritual-preview-controls,.voice-preview input::file-selector-button { border-color: #d8dcd1; }
.envelope-back { background: #de3932; }
.envelope-flap,.envelope-front { background: var(--red); color: #211715; }
.paper-fold { background: linear-gradient(145deg,transparent 49.6%,#c6322c55 49.9%,#f8564e 50.5%); }
.post-stamp { background: var(--lemon); color: var(--ink); outline-color: var(--red); }
.pull-tab { background: var(--lemon); color: var(--ink); }
.home-open-button { background: var(--red-ink); border-color: var(--red-ink); color: var(--paper); }
.home-open-button:hover { background: #ad2b26; border-color: #ad2b26; }
.arrival-day-guide,.arrival-day-guide button { color: var(--red-ink); border-color: var(--line); }
.preview-tools,.preview-tools .utility-bar,.preview-label { color: var(--muted); }
.preview-tools .replay { border-color: #bec5b9; }
.time-switch { background: #e7ebdf; }
.time-switch [aria-pressed=true] { background: var(--paper); color: var(--red-ink); }

@media (max-height:650px) {
  .opening-cover-title { font-size: 49px; }
  .opening-seal-face { font-size: 15px; }
  .opening-seal-face:after { font-size: 21px; }
  .opening-cover-names { font-size: 13px; }
}
@media (max-width:360px) {
  .hero-edition { font-size: 13px; }
  .venue-map .venue-map-copy>strong { font-size: 17px; }
  .public-envelope-stamp { width: 42px; height: 42px; font-size: 11px; }
}
@media (max-height:430px) {
  .opening-cover-title { font-size: 34px; }
  .opening-cover-title:after { height: 3px; border-width: 2px; margin-top: 7px; }
  .opening-seal-face { font-size: 11px; }
  .opening-seal-face:after { font-size: 15px; }
  .opening-dedication { font-size: 8px; }
  .opening-cover-names,.opening-cover-date { font-size: 9px; }
}