*,
*::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-emerald {
    background: var(--bg)
}

.t-emerald .canvas-layer {
    inset: 6.1% 7.4%;
    height: 87.8%;
    width: 85.2%;
    background: var(--paper);
    box-shadow: 0 0 0 1px var(--gold);
}

.t-emerald .watercolor {
    opacity: var(--art-opacity);
    mix-blend-mode: normal
}

.t-emerald .monogram {
    top: 14.8%;
    font-size: 2.6cqw;
    color: var(--gold)
}

.t-emerald .headline {
    top: 23%;
    font-size: 3.1cqw;
    letter-spacing: .34em
}

.t-emerald .star-divider {
    top: 28%;
    font-size: 3cqw
}

.t-emerald .names {
    top: 34%;
    font-size: calc(14.4cqw * var(--name-scale));
    line-height: .93;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500
}

.t-emerald .names .amp {
    font-size: .59em;
    line-height: .95
}

.t-emerald .date {
    top: 60.2%;
    font-size: 4.6cqw;
    font-family: 'Forum', serif
}

.t-emerald .divider {
    top: 67.1%
}

.t-emerald .schedule {
    top: 71%;
    font-size: 3.55cqw
}

.t-emerald .venue {
    top: 78.7%;
    font-size: 3.9cqw
}

.t-emerald .closing {
    top: 85.5%;
    font-size: 4.2cqw;
    width: 67%
}

.t-emerald .bottom-note {
    bottom: 6.7%;
    font-size: 1.8cqw;
    color: var(--ink)
}