@keyframes swing {
    0%, to {
        transform: rotate(0deg) translateY(0)
    }
    25% {
        transform: rotate(1.5deg)
    }
    50% {
        transform: rotate(0deg) translateY(-10px)
    }
    75% {
        transform: rotate(-1.5deg)
    }
}

@keyframes swing2 {
    0%, to {
        transform: rotate(0deg) translateY(0)
    }
    25% {
        transform: rotate(-1.5deg)
    }
    50% {
        transform: rotate(0deg) translateY(-15px)
    }
    75% {
        transform: rotate(1.5deg)
    }
}

@keyframes reveal {
    0% {
        background-position: 0 0
    }
    to {
        background-position: 100% 0
    }
}

:root {
    --title-font-family: "SMHeadersFont", sans-serif;
    --text-font-family: "SMTextsFont", sans-serif;
    --alt-font-family: "SMAltFont";
    --title-font-weight: 500;
    --text-font-weight: 300;
    /* Fluid typography (clamp(min, preferred, max)).
       Scales smoothly between ~640px and ~1920px viewports —
       no hard jump at the breakpoint. */
    --title-font-size: clamp(32px, 5.5vw, 96px);
    --text-font-size: clamp(14px, 2.1vw, 40px);
    --title-line-height: 100%;
    --text-line-height: clamp(18px, 2.5vw, 48px);
    --text-clr-1: #444444;
    --mod-clr: #D50100;
    --placeholder-input-font-size: clamp(13px, 1.1vw, 20px);
    --placeholder-input-clr: rgba(38, 34, 34, .5);
    --section-padding: clamp(45px, 6.25vw, 120px) 0;
    --section-bg: url('../img/fon-89.webp');
    --section-bg-clr-1: #444444;
    --section-bg-clr-2: #D7CDC7;
    --btn-bg: #770909;
    --btn-clr: #FFFFFF;
    --btn-hover-bg: #f21630;
    --btn-hover-clr: #FFFFFF;
    --btn-transition: background-color .2s, color .2s, border .2s;
    --arrow-sl-img: url("../img/sections-decor/arrow.webp");
    --bg-fon: url("../img/sections-decor/q-fon.webp");
    --date-active: url("../img/date-active.svg")
}

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.sm-page, body.lock {
    overflow: hidden
}

body {
    font-family: var(--text-font-family);
    color: var(--text-clr-1);
    background-color: #f9f5f2
}

a {
    text-decoration: none
}

.sm-container {
    position: relative;
    max-width: 1180px;
    padding: 0 16px;
    margin: 0 auto
}

.sm-container-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 178px
}

@media (max-width: 768px) {
    .sm-container-flex {
        flex-direction: column;
        gap: 30px
    }
}

.sm-title {
    color: var(--text-clr-1);
    font-family: var(--title-font-family);
    font-size: var(--title-font-size);
    line-height: var(--title-line-height);
    font-weight: var(--title-font-weight);
    text-align: center;
    text-transform: uppercase
}

.sm-text {
    font-size: var(--text-font-size);
    font-weight: var(--text-font-weight);
    font-family: var(--text-font-family);
    color: var(--section-bg-clr-1);
    line-height: var(--text-line-height);
    text-align: center;
    max-width: 65ch;
    margin-left: auto;
    margin-right: auto
}

.sm-img > img, .sm-title ~ .sm-text {
    margin-top: 20px
}

.sm-img {
    position: relative;
    width: 410px;
    height: 506px;
    background: #fff;
    box-shadow: 0 0 18px 0 #404040;
    flex-shrink: 0
}

.sm-img > img {
    object-fit: cover;
    object-position: center;
    margin-left: 24px;
    width: 362px;
    height: 362px
}

@media (max-width: 768px) {
    .sm-img {
        width: 136px;
        height: 168px
    }

    .sm-img > img {
        margin: 9px;
        width: 120px;
        height: 120px
    }
}

.sm-main-top-decor {
    width: 1179px;
    position: relative
}

.sm-main-top-decor > img {
    width: 100%;
    height: auto
}

@media (max-width: 768px) {
    .sm-main-top-decor {
        width: 100vw;
        margin-left: -16px
    }
}

.sm-own, .sm-section {
    padding: var(--section-padding);
    background: url(../img/fon-89.webp);
    background-size: 100% auto
}

@media (max-width: 768px) {
    .sm-own {
        padding: 30px 0
    }
}

[data-sm-tmonth-rod] {
    text-transform: lowercase
}

.sm-shared__content {
    display: block;
    flex-direction: row-reverse;
    justify-content: space-between;
    gap: 80px;
    position: relative
}

