@font-face{font-family:Source;src:url('fonts/source-serif.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Source;src:url('fonts/source-serif-italic.woff2') format('woff2');font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:Symphony;src:url('fonts/symphony.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Lathusca;src:url('fonts/awesome-lathusca.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Anca;src:url('fonts/anka-coder.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}

:root{
  --wine:#5b1522;
  --wine-dark:#3e0d17;
  --cream:#f9f6ef;
  --gold:#bd8f54;
  color:var(--wine);
  background:#19070c;
  font-family:Source;
  font-synthesis:none;
}

*{box-sizing:border-box}
html{background:#19070c}
body{margin:0;min-width:320px;background:#19070c;overflow-x:hidden}
body.modal-open{overflow:hidden}
img{display:block;max-width:100%}
button,input{font:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
h1,h2,p{margin:0}
.sr-only,.design-description{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.invitation-canvas{width:min(100%,1080px);margin:0 auto;background:var(--wine);box-shadow:0 0 80px rgb(0 0 0 / 48%)}
.language-switch{position:fixed;z-index:20;top:max(12px,env(safe-area-inset-top));right:max(12px,calc((100vw - min(100vw,1080px))/2 + 12px));display:flex;overflow:hidden;border:1px solid rgb(249 246 239 / 72%);border-radius:999px;background:rgb(62 13 23 / 86%);box-shadow:0 5px 18px rgb(0 0 0 / 20%);backdrop-filter:blur(8px)}
.language-switch button{width:48px;height:44px;border:0;background:transparent;color:var(--cream);font-family:Anca;font-size:14px;letter-spacing:.05em}
.language-switch button[aria-pressed="true"]{background:var(--cream);color:var(--wine)}
.design{position:relative;width:100%;aspect-ratio:1080/6571;overflow:hidden}
.design-image{width:100%;height:auto}

.rsvp-hotspot{position:absolute;z-index:2;left:30%;width:39.1%;height:1.3%;border:0;border-radius:1vw;background:transparent;color:transparent}
.rsvp-hotspot:hover{box-shadow:0 0 0 3px rgb(249 246 239 / 28%)}
.rsvp-hotspot:focus-visible{outline:4px solid var(--gold);outline-offset:5px}
.rsvp-yes{top:53.63%}
.rsvp-no{top:55.75%}
.rsvp-maybe{top:57.85%}
.download-invitation{position:absolute;z-index:3;top:97.5%;left:50%;display:flex;width:min(68%,380px);height:clamp(44px,6vw,68px);align-items:center;justify-content:center;transform:translateX(-50%);border:1px solid rgb(249 246 239 / 82%);background:rgb(62 13 23 / 22%);color:var(--cream);font-family:Anca;font-size:clamp(12px,1.7vw,17px);letter-spacing:.045em;text-align:center;text-decoration:none;transition:background-color 180ms ease,color 180ms ease,transform 180ms ease}
.download-invitation:hover,.download-invitation:focus-visible{transform:translateX(-50%) translateY(-2px);background:var(--cream);color:var(--wine)}
.download-invitation:active{transform:translateX(-50%) translateY(1px)}

dialog{width:min(92vw,490px);max-height:90svh;overflow:auto;border:1px solid rgb(91 21 34 / 30%);border-radius:2px;padding:47px 32px 28px;color:var(--wine);background:var(--cream);box-shadow:0 28px 110px rgb(0 0 0 / 50%);font-family:Source}
dialog::backdrop{background:rgb(25 7 12 / 78%);backdrop-filter:blur(5px)}
.close{position:absolute;right:9px;top:5px;width:44px;height:44px;border:0;background:transparent;color:var(--wine);font-family:Source;font-size:32px;line-height:1}
dialog h2{margin:0 0 26px;font:400 48px/1 Symphony;text-align:center}
fieldset{margin:0 0 23px;padding:0;border:0}
.form-replies{display:flex;gap:8px}
.form-replies label{position:relative;flex:1;cursor:pointer;text-align:center}
.form-replies input{position:absolute;opacity:0}
.form-replies span{display:block;border:1px solid rgb(91 21 34 / 48%);padding:11px 2px;background:rgb(249 246 239 / 72%);font-family:Anca;font-size:15px}
.form-replies input:checked+span{background:var(--wine);color:var(--cream)}
.form-replies input:focus-visible+span{outline:3px solid var(--gold);outline-offset:3px}
.field{display:block;margin-bottom:20px;font-size:16px}
.field span{display:block;margin-bottom:7px}
.field input{width:100%;padding:12px;border:1px solid rgb(91 21 34 / 46%);border-radius:0;background:#fffdf8;color:var(--wine);font-family:Source;font-size:18px}
.update-note{min-height:42px;margin-bottom:20px;font-size:15px;line-height:1.4}
.submit{width:100%;border:1px solid var(--wine);padding:13px;background:var(--wine);color:var(--cream);font-family:Anca;font-size:17px}
.submit:disabled{cursor:wait;opacity:.65}
#form-status{margin-top:15px;font-size:16px;line-height:1.4}
#form-status:empty{display:none}
.noscript{position:fixed;z-index:30;right:0;bottom:0;left:0;padding:12px;background:var(--cream);color:var(--wine);text-align:center}

@media(max-width:520px){
  dialog{padding:46px 22px 24px}
  .form-replies{gap:5px}
  .form-replies span{font-size:13px}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}
