:root {
    --color-bg: #dcd8ce;
    --color-paper: #fffaf0;
    --color-paper-soft: #f8f0e3;
    --color-wine: #990005;
    --color-wine-dark: #760003;
    --color-text: #77191d;
    --color-muted: #a06366;
    --color-light: #fff8ef;
    --shadow-soft: 0 28px 74px rgba(72, 21, 16, 0.14);
    --font-main: 'Playfair Display SC', Georgia, 'Times New Roman', serif;
    --page-width: 520px;
    --title-size: clamp(24px, 7.2vw, 42px);
    --title-letter: clamp(0.025em, 0.44vw, 0.075em);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;
    color: var(--color-text);
    background-color: var(--color-bg);
    background-image:
        radial-gradient(circle at 18% 10%, rgba(255,255,255,.24), transparent 28%),
        radial-gradient(circle at 82% 2%, rgba(118,0,3,.08), transparent 22%),
        linear-gradient(rgba(220,216,206,.76), rgba(220,216,206,.76)),
        url('../img/paper-texture.png');
    background-size: auto, auto, auto, 360px 360px;
    font-family: var(--font-main);
    font-weight: 400;
    line-height: 1.42;
    text-rendering: optimizeLegibility;
}

img {
    display: block;
}

img {
    max-width: 100%;
    height: auto;
}

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

.page__main {
    width: min(calc(100% - 24px), var(--page-width));
    margin: 0 auto;
    padding: clamp(30px, 6vw, 70px) 0 clamp(38px, 7vw, 90px);
}

.invite {
    position: relative;
}


.invite__section {
    position: relative;
}

.hero {
    padding: clamp(8px, 2vw, 22px) 0 30px;
    text-align: center;
}

.hero__eyebrow {
    width: min(100%, 330px);
    margin: 0 auto 18px;
    color: var(--color-wine);
    font-size: clamp(15px, 4.6vw, 21px);
    letter-spacing: 0.26em;
    line-height: 1.48;
    text-transform: lowercase;
}

.hero__title {
    margin: 0;
    color: var(--color-wine);
    font-size: clamp(40px, 12vw, 62px);
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 0.98;
    /* text-transform: uppercase; */
}

.hero__icon {
    margin: 18px auto 10px;
}

.hero__subtitle,
.hero__date {
    display: block;
    margin: 0;
    color: var(--color-wine);
    font-size: clamp(25px, 7vw, 35px);
    letter-spacing: 0.04em;
    line-height: 1.05;
}

.hero__date {
    font-size: clamp(26px, 7.4vw, 38px);
}

.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
    line-height: 1;
}

.icon__fa {
    display: block;
    line-height: 1;
}

.icon--heart {
    color: var(--color-wine);
    font-size: 27px;
}

.icon--mini-heart {
    color: var(--color-wine);
    font-size: 20px;
}

.icon--calendar,
.icon--pin,
.icon--clock,
.icon--sparkle,
.icon--mail {
    margin: 0 auto 15px;
    color: currentColor;
    font-size: 34px;
    opacity: 0.94;
}

.intro-card,
.date-card,
.place-card,
.dress-card,
.gallery-card,
.rsvp {
    background: var(--color-paper);
    box-shadow: var(--shadow-soft);
}

.intro-card {
    overflow: hidden;
}

.intro-card__red-zone {
    position: absolute;
    inset: 0 0 auto;
    height: 285px;
    background: var(--color-wine);
}

.intro-card__photo-wrap {
    position: relative;
    z-index: 1;
    width: calc(100% - clamp(44px, 12vw, 72px));
    margin: 0 auto;
    padding-top: 72px;
}

.intro-card__photo {
    width: 100%;
    border: 10px solid  #fff;
    /* aspect-ratio: 1 / 1.24; */
    object-fit: cover;
    object-position: center 6%;
    filter: grayscale(1) contrast(1.04) brightness(.98);
}

.intro-card__body {
    position: relative;
    z-index: 1;
    padding: 34px clamp(30px, 8vw, 50px) 52px;
    text-align: center;
}

