@font-face { font-family: 'Cormorant Garamond'; font-weight: 400; font-display: block; src: url(assets/fonts/CormorantGaramond-normal-400-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 400; font-display: block; src: url(assets/fonts/CormorantGaramond-normal-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 500; font-display: block; src: url(assets/fonts/CormorantGaramond-normal-500-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 500; font-display: block; src: url(assets/fonts/CormorantGaramond-normal-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 600; font-display: block; src: url(assets/fonts/CormorantGaramond-normal-600-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 600; font-display: block; src: url(assets/fonts/CormorantGaramond-normal-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: block; src: url(assets/fonts/CormorantGaramond-italic-400-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: block; src: url(assets/fonts/CormorantGaramond-italic-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: block; src: url(assets/fonts/CormorantGaramond-italic-500-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: block; src: url(assets/fonts/CormorantGaramond-italic-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root { --ink: #2a2521; --ink2: #6a6157; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: #ebe9e4; }
body { font-family: 'Cormorant Garamond', Georgia, serif; font-variant-numeric: lining-nums; color: var(--ink); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* linen tablecloth, soft window light */
.table { position: fixed; inset: 0; background: radial-gradient(110% 80% at 30% 18%, #ebe6dd 0%, #ddd5c8 55%, #c8beae 100%); }
.table::before { content: ''; position: absolute; inset: 0; background-image: var(--grain), repeating-linear-gradient(0deg, rgba(95,82,60,.035) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(95,82,60,.03) 0 1px, transparent 1px 3px); }

/* design stage 400x800, scaled to fit the viewport (no scroll); .cam is the camera inside it */
/* WebGL envelope and lace live on a full-window canvas under the DOM stage */
.gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; display: block; }
.stage { z-index: 2; position: fixed; left: 50%; top: 50%; width: 400px; height: 800px; margin: -400px 0 0 -200px; transform: scale(var(--s, 1)); opacity: 0; }
.cam { position: absolute; inset: 0; transform-origin: 200px 420px; perspective: 1500px; perspective-origin: 200px 380px; }
.cam > * { position: absolute; }
.anim .cam, .anim .intro > *, .anim .rv, .anim .cal, .anim .bar, .anim .divider { will-change: transform, opacity; }

.intro { left: 0; right: 0; top: 108px; text-align: center; color: #5b5148; z-index: 1; }
.intro > * { position: relative; }
.intro-kicker { font-size: 11px; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; padding-left: .34em; }
.intro-names { margin-top: 14px; display: flex; justify-content: center; align-items: flex-end; height: 60px; }
.intro-names svg { display: block; }
.intro-names #iAmp { margin: 0 -2px; }
.intro-date { margin-top: 14px; font-size: 13px; font-weight: 500; letter-spacing: .4em; padding-left: .4em; }

/* the invitation card */
.card { left: 0; top: 0; width: 384px; height: 644px; z-index: 3; transform-origin: 50% 50%; }
.lace-wrap { position: absolute; inset: 0; }
.lace { position: absolute; left: -2px; top: -20px; width: 388px; height: 684px; }
.gl-on .lace-wrap { display: none; }
.gl-on .paper { box-shadow: none; }
.paper { position: absolute; left: 22px; top: 22px; width: 340px; height: 600px; padding: 28px 22px 0; text-align: center; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  background-color: #faf8f3;
  background-image: var(--grain), repeating-linear-gradient(0deg, rgba(110,95,70,.032) 0 1px, transparent 1px 2.6px), repeating-linear-gradient(90deg, rgba(110,95,70,.028) 0 1px, transparent 1px 2.6px), linear-gradient(160deg, #fdfcf9, #f5f2eb);
  box-shadow: 0 0 0 .5px rgba(80,60,40,.16), 0 1px 1.5px rgba(40,25,10,.22), 0 3px 6px rgba(40,25,10,.12); }

.cal svg { display: block; overflow: visible; }
.names { display: flex; flex-direction: column; align-items: center; }
.names #cSofia { margin-left: -64px; }
.names #cAmp { margin: -18px 0 -13px 76px; }
.names #cNikita { margin-left: 56px; }
.lead { margin-top: 16px; font-size: 11.5px; font-weight: 600; letter-spacing: .13em; line-height: 1.65; text-transform: uppercase; color: #3b352f; }
.lead span, .date span { display: block; }
.date { margin-top: 18px; display: flex; align-items: center; font-size: 29px; font-weight: 500; letter-spacing: .06em; line-height: 1; }
.date span { display: inline-block; }
.date .bar { display: inline-block; width: 1px; height: 24px; margin: 0 .5em 0 .44em; background: #b9ae9f; }
.city { margin-top: 9px; font-size: 10.5px; font-weight: 600; letter-spacing: .36em; text-transform: uppercase; color: var(--ink2); padding-left: .36em; }
.program { margin-top: 14px; width: 100%; display: grid; grid-template-columns: 1fr 1fr; position: relative; }
.divider { position: absolute; left: 50%; top: 14px; bottom: 4px; width: 1px; background: linear-gradient(transparent, #d6cec2 20%, #d6cec2 80%, transparent); transform-origin: 50% 0; }
.program section { padding: 0 2px; display: flex; flex-direction: column; align-items: center; }
.program h2 { height: 32px; }
.time { margin-top: 2px; font-size: 15px; font-weight: 600; letter-spacing: .12em; }
.kind { margin-top: 4px; font-size: 8.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink2); }
.venue { margin-top: 1px; font-size: 15px; font-style: italic; font-weight: 500; line-height: 1.2; }
.addr { margin-top: 3px; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #4a433c; }
.maps { margin-top: 8px; display: flex; justify-content: center; gap: 10px; white-space: nowrap; }
.maps a { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 1px solid #d9d1c4; padding-bottom: 1px; }
.maps a:hover { border-color: var(--ink); }
.maps img { width: 16px; height: 16px; flex: none; object-fit: contain; }
.dress { margin-top: 12px; display: flex; flex-direction: column; align-items: center; }
.dress-row { display: flex; align-items: center; gap: 12px; }
.dress h2 { height: 28px; margin-top: -4px; }
.dress-what { display: flex; gap: 5px; padding: 4px 0 4px 12px; border-left: 1px solid #d6cec2; }
.dress-what .sw { width: 12px; height: 12px; }
.sw { width: 13px; height: 13px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 .5px rgba(60,40,20,.28), 0 1px 1.5px rgba(40,25,10,.18); }
.dress-names { margin-top: 3px; font-size: 8.5px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--ink2); }
.pill { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 15px 0 12px; border: 0; border-radius: 15px; cursor: pointer;
  background: #1f1b18; color: #f6f0e6; font: 600 9.5px/1 'Cormorant Garamond', Georgia, serif; letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 1px 2px rgba(30,20,10,.25), 0 4px 10px rgba(30,20,10,.14); position: relative; overflow: hidden; transition: background-color .25s ease, box-shadow .25s ease; }
.pill svg { flex: none; margin-top: -1px; }
.pill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,248,235,.32) 50%, transparent 65%); transform: translateX(var(--gl, -120%)); }
.pill:hover { background: #352e28; box-shadow: 0 1px 2px rgba(30,20,10,.25), 0 6px 14px rgba(30,20,10,.2); }
.pill:active { transform: translateY(.5px); }
.pill:focus-visible { outline: 1px solid #1f1b18; outline-offset: 3px; }
.cta { margin-top: 10px; display: flex; gap: 8px; justify-content: center; }
.pill.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(42,37,33,.55); }
.pill.ghost:hover { background: rgba(42,37,33,.06); box-shadow: inset 0 0 0 1px var(--ink); }
.pill.ghost::after { display: none; }
.sign { margin-top: auto; margin-bottom: 13px; display: flex; align-items: center; justify-content: center; gap: 11px; }
.org-link { display: flex; align-items: center; gap: 7px; padding: 1px 0 1px 11px; border: 0; border-left: 1px solid #d6cec2; background: none; cursor: pointer;
  color: var(--ink); text-align: left; font-family: 'Cormorant Garamond', Georgia, serif; }
.org-link img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px #fff, 0 0 0 2.6px #d9cfc1; }
.org-link span { display: flex; flex-direction: column; }
.org-link small { font-size: 8px; font-weight: 600; line-height: 1; letter-spacing: .17em; text-transform: uppercase; color: var(--ink2); }
.org-link b { margin-top: 2px; font-size: 15px; font-weight: 500; line-height: 1; }
.org-link i { margin-top: 3px; font-size: 10.5px; font-weight: 500; line-height: 1.1; color: var(--ink2); }
.org-link:hover b { text-decoration: underline; text-decoration-color: #c9bfb1; text-underline-offset: 2px; }

/* shadows of leaves from a window, drifting */
.leaves { position: fixed; z-index: 30; pointer-events: none; width: min(78vh, 80vw); height: min(78vh, 80vw); opacity: .085; filter: blur(5px); mix-blend-mode: multiply; will-change: transform; }
.leaves svg { width: 100%; height: 100%; display: block; }
.leaves-a { top: -4vh; right: -6vw; transform-origin: 100% 0; animation: sway 9s ease-in-out infinite alternate; }
.leaves-b { bottom: -6vh; left: -8vw; transform-origin: 0 100%; rotate: 180deg; opacity: .06; animation: sway 11s ease-in-out -4s infinite alternate; }
@keyframes sway { from { transform: rotate(-1.4deg); } to { transform: rotate(1.6deg) translate(-8px, 5px); } }

@media (prefers-reduced-motion: reduce) {
  .leaves { animation: none; }
}


/* dress code examples: a dialog in the top layer (outside the transformed stage) */
.dc { margin: auto; padding: 0; border: 0; background: transparent; max-width: none; max-height: none; width: min(92vw, 440px); overflow: visible; color: var(--ink); }
.dc::backdrop { background: rgba(38,28,18,.42); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); opacity: 0; transition: opacity .35s ease; }
.dc.show::backdrop { opacity: 1; }
.dc-paper { border-radius: 6px; position: relative; padding: 22px 20px 18px; text-align: center; max-height: 94dvh; display: flex; flex-direction: column; align-items: center;
  background-color: #faf8f3;   /* the inner frame is drawn in the background so it stays put while a long dialog scrolls */
  background-image: linear-gradient(#e3dbcf, #e3dbcf), linear-gradient(#e3dbcf, #e3dbcf), linear-gradient(#e3dbcf, #e3dbcf), linear-gradient(#e3dbcf, #e3dbcf),
    var(--grain), linear-gradient(160deg, #fdfcf9, #f4f0e8);
  background-size: calc(100% - 14px) 1px, calc(100% - 14px) 1px, 1px calc(100% - 14px), 1px calc(100% - 14px), auto, auto;
  background-position: 7px 7px, 7px calc(100% - 7px), 7px 7px, calc(100% - 7px) 7px, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat;
  box-shadow: 0 0 0 .5px rgba(80,60,40,.18), 0 2px 4px rgba(40,25,10,.18), 0 24px 60px rgba(30,18,6,.35);
  opacity: 0; transform: translateY(14px) scale(.97); transition: opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1); }
.dc.show .dc-paper { opacity: 1; transform: none; }
.dc-x { position: absolute; right: 8px; top: 8px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: none; color: #5d544b; cursor: pointer; border-radius: 50%; z-index: 1; }
.dc-x:hover { background: rgba(60,45,30,.07); color: var(--ink); }
.dc-x:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.dc-title svg { display: block; overflow: visible; }
.dc-text { margin-top: 12px; width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 12px; }
.dc-lead { font-size: 17px; font-style: italic; line-height: 1.35; color: var(--ink); }
.dc-text section, .dc-end { padding-top: 13px; border-top: 1px solid #ece5da; }
.dc-text section { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.dc-text section p { font-size: 16px; line-height: 1.4; color: var(--ink); }
.dc-text .who { display: block; margin-bottom: 1px; font-size: 14px; color: var(--ink2); }
.dc-pal { list-style: none; width: 100%; margin-top: 2px; display: flex; flex-wrap: wrap; justify-content: center; row-gap: 12px; }
.dc-pal li { width: 25%; }
.dc-pal li { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; line-height: 1.1; color: var(--ink2); }
.dc-pal .sw { width: 24px; height: 24px; }
.dc-text section .dc-note { font-size: 14px; font-style: italic; color: var(--ink2); }
.dc-end { font-size: 17px; font-style: italic; line-height: 1.35; color: var(--ink); }
.dc-sub { margin-top: 4px; display: flex; align-items: center; gap: 9px; font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); }
  font: 600 10px/1 'Cormorant Garamond', Georgia, serif; letter-spacing: .16em; text-transform: uppercase; transition: color .3s ease; }
  box-shadow: 0 0 0 1px #e7e0d4, 0 2px 4px rgba(40,25,10,.08), 0 10px 22px rgba(40,25,10,.12); }
@media (prefers-reduced-motion: reduce) { .dc-paper, .dc::backdrop { transition: none; } }


/* organiser + questionnaire dialogs (same paper as the dress code one) */
.dc.rs .dc-paper, .dc.dress-dc .dc-paper { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.org-photo { margin-top: 12px; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px #fff, 0 0 0 5px #e3dbcf, 0 6px 16px rgba(40,25,10,.16); }
.org-name { margin-top: 10px; font-size: 22px; font-weight: 500; line-height: 1; }
.org-note { margin-top: 10px; max-width: 270px; font-size: 16px; font-style: italic; line-height: 1.35; color: var(--ink); }
.org-rows { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 260px; }
.org-rows .row { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-radius: 20px; text-decoration: none; color: var(--ink);
  font-size: 16px; font-weight: 500; box-shadow: inset 0 0 0 1px #e3dbcf; background: rgba(255,255,255,.5); }
.org-rows .row:hover { box-shadow: inset 0 0 0 1px #b9ae9f; }
.org-rows .row svg, .org-rows .row img { flex: none; width: 16px; height: 16px; }
.org-rows .row img[src*="instagram"] { padding: .5px; }
.org-rows.small { flex-direction: row; flex-wrap: wrap; justify-content: center; max-width: none; gap: 6px; margin-top: 8px; }
.org-rows.small .row { height: 32px; padding: 0 11px; font-size: 13.5px; gap: 7px; }

.rs-form { margin-top: 12px; width: 100%; text-align: left; display: flex; flex-direction: column; gap: 12px; }
.fld { display: flex; flex-direction: column; gap: 8px; border: 0; min-width: 0; }
.rs-form .fld { padding-bottom: 14px; border-bottom: 1px solid #ece5da; }
.q { display: flex; align-items: baseline; gap: 8px; padding: 0; font-size: 17px; font-weight: 500; line-height: 1.2; color: var(--ink); }
.q b { flex: none; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; color: #a39684; }
.q i { font-style: italic; font-size: 13px; color: #9a8f82; }
.fld .sub { font-size: 13px; font-style: italic; color: var(--ink2); margin-top: 2px; }
.lbl { font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); padding: 0; }
.lbl i { font-style: normal; letter-spacing: .08em; text-transform: none; font-size: 12px; font-weight: 500; color: #9a8f82; margin-left: 4px; }
.fld input:not([type]), .fld textarea { width: 100%; font: 500 16px/1.3 'Cormorant Garamond', Georgia, serif; color: var(--ink); padding: 9px 12px;
  border: 0; border-radius: 10px; background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px #ddd4c7; outline: none; resize: vertical; }
.fld input:not([type]):focus, .fld textarea:focus { box-shadow: inset 0 0 0 1.5px var(--ink); background: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 20px; font-size: 16px; font-weight: 500; white-space: nowrap;
  box-shadow: inset 0 0 0 1px #d9d0c3; background: rgba(255,255,255,.55); transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.chips input:checked + span { background: #1f1b18; color: #f6f0e6; box-shadow: none; }
.chips input:focus-visible + span { outline: 1px solid var(--ink); outline-offset: 2px; }
.if-yes, .if-pair, .if-other { display: none; }
.rs-form.yes .if-yes { display: contents; }
.rs-form.yes.pair .if-pair, .rs-form.yes.other .if-other { display: flex; }
.rs-err { min-height: 0; font-size: 14px; font-style: italic; color: #8a2f22; text-align: center; }
.rs-err:empty { display: none; }
.rs-send { align-self: center; height: 40px; padding: 0 28px; font-size: 10.5px; }
.rs-send[disabled] { opacity: .6; cursor: default; }
.rs-done { margin-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rs-done[hidden], .rs-form[hidden] { display: none; }
.rs-done .cal svg { display: block; }
.rs-done-text { font-size: 17px; font-style: italic; line-height: 1.35; max-width: 280px; }
.rs-org { margin-top: 18px; padding-top: 14px; border-top: 1px solid #e3dbcf; width: 100%; display: flex; flex-direction: column; align-items: center; }