:root {
    --forest: #163c32;
    --forest-soft: #2c5449;
    --gold: #b7904e;
    --gold-light: #d9bf84;
    --ivory: #fffaf0;
    --ink: #18362f;
    --shadow: rgba(16, 48, 39, 0.22);
}

* { box-sizing: border-box; }

html { min-height: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    background: #102f27;
    font-family: Georgia, "Times New Roman", serif;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    background: linear-gradient(135deg, #0e2f27, #255146 50%, #0c2a23);
}

.ambient-glow {
    position: fixed;
    inset: -20%;
    z-index: -2;
    pointer-events: none;
    background: radial-gradient(circle at 50% 40%, rgba(255, 244, 213, 0.22), transparent 42%);
    animation: breathe 8s ease-in-out infinite alternate;
}

.opening {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 20;
    width: 51%;
    background: #12382f;
    transition: transform 1.35s cubic-bezier(.77, 0, .18, 1) .25s;
}

.opening::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(transparent, var(--gold-light), transparent);
    box-shadow: 0 0 22px rgba(217, 191, 132, .65);
}

.opening-left { left: 0; }
.opening-left::after { right: 0; }
.opening-right { right: 0; }
.opening-right::after { left: 0; }
body:not(.is-loading) .opening-left { transform: translateX(-102%); }
body:not(.is-loading) .opening-right { transform: translateX(102%); }

.invitation-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: clamp(18px, 4vw, 54px);
    perspective: 1200px;
}

.invitation-card {
    position: relative;
    width: min(780px, 100%);
    min-height: min(920px, calc(100vh - 36px));
    padding: clamp(44px, 7vw, 86px) clamp(22px, 7vw, 78px) 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    background:
        linear-gradient(rgba(255, 252, 245, .66), rgba(255, 252, 245, .72)),
        url("wedding-floral-bg.png") center / cover no-repeat;
    border: 1px solid rgba(217, 191, 132, .85);
    box-shadow: 0 32px 90px rgba(0, 0, 0, .35), inset 0 0 0 9px rgba(255, 252, 244, .46);
    transform-style: preserve-3d;
    transition: transform .28s ease-out;
}

.invitation-card::before {
    content: "";
    position: absolute;
    inset: 12px;
    pointer-events: none;
    border: 1px solid rgba(183, 144, 78, .42);
}

.foil-line {
    width: 72px;
    height: 1px;
    margin-bottom: 22px;
    background: var(--gold);
    box-shadow: 0 0 10px rgba(183, 144, 78, .4);
}

.eyebrow,
.small-label,
.detail-label,
.countdown span {
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    letter-spacing: .22em;
}

.eyebrow {
    margin: 0 0 18px;
    font-size: .75rem;
    color: var(--forest-soft);
}

.couple h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 2vw, 22px);
    margin: 0;
    color: var(--forest);
    font-size: clamp(3.2rem, 10vw, 6.6rem);
    font-weight: 400;
    line-height: .84;
    letter-spacing: -.055em;
}

.couple h1 i {
    color: var(--gold);
    font-size: .46em;
    font-weight: 400;
}

.couple > p {
    margin: 18px 0 0;
    color: var(--gold);
    font-size: 1.08rem;
    font-style: italic;
}

