/* Figma-matched wedding invitation */

:root {
    --frame-width: 360px;
    --frame-height: 3626px;
    --invitation-width: min(100vw, 420px);
    --invitation-scale: calc(var(--invitation-width) / var(--frame-width));
    --page-bg: #fff9ee;
    --paper: #fff9ee;
    --paper-soft: #f6ede6;
    --olive: #8d8067;
    --olive-dark: #8d7860;
    --gold: #a08c6f;
    --gold-soft: #ac9b7f;
    --ink-muted: #5d5d5d;
    --cream-text: #f6f2ee;
    --font-script: "Dancing Script", cursive;
    --font-script-soft: "Luxurious Script", cursive;
    --font-serif: "Libre Baskerville", Georgia, serif;
    --font-body: "Ruwudu", Georgia, serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    background: var(--page-bg);
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--page-bg);
    color: var(--gold);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
    overflow-x: hidden;
}

button,
input,
select,
textarea {
    font: inherit;
}

a {
    color: inherit;
}

.invitation-wrapper {
    min-height: 100vh;
}

.figma-stage {
    width: 100vw;
    height: calc(var(--frame-height) * var(--invitation-scale));
    margin: 0;
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        to bottom,
        var(--paper) 0 calc(800px * var(--invitation-scale)),
        var(--olive) calc(800px * var(--invitation-scale)) calc(1091px * var(--invitation-scale)),
        var(--paper) calc(1091px * var(--invitation-scale)) calc(2556px * var(--invitation-scale)),
        var(--olive) calc(2556px * var(--invitation-scale)) calc(3153px * var(--invitation-scale)),
        var(--paper) calc(3153px * var(--invitation-scale)) 100%
    );
}

.figma-stage::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(800px * var(--invitation-scale));
    background: url("../images/hero-mobile.webp") center bottom / cover no-repeat;
    pointer-events: none;
}

.figma-invitation {
    width: var(--frame-width);
    height: var(--frame-height);
    position: absolute;
    left: max(0px, calc((100vw - var(--invitation-width)) / 2));
    top: 0;
    overflow: hidden;
    transform: scale(var(--invitation-scale));
    transform-origin: top left;
    z-index: 1;
}

@media (min-width: 480px) {
    :root {
        --invitation-width: 420px;
    }

    .figma-stage::before {
        background-image: url("../images/hero-mobile.webp");
        background-position: center bottom;
    }
}

@media (min-width: 768px) {
    :root {
        --invitation-width: 440px;
    }

    .figma-stage::before {
        background-image: url("../images/hero-tablet.webp");
        background-position: center bottom;
    }

    .venue-wordmark, .hero-date {
        color: var(--ink-muted) !important;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.9), 0 0 20px rgba(255, 255, 255, 1) !important;
    }
}

@media (min-width: 1024px) {
    :root {
        --invitation-width: 440px;
    }

    .figma-stage::before {
        background-image: url("../images/hero-desktop.webp");
        background-position: center bottom;
    }

    .venue-wordmark, .hero-date {
        color: var(--ink-muted) !important;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.9), 0 0 20px rgba(255, 255, 255, 1) !important;
    }
}

@media (min-width: 1440px) {
    :root {
        --invitation-width: 460px;
    }

    .figma-stage::before {
        background-image: url("../images/hero-desktop.webp");
        background-position: center bottom;
    }

    .venue-wordmark, .hero-date {
        color: var(--ink-muted) !important;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.9), 0 0 20px rgba(255, 255, 255, 1) !important;
    }
}

.hero-art {
    position: absolute;
    left: -23.03px;
    top: 0;
    width: 406.06px;
    height: 800px;
    display: block;
    overflow: hidden;
    pointer-events: none;
}

.hero-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.hero-panel,
.countdown-block,
.rsvp-block,
.hotel-block,
.flow-block,
.figma-footer {
    position: absolute;
    left: 0;
    width: 360px;
}

.hero-panel {
    top: 0;
    height: 800px;
}

.floral {
    position: absolute;
    width: 86.49px;
    height: 122.31px;
    object-fit: contain;
    opacity: 0.86;
    pointer-events: none;
    scale: 2;
}