.intro-card__text {
    margin: 0 auto;
    max-width: 330px;
    color: var(--color-text);
    font-size: clamp(16px, 4.4vw, 20px);
    letter-spacing: 0.08em;
    line-height: 1.45;
}

.intro-card__icon {
    margin-top: 27px;
}

.date-card {
    padding: 54px clamp(22px, 7vw, 42px) 66px;
    text-align: center;
}

.date-card__title,
.place-card__title,
.program-card__title,
.dress-card__title,
.rsvp__title {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    color: inherit;
    font-size: var(--title-size);
    font-weight: 400;
    letter-spacing: var(--title-letter);
    line-height: 1.04;
    text-transform: uppercase;
    text-wrap: balance;
}

.date-card__month {
    margin: 28px 0 14px;
    font-size: 15px;
    letter-spacing: 0.12em;
}

.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 11px 9px;
    width: min(100%, 328px);
    margin: 0 auto;
}

.calendar__day {
    position: relative;
    display: grid;
    min-height: 25px;
    place-items: center;
    color: var(--color-text);
    font-size: 15px;
    line-height: 1;
}

.calendar__day--muted {
    color: var(--color-muted);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.calendar__day--active {
    z-index: 0;
    color: var(--color-wine);
    font-weight: 700;
}

.calendar__day--active::before,
.calendar__day--active::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 50%;
}

.calendar__day--active::before {
    width: 39px;
    height: 39px;
    border: 1px dashed var(--color-wine);
}

.calendar__day--active::after {
    width: 49px;
    height: 31px;
    border: 1px solid rgba(153, 0, 5, .45);
    transform: rotate(-18deg);
}


.place-card {
    padding: 42px clamp(24px, 7vw, 36px) 40px;
    text-align: center;
}

.place-card__name {
    margin: 20px 0 16px;
    font-size: 14px;
    letter-spacing: 0.11em;
}

.place-card__figure {
    margin: 0;
    overflow: hidden;
}

.place-card__image {
    width: 100%;
    aspect-ratio: 1.6 / 1;
    object-fit: cover;
    transform: scale(1.01);
}

.place-card__address {
    width: min(100%, 300px);
    margin: 18px auto 23px;
    font-size: 13px;
    letter-spacing: 0.08em;
    line-height: 1.42;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 30px;
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
    gap: 9px;
    letter-spacing: 0.06em;
    transition: transform .25s ease, background .25s ease, color .25s ease;
}

.button__icon {
    font-size: 13px;
    line-height: 1;
}

.button--route {
    min-width: 245px;
    border: 1px dashed currentColor;
    background: transparent;
    font-size: 15px;
}

.button--route:hover,
.button--route:focus-visible {
    color: var(--color-light);
    background: var(--color-wine);
    transform: translateY(-2px);
    outline: none;
}

.program-card {
    padding: 46px clamp(28px, 8vw, 48px) 50px;
    color: var(--color-light);
    background: var(--color-wine);
    text-align: center;
}

.program-card__timeline {
    margin: 38px 0 30px;
}

.timeline {
    display: grid;
    gap: 31px;
    padding: 0;
    list-style: none;
}

.timeline__item {
    position: relative;
}

.timeline__item + .timeline__item::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -24px;
    width: 1px;
    height: 17px;
    background: rgba(255, 248, 239, .5);
}

.timeline__time {
    display: block;
    margin-bottom: 7px;
    font-size: 24px;
    letter-spacing: 0.05em;
}

.timeline__text {
    display: block;
    font-size: 15px;
    letter-spacing: 0.08em;
    line-height: 1.3;
}

.program-card__heart {
    color: var(--color-light);
}

.dress-card {
    padding: 48px clamp(30px, 8vw, 48px) 52px;
    color: var(--color-light);
    background: var(--color-wine);
    text-align: center;
}

.dress-card::before {
    content: '';
    position: absolute;
    inset: 0 clamp(30px, 8vw, 48px) auto;
    height: 1px;
    background: rgba(255, 248, 239, .34);
}

.dress-card__text {
    margin: 22px auto 0;
    max-width: 320px;
    font-size: 15px;
    letter-spacing: 0.07em;
    line-height: 1.45;
}

