/* Bright white surfaces, fine outlines and a single red action accent. */
:root { --red:#f42c26; --red-ink:#b52a27; --deep-red:#b52a27; --ceremony-red:#f42c26; --pink:#ffc4d2; --lemon:var(--pink); --muted:#79727a; --line:#eee5e8; --module-gap:12px; --module-radius:20px; }
::selection { color:var(--ink); background:var(--pink); }
#invite .hero-edition .hero-edition-mark { color:var(--red-ink); font-size:27px; }
#invite .invite-paper { --paper:#fff; --cream:#fff; --home-surface:#fcfcfc; padding:18px 16px 0; background:var(--home-surface); color:#302d2c; }
#invite .clear-wedding-info { margin:0; padding:23px 22px 20px; border:0; border-radius:22px; background:#fff2f5; text-align:left; }
#invite .wedding-information:before,#invite .wedding-information:after { display:none; }
.wedding-card-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.info-eyebrow { display:flex; align-items:center; gap:7px; margin:0; font:11px/1.6 var(--sans); color:#8e4c5a; letter-spacing:.05em; }
.wedding-card-heading .info-eyebrow:before { content:''; width:17px; height:2px; border-radius:2px; background:var(--red); }
.wedding-location { color:#8e7078; font:11px/1.6 var(--sans); letter-spacing:.08em; white-space:nowrap; }
.wedding-card-date { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin:23px 0 20px; }
#invite #wedding-info { margin:0; font:650 28px/1.45 var(--sans); letter-spacing:-.03em; text-align:left; }
#invite #wedding-info time { display:flex; flex-direction:column; gap:7px; }
.wedding-date-year { color:#9a727c; font:500 11px/1.6 var(--sans); letter-spacing:.18em; }
#invite #wedding-info time>strong { font:650 clamp(42px,12.2cqw,61px)/1 var(--sans); letter-spacing:-.065em; color:#8f283d; white-space:nowrap; }
#invite #wedding-info time>strong>span { display:inline-block; margin:0 7px; color:#c98796; font-size:.58em; font-weight:350; vertical-align:4px; }
.clear-wedding-time { margin:0 0 1px; font:12px/1.9 var(--sans); color:#856f77; text-align:right; white-space:nowrap; }
.clear-wedding-time>strong { display:inline-block; margin-top:6px; color:#3f3037; font:650 21px/1.5 var(--sans); letter-spacing:-.035em; }
.clear-wedding-time>span { display:block; margin:1px 0 0; color:#927681; font-size:10px; }
.wedding-destination { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:16px 0 14px; border-top:1px solid #ecd8de; }
.wedding-destination>span { color:#927681; font:11px/1.7 var(--sans); }
.wedding-destination>strong { color:#852a3e; font:650 26px/1.4 var(--sans); letter-spacing:.03em; }
.venue-map { grid-template-columns:18px minmax(0,1fr) 43px; gap:9px; min-height:83px; padding:0; border:0; }
.venue-pin { width:17px; height:26px; stroke:#ba687b; }
.venue-map .venue-map-copy { gap:4px; }
.venue-map .venue-map-copy>strong { color:#49333d; font-size:17px; }
.venue-map-copy>.venue-hall { color:#9c596b; font-size:12px; }
.venue-map .venue-map-copy>span { display:block; color:#79636c; font:11px/1.7 var(--sans); letter-spacing:0; }
.venue-map .venue-map-action { min-width:43px; min-height:48px; padding:6px 4px; border:0; border-radius:12px; color:#a0475e; background:#fff; box-shadow:none; font-size:11px; }
.venue-map .venue-map-action:before { display:none; }
.venue-map .venue-map-action>span { font-size:19px; }

/* The reply remains the strongest action; filling happens on its own page. */
#invite .home-actions { margin:28px 0 0; padding:0; border:0; border-radius:0; background:transparent; }
.rsvp-module-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 3px 15px; }
#invite .invite-paper .rsvp-module-heading h2 { margin:0; font:650 21px/1.5 var(--sans); letter-spacing:0; }
.rsvp-module-heading>span { color:var(--muted); font:11px/1.5 var(--sans); }
#invite .home-actions #write-rsvp { min-height:95px; padding:17px 15px; display:grid; grid-template-columns:42px minmax(0,1fr) 27px; gap:12px; color:#fff; background:var(--red); border:0; border-radius:14px; box-shadow:none; }
#write-rsvp #rsvp-button-text { color:#fff; font:650 21px/1.4 var(--sans); letter-spacing:0; text-shadow:none; }
#write-rsvp .home-action-copy { gap:6px; }
#write-rsvp .home-action-copy>span { color:#fff; font:11px/1.6 var(--sans); }
#write-rsvp .home-action-arrow { width:27px; height:27px; background:#fff; color:#b52a27; border:0; border-radius:9px; box-shadow:none; font:21px/1 var(--sans); }
#write-rsvp .rsvp-action-art { width:42px; height:56px; transform:rotate(-6deg) scale(.72); transform-origin:left center; }
.craft-letter { border-color:#f1d6cd; background:#fff; }
.craft-letter>i { background:#d8a292; }
.craft-envelope { background:#ffe7df; border-color:#fff3ee; }
.craft-envelope:before { background:#fff; }
.craft-envelope:after { background:#fff1eb; }
.craft-wax-seal { color:#bd3b2f; background:#fff7f2; }
#invite .clear-rsvp:is([data-reply-state=editing],[data-reply-state=folding],[data-reply-state=kept]) { margin-top:0 !important; border:0; background:transparent !important; border-radius:0; box-shadow:none; }
.clear-rsvp .inline-rsvp-mount { display:none; }
.clear-rsvp .reply-kept { min-height:0; padding:4px 0 0; }
.clear-rsvp .reply-kept-top,.clear-rsvp .reply-ink-stamp,.clear-rsvp .reply-visit-note { display:none; }
.clear-rsvp .reply-kept h3 { font-size:22px; }
.reply-kept-status { color:var(--red-ink); }
.clear-rsvp .reply-kept-count { font-size:12px; }
.clear-rsvp .reply-kept-note { color:var(--muted); font-size:10px; }
.clear-rsvp .reply-edit { border:1px solid #e5e5e4; border-radius:12px; padding:12px 14px; background:#fff; color:#b52a27; }

/* A short invitation and the couple's existing IP, followed by four equal tap targets. */
.guest-interactions { margin-top:26px; }
.guest-interactions-heading { display:flex; justify-content:space-between; align-items:center; min-height:68px; gap:12px; margin:0 3px 15px; }
#invite .guest-interactions-heading h2 { margin:0; font:650 21px/1.5 var(--sans); letter-spacing:0; }
.guest-interactions-heading p { margin:5px 0 0; color:var(--muted); font:12px/1.6 var(--sans); }
.interaction-hosts { display:flex; align-items:center; flex-shrink:0; padding-right:2px; pointer-events:none; }
.interaction-hosts>span { position:relative; display:block; width:45px; height:45px; border-radius:50%; border:1px solid #ece9e6; background:#fff; }
.interaction-hosts>span+span { margin-left:-5px; transform:translateY(4px) rotate(6deg); background:#fff; }
.interaction-hosts img { position:absolute; left:2px; bottom:1px; width:42px; height:50px; object-fit:contain; object-position:center bottom; }
.guest-extras { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--module-gap); padding:0; margin:0; }
#invite .guest-extras .guest-extra-action { position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:0; width:100%; margin:0; min-width:0; min-height:164px; padding:20px 18px 16px; border:1px solid #e5e5e4; border-radius:var(--module-radius); color:#302d2c; background:#fff; box-shadow:0 2px 4px #20202003; text-align:left; -webkit-tap-highlight-color:transparent; transition:transform .18s,border-color .18s,box-shadow .18s,background-color .18s; isolation:isolate; }
#invite .guest-extras .guest-extra-action:before,#invite .guest-extras .guest-extra-action:after { display:none; }
#invite .guest-extras .album-home-entry { background:#fff; }
#invite .guest-extras .wish-entry { background:#fff; grid-column:auto; }
#invite .guest-extras .fortune-home-entry { background:#fff; }
#invite .guest-extras .guest-extra-action>strong { display:block; margin-top:16px; font:650 19px/1.5 var(--sans); letter-spacing:-.02em; }
.module-action-label { display:block; width:100%; margin-top:7px; color:#75716f; font:11px/1.6 var(--sans); }
.module-action-label i { position:absolute; top:18px; right:16px; display:grid; place-items:center; width:25px; height:25px; border:1px solid #ebe7e4; border-radius:50%; color:#c04637; background:#fff; font:normal 18px/1 var(--sans); transition:transform .2s; }
.module-letter-art { position:relative; display:block; width:43px; height:42px; transform:rotate(-5deg); transition:transform .2s; }
.module-letter-art svg { position:absolute; width:43px; height:35px; bottom:0; stroke:#de7664; stroke-width:1.2; fill:#fffaf7; }
.module-letter-art b { position:absolute; display:grid; place-items:center; width:18px; height:18px; right:0; bottom:-1px; border-radius:50%; color:#fff; background:#f26854; font:11px/1 var(--sans); transform:rotate(8deg); }
.module-photo-art { position:relative; display:block; width:48px; height:42px; }
.module-photo-art img { position:absolute; width:31px; height:39px; padding:3px 3px 7px; background:#fff; border-radius:3px; object-fit:cover; object-position:center; box-shadow:0 2px 4px #713c2d18; transition:transform .2s; }
.module-photo-art img:first-child { left:0; top:1px; transform:rotate(-13deg); }
.module-photo-art img:last-child { left:15px; top:3px; transform:rotate(9deg); }
.wish-entry-art { position:relative; display:block; width:34px; height:42px; margin-left:3px; padding:8px 7px; border:1px solid #efdbd3; border-radius:3px; background:#fffdfa; transform:rotate(-6deg); box-shadow:3px 3px 0 #ffe8df; transition:transform .2s; }
.wish-entry-art:before { content:''; position:absolute; top:-4px; left:7px; width:23px; height:9px; background:#ffe2d8dc; transform:rotate(6deg); }
.wish-entry-art b { color:#d45c45; font:600 17px/1.1 var(--sans); }
.wish-entry-art i { display:block; height:1px; margin-top:4px; background:#efcfc2; }
.wish-entry-art i:last-child { width:65%; }
.fortune-entry-art { position:relative; display:grid; place-items:center; width:31px; height:29px; margin:13px 0 0 3px; border:0; border-radius:3px 3px 8px 8px; background:#f06a52; transform:rotate(5deg); transition:transform .2s; }
.fortune-entry-art b { position:relative; color:#fff; font:17px/1 var(--sans); }
.fortune-entry-art i { position:absolute; z-index:-1; top:-12px; left:5px; width:5px; height:16px; border:0; border-radius:2px; background:#ffe4d6; rotate:-9deg; }
.fortune-entry-art i:nth-child(2) { top:-16px; left:13px; height:20px; rotate:2deg; }
.fortune-entry-art i:nth-child(3) { left:21px; rotate:12deg; }
#invite .guest-extras .guest-extra-action:focus-visible { outline:2px solid var(--red-ink); outline-offset:4px; }
#invite .guest-extras .guest-extra-action:active { transform:scale(.97); border-color:#dfbfb5; background:#fffdfb; box-shadow:none; }
#invite .guest-extras .guest-extra-action:active .module-action-label i { transform:translate(2px,-2px); }
#invite .clear-signature { padding:28px 0 122px; background:transparent; }
#invite .clear-signature>span { font-size:17px; }
#invite .clear-signature>p { display:none; }
.home-help-link { margin-top:4px; font-size:11px; }

/* Subpages keep a clear way home and a clean white surface. */
#rsvp-dialog { width:min(100%,560px); max-width:100%; height:100vh; height:100dvh; max-height:100vh; max-height:100dvh; margin:0 auto; padding:0; border:0; border-radius:0; background:#fff; color:#292735; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
#rsvp-content { padding:0 24px max(25px,env(safe-area-inset-bottom)); }
#rsvp-dialog .rsvp-page-toolbar { position:sticky; z-index:2; top:0; min-height:68px; margin:0 -24px 24px; padding:max(10px,env(safe-area-inset-top)) 24px 10px; background:#fff; border:0; }
#rsvp-dialog .rsvp-page-toolbar .eyebrow { color:#747382; font:12px/1.6 var(--sans); letter-spacing:0; }
#rsvp-close { display:flex; align-items:center; gap:8px; min-width:68px; min-height:44px; margin:0; color:#292735; font:14px/1.5 var(--sans); }
#rsvp-close>span { font:22px/1 var(--sans); }
#rsvp-dialog h2 { margin:0; font:650 28px/1.4 var(--sans); }
#rsvp-dialog .form-intro { margin:10px 0 30px; color:#747382; font-size:13px; }
#rsvp-dialog .field-label { font-size:14px; }
#rsvp-dialog .field-label>span { font-size:11px; color:#747382; }
#rsvp-dialog #guest-name { min-height:48px; padding:12px 14px; border:0; border-radius:12px; background:#f5f5fa; font:16px/1.5 var(--sans); }
#rsvp-dialog #guest-name::placeholder { font:14px/1.5 var(--sans); color:#85808f; }
#rsvp-dialog .attendance-options { gap:9px; }
#rsvp-dialog .attendance-options span { height:86px; padding:12px; border:0; border-radius:12px; background:#f5f5fa; color:#575264; }
#rsvp-dialog .attendance-options input:checked+span { background:#ffdce9; color:#7d2947; }
#rsvp-dialog .attendance-options b { font-weight:600; }
#rsvp-dialog .attendance-options small { font-size:10px; opacity:1; }
#rsvp-dialog .stepper { border:0; border-radius:12px; background:#f5f5fa; }
#rsvp-dialog .stepper button { min-height:44px; }
#rsvp-dialog #guest-notes { border:0; border-radius:12px; background:#f5f5fa; }
#rsvp-dialog #guest-notes::placeholder { color:#85808f; }
#rsvp-dialog #guest-notes-help { color:#747382; }
#rsvp-dialog .primary-button { border:0; border-radius:14px; background:var(--red); color:#fff; }
#rsvp-storage-note { color:#747382; }
body.rsvp-page-open .music-dock,body.album-open .music-dock { visibility:hidden; pointer-events:none; }
#album-dialog { width:min(100%,590px); height:100vh; height:100dvh; max-height:100dvh; margin:0 auto; padding:24px 22px max(22px,env(safe-area-inset-bottom)); border:0; border-radius:0; background:#fff; }
#album-dialog .album-header h2 { font:650 26px/1.5 var(--sans); }
#album-close { display:flex; align-items:center; gap:9px; margin:0; color:#575264; font:13px/1.5 var(--sans); }
#album-close>span { font-size:24px; }
#album-dialog .album-toolbar { margin-top:18px; }
.public-letter-continue { border:0; border-radius:12px; background:#ffdce9; font-size:14px; }
.public-letter-back { display:block; min-height:44px; margin:13px auto 0; color:var(--muted); font:12px/1.7 var(--sans); text-decoration:underline; text-underline-offset:5px; }
.public-letter-back:focus-visible { outline:2px solid var(--red-ink); }

.rsvp-shortcut { position:fixed; z-index:48; left:max(17px,calc((100vw - 560px)/2 + 24px)); bottom:max(18px,calc(env(safe-area-inset-bottom) + 14px)); display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:46px; max-width:calc(100% - 120px); padding:10px 15px; color:#b52a27; background:#fff; border:1px solid #e4e1de; border-radius:14px; box-shadow:0 3px 12px #29211b0d; font:600 13px/1.6 var(--sans); animation:reply-shortcut-arrive .22s ease-out; }
.rsvp-shortcut>span:last-child { font-size:19px; }
.rsvp-shortcut:active { transform:translateY(2px); }
.rsvp-shortcut:focus-visible { outline:2px solid var(--red-ink); outline-offset:3px; }
.rsvp-shortcut[hidden],body:has(dialog[open]) .rsvp-shortcut { display:none; }
body:has(.rsvp-shortcut:not([hidden])) .preview-tools { bottom:max(74px,calc(env(safe-area-inset-bottom) + 70px)) !important; }

#fortune-dialog { --keepsake-lemon:var(--pink); --keepsake-on-red:#fffaf2; --fortune-red:#cf2925; }
#fortune-dialog .fortune-sticks i,#fortune-dialog .fortune-jar,#fortune-dialog .fortune-ticket,#fortune-dialog .fortune-stamp,#fortune-dialog .fortune-primary { color:#46292b; }
#fortune-dialog .fortune-jar-rim { background:#9c292a; }
#fortune-dialog .fortune-stamp { border-color:#b46069; outline-color:#b46069; }
#fortune-dialog .fortune-word { color:var(--red-ink); }
#fortune-dialog .fortune-ticket-top,#fortune-dialog .fortune-ticket-to { color:#46292b; }
#fortune-dialog .fortune-note,#fortune-dialog .fortune-signature small { color:#796b69; }
#fortune-dialog .fortune-primary:focus-visible { outline-color:#fffaf2; }
.time-switch { background:#ffe4ed; }
#album-favorite[aria-pressed=true] { border-color:#cc807c; }
.album-thumbs { scrollbar-color:#d9c4e7 transparent; }
.public-letter-toolbar { color:var(--muted); }
#postcard-dialog.wish-card-dialog { --postcard-red:var(--red-ink); --postcard-paper:#fff; --wish-pink:var(--pink); }
@keyframes reply-shortcut-arrive { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@media (hover:hover) and (pointer:fine) {
  #write-rsvp:hover { filter:brightness(1.04); box-shadow:none; }
  #invite .guest-extras .guest-extra-action:hover { transform:translateY(-3px); border-color:#dac9c1; box-shadow:0 5px 13px #32221b08; }
  .guest-extra-action:hover .module-action-label i { transform:translate(2px,-2px); }
  .album-home-entry:hover .module-photo-art img:first-child { transform:rotate(-18deg) translateX(-2px); }
  .album-home-entry:hover .module-photo-art img:last-child { transform:rotate(13deg) translateX(2px); }
}
@media (max-width:360px) {
  #invite .invite-paper { padding:14px 12px 0; }
  #invite .clear-wedding-info { padding:20px 17px 17px; }
  #invite .home-actions { padding:0; }
  #invite #wedding-info { font-size:25px; }
  .wedding-card-date { gap:9px; margin-top:20px; }
  #invite #wedding-info time>strong { font-size:44px; }
  #invite #wedding-info time>strong>span { margin:0 5px; }
  .clear-wedding-time { font-size:11px; }
  .clear-wedding-time>strong { font-size:20px; }
  .wedding-destination>strong { font-size:25px; }
  .wedding-destination>span { font-size:10px; }
  .venue-map { grid-template-columns:16px minmax(0,1fr) 38px; gap:8px; }
  .venue-map .venue-map-action { min-width:38px; }
  .venue-map .venue-map-copy>span { font-size:11px; }
  #invite .invite-paper .rsvp-module-heading h2 { font-size:20px; }
  #invite .home-actions #write-rsvp { padding:15px 12px; grid-template-columns:33px minmax(0,1fr) 24px; gap:10px; min-height:86px; }
  #write-rsvp #rsvp-button-text { font-size:19px; }
  #write-rsvp .home-action-copy>span { font-size:10px; }
  #write-rsvp .rsvp-action-art { width:33px; transform:rotate(-6deg) scale(.57); }
  #write-rsvp .home-action-arrow { width:24px; height:24px; font-size:19px; }
  #invite .guest-extras .guest-extra-action { min-height:157px; padding:18px 15px 14px; }
  #invite .guest-extras .guest-extra-action>strong { font-size:18px; }
  .module-action-label { font-size:10px; }
  .module-action-label i { width:23px; height:23px; font-size:17px; }
  #invite .guest-interactions-heading h2 { font-size:20px; }
  .guest-interactions-heading p { font-size:11px; }
  .venue-map .venue-map-copy>strong { font-size:16px; }
  #rsvp-content { padding-left:20px; padding-right:20px; }
  #rsvp-dialog .rsvp-page-toolbar { margin-left:-20px; margin-right:-20px; padding-left:20px; padding-right:20px; }
  #rsvp-dialog .attendance-options span { padding:11px 9px; }
  #album-dialog { padding-left:18px; padding-right:18px; }
}
@media (prefers-reduced-motion:reduce) {
  .rsvp-shortcut { animation:none; }
  #invite .guest-extras .guest-extra-action,.module-action-label i,.module-letter-art,.module-photo-art img,.wish-entry-art,.fortune-entry-art { transition:none; }
}