@font-face {
    font-family: "Jardim";
    src: url("jardim-regular.otf") format("opentype");
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: "Jardim";
    src: url("jardim-italico.otf") format("opentype");
    font-display: swap;
    font-style: italic;
}

:root {
    color-scheme: light;
    --cream: #faf6ee;
    --paper: #fffdf8;
    --ink: #343f31;
    --muted: #5b6554;
    --moss: #475a40;
    --moss-dark: #354630;
    --rose: #90594f;
    --line: #e7dac8;
    --display: "Jardim", Georgia, serif;
    --body: system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font: 1rem/1.55 var(--body);
}

p, h1, h2, h3, dl, dd { margin: 0; }
a { color: inherit; }

.icon {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -.2em;
}

.eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    color: var(--rose);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .18em;
    line-height: 1.45;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 48px;
    padding: .7rem 1.2rem;
    border: 1px solid transparent;
    border-radius: 99px;
    font: 650 .93rem/1.2 var(--body);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s, border-color .2s, box-shadow .2s;
}

.button.primary {
    background: var(--moss);
    color: #fffdf7;
    box-shadow: 0 5px 13px #44573d24;
}

.button.primary:hover { background: var(--moss-dark); }

.button.secondary {
    background: var(--paper);
    border-color: #ded9c6;
    color: var(--moss-dark);
}

.button.secondary:hover {
    border-color: #9aab8c;
    background: #f1f3e9;
}

:where(a, button, input):focus-visible {
    outline: 2px solid var(--rose);
    outline-offset: 4px;
}