.gallery-card {
    display: grid;
    gap: 12px;
    padding: 12px;
    background: var(--color-paper);
}

.gallery-card__item {
    margin: 0;
    overflow: hidden;
}

.gallery-card__image {
    width: 100%;
    aspect-ratio: 1.32 / 1;
    object-fit: cover;
    transition: transform .6s ease;
}

.gallery-card__item--wide .gallery-card__image {
    aspect-ratio: 1.62 / 1;
}

.gallery-card__item:hover .gallery-card__image {
    transform: scale(1.035);
}

.rsvp {
    padding: 44px clamp(26px, 7vw, 42px) 42px;
    text-align: center;
}

.rsvp__text {
    width: min(100%, 330px);
    margin: 22px auto 27px;
    font-size: 14px;
    letter-spacing: 0.07em;
    line-height: 1.43;
}

.rsvp__form {
    position: relative;
    width: min(100%, 360px);
    margin: 0 auto;
}

.rsvp__label,
.rsvp__hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.rsvp__field {
    position: relative;
}

.rsvp__input {
    width: 100%;
    min-height: 54px;
    padding: 13px 70px 13px 24px;
    border: 1px dashed var(--color-wine);
    border-radius: 999px;
    color: var(--color-text);
    background: rgba(255, 250, 240, .82);
    font-size: 15px;
    letter-spacing: 0.08em;
    outline: none;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.rsvp__input::placeholder {
    color: rgba(119, 25, 29, .66);
}

.rsvp__input:focus {
    border-color: var(--color-wine-dark);
    background: #fffdf8;
    box-shadow: 0 0 0 4px rgba(153, 0, 5, .08);
}

.rsvp__submit {
    position: absolute;
    top: 50%;
    right: 6px;
    display: inline-grid;
    width: 43px;
    height: 43px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: var(--color-light);
    background: var(--color-wine);
    box-shadow: 0 8px 22px rgba(153, 0, 5, .22);
    transform: translateY(-50%);
    transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.rsvp__submit:hover,
.rsvp__submit:focus-visible {
    background: var(--color-wine-dark);
    box-shadow: 0 10px 25px rgba(153, 0, 5, .3);
    transform: translateY(-50%) scale(1.06);
    outline: none;
}

.rsvp__submit-icon {
    position: relative;
    left: -1px;
    font-size: 16px;
    line-height: 1;
}

.rsvp__message {
    width: min(100%, 360px);
    margin: -5px auto 20px;
    padding: 12px 15px;
    border-radius: 18px;
    font-size: 13px;
    letter-spacing: 0.06em;
    line-height: 1.35;
}

.rsvp__message--success {
    color: #2e5c3d;
    background: rgba(46, 92, 61, .1);
}

.rsvp__message--error {
    color: var(--color-wine);
    background: rgba(153, 0, 5, .08);
}

.rsvp__footer-heart {
    margin: 32px 0 13px;
    color: var(--color-wine);
    font-size: 28px;
    line-height: 1;
}

.rsvp__credits {
    margin: 0;
    color: rgba(119, 25, 29, .78);
    font-size: 9px;
    letter-spacing: 0.08em;
}

.invite__section {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s ease, transform .7s ease;
}

.invite__section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (min-width: 760px) {
    .page__main {
        width: min(calc(100% - 48px), var(--page-width));
    }

    .intro-card__red-zone {
        height: 305px;
    }
}

@media (max-width: 380px) {
    :root {
        --title-size: clamp(23px, 7vw, 38px);
        --title-letter: 0.035em;
    }

    .page__main {
        width: min(calc(100% - 16px), var(--page-width));
    }

    .intro-card__photo-wrap {
        width: calc(100% - 34px);
        padding-top: 55px;
    }

    .intro-card__red-zone {
        height: 245px;
    }

    .date-card,
    .place-card,
    .program-card,
    .dress-card,
    .rsvp {
        padding-left: 22px;
        padding-right: 22px;
    }

    .calendar {
        gap: 10px 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }

    .invite__section {
        opacity: 1;
        transform: none;
    }
}