@media (max-width: 768px) {
    .sm-shared__content {
        flex-direction: column-reverse;
        gap: 60px
    }
}

.sm-shared__image {
    position: relative;
    z-index: 1
}

@media (max-width: 768px) {
    .sm-shared__image {
        width: fit-content;
        margin: 0 0 0 auto
    }
}

.sm-shared__image .sm-img {
    z-index: 1
}

/* Annotations are anchored to the photo collage; arrows sit at a constant
   --label-arrow-gap from the labels, so the label↔arrow distance is
   identical on every viewport.
     - Евгений: [label]·gap·[arrow↘]
     - Елизавета: [arrow↖]·gap·[label]
   z-index keeps them above polaroids (z-index up to 4) and heart decor. */
.sm-main_groom-name {
    position: absolute;
    top: -192px;
    left: var(--groom-anchor);
    transform: translateX(-100%);
    font-family: "SMHeadersFont";
    font-size: 72px;
    color: #6389ea;
    z-index: 10
}

.sm-main-arr-groom {
    position: absolute;
    top: -184px;
    left: calc(var(--groom-anchor) + var(--label-arrow-gap));
    transform: rotate(-60deg);
    z-index: 10
}

.sm-main_bride-name {
    position: absolute;
    top: 560px;
    font-family: "SMHeadersFont";
    font-size: 72px;
    color: #fe5901;
    left: var(--bride-anchor);
    z-index: 10
}

.sm-main-arr-bride {
    position: absolute;
    top: 485px;
    left: calc(var(--bride-anchor) - var(--label-arrow-gap));
    transform: translateX(-100%);
    z-index: 10
}

@media (max-width: 768px) {
    .sm-main_groom-name {
        font-size: 24px;
        top: -60px
    }

    .sm-main_bride-name {
        font-size: 24px;
        top: 195px
    }

    .sm-main-arr-groom {
        top: -43px;
        width: 45px;
        height: 45px
    }
}

svg.sm-main__heart {
    position: relative;
    left: calc(50% - 95px)
}

.sm-main_names-plus {
    margin: 0 20px
}

.sm-shared__names__wrapper .sm-main__names div {
    line-height: 120px
}

.sm-main__decor-text {
    position: absolute;
    left: 0;
    top: 60px;
    width: 1166px
}

@media (max-width: 768px) {
    .sm-main__decor-text {
        position: absolute;
        left: 0;
        top: 18.9%;
        width: 98.9%;
        height: auto
    }

    .sm-main-arr-bride {
        width: 43px;
        height: 34px;
        top: 172px
    }

    .sm-main_names-plus {
        margin: 0 10px
    }

    .sm-shared__names__wrapper .sm-main__names div {
        line-height: 45px
    }

    svg.sm-main__heart {
        left: calc(50% - 36px);
        width: 70px;
        height: 100px;
        margin-top: -18px
    }
}

.sm-main__image.sm-shared__images {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 1920px;
    margin-left: -386px;
    margin-top: 285px;
    margin-bottom: 325px;
    --photo-w: 410px;
    /* Anchors define where each label "ends" relative to collage centerline,
       arrow sits exactly --label-arrow-gap pixels away (constant on all
       viewports) so the label↔arrow distance never changes. */
    --groom-anchor: calc(50% + var(--photo-w) * 0.15);
    --bride-anchor: calc(50% - var(--photo-w) * 0.6);
    --label-arrow-gap: 5px
}

/* The hero photo collage was authored at 1920px canvas width with a fixed
   -386px left margin; on any narrower viewport let it shrink to the container
   so it doesn't hang off the page. */
@media (max-width: 1919px) {
    .sm-main__image.sm-shared__images {
        width: 100%;
        margin-left: 0;
        margin-top: clamp(80px, 20vw, 285px);
        margin-bottom: clamp(80px, 20vw, 325px)
    }
}

@media (max-width: 1535px) {
    .sm-main__image.sm-shared__images {
        --photo-w: clamp(136px, 21.4vw, 410px)
    }
}

@media (max-width: 768px) {
    .sm-main__image.sm-shared__images {
        --photo-w: 136px
    }
}

.sm-shared__images .sm-img:nth-child(3) {
    margin-right: -75px;
    transform: rotate(-7deg);
    z-index: 1
}

.sm-shared__image .sm-img img {
    width: 324px;
    height: 486px
}

.sm-shared__images .sm-img:nth-child(4) {
    top: -55px;
    margin-right: -121px;
    transform: rotate(14.5deg);
    z-index: 2
}

.sm-shared__images .sm-img:nth-child(5) {
    top: 0;
    margin-left: 75px;
    transform: rotate(-4.5deg);
    z-index: 4
}