.cover {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 31%, #fffef8 0%, #fcf8ee 41%, transparent 69%),
        radial-gradient(ellipse at 7% 84%, #f1dfd4 0%, transparent 44%),
        radial-gradient(ellipse at 99% 81%, #e9ebdb 0%, transparent 44%),
        #f8f0e4;
}

.cover-border {
    position: absolute;
    inset: clamp(12px, 2.4vw, 33px);
    z-index: 1;
    border: 1px solid #b68a6e66;
    border-radius: min(4vw, 32px);
    pointer-events: none;
}

.cover-border::after {
    position: absolute;
    inset: 5px;
    border: 1px solid #b68a6e30;
    border-radius: inherit;
    content: "";
}

.garden {
    position: absolute;
    bottom: -19px;
    z-index: -1;
    width: clamp(260px, 43vw, 640px);
    height: auto;
    pointer-events: none;
}

.garden-left { left: -35px; }
.garden-right {
    right: -55px;
    bottom: -28px;
    transform: scaleX(-1) scale(.93);
    transform-origin: bottom center;
}

.cover-butterfly {
    position: absolute;
    z-index: -1;
    color: #aa7b8c;
    line-height: 1;
    pointer-events: none;
}

.cover-butterfly .icon {
    width: 100%;
    height: 100%;
    fill: #e9bfd333;
    stroke-width: .9;
}

.butterfly-left {
    top: 29%;
    left: 20%;
    width: clamp(32px, 4.1vw, 61px);
    transform: rotate(-26deg);
}

.butterfly-right {
    top: 23%;
    right: 19%;
    width: clamp(25px, 3.15vw, 52px);
    color: #b58f60;
    transform: rotate(24deg);
}

.butterfly-right .icon { fill: #eecb9f4d; }

.cover-content {
    width: min(100%, 44rem);
    padding: 4.3rem 1.8rem 3.9rem;
    text-align: center;
}

.cover-kicker { gap: .75rem; }
.cover-kicker .icon { color: #a98150; }

.cover h1 {
    margin: .75rem .1em -.01em 0;
    color: var(--moss-dark);
    font: italic clamp(6rem, 15vw, 9rem)/1 var(--display);
    letter-spacing: -.075em;
}

.cover-subtitle {
    margin-top: .95rem;
    color: var(--rose);
    font: clamp(1.35rem, 4.6vw, 1.95rem)/1.18 var(--display);
}

.envelope-scene {
    --envelope-width: clamp(245px, 74vw, 410px);
    display: grid;
    place-items: center;
    width: 100%;
    padding: clamp(28px, 6vh, 52px) 0 clamp(25px, 4.7vh, 42px);
    perspective: 950px;
}

.envelope {
    position: relative;
    width: var(--envelope-width);
    aspect-ratio: 1.72;
    filter: drop-shadow(0 19px 19px #7151452e) drop-shadow(0 5px 5px #71514522);
}

.envelope-back {
    position: absolute;
    inset: 0;
    border: 1px solid #c69788;
    border-radius: 8px;
    background: linear-gradient(145deg, #d7a49a, #e6bab0 65%, #d5a397);
}

.envelope-letter {
    position: absolute;
    inset: 7% 6% 5%;
    z-index: 2;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 3%;
    border: 1px solid #d4ba9d;
    border-radius: 4px;
    background: radial-gradient(ellipse at center, #fffdf6, #f8edda);
    box-shadow: inset 0 0 0 5px #fffaf2, inset 0 0 0 6px #ddc7a8, 0 3px 9px #835e4a26;
    color: var(--rose);
    transition: transform .66s .31s cubic-bezier(.22, .69, .2, 1);
}

.envelope-letter .icon { color: #77866a; }
.envelope-letter span { font: italic clamp(1.1rem, 4.5vw, 2rem)/1.12 var(--display); }
.envelope-letter small { font-size: .48rem; font-weight: 700; letter-spacing: .18em; }

.envelope-front {
    position: absolute;
    inset: 0;
    z-index: 3;
    overflow: hidden;
    border-radius: 8px;
    background: linear-gradient(120deg, #f0c8bc, #eabbb0 65%, #e4b0a4);
    clip-path: polygon(0 0, 50% 60%, 100% 0, 100% 100%, 0 100%);
}

.envelope-front::before,
.envelope-front::after {
    position: absolute;
    inset: 0;
    content: "";
}

.envelope-front::before {
    background: linear-gradient(212deg, #edbfb3, #e7b8ab 50%, #d69f93);
    clip-path: polygon(100% 0, 45% 63%, 100% 100%);
}

.envelope-front::after {
    background: linear-gradient(170deg, #f8ddd0, #efc6b9 74%, #e9bbad);
    clip-path: polygon(50% 47%, 100% 100%, 0 100%);
}

.envelope-flap {
    position: absolute;
    inset: 0 0 auto;
    z-index: 4;
    height: 65%;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(154deg, #f5d0c5, #e8b5a9 63%, #d6a092);
    clip-path: polygon(0 0, 100% 0, 100% 2%, 53% 95%, 50% 99%, 47% 95%, 0 2%);
    transform-origin: top center;
    transition: transform .47s cubic-bezier(.4, .15, .3, 1), z-index 0s .25s;
}

.envelope-seal {
    position: absolute;
    top: 60%;
    left: 50%;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 16%;
    aspect-ratio: 1;
    border: 1px solid #bd8c71;
    border-radius: 48% 52% 53% 47% / 53% 46% 54% 47%;
    background: radial-gradient(circle at 37% 29%, #f6ddc2, #deb08c 68%, #c48f72);
    box-shadow: inset 0 0 0 4px #dfb39688, inset 0 0 0 5px #a9796347, 0 3px 6px #7e483a46;
    color: #845346;
    transform: translate(-50%, -50%) rotate(-8deg);
    transition: opacity .22s, scale .26s;
}

.envelope-seal .icon { width: 58%; height: 58%; stroke-width: 1.15; }

.cover.is-open .envelope-flap {
    z-index: 1;
    transform: rotateX(180deg);
}

.cover.is-open .envelope-seal { opacity: 0; scale: .75; }
.cover.is-open .envelope-letter { transform: translateY(-58%) rotate(-3deg); }

.open-button { min-width: min(100%, 225px); }
.open-button .icon:last-child { margin-left: .6rem; }
.open-button[aria-disabled="true"] { cursor: wait; }

.cover-caption {
    margin-top: .85rem;
    color: var(--muted);
    font-size: .77rem;
}

.letter-section {
    padding: clamp(1.3rem, 6vw, 4.5rem) max(12px, env(safe-area-inset-right)) clamp(1rem, 4vw, 3rem) max(12px, env(safe-area-inset-left));
    background: radial-gradient(ellipse at top, #f5e6da, transparent 64%), var(--cream);
}

.letter-card {
    position: relative;
    width: min(100%, 44rem);
    margin: 0 auto;
    padding: clamp(1.15rem, 5.8vw, 3.7rem);
    border: 1px solid #ddc8b2;
    border-radius: 1.45rem;
    background: var(--paper);
    box-shadow: 0 14px 45px #6e4c3220, inset 0 0 0 5px #faf2e6;
}

.letter-header { text-align: center; }

.letter-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .38rem;
    margin: .25rem 0 1rem;
    color: #748268;
    font-size: 1.45rem;
}

.letter-ornament .icon:first-child { transform: rotate(10deg); }
.letter-ornament .icon:last-child { transform: scaleX(-1) rotate(10deg); }
.letter-ornament .icon:nth-child(2) { color: #ae776b; }

.letter-header h2 {
    margin: .3rem .07em .65rem 0;
    color: var(--moss-dark);
    font: italic clamp(3.5rem, 11vw, 5.7rem)/1.03 var(--display);
    letter-spacing: -.065em;
    scroll-margin-top: 1.5rem;
}

.letter-intro {
    max-width: 27rem;
    margin: auto;
    color: var(--muted);
    font-size: clamp(.95rem, 3vw, 1.04rem);
}

.event-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: clamp(1.35rem, 4vw, 2.4rem);
    padding: 1rem 0;
    border-block: 1px solid var(--line);
    text-align: center;
}

.event-item + .event-item { border-left: 1px solid var(--line); }

.event-item dt {
    display: grid;
    justify-items: center;
    gap: .35rem;
    color: var(--muted);
    font-size: .75rem;
}

.event-item .icon { color: var(--rose); font-size: 1.25rem; }
.event-item dd { margin-top: .2rem; font: clamp(1.05rem, 3.9vw, 1.4rem)/1.18 var(--display); }

.venue {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: .95rem;
    padding: .9rem;
    border: 1px solid #e8e8d8;
    border-radius: 1rem;
    background: #f6f6ec;
}

.venue-name { display: flex; align-items: center; gap: .65rem; }
.venue .eyebrow { justify-content: flex-start; }
.venue-title { margin-top: .13rem; font: 1.28rem/1.15 var(--display); }

.icon-disc {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 50%;
    background: #e9eddf;
    color: var(--moss);
}

.rsvp {
    margin-top: clamp(1.55rem, 5vw, 2.65rem);
    padding: clamp(1rem, 4.4vw, 2rem);
    border: 1px solid #f0dfd6;
    border-radius: 1.1rem;
    background: #faf0eb;
    text-align: center;
    scroll-margin-top: 1.3rem;
}

.rsvp h3 {
    margin-top: .4rem;
    font: clamp(1.65rem, 6vw, 2.2rem)/1.15 var(--display);
    scroll-margin-top: 1.6rem;
}

.rsvp-intro { margin: .4rem 0 .95rem; color: var(--muted); font-size: .9rem; }

.rsvp-form, .admin-form {
    display: grid;
    gap: .6rem;
    max-width: 24rem;
    margin: 1rem auto 0;
    text-align: left;
}

label { font-weight: 650; font-size: .87rem; }

input:not([type="hidden"]) {
    width: 100%;
    min-height: 48px;
    padding: .6rem .85rem;
    border: 1px solid #bcb5a5;
    border-radius: .65rem;
    background: var(--paper);
    color: var(--ink);
    font: 1rem/1.3 var(--body);
}

input::placeholder { color: #6c7064; }
.rsvp-form .button, .admin-form .button { margin-top: .35rem; }

.notice {
    margin: 1rem 0 0;
    padding: .75rem 1rem;
    border: 1px solid;
    border-radius: .8rem;
    font-size: .88rem;
    text-align: left;
}

.notice.error { background: #fff6f3; border-color: #e8c0b5; color: #843d32; }
.notice.success {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: .55rem;
    background: #eef3e8;
    border-color: #c7d4be;
    color: var(--moss-dark);
}

.notice.success .icon { margin-top: .15rem; }
.notice.success p { margin-top: .15rem; }

.letter-signature {
    margin-top: 1.5rem;
    color: var(--rose);
    font: italic 1.2rem/1.4 var(--display);
    text-align: center;
}

.letter-signature .icon { font-size: .8em; }

.invite-footer {
    padding: .8rem 1rem 1.6rem;
    color: var(--muted);
    font-size: .75rem;
    text-align: center;
}

.admin-page {
    min-height: 100vh;
    background: radial-gradient(ellipse at 8% 0%, #f0dfd2, transparent 58%), var(--cream);
}

.admin-main { width: min(calc(100% - 1.5rem), 32rem); margin: 0 auto; padding: clamp(1.4rem, 7vw, 4rem) 0; }
.admin-main.admin-wide { width: min(calc(100% - 1.5rem), 52rem); }
.admin-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: 1rem; }
.back-link { color: var(--moss-dark); font-size: .88rem; text-underline-offset: 3px; }
.back-link .icon { transform: rotate(180deg); margin-right: .2rem; }

.admin-card {
    padding: clamp(1.15rem, 5.5vw, 2.65rem);
    border: 1px solid #ddc8b2;
    border-radius: 1.25rem;
    background: var(--paper);
    box-shadow: 0 14px 36px #6e4c3218;
}

.admin-card .eyebrow { justify-content: flex-start; }

.admin-card h1 {
    margin: .45rem 0 .55rem;
    color: var(--moss-dark);
    font: clamp(1.9rem, 6vw, 3rem)/1.08 var(--display);
}

.admin-card > p:not(.notice, .eyebrow) { color: var(--muted); }
.admin-form { margin: 1.35rem 0 0; }
.total strong { color: var(--moss-dark); font-size: 1.3rem; }

.empty-state {
    margin-top: 1.1rem;
    padding: .9rem 1rem;
    border-radius: .7rem;
    background: #f3f4eb;
    font-size: .92rem;
}

table { width: 100%; margin-top: 1.25rem; border-collapse: collapse; font-size: .88rem; }
caption { padding-bottom: .55rem; font-weight: 650; text-align: left; }
th, td { padding: .65rem .45rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: .8rem; }
td:first-child { overflow-wrap: anywhere; }
td:last-child { width: 9rem; }

@media (max-width: 680px) {
    .garden { width: clamp(195px, 56vw, 330px); opacity: .86; }
    .garden-left { left: -50px; }
    .garden-right { right: -53px; }
    .butterfly-left { top: 22%; left: 9%; }
    .butterfly-right { top: 18%; right: 10%; }
}

@media (max-width: 390px) {
    .cover-content { padding-inline: 1.4rem; }
    .venue .button { width: 100%; }
    .rsvp .eyebrow { letter-spacing: .1em; }
}

@media (max-height: 620px) and (orientation: landscape) {
    .cover-content { padding-block: 3rem; }
    .cover h1 { font-size: 5rem; }
    .envelope-scene { --envelope-width: min(330px, 54vw); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; }
}