.guest-block { margin: clamp(22px, 4vh, 38px) 0 20px; }
.small-label { margin: 0 0 8px; color: var(--gold); font-size: .7rem; font-weight: 700; }
.guest-block h2 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.35rem); font-weight: 400; }
.guest-block > p:last-child { margin: 9px 0 0; color: #496158; font-size: .95rem; font-style: italic; }

.event-details {
    width: min(580px, 100%);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    margin: 4px 0 22px;
    padding: 20px 0;
    border-top: 1px solid rgba(183, 144, 78, .48);
    border-bottom: 1px solid rgba(183, 144, 78, .48);
}

.detail { display: grid; gap: 5px; }
.detail-label { color: var(--gold); font-size: .64rem; font-weight: 700; }
.detail strong { font-size: 1.08rem; font-weight: 400; }
.detail small { color: #51665f; font-family: Arial, Helvetica, sans-serif; font-size: .76rem; line-height: 1.5; }
.diamond { color: var(--gold); font-size: 1.2rem; }

.countdown > p { margin: 0 0 10px; color: var(--forest-soft); font-size: .92rem; font-style: italic; }
.countdown-grid { display: flex; gap: 24px; }
.countdown-grid div { min-width: 48px; }
.countdown strong { display: block; color: var(--forest); font-size: 1.5rem; font-weight: 400; }
.countdown span { color: #6b7d76; font-size: .52rem; }

.rsvp { width: min(520px, 100%); margin-top: 22px; }
.rsvp-title { margin: 0 0 14px; font-size: 1.02rem; font-style: italic; }
.rsvp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.button {
    min-height: 48px;
    padding: 13px 18px;
    border: 1px solid var(--forest);
    border-radius: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 9px 22px rgba(22, 60, 50, .18); }
.button:focus-visible { outline: 3px solid rgba(183, 144, 78, .45); outline-offset: 3px; }
.button:disabled { cursor: not-allowed; opacity: .45; }
.button-primary { background: var(--forest); color: var(--ivory); }
.button-primary:hover:not(:disabled) { background: #235146; }
.button-ghost { background: rgba(255, 250, 240, .6); color: var(--forest); }
.button-ghost:hover:not(:disabled) { background: rgba(22, 60, 50, .08); }
.button-wide { width: 100%; margin-top: 18px; }
.rsvp-message { min-height: 21px; margin: 11px 0 0; color: var(--forest-soft); font-family: Arial, Helvetica, sans-serif; font-size: .78rem; line-height: 1.5; }

footer { display: grid; gap: 8px; margin-top: 18px; color: #6e7d78; font-size: .72rem; font-style: italic; }
.map-link { display: inline-flex; align-items: center; justify-self: center; gap: 6px; padding-bottom: 2px; color: var(--forest); border-bottom: 1px solid currentColor; font-family: Arial, Helvetica, sans-serif; font-size: .76rem; font-style: normal; font-weight: 700; text-decoration: none; }
.map-link svg { width: 12px; height: 12px; fill: currentColor; }
.map-link:hover, .map-link:focus { color: var(--gold); }

.reveal {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity .8s ease, transform .8s ease;
}
body:not(.is-loading) .reveal { opacity: 1; transform: translateY(0); }
.reveal-1 { transition-delay: 1s; }
.reveal-2 { transition-delay: 1.12s; }
.reveal-3 { transition-delay: 1.24s; }
.reveal-4 { transition-delay: 1.36s; }
.reveal-5 { transition-delay: 1.48s; }
.reveal-6 { transition-delay: 1.6s; }

.rsvp-dialog {
    width: min(470px, calc(100% - 32px));
    padding: 0;
    color: var(--ink);
    background: var(--ivory);
    border: 1px solid var(--gold);
    box-shadow: 0 28px 90px rgba(0, 0, 0, .38);
}
.rsvp-dialog::backdrop { background: rgba(7, 28, 23, .78); backdrop-filter: blur(5px); }
.rsvp-dialog form { position: relative; padding: 42px; text-align: center; }
.rsvp-dialog h2 { margin: 0 0 12px; font-size: 2rem; font-weight: 400; }
.rsvp-dialog p { color: #536861; line-height: 1.55; }
.rsvp-dialog label { display: block; margin: 20px 0 7px; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: .78rem; font-weight: 700; }
.rsvp-dialog input { width: 100%; min-height: 48px; padding: 11px 13px; color: var(--ink); background: white; border: 1px solid #bcb7a8; font: 1rem Arial, Helvetica, sans-serif; }
.rsvp-dialog input:focus { outline: 2px solid rgba(183, 144, 78, .55); border-color: var(--gold); }
.dialog-close { position: absolute; top: 10px; right: 14px; padding: 5px; color: var(--forest); background: none; border: 0; font-size: 1.8rem; cursor: pointer; }
.dialog-status { min-height: 20px; margin: 10px 0 0; font-family: Arial, Helvetica, sans-serif; font-size: .78rem; }

@keyframes breathe { to { transform: scale(1.08); opacity: .76; } }

@media (max-width: 650px) {
    .invitation-shell { padding: 0; }
    .invitation-card { min-height: 100vh; border: 0; box-shadow: none; }
    .couple h1 { flex-direction: column; gap: 4px; }
    .couple h1 i { margin: -5px 0; }
    .event-details { grid-template-columns: 1fr; gap: 11px; }
    .diamond { transform: rotate(90deg); }
    .rsvp-actions { grid-template-columns: 1fr; }
    .rsvp-dialog form { padding: 40px 24px 28px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
    .opening { display: none; }
    .reveal { opacity: 1; transform: none; }
}