.sm-shared__images .sm-img:nth-child(6) {
    top: -85px;
    margin-left: -83px;
    transform: rotate(-8deg);
    z-index: 3
}

.sm-shared__images .sm-img:nth-child(3):before {
    top: -48px;
    left: 27%;
    transform: rotate(7deg)
}

.sm-shared__images .sm-img:nth-child(3):after, .sm-shared__images .sm-img:nth-child(3):before, .sm-shared__images .sm-img:nth-child(4):after, .sm-shared__images .sm-img:nth-child(4):before {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    background: url(../img/decor/decor-heart.webp);
    background-size: contain;
    background-repeat: no-repeat
}

.sm-shared__images .sm-img:nth-child(3):after {
    bottom: -50px;
    transform: rotate(7deg);
    left: 36%
}

.sm-shared__images .sm-img:nth-child(4):after, .sm-shared__images .sm-img:nth-child(4):before {
    transform: rotate(-14.5deg)
}

.sm-shared__images .sm-img:nth-child(4):before {
    top: -48px;
    left: -5%
}

.sm-shared__images .sm-img:nth-child(4):after {
    bottom: -50px;
    left: 60%
}

.sm-shared__images .sm-img:nth-child(5):before {
    top: -48px;
    left: 28%;
    transform: rotate(4.5deg)
}

.sm-shared__images .sm-img:nth-child(5):after, .sm-shared__images .sm-img:nth-child(5):before, .sm-shared__images .sm-img:nth-child(6):after, .sm-shared__images .sm-img:nth-child(6):before {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    background: url(../img/decor/decor-heart.webp);
    background-size: contain;
    background-repeat: no-repeat
}

.sm-shared__images .sm-img:nth-child(5):after {
    bottom: -50px;
    transform: rotate(4.5deg);
    left: 23%
}

.sm-shared__images .sm-img:nth-child(6):after, .sm-shared__images .sm-img:nth-child(6):before {
    transform: rotate(8deg)
}

.sm-shared__images .sm-img:nth-child(6):before {
    top: -48px;
    left: 51%
}

.sm-shared__images .sm-img:nth-child(6):after {
    bottom: -50px;
    left: 19%
}

@media (max-width: 768px) {
    .sm-shared__images .sm-img:nth-child(3) {
        margin-right: -24px;
        transform: rotate(-7deg);
        z-index: 1
    }

    .sm-shared__images .sm-img:nth-child(4) {
        top: -15px;
        margin-right: -154px;
        transform: rotate(14.5deg);
        z-index: 2
    }

    .sm-shared__images .sm-img:nth-child(5) {
        top: 0;
        margin-left: 139px;
        transform: rotate(-4.5deg);
        z-index: 4
    }

    .sm-shared__images .sm-img:nth-child(6) {
        top: -32px;
        margin-left: -30px;
        transform: rotate(-8deg);
        z-index: 3
    }

    .sm-shared__images .sm-img:nth-child(3):before {
        top: -20px;
        left: 36%;
        transform: rotate(7deg)
    }

    .sm-shared__images .sm-img:nth-child(3):after {
        bottom: -22px;
        transform: rotate(7deg);
        left: 36%
    }

    .sm-shared__images .sm-img:nth-child(4):before {
        top: -20px;
        left: -5%
    }

    .sm-shared__images .sm-img:nth-child(4):after {
        bottom: -20px;
        left: 57%
    }

    .sm-shared__images .sm-img:nth-child(5):before {
        top: -17px;
        left: 18%;
        transform: rotate(4.5deg)
    }

    .sm-shared__images .sm-img:nth-child(5):after {
        bottom: -20px;
        transform: rotate(4.5deg);
        left: 23%
    }

    .sm-shared__images .sm-img:nth-child(6):before {
        top: -16px;
        left: 51%
    }

    .sm-shared__images .sm-img:nth-child(6):after {
        bottom: -20px;
        left: 19%
    }

    .sm-img {
        width: 136px;
        height: 168px;
        box-shadow: 0 3px 7px 0 #919191
    }

    .sm-img > img {
        margin-top: 9px;
        margin-left: 9px;
        width: 120px;
        height: 120px
    }

    .sm-shared__images .sm-img:after, .sm-shared__images .sm-img:before {
        width: 10px !important;
        height: 10px !important
    }

    .sm-shared__image .sm-img img {
        width: 100%;
        max-width: 259px;
        height: 388px
    }
}

/* Mid-range viewports (tablet portrait through small laptop): the desktop
   collage was authored for a 1920px canvas; scale the polaroids + banner
   fluidly between the mobile (768) and desktop (>=1536) sizes via vw-based
   clamps so 4 photos + arrows + the 1179px banner fit naturally. */