.floral-top {
    right: 200px;
    top: 37px;
    transform: rotate(180deg);
}

.floral-bottom {
    left: 200px;
    top: 37px;
}

.monogram {
    position: absolute;
    left: 123px;
    top: 77px;
    width: 116px;
    height: 64px;
    color: var(--gold);
    font-family: var(--font-script);
    font-size: 56px;
    line-height: 1;
    text-align: center;
    opacity: 0.82;
}

.monogram span:last-child {
    margin-left: -16px;
}

.ornament {
    position: absolute;
    height: 14px;
    color: currentColor;
    margin-bottom: 20px;
}

.ornament::before {
    left: 0;
}

.ornament::after {
    right: 0;
}

.ornament {
    --ornament-size: 7px;
}

.ornament > span,
.ornament::marker {
    display: none;
}

.ornament {
}

.hero-ornament-top {
    top: 150.31px;
    width: 100%;
    color: var(--gold);
    text-align: center;
    transform: scale(1.1);
}


.hero-ornament-mid {
    left: 69.69px;
    top: 270.88px;
    width: 219.62px;
    color: var(--gold);
    transform: scale(1.1);
}

.hero-ornament-bottom {
    top: 240.55px;
    width: 100%;
    color: var(--gold-soft);
    text-align: center;
    transform: scale(1.1);
}

.hero-ornament-date-up {
    top: 410.55px;
    width: 100%;
    color: var(--gold-soft);
    text-align: center;
    transform: scale(1.1);
}

.hero-ornament-date-down {
    top: 475.55px;
    width: 100%;
    color: var(--gold-soft);
    text-align: center;
    transform: scale(1.1);
}

.hero-badge {
    position: absolute;
    left: 31px;
    top: 20px;
    width: 297px;
    margin: 0;
    color: var(--olive-dark);
    font-family: var(--font-script);
    font-size: 44.44px;
    font-weight: 400;
    line-height: 51px;
    text-align: center;
    transform: scale(1.1);
}

.hero-names {
    position: absolute;
    left: 31px;
    top: 180px;
    width: 297px;
    margin: 0;
    color: var(--olive-dark);
    font-family: var(--font-script);
    font-size: 50.44px;
    font-weight: 400;
    line-height: 51px;
    text-align: center;
}

.hero-message {
    position: absolute;
    left: 31px;
    top: 270px;
    width: 297px;
    margin: 0;
    color: var(--gold);
    font-family: var(--font-body);
    font-size: 16.3px;
    line-height: 16px;
    text-align: center;
}

.family-row {
    position: absolute;
    left: 31px;
    top: 345.69px;
    width: 297px;
    display: flex;
    justify-content: space-between;
    color: var(--ink-muted);
    font-family: var(--font-script);
    font-size: 20.37px;
    line-height: 18px;
}

.family-side {
    display: flex;
    align-items: center;
    height: 36px;
    text-align: center;
}

.family-left {
    width: 126px;
}

.family-right {
    width: 121px;
}

.family-side span {
    flex: 1;
}

.family-side strong {
    width: 20px;
    color: #7e5606;
    font-weight: 400;
}

.hero-date {
    position: absolute;
    left: 49px;
    top: 444px;
    width: 261px;
    color: var(--gold-soft);
    font-family: var(--font-serif);
    font-size: 24.88px;
    line-height: 24px;
    text-align: center;
}

.venue-wordmark {
    position: absolute;
    left: 49px;
    top: 520px;
    width: 261.83px;
    margin: 0;
    color: var(--gold);
    font-family: var(--font-body);
    font-size: 20.13px;
    line-height: 21px;
    text-align: center;
}

.lcv-note {
    position: absolute;
    left: 35px;
    top: 745px;
    width: 291px;
    margin: 0;
    color: var(--gold);
    font-family: var(--font-serif);
    font-size: 12px;
    font-style: italic;
    line-height: 15px;
    text-align: center;
}

.kids-note {
    position: absolute;
    left: 52px;
    top: 773px;
    width: 256px;
    margin: 0;
    color: var(--gold);
    font-family: var(--font-serif);
    font-size: 12px;
    font-style: italic;
    line-height: 15px;
    text-align: center;
}

