:root{--paper:#f7f4ed;--card:#fffdf8;--ink:#354238;--sage:#748477;--sage-dark:#526456;--gold:#b59a66;--line:#e4ddcf;--muted:#77796f;--rose:#9c6760}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Manrope',Arial,sans-serif;font-size:15px;line-height:1.7}.invitation{position:relative;overflow:hidden;max-width:760px;min-height:100vh;margin:0 auto;padding:50px 24px 36px}.invitation:before,.invitation:after{position:absolute;z-index:0;left:24px;right:24px;height:1px;content:"";background:linear-gradient(90deg,transparent,var(--gold),transparent)}.invitation:before{top:25px}.invitation:after{bottom:18px}.hero,.details,.rsvp,footer{position:relative;z-index:1}.hero{text-align:center;padding:35px 10px 25px}.eyebrow{margin:0 0 13px;color:var(--sage);font-size:10px;letter-spacing:.24em;font-weight:600}.ornament,.detail-mark,.footer-ornament{color:var(--gold)}.ornament{font-size:16px;margin:12px 0}.hero h1,.admin-head h1{margin:0;color:var(--sage-dark);font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(44px,10vw,72px);font-weight:400;line-height:1.08}.hero h1 span{color:var(--gold);font-style:italic}.date{margin:20px 0 22px;color:#8f7952;font-family:'Cormorant Garamond',Georgia,serif;font-size:21px;letter-spacing:.05em}.intro{max-width:530px;margin:0 auto;color:#687068;font-size:14px;line-height:1.9}.leaf{position:absolute;top:90px;color:#c7cabb;opacity:.45;font-family:Georgia,serif;font-size:150px;line-height:1}.leaf-left{left:-45px;transform:rotate(-42deg)}.leaf-right{right:-45px;transform:scaleX(-1) rotate(-42deg)}.details{display:grid;grid-template-columns:1fr 1px 1fr;align-items:center;gap:22px;margin:24px 0 34px;padding:25px 20px;background:rgba(255,253,248,.62);border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}.detail-divider{height:85px;background:var(--line)}.detail-mark{font-size:22px}.detail h2,.rsvp h2,.admin-card h2{margin:4px 0 7px;color:var(--sage-dark);font-family:'Cormorant Garamond',Georgia,serif;font-size:25px;font-weight:500}.detail p{margin:0;color:#656b63;font-size:13px;line-height:1.8}.rsvp{max-width:520px;margin:0 auto;padding:27px 30px 30px;background:var(--card);border:1px solid var(--line);box-shadow:0 12px 35px rgba(75,76,60,.055)}.rsvp>.eyebrow,.rsvp>h2,.reply-by{text-align:center}.rsvp h2{font-size:32px}.reply-by{margin:0 0 22px;color:var(--muted);font-size:12px}.rsvp form,.admin-card form{display:grid;gap:10px}.rsvp label,.admin-card label{color:#4e5b50;font-size:12px;font-weight:600}.rsvp input[type=text],.rsvp select,.admin-card input[type=password]{width:100%;height:47px;padding:0 13px;border:1px solid #dcd7ca;border-radius:2px;background:#fffefa;color:var(--ink);font:inherit;font-size:14px}.rsvp input:focus,.rsvp select:focus,.admin-card input:focus{outline:2px solid #c5b387;outline-offset:2px}.rsvp fieldset{display:grid;gap:9px;margin:7px 0 2px;padding:0;border:0}.rsvp legend{margin-bottom:8px;color:#4e5b50;font-size:12px;font-weight:600}.choice{display:flex;align-items:center;gap:10px;min-height:42px;padding:8px 12px;border:1px solid var(--line);cursor:pointer}.choice input{accent-color:var(--sage-dark)}.choice span{font-weight:400!important}.attendee-field[hidden]{display:none}.rsvp button,.admin-card button:not(.delete-button){min-height:48px;margin-top:8px;padding:10px 18px;border:0;border-radius:2px;background:var(--sage-dark);color:white;font:inherit;font-size:12px;letter-spacing:.06em;cursor:pointer;transition:background .2s}.rsvp button:hover,.admin-card button:hover{background:#3f5144}.rsvp button span{padding-left:8px;color:#ddca9f}.notice{margin:14px 0;padding:11px 13px;border:1px solid;font-size:13px}.success{border-color:#c7d4c3;background:#f1f6ef;color:#45624b}.error{border-color:#e1c7c0;background:#fbf2ef;color:#8e4b43}.honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}footer{text-align:center;margin:27px 0 0;color:#74786e;font-family:'Cormorant Garamond',Georgia,serif;font-size:17px;line-height:1.35}.footer-ornament{font-size:24px}footer p{margin:4px 0}footer strong{color:var(--sage-dark);font-weight:500}.admin-body{min-height:100vh}.admin-wrap{max-width:1040px;margin:0 auto;padding:36px 22px 28px}.admin-head{text-align:center;padding:8px 0 26px}.admin-head h1{font-size:48px}.admin-card{padding:24px;background:var(--card);border:1px solid var(--line);box-shadow:0 10px 30px rgba(75,76,60,.045)}.login-card{max-width:420px;margin:0 auto}.login-card form{gap:12px}.login-card button{width:100%}.back-link{color:var(--sage-dark);font-size:12px;text-decoration:none}.login-card .back-link{display:inline-block;margin-top:17px}.admin-actions{display:flex;justify-content:flex-end;align-items:center;gap:20px;margin-bottom:16px}.button-link{display:inline-block;padding:9px 15px;background:var(--sage-dark);color:white;font-size:12px;text-decoration:none}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}.stats article{display:flex;flex-direction:column;gap:4px;padding:16px;background:#eeeee6;border:1px solid var(--line)}.stats span{color:#70766e;font-size:11px}.stats strong{color:var(--sage-dark);font-family:'Cormorant Garamond',Georgia,serif;font-size:30px;font-weight:500;line-height:1.1}.admin-card h2{margin:0 0 17px;font-size:28px}.empty{color:var(--muted);font-size:13px}.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse;text-align:left;font-size:12px}th{color:var(--sage-dark);font-size:11px;font-weight:600}th,td{padding:12px 10px;border-bottom:1px solid var(--line);white-space:nowrap}td:first-child{white-space:normal;min-width:150px}.status{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px}.status.yes{background:#e9f1e8;color:#47644b}.status.no{background:#f6ece8;color:#936259}.delete-button{padding:5px 8px;border:1px solid #dec9c3;background:transparent;color:#92584e;font:inherit;font-size:11px;cursor:pointer}.admin-footer{margin-top:20px}@media(max-width:600px){.invitation{padding:38px 17px 28px}.hero{padding:28px 8px 21px}.intro{font-size:13px}.leaf{top:103px;font-size:105px}.leaf-left{left:-48px}.leaf-right{right:-48px}.details{gap:12px;margin:19px 0 25px;padding:20px 8px}.detail h2{font-size:22px}.detail p{font-size:11px}.detail-divider{height:80px}.rsvp{padding:23px 18px}.rsvp h2{font-size:29px}.stats{grid-template-columns:repeat(2,1fr)}.admin-wrap{padding:25px 14px}.admin-head h1{font-size:40px}.admin-card{padding:17px}.admin-actions{justify-content:space-between}th,td{padding:10px 8px}}
@media (min-width: 1050px) {
    body:not(.admin-body) {
        background: radial-gradient(ellipse at 12% 8%, rgba(219, 222, 207, .55), transparent 35%),
                    radial-gradient(ellipse at 90% 90%, rgba(226, 216, 193, .42), transparent 34%),
                    var(--paper);
    }

    .invitation {
        display: grid;
        width: min(1200px, calc(100% - 64px));
        max-width: none;
        min-height: calc(100vh - 64px);
        margin: 32px auto;
        padding: 66px 62px 44px;
        grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
        grid-template-areas: "hero rsvp" "details rsvp" "footer footer";
        align-content: center;
        align-items: center;
        gap: 18px 54px;
        border: 1px solid rgba(181, 154, 102, .36);
        background: rgba(255, 253, 248, .72);
        box-shadow: 0 24px 70px rgba(67, 72, 59, .10);
    }

    .hero {
        grid-area: hero;
        padding: 18px 8px 8px;
    }

    .hero h1 {
        font-size: clamp(54px, 5vw, 72px);
        line-height: 1.02;
    }

    .date {
        margin: 22px 0 18px;
        font-size: 23px;
    }

    .intro {
        max-width: 480px;
        font-size: 14px;
    }

    .hero::after {
        display: block;
        width: 78px;
        height: 1px;
        margin: 24px auto 0;
        background: linear-gradient(90deg, transparent, var(--gold), transparent);
        content: "";
    }

    .details {
        grid-area: details;
        align-self: start;
        gap: 17px;
        margin: 0;
        padding: 25px 15px;
        border: 1px solid rgba(228, 221, 207, .9);
        background: rgba(247, 244, 237, .68);
    }

    .detail h2 {
        font-size: 27px;
    }

    .detail p {
        font-size: 13px;
    }

    .rsvp {
        grid-area: rsvp;
        width: 100%;
        max-width: 500px;
        margin: 0;
        justify-self: center;
        padding: 36px 36px 38px;
        box-shadow: 0 18px 48px rgba(75, 76, 60, .09);
    }

    .rsvp h2 {
        font-size: 36px;
    }

    body:not(.admin-body) footer {
        grid-area: footer;
        margin: 5px 0 0;
    }

    .leaf {
        top: 80px;
        font-size: 190px;
        opacity: .3;
    }

    .leaf-left {
        left: -52px;
    }

    .leaf-right {
        right: -52px;
    }
}
@media (min-width: 1050px) {
    .invitation {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        border: 1px solid rgba(181, 154, 102, .48);
        background:
            radial-gradient(ellipse at 8% 6%, rgba(229, 231, 216, .48), transparent 33%),
            radial-gradient(ellipse at 92% 94%, rgba(238, 226, 203, .38), transparent 32%),
            rgba(255, 253, 248, .94);
    }

    .invitation::before {
        position: absolute;
        z-index: 0;
        inset: 12px;
        border: 1px solid rgba(181, 154, 102, .24);
        content: "";
        pointer-events: none;
    }

    .invitation::after {
        position: absolute;
        z-index: 1;
        top: 18px;
        left: 50%;
        padding: 0 18px;
        color: var(--gold);
        background: #fffdf8;
        content: "✦  ❦  ✦";
        font-size: 17px;
        letter-spacing: 7px;
        transform: translateX(-50%);
        pointer-events: none;
    }

    .hero,
    .details,
    .rsvp,
    body:not(.admin-body) footer {
        position: relative;
        z-index: 2;
    }

    .hero {
        padding: 42px 30px 22px;
    }

    .hero .eyebrow {
        letter-spacing: .24em;
    }

    .hero .ornament {
        margin: 18px 0;
        color: var(--gold);
        font-size: 22px;
    }

    .hero h1 {
        max-width: 620px;
        margin-right: auto;
        margin-left: auto;
        color: #4b594b;
        text-wrap: balance;
    }

    .hero h1 span {
        display: inline-block;
        padding: 0 5px;
        color: #ad9562;
        font-size: .72em;
        font-style: italic;
    }

    .date {
        color: #8c7952;
        letter-spacing: .08em;
    }

    .intro {
        margin-right: auto;
        margin-left: auto;
        color: #66695e;
        line-height: 1.9;
    }

    .hero::after {
        width: 130px;
        margin-top: 30px;
    }

    .details {
        width: min(100%, 610px);
        justify-self: center;
        padding: 30px 24px;
        border: 1px solid rgba(181, 154, 102, .25);
        border-radius: 3px;
        background: rgba(247, 245, 238, .78);
        box-shadow: 0 12px 30px rgba(67, 72, 59, .045);
    }

    .detail-mark {
        color: #ad9562;
        font-size: 20px;
    }

    .detail h2 {
        margin: 7px 0 9px;
        color: #586451;
    }

    .detail p {
        color: #66695e;
        line-height: 1.8;
    }

    .detail-divider {
        width: 1px;
        background: linear-gradient(180deg, transparent, rgba(181, 154, 102, .55), transparent);
    }

    .rsvp {
        align-self: center;
        padding: 45px 42px;
        border: 1px solid rgba(181, 154, 102, .34);
        border-radius: 4px;
        background:
            radial-gradient(ellipse at 100% 0%, rgba(228, 230, 216, .50), transparent 37%),
            #fffefa;
        box-shadow: 0 22px 56px rgba(67, 72, 59, .12);
    }

    .rsvp::before {
        display: block;
        width: 54px;
        height: 1px;
        margin: 0 auto 22px;
        background: linear-gradient(90deg, transparent, var(--gold), transparent);
        content: "";
    }

    .rsvp h2 {
        color: #4b594b;
        line-height: 1.2;
        text-wrap: balance;
    }

    .reply-by {
        max-width: 340px;
        margin: 12px auto 25px;
        color: #77766d;
        line-height: 1.75;
    }

    .rsvp form > input[type="text"],
    .rsvp form select {
        min-height: 50px;
        border: 1px solid #ded8ca;
        border-radius: 3px;
        background-color: #fffefa;
    }

    .rsvp form > input[type="text"]:focus,
    .rsvp form select:focus {
        border-color: #a99465;
        outline: 3px solid rgba(169, 148, 101, .15);
    }

    .rsvp fieldset {
        margin-top: 22px;
    }

    .rsvp .choice {
        border-color: #e4dfd3;
        background: rgba(248, 246, 240, .72);
    }

    .rsvp .choice:has(input:checked) {
        border-color: rgba(139, 151, 125, .72);
        background: rgba(232, 235, 224, .62);
    }

    .rsvp button {
        min-height: 52px;
        margin-top: 24px;
        border: 1px solid #77836d;
        border-radius: 3px;
        background: #77836d;
        box-shadow: 0 8px 20px rgba(75, 87, 69, .16);
        letter-spacing: .035em;
        transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
    }

    .rsvp button:hover {
        background: #65735c;
        box-shadow: 0 11px 24px rgba(75, 87, 69, .22);
        transform: translateY(-1px);
    }

    .leaf {
        z-index: 1;
        color: rgba(119, 131, 109, .20);
        font-size: 220px;
    }

    .leaf-left {
        top: 38px;
        left: -70px;
        transform: rotate(-22deg);
    }

    .leaf-right {
        top: auto;
        right: -70px;
        bottom: 5px;
        transform: rotate(158deg);
    }

    body:not(.admin-body) footer {
        padding-top: 8px;
    }

    body:not(.admin-body) footer .footer-ornament {
        color: #ad9562;
    }
}
@media (min-width: 1050px) {
    .leaf {
        top: -24px;
        width: 310px;
        height: 260px;
        color: transparent;
        font-size: 0;
        opacity: .34;
        background-image: url("floral-corner.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    .leaf-left {
        left: -68px;
        transform: rotate(-12deg);
    }

    .leaf-right {
        top: auto;
        right: -68px;
        bottom: -18px;
        transform: scaleX(-1) rotate(-12deg);
    }
}