@media (min-width: 769px) and (max-width: 1535px) {
    .sm-main-top-decor {
        width: 100%;
        margin-left: 0
    }

    .sm-main__decor-text {
        top: 18.9%;
        width: 98.9%;
        height: auto
    }

    .sm-img {
        width: clamp(136px, 21.4vw, 410px);
        height: clamp(168px, 26.4vw, 506px)
    }

    .sm-img > img {
        width: clamp(120px, 18.85vw, 362px);
        height: clamp(120px, 18.85vw, 362px);
        margin: clamp(9px, 1.25vw, 24px)
    }

    .sm-shared__images .sm-img:nth-child(3) {
        margin-right: clamp(-75px, -3.9vw, -24px)
    }

    .sm-shared__images .sm-img:nth-child(4) {
        top: clamp(-55px, -2.85vw, -15px);
        margin-right: clamp(-154px, -8vw, -121px)
    }

    .sm-shared__images .sm-img:nth-child(5) {
        margin-left: clamp(75px, 7.25vw, 139px)
    }

    .sm-shared__images .sm-img:nth-child(6) {
        top: clamp(-85px, -4.4vw, -32px);
        margin-left: clamp(-83px, -4.3vw, -30px)
    }

    .sm-main_groom-name {
        font-size: clamp(24px, 3.75vw, 72px);
        top: clamp(-192px, -10vw, -60px)
    }

    .sm-main_bride-name {
        font-size: clamp(24px, 3.75vw, 72px);
        top: clamp(195px, 29vw, 560px)
    }

    .sm-main-arr-groom {
        top: clamp(-184px, -9.6vw, -43px);
        width: clamp(45px, 6.55vw, 126px);
        height: clamp(45px, 6.55vw, 126px)
    }

    .sm-main-arr-bride {
        width: clamp(43px, 5.15vw, 99px);
        height: clamp(34px, 5.15vw, 99px);
        top: clamp(166px, 26.25vw, 485px)
    }
}

@media (min-width: 769px) {
    .sm-shared__names__wrapper {
        margin-top: 36px
    }
}

.sm-js-animation {
    --decor-width: 434px
}

.sm-shared__image__decor::before {
    content: "";
    position: absolute;
    display: block;
    z-index: 1;
    background-image: url(../img/sections-decor/main-img-decor.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    right: 0;
    top: -52px;
    width: var(--decor-width);
    height: 531px;
    transition: width 1s ease-out
}

@media (max-width: 768px) {
    .sm-shared__image__decor::before {
        height: 531px;
        right: -16px;
        top: -52px
    }
}

@media (min-width: 769px) {
    .sm-date {
        word-spacing: 0;
        font-size: 24px
    }
}

.sm-main__content {
    margin-top: 60px
}

@media (max-width: 768px) {
    .sm-main__content {
        margin-top: 20px
    }
}

.sm-shared__names__wrapper {
    text-align: center
}

.sm-main__names {
    font-family: var(--title-font-family);
    font-weight: var(--title-font-weight);
    font-size: var(--title-font-size);
    white-space: nowrap;
    line-height: var(--title-line-height);
    position: relative;
    text-transform: uppercase;
    color: #f21430;
    text-align: center;
    width: fit-content;
    margin: 20px auto 0
}

.sm-calendar__month-text div, .sm-main__names div {
    display: inline-block
}

@media (max-width: 768px) {
    .sm-main__names {
        white-space: nowrap;
        max-width: 100%;
        font-size: clamp(22px, 6.5vw, 40px)
    }
}

.sm-main {
    padding: 0 0 60px;
    position: relative;
    z-index: 5
}

@media (max-width: 768px) {
    .sm-main {
        padding: 10px 0 20px
    }
}

.sm-history {
    padding: 60px 0 100px
}

@media (max-width: 768px) {
    .sm-history {
        padding: 20px 0 40px
    }
}

.sm-history__header {
    font-family: var(--title-font-family);
    font-weight: var(--title-font-weight);
    font-size: var(--title-font-size);
    text-align: center;
    color: #444
}

.sm-history__text {
    font-family: var(--text-font-family);
    font-weight: var(--text-font-weight);
    font-size: var(--text-font-size);
    text-align: center;
    color: var(--section-bg-clr-1);
    line-height: var(--text-line-height);
    letter-spacing: .01em;
    width: 73%;
    margin: 20px 13.5%
}

@media (max-width: 768px) {
    .sm-history__text {
        width: 85%;
        margin: 20px 7.5%
    }
}

.sm-history__img {
    position: relative;
    background: #fff;