
*, *::before, *::after{box-sizing:border-box}
html{min-width:0;min-height:100%;overflow-x:clip}
body{min-width:0;margin:0;background:#e7e6e3;color:#29332d;overflow-x:clip}
.stage{min-height:100svh;display:grid;place-items:center;padding:28px 12px}
.invite{--bg:#f8f3ec;--paper:#fcfaf5;--ink:#393b34;--gold:#a38866;--muted:#74746b;--line:#bead8c;--soft:#eee5d6;--name-font:'Marck Script',cursive;--serif-font:'Cormorant Garamond',Georgia,serif;--name-scale:1;--art-hue:0deg;--art-saturate:1;--art-opacity:.95;position:relative;isolation:isolate;overflow:hidden;width:min(620px,100%);aspect-ratio:1055/1491;container-type:inline-size;color:var(--ink);background:var(--bg);box-shadow:0 25px 85px #16110b21;font-family:var(--serif-font)}
.canvas-layer,.watercolor,.ornaments,.composition{position:absolute;inset:0;width:100%;height:100%}
.canvas-layer{z-index:0;pointer-events:none;background:var(--paper)}
.watercolor{z-index:1;pointer-events:none;object-fit:cover;opacity:var(--art-opacity);filter:hue-rotate(var(--art-hue)) saturate(var(--art-saturate));}
.ornaments{z-index:2;pointer-events:none}
.ornaments .stroke{fill:none;stroke:var(--line);stroke-width:2.5}
.ornaments .stroke.fine{stroke-width:2}
.ornaments .stroke.finer{stroke-width:1.25}
.ornaments .stroke.faint{opacity:.38}
.ornaments .fillsoft{fill:var(--soft);opacity:.24}
.ornaments .leafline{fill:none;stroke:var(--gold);stroke-width:2}
.composition{z-index:3;text-align:center;pointer-events:none}
.composition > *{position:absolute;margin:0;left:50%;transform:translateX(-50%);max-width:85%;}
.headline{top:18%;width:78%;font-size:3.6cqw;font-weight:500;line-height:1.35;letter-spacing:.3em;text-transform:uppercase}
.names{top:31%;width:90%;display:flex;align-items:center;flex-direction:column;color:var(--ink);font-family:var(--name-font);font-weight:400;font-size:calc(14cqw * var(--name-scale));line-height:1.07}
.names .person{display:block;max-width:100%;overflow-wrap:anywhere}
.names .amp{display:block;color:var(--gold);font-family:var(--serif-font);font-size:.65em;line-height:.74;font-style:italic;margin:-.04em 0 -.06em}
.date{top:61%;width:86%;font:400 5.1cqw/1.2 var(--serif-font);letter-spacing:.16em}
.schedule{top:72%;width:88%;display:flex;flex-direction:column;gap:.9cqw;font:400 3.8cqw/1.2 var(--serif-font);letter-spacing:.1em}
.venue{top:81%;width:76%;font:500 3.7cqw/1.26 var(--serif-font);letter-spacing:.07em}
.closing{top:89%;width:78%;font:italic 4.2cqw/1.17 var(--serif-font)}
.divider{top:68%;display:flex;align-items:center;justify-content:center;gap:1.8cqw;color:var(--gold);font:400 3.8cqw/1 Georgia,serif}
.divider i{display:block;width:10cqw;height:1px;background:currentColor;opacity:.8}
.star-divider{top:24%;font:400 4.5cqw/1 var(--serif-font);color:var(--gold)}
.micro{font:500 2.6cqw/1.1 'Montserrat',sans-serif;letter-spacing:.24em;text-transform:uppercase}
.monogram{top:10%;color:var(--gold)}
.side-note{display:none}
.bottom-note{bottom:5%;width:80%;color:var(--muted);font-size:2.0cqw}
.signature{bottom:2.2%;max-width:70%;font:400 2cqw/1.2 Arial,sans-serif;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);text-decoration:none;pointer-events:auto}
.signature b{font-weight:600}
.signature:hover,.signature:focus-visible{text-decoration:underline}
@media(max-width:480px){html,body{height:100dvh;overflow:hidden}body{margin:0}.stage{padding:0;display:block;height:100dvh;min-height:100dvh;overflow:hidden}.invite{width:100%;height:100dvh;min-height:100dvh;aspect-ratio:auto;box-shadow:none}}
@media print{@page{size:105.5mm 149.1mm;margin:0}html,body{background:none}.stage{display:block;min-height:0;padding:0}.invite{width:105.5mm;height:149.1mm;aspect-ratio:auto;box-shadow:none;print-color-adjust:exact;-webkit-print-color-adjust:exact}}
@media(prefers-reduced-motion:reduce){.invite *{animation:none!important;transition:none!important}}

/* Голубой фарфор */

.t-porcelain .canvas-layer{background:var(--paper)}
.t-porcelain .watercolor{mix-blend-mode:multiply;opacity:var(--art-opacity)}
.t-porcelain .monogram{top:10%;font-size:2.5cqw}
.t-porcelain .headline{top:18.5%;font:400 4cqw/1.3 'Forum',serif;letter-spacing:.31em}
.t-porcelain .star-divider{top:27%;font-size:3.5cqw}
.t-porcelain .names{top:33%;font-family:'Cormorant Garamond',serif;font-size:calc(16.2cqw * var(--name-scale));line-height:.82;font-weight:400;font-style:italic}
.t-porcelain .names .amp{font-size:.55em;line-height:1.03;font-family:'Cormorant Garamond',serif}
.t-porcelain .date{top:60.7%;font:400 4.45cqw/1.1 'Forum',serif;letter-spacing:.2em}
.t-porcelain .divider{top:67%;}
.t-porcelain .schedule{top:71.5%;font-size:3.9cqw;letter-spacing:.11em}
.t-porcelain .venue{top:79%;font-size:4.1cqw}
.t-porcelain .closing{top:86.3%;font-size:4.35cqw}