.countdown-block {
    top: 800px;
    height: 291px;
    background: var(--olive);
    color: var(--cream-text);
    text-align: center;
}

.countdown-block h2,
.rsvp-block h2,
.hotel-block h2,
.flow-block h2 {
    margin: 0;
    font-family: var(--font-script-soft);
    font-weight: 400;
}

.countdown-block h2 {
    position: absolute;
    left: 25px;
    top: 43px;
    width: 311px;
    font-size: 40px;
    line-height: 35px;
}

.countdown-block p {
    position: absolute;
    left: 25px;
    top: 116px;
    width: 311px;
    margin: 0;
    font-family: var(--font-serif);
    font-size: 18px;
    font-style: italic;
    line-height: 24px;
}

.countdown-timer {
    position: absolute;
    left: 25px;
    top: 167px;
    width: 311px;
    display: flex;
    justify-content: space-between;
}

.countdown-item {
    width: 64px;
    height: 73px;
    position: relative;
    text-align: center;
}

.countdown-item .number {
    display: block;
    font-family: var(--font-serif);
    font-size: 16px;
    font-style: italic;
    line-height: 21px;
}

.countdown-item i {
    display: block;
    width: 54px;
    height: 1px;
    margin: 34px auto 14px;
    background: rgba(246, 242, 238, 0.45);
}

.countdown-item .label {
    display: block;
    font-family: var(--font-body);
    font-size: 15.5px;
    line-height: 9px;
}

.rsvp-block {
    top: 1091px;
    height: 609px;
    color: var(--gold);
}

.rsvp-block h2 {
    position: absolute;
    left: 25px;
    top: 61px;
    width: 311px;
    color: var(--gold);
    font-size: 40px;
    line-height: 28px;
    text-align: center;
}

.rsvp-form,
.figma-field,
.choice-row,
.choice,
.rsvp-submit-btn,
.rsvp-success,
.rsvp-error {
    position: absolute;
}

.rsvp-form {
    left: 0;
    top: 0;
    width: 360px;
    height: 609px;
}

.figma-field {
    left: 25px;
    width: 311px;
    border: 1px solid var(--gold-soft);
    background: #f4e7de;
    color: var(--gold-soft);
}

.figma-field span {
    position: absolute;
    left: 15px;
    top: 16px;
    color: var(--gold-soft);
    font-family: var(--font-serif);
    font-size: 13px;
    line-height: 16px;
    pointer-events: none;
}

.figma-field:focus-within span,
.figma-field.has-value span {
    opacity: 0;
}

.figma-field input,
.figma-field select,
.figma-field textarea {
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--olive-dark);
    font-family: var(--font-serif);
    font-size: 13px;
    line-height: 16px;
}

.field-name {
    top: 132px;
    height: 50px;
}

.field-name input {
    padding: 14px 15px;
}

.choice-row {
    left: 25px;
    top: 202px;
    width: 311px;
    height: 50px;
}

.choice {
    top: 0;
    width: 149px;
    height: 50px;
}

.choice-attending {
    left: 0;
}

.choice-not-attending {
    left: 162px;
}

.choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.choice span {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gold-soft);
    color: var(--gold-soft);
    background: transparent;
    cursor: pointer;
    font-family: var(--font-serif);
    font-size: 13px;
    line-height: 16px;
}

.choice input:checked + span {
    background: var(--olive);
    color: var(--paper);
}

.field-count {
    top: 272px;
    height: 50px;
}

.field-count select {
    appearance: none;
    padding: 14px 46px 14px 15px;
}

.field-count::after {
    content: "";
    position: absolute;
    right: 15px;
    top: 19px;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--gold-soft);
    border-bottom: 2px solid var(--gold-soft);
    transform: rotate(45deg);
    pointer-events: none;
}

.field-message {
    top: 342px;
    height: 112px;
}

.field-message textarea {
    resize: none;
    padding: 14px 15px;
}

.rsvp-submit-btn {
    left: 25px;
    top: 494px;
    width: 311px;
    height: 50px;
    border: 1px solid var(--gold-soft);
    background: var(--olive);
    color: var(--paper);
    cursor: pointer;
    font-family: var(--font-serif);
    font-size: 13px;
    line-height: 16px;
}

.rsvp-submit-btn:disabled {
    cursor: default;
    opacity: 0.72;
}

.rsvp-success,
.rsvp-error {
    left: 25px;
    top: 555px;
    width: 311px;
    margin: 0;
    color: var(--olive);
    font-family: var(--font-serif);
    font-size: 12px;
    line-height: 16px;
    text-align: center;
}

.rsvp-error {
    color: #9b4f43;
}

.rsvp-success p,
.rsvp-error p {
    margin: 0;
}

.hotel-block {
    top: 1700px;
    height: 856px;
    color: var(--olive);
}

.hotel-ornament-top,
.hotel-ornament-bottom,
.footer-ornament-top,
.footer-ornament-mid {
    left: 48.5px;
    width: 263px;
    color: #c9bc9f;
}

.hotel-ornament-top {
    top: 0;
}

.hotel-block h2 {
    position: absolute;
    left: 21px;
    top: 80px;
    width: 318px;
    font-size: 40px;
    line-height: 48px;
    text-align: center;
}

.hotel-list {
    position: absolute;
    left: 21px;
    top: 240px;
    width: 318px;
}

.hotel-card {
    height: 82px;
    margin: 0 0 48px;
    text-align: center;
}

.hotel-card h3 {
    margin: 0 0 14px;
    color: var(--olive);
    font-family: var(--font-serif);
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
    line-height: 21px;
}

.hotel-card h3 span {
    font-weight: 700;
}

.hotel-card a {
    color: var(--olive);
    font-family: var(--font-serif);
    font-size: 18px;
    line-height: 24px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hotel-ornament-bottom {
    top: 760px;
}

.flow-block {
    top: 2556px;
    height: 596.91px;
    background: var(--olive);
    color: var(--paper);
    text-align: center;
}

.flow-block h2 {
    position: absolute;
    left: 21px;
    top: 56px;
    width: 318px;
    font-size: 40px;
    line-height: 48px;
}

.flow-list {
    position: absolute;
    left: 129.79px;
    top: 152px;
    width: 100.41px;
}

.flow-item {
    width: 100.41px;
    height: 92px;
    margin: 0 0 47px;
}

.flow-item i {
    display: block;
    height: 45px;
    color: var(--paper);
    font-size: 32px;
    line-height: 45px;
}

.flow-item h3 {
    margin: 8px 0 0;
    color: var(--paper);
    font-family: Georgia, serif;
    font-size: 16.98px;
    font-weight: 400;
    line-height: 19px;
}

.flow-item time {
    display: block;
    color: var(--paper);
    font-family: Georgia, serif;
    font-size: 14.99px;
    line-height: 17px;
}

.figma-footer {
    top: 3217px;
    height: 409px;
    color: var(--olive);
    text-align: center;
}

.footer-ornament-top {
    top: 0;
}

.footer-couple {
    position: absolute;
    left: 31px;
    top: 60px;
    width: 298px;
    margin: 0;
    color: var(--olive);
    font-family: var(--font-script);
    font-size: 32px;
    font-weight: 500;
    line-height: 40px;
}

.footer-date {
    position: absolute;
    left: 31px;
    top: 124px;
    width: 298px;
    color: var(--olive);
    font-family: var(--font-serif);
    font-size: 20px;
    line-height: 25px;
}

.footer-ornament-mid {
    top: 185px;
    width: 177px;
    left: 91.5px;
}

.figma-footer h2 {
    position: absolute;
    left: 31px;
    top: 244px;
    width: 298px;
    margin: 0;
    color: var(--olive);
    font-family: var(--font-serif);
    font-size: 20px;
    font-style: italic;
    font-weight: 400;
    line-height: 25px;
}

.figma-footer a {
    position: absolute;
    left: 31px;
    top: 285px;
    width: 298px;
    color: var(--olive);
    font-family: var(--font-serif);
    font-size: 20px;
    font-style: italic;
    line-height: 25px;
    text-decoration: none;
}

[hidden] {
    display: none !important;
}