:root {
    --cream: #f7f1e8;
    --cream-light: #fffdf8;
    --olive: #2f3a28;
    --olive-soft: #46533d;
    --sage: #a8b39a;
    --sage-light: #dce1d5;
    --blush: #d9b7a7;
    --gold: #c5a46d;
    --muted: #6f7469;
    --error: #9a4e48;
    --border: rgba(47, 58, 40, 0.32);
    --shadow: 0 22px 60px rgba(47, 58, 40, 0.12);
    --serif: "Cormorant Garamond", Georgia, serif;
    --sans: "Manrope", Arial, sans-serif;
}

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

html {
    scroll-behavior: smooth;
    background: var(--cream);
}

body {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    color: var(--olive);
    background: var(--cream);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
}

body.dialog-open { overflow: hidden; }

button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.skip-link {
    position: fixed;
    z-index: 1000;
    top: 8px;
    left: 8px;
    padding: 10px 14px;
    color: var(--cream);
    background: var(--olive);
    transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.container {
    position: relative;
    z-index: 2;
    width: min(100% - 48px, 1080px);
    margin-inline: auto;
}

.container.narrow { width: min(100% - 48px, 760px); }

section, footer { position: relative; overflow: hidden; }
.date-story {
    position: relative;
    z-index: 2;
    margin-top: -18px;
    padding-top: 18px;
    overflow: visible;
    background: var(--cream);
    isolation: isolate;
}
.date-story::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: -26px;
    left: 0;
    right: 0;
    height: 58px;
    background:
        radial-gradient(110px 34px at 16% 74%, rgba(255, 253, 248, 0.46), transparent 70%),
        radial-gradient(130px 38px at 74% 62%, rgba(197, 164, 109, 0.08), transparent 72%),
        linear-gradient(180deg, #fffaf1 0%, var(--cream) 58%, var(--cream) 100%);
    clip-path: polygon(0 22%, 7% 17%, 15% 22%, 24% 15%, 35% 20%, 47% 14%, 58% 19%, 70% 13%, 82% 20%, 92% 16%, 100% 21%, 100% 100%, 0 100%);
    pointer-events: none;
}
.date-story::after {
    content: "";
    position: absolute;
    z-index: 3;
    top: -6px;
    left: 50%;
    width: min(64vw, 360px);
    height: 14px;
    background:
        radial-gradient(circle at 30% 50%, rgba(197, 164, 109, 0.38) 0 1.5px, transparent 2px),
        radial-gradient(circle at 42% 50%, rgba(168, 179, 154, 0.32) 0 1.3px, transparent 1.9px),
        radial-gradient(circle at 58% 50%, rgba(168, 179, 154, 0.32) 0 1.3px, transparent 1.9px),
        radial-gradient(circle at 70% 50%, rgba(197, 164, 109, 0.38) 0 1.5px, transparent 2px),
        linear-gradient(90deg, transparent 0%, rgba(197, 164, 109, 0.22) 28%, rgba(168, 179, 154, 0.18) 50%, rgba(197, 164, 109, 0.22) 72%, transparent 100%) center / 100% 1px no-repeat;
    opacity: 0.54;
    pointer-events: none;
    transform: translateX(-50%);
}
.date-story > section {
    position: relative;
    z-index: 2;
}

.paper-divider {
    --paper-bg: var(--cream);
    --paper-top: var(--cream);
    --paper-sheen: rgba(255, 253, 248, 0.22);
    --paper-accent: rgba(197, 164, 109, 0.22);
    --paper-dot: rgba(197, 164, 109, 0.34);
    position: relative;
    z-index: 4;
    height: 22px;
    margin-top: -14px;
    margin-bottom: -1px;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(120px 24px at 24% 62%, var(--paper-sheen), transparent 72%),
        radial-gradient(110px 22px at 76% 52%, var(--paper-sheen), transparent 76%),
        linear-gradient(180deg, var(--paper-top) 0%, var(--paper-bg) 72%);
    clip-path: polygon(0 32%, 10% 24%, 22% 31%, 35% 23%, 48% 30%, 61% 25%, 74% 31%, 88% 24%, 100% 30%, 100% 100%, 0 100%);
}
.paper-divider::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    width: min(40vw, 220px);
    height: 9px;
    background:
        radial-gradient(circle at 42% 50%, var(--paper-dot) 0 1.2px, transparent 1.8px),
        radial-gradient(circle at 58% 50%, var(--paper-dot) 0 1.2px, transparent 1.8px),
        linear-gradient(90deg, transparent 0%, var(--paper-accent) 36%, rgba(168, 179, 154, 0.14) 50%, var(--paper-accent) 64%, transparent 100%) center / 100% 1px no-repeat;
    opacity: 0.45;
    transform: translateX(-50%);
}
.paper-divider--olive {
    --paper-bg: var(--olive);
    --paper-top: #33402b;
    --paper-sheen: rgba(168, 179, 154, 0.08);
    --paper-accent: rgba(197, 164, 109, 0.18);
    --paper-dot: rgba(247, 241, 232, 0.24);
}
.paper-divider--cream {
    --paper-bg: var(--cream);
    --paper-top: #fffaf1;
    --paper-sheen: rgba(255, 253, 248, 0.38);
    --paper-accent: rgba(197, 164, 109, 0.18);
    --paper-dot: rgba(197, 164, 109, 0.28);
}
.paper-divider--sage {
    --paper-bg: var(--sage-light);
    --paper-top: #e8ecdf;
    --paper-sheen: rgba(255, 253, 248, 0.24);
    --paper-accent: rgba(197, 164, 109, 0.16);
    --paper-dot: rgba(47, 58, 40, 0.20);
}

.section-cream { background: var(--cream); }
.section-dark { color: var(--cream); background: var(--olive); }
.section-sage { background: var(--sage-light); }

h1, h2, h3, p { margin-top: 0; }

h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 500;
    line-height: 0.98;
}

h2 {
    margin-bottom: 14px;
    font-size: clamp(42px, 11vw, 64px);
    text-align: center;
    letter-spacing: -0.025em;
    text-transform: uppercase;
}

.eyebrow {
    margin-bottom: 16px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-align: center;
    text-transform: uppercase;
}

.section-lead {
    max-width: 560px;
    margin: 0 auto 38px;
    color: var(--muted);
    font-size: 14px;
    text-align: center;
}

.section-dark .section-lead { color: rgba(247, 241, 232, 0.72); }

.script-line {
    margin-bottom: 8px;
    color: var(--gold);
    font-family: var(--serif);
    font-size: 34px;
    font-style: italic;
    line-height: 1;
    text-align: center;
}

.script-line--gold { color: var(--gold); }

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 14px 22px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 180ms ease, background-color 180ms ease, color 180ms ease;
}

.button:active { transform: scale(0.985); }
.button:focus-visible, .close-button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 3px solid rgba(197, 164, 109, 0.48);
    outline-offset: 3px;
}
.button--light { color: var(--olive); background: var(--cream); }
.button--dark { color: var(--cream); background: var(--olive); }
.button--outline { width: 100%; color: var(--olive); border-color: var(--border); background: transparent; }

.hero {
    display: grid;
    min-height: 100svh;
    place-items: center;
    padding: 88px 0 54px;
}

.hero__content { text-align: center; }
.hero h1 {
    max-width: 720px;
    margin: 0 auto 18px;
    font-size: 44px;
    letter-spacing: -0.04em;
    text-transform: uppercase;
}
.hero h1 span { display: block; color: var(--gold); font-style: italic; }
.hero__date {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    margin: 25px 0 22px;
    font-family: var(--serif);
    font-size: 24px;
    letter-spacing: 0.12em;
}
.hero__date i, .date-caption i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.hero__intro { margin-bottom: 30px; color: rgba(247, 241, 232, 0.76); font-size: 13px; }
.hero .button { width: 100%; max-width: 342px; }

.scroll-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 34px;
    color: rgba(247, 241, 232, 0.52);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-decoration: none;
    text-transform: uppercase;
}
.scroll-hint span { position: relative; width: 1px; height: 34px; background: rgba(247, 241, 232, 0.35); }
.scroll-hint span::after { content: ""; position: absolute; bottom: 0; left: -2px; width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }

.countdown-section { padding: 78px 0 72px; }
.countdown {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 30px;
}
.countdown > div {
    display: flex;
    min-width: 0;
    min-height: 96px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(197, 164, 109, 0.75);
    border-radius: 16px;
    background: var(--cream-light);
}
.countdown strong { font-family: var(--serif); font-size: clamp(30px, 9vw, 48px); font-weight: 500; line-height: 1; }
.countdown span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.date-caption { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 24px 0 0; color: var(--gold); font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }

.wedding-day-message {
    padding: 32px 24px;
    border: 1px solid var(--gold);
    border-radius: 16px;
    background: var(--cream-light);
    text-align: center;
}
.wedding-day-message span { color: var(--gold); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.wedding-day-message strong { display: block; margin: 8px 0; font-family: var(--serif); font-size: 38px; font-weight: 500; }
.wedding-day-message p { margin: 0; color: var(--muted); }

.calendar-section { padding: 42px 0 90px; }
.calendar { padding: 24px 18px; border: 1px solid rgba(197, 164, 109, 0.8); border-radius: 16px; background: var(--cream-light); box-shadow: var(--shadow); }
.calendar__weekdays, .calendar__days { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.calendar__weekdays { margin-bottom: 10px; color: var(--muted); font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.calendar__days { row-gap: 8px; color: var(--muted); font-size: 12px; }
.calendar__days span { display: grid; width: 34px; height: 34px; margin: auto; place-items: center; border-radius: 50%; }
.calendar__chosen { color: var(--olive); background: var(--blush); font-weight: 600; box-shadow: 0 0 0 5px rgba(217, 183, 167, 0.2); }

.program { padding: 92px 0 84px; }
.program h2 { margin-bottom: 12px; }
.timeline { width: 100%; max-width: 620px; margin: 38px auto 0; padding: 0; list-style: none; }
.timeline__item {
    display: grid;
    grid-template-columns: 68px 1fr;
    gap: 18px;
    min-height: 126px;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible .timeline__item { opacity: 1; transform: none; }
.timeline__item:nth-child(2) { transition-delay: 110ms; }
.timeline__item:nth-child(3) { transition-delay: 220ms; }
.timeline__item:nth-child(4) { transition-delay: 330ms; }
.timeline time { padding-top: 2px; font-family: var(--serif); font-size: 28px; }
.timeline div { position: relative; padding: 0 0 32px 28px; border-left: 1px solid rgba(197, 164, 109, 0.7); }
.timeline div::before { content: ""; position: absolute; top: 8px; left: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 15px rgba(255, 222, 151, 0.55); }
.timeline__item:last-child div { border-color: transparent; }
.timeline h3 { margin-bottom: 8px; font-size: 25px; }
.timeline p { margin: 0; color: rgba(247, 241, 232, 0.65); font-size: 12px; }

.locations { padding: 90px 0 82px; }
.location-grid { display: grid; gap: 18px; margin-top: 36px; }
.location-card { position: relative; padding: 32px 24px 24px; border: 1px solid rgba(197, 164, 109, 0.78); border-radius: 18px; background: var(--cream-light); box-shadow: var(--shadow); }
.location-card .eyebrow { margin-bottom: 10px; color: var(--muted); text-align: left; }
.location-card h3 { margin-bottom: 18px; font-size: 37px; }
.location-card address { min-height: 70px; color: var(--muted); font-size: 12px; font-style: normal; }
.location-card__number { position: absolute; top: 22px; right: 22px; color: rgba(197, 164, 109, 0.7); font-family: var(--serif); font-size: 24px; }
.location-card__time { margin: 18px 0; padding-top: 16px; border-top: 1px solid rgba(47, 58, 40, 0.1); font-size: 12px; font-weight: 600; }
.transfer-note { max-width: 660px; margin: 30px auto 0; color: var(--muted); font-size: 12px; text-align: center; }
.transfer-note span { display: block; margin-bottom: 6px; color: var(--gold); font-family: var(--serif); font-size: 28px; }

.dress-code { padding: 90px 0 80px; }
.palette { display: flex; align-items: flex-start; justify-content: center; gap: 12px; margin: 38px 0 30px; }
.palette span { position: relative; display: block; width: clamp(48px, 15vw, 76px); aspect-ratio: 1; border: 5px solid rgba(255,255,255,0.35); border-radius: 50%; background: var(--swatch); box-shadow: 0 8px 20px rgba(47,58,40,.1); }
.palette i { position: absolute; top: calc(100% + 10px); left: 50%; display: none; color: var(--muted); font-size: 9px; font-style: normal; white-space: nowrap; transform: translateX(-50%); }
.dress-examples { display: grid; gap: 18px; margin: 36px auto 28px; }
.dress-example { margin: 0; padding: 10px 10px 16px; border: 1px solid rgba(197,164,109,.55); border-radius: 8px; background: rgba(255,253,248,.62); box-shadow: 0 18px 34px rgba(47,58,40,.08); }
.dress-example img { display: block; width: 100%; aspect-ratio: 3 / 4; border-radius: 6px; object-fit: cover; }
.dress-example figcaption { margin-top: 12px; color: var(--olive); font-family: var(--serif); font-size: 24px; text-align: center; }
.dress-code__note { margin: 0; color: var(--muted); font-family: var(--serif); font-size: 20px; font-style: italic; text-align: center; }

.wishes { padding: 90px 0 88px; }
.wish-grid { display: grid; gap: 14px; margin-top: 34px; }
.wish-card { position: relative; padding: 28px 24px; border-top: 1px solid var(--border); background: rgba(255,253,248,.55); }
.wish-card span { color: var(--gold); font-family: var(--serif); font-size: 20px; }
.wish-card h3 { margin: 8px 0 12px; font-size: 29px; }
.wish-card p { margin: 0; color: var(--muted); font-size: 12px; }

.rsvp-cta { padding: 104px 0 96px; text-align: center; }
.rsvp-cta .button { width: 100%; max-width: 342px; }
.contact-placeholder { margin: 24px 0 0; color: rgba(247,241,232,.5); font-size: 10px; }
.contact-placeholder span { color: var(--gold); }

.footer { padding: 86px 0 74px; text-align: center; }
.footer h2 { font-size: 46px; text-transform: none; }
.footer p { margin-bottom: 30px; color: var(--muted); }
.footer strong { display: block; font-family: var(--serif); font-size: 27px; font-weight: 500; }
.footer time { display: block; margin-top: 10px; color: var(--gold); font-size: 10px; letter-spacing: 0.12em; }

.light-string { position: absolute; z-index: 1; width: 120%; height: 100px; pointer-events: none; transform: rotate(-7deg); }
.light-string::before { content: ""; position: absolute; top: 30px; left: 0; width: 100%; height: 1px; background: rgba(197,164,109,.58); }
.light-string i { position: absolute; top: 27px; width: 7px; height: 7px; border-radius: 50%; background: #ffeaa2; box-shadow: 0 0 10px 3px rgba(255,225,140,.42); }
.light-string i:nth-child(1) { left: 8%; }.light-string i:nth-child(2) { left: 25%; }.light-string i:nth-child(3) { left: 43%; }.light-string i:nth-child(4) { left: 61%; }.light-string i:nth-child(5) { left: 78%; }.light-string i:nth-child(6) { left: 94%; }
.light-string--top { top: 40px; left: -8%; }
.light-string--program { top: 28px; left: -10%; transform: rotate(7deg); }
.light-string--bottom { bottom: 18px; left: -8%; transform: rotate(-5deg); }

.flower { position: absolute; z-index: 1; width: 118px; height: 118px; pointer-events: none; }
.flower i { position: absolute; top: 36px; left: 42px; width: 36px; height: 48px; border-radius: 55% 55% 45% 45%; background: rgba(247,241,232,.92); transform-origin: 18px 23px; }
.flower i:nth-child(2) { transform: rotate(72deg); }.flower i:nth-child(3) { transform: rotate(144deg); }.flower i:nth-child(4) { transform: rotate(216deg); }.flower i:nth-child(5) { transform: rotate(288deg); }
.flower b { position: absolute; top: 50px; left: 50px; width: 22px; height: 22px; border-radius: 50%; background: #e4bc72; }
.flower--hero { right: -42px; bottom: 110px; opacity: .82; }
.flower--program { right: -35px; top: 44%; opacity: .76; transform: scale(.78); }
.flower--rsvp { left: -38px; bottom: 55px; opacity: .78; transform: scale(.82); }

.botanical { position: absolute; z-index: 1; width: 150px; height: 170px; pointer-events: none; }
.botanical::before { content: ""; position: absolute; left: 70px; width: 1px; height: 160px; background: var(--sage); transform: rotate(-18deg); }
.botanical span { position: absolute; width: 70px; height: 24px; border-radius: 70% 20% 70% 20%; background: var(--sage); opacity: .7; transform: rotate(-28deg); }
.botanical span:nth-child(1) { top: 26px; left: 20px; }.botanical span:nth-child(2) { top: 74px; left: 64px; transform: rotate(150deg); }.botanical span:nth-child(3) { top: 113px; left: 7px; }
.botanical--hero-left { left: -55px; bottom: 18px; transform: rotate(17deg); }
.botanical--dress { right: -55px; top: 34px; transform: rotate(22deg); opacity: .7; }

.falling-leaves {
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    contain: layout style paint;
}
.falling-leaves__leaf {
    position: absolute;
    top: var(--leaf-top, -18vh);
    left: var(--leaf-x, 50%);
    width: var(--leaf-w, 13px);
    height: var(--leaf-h, 30px);
    border-radius: 78% 14% 76% 18%;
    background: var(--leaf-color, var(--sage));
    opacity: 0;
    transform-origin: 50% 92%;
    animation: leaf-fall var(--leaf-duration, 24s) linear var(--leaf-delay, -8s) infinite;
    will-change: transform, opacity;
}
.falling-leaves__leaf::before {
    content: "";
    position: absolute;
    top: 16%;
    left: 50%;
    width: 1px;
    height: 68%;
    background: rgba(47, 58, 40, 0.18);
    opacity: 0.45;
    transform: translateX(-50%) rotate(-8deg);
}
.falling-leaves__leaf:nth-child(n+9) { display: none; }
.falling-leaves__leaf:nth-child(1) { --leaf-x: 6%; --leaf-w: 12px; --leaf-h: 27px; --leaf-color: rgba(168,179,154,.84); --leaf-alpha: .56; --leaf-duration: 26s; --leaf-delay: -19s; --leaf-mid-x: 26px; --leaf-end-x: 78px; --leaf-rotate-start: -18deg; --leaf-rotate-mid: 42deg; --leaf-rotate-end: 94deg; }
.falling-leaves__leaf:nth-child(2) { --leaf-x: 18%; --leaf-w: 14px; --leaf-h: 32px; --leaf-color: rgba(247,241,232,.78); --leaf-alpha: .5; --leaf-duration: 31s; --leaf-delay: -7s; --leaf-mid-x: -18px; --leaf-end-x: -64px; --leaf-rotate-start: 14deg; --leaf-rotate-mid: -36deg; --leaf-rotate-end: -98deg; }
.falling-leaves__leaf:nth-child(3) { --leaf-x: 31%; --leaf-w: 11px; --leaf-h: 25px; --leaf-color: rgba(217,183,167,.74); --leaf-alpha: .54; --leaf-duration: 24s; --leaf-delay: -15s; --leaf-mid-x: 34px; --leaf-end-x: 96px; --leaf-rotate-start: -28deg; --leaf-rotate-mid: 28deg; --leaf-rotate-end: 116deg; }
.falling-leaves__leaf:nth-child(4) { --leaf-x: 43%; --leaf-w: 13px; --leaf-h: 31px; --leaf-color: rgba(70,83,61,.7); --leaf-alpha: .48; --leaf-duration: 29s; --leaf-delay: -23s; --leaf-mid-x: -26px; --leaf-end-x: -86px; --leaf-rotate-start: 22deg; --leaf-rotate-mid: -22deg; --leaf-rotate-end: -82deg; }
.falling-leaves__leaf:nth-child(5) { --leaf-x: 58%; --leaf-w: 12px; --leaf-h: 29px; --leaf-color: rgba(168,179,154,.78); --leaf-alpha: .52; --leaf-duration: 27s; --leaf-delay: -11s; --leaf-mid-x: 18px; --leaf-end-x: 58px; --leaf-rotate-start: -8deg; --leaf-rotate-mid: 50deg; --leaf-rotate-end: 126deg; }
.falling-leaves__leaf:nth-child(6) { --leaf-x: 70%; --leaf-w: 15px; --leaf-h: 34px; --leaf-color: rgba(247,241,232,.72); --leaf-alpha: .48; --leaf-duration: 32s; --leaf-delay: -27s; --leaf-mid-x: -34px; --leaf-end-x: -104px; --leaf-rotate-start: 30deg; --leaf-rotate-mid: -18deg; --leaf-rotate-end: -112deg; }
.falling-leaves__leaf:nth-child(7) { --leaf-x: 82%; --leaf-w: 11px; --leaf-h: 26px; --leaf-color: rgba(217,183,167,.72); --leaf-alpha: .5; --leaf-duration: 25s; --leaf-delay: -4s; --leaf-mid-x: 22px; --leaf-end-x: 68px; --leaf-rotate-start: -22deg; --leaf-rotate-mid: 36deg; --leaf-rotate-end: 102deg; }
.falling-leaves__leaf:nth-child(8) { --leaf-x: 93%; --leaf-w: 13px; --leaf-h: 30px; --leaf-color: rgba(70,83,61,.64); --leaf-alpha: .46; --leaf-duration: 30s; --leaf-delay: -17s; --leaf-mid-x: -28px; --leaf-end-x: -92px; --leaf-rotate-start: 16deg; --leaf-rotate-mid: -42deg; --leaf-rotate-end: -118deg; }
.falling-leaves__leaf:nth-child(9) { --leaf-x: 11%; --leaf-w: 10px; --leaf-h: 24px; --leaf-color: rgba(247,241,232,.66); --leaf-alpha: .46; --leaf-duration: 34s; --leaf-delay: -29s; --leaf-mid-x: 42px; --leaf-end-x: 128px; --leaf-rotate-start: -12deg; --leaf-rotate-mid: 26deg; --leaf-rotate-end: 88deg; }
.falling-leaves__leaf:nth-child(10) { --leaf-x: 24%; --leaf-w: 13px; --leaf-h: 31px; --leaf-color: rgba(168,179,154,.7); --leaf-alpha: .5; --leaf-duration: 28s; --leaf-delay: -25s; --leaf-mid-x: -38px; --leaf-end-x: -116px; --leaf-rotate-start: 24deg; --leaf-rotate-mid: -28deg; --leaf-rotate-end: -104deg; }
.falling-leaves__leaf:nth-child(11) { --leaf-x: 51%; --leaf-w: 10px; --leaf-h: 25px; --leaf-color: rgba(217,183,167,.66); --leaf-alpha: .47; --leaf-duration: 33s; --leaf-delay: -13s; --leaf-mid-x: 30px; --leaf-end-x: 86px; --leaf-rotate-start: -32deg; --leaf-rotate-mid: 18deg; --leaf-rotate-end: 84deg; }
.falling-leaves__leaf:nth-child(12) { --leaf-x: 63%; --leaf-w: 14px; --leaf-h: 33px; --leaf-color: rgba(70,83,61,.58); --leaf-alpha: .43; --leaf-duration: 36s; --leaf-delay: -21s; --leaf-mid-x: -16px; --leaf-end-x: -72px; --leaf-rotate-start: 18deg; --leaf-rotate-mid: -34deg; --leaf-rotate-end: -96deg; }
.falling-leaves__leaf:nth-child(13) { --leaf-x: 76%; --leaf-w: 12px; --leaf-h: 28px; --leaf-color: rgba(247,241,232,.62); --leaf-alpha: .44; --leaf-duration: 30s; --leaf-delay: -31s; --leaf-mid-x: 36px; --leaf-end-x: 112px; --leaf-rotate-start: -16deg; --leaf-rotate-mid: 34deg; --leaf-rotate-end: 108deg; }
.falling-leaves__leaf:nth-child(14) { --leaf-x: 88%; --leaf-w: 11px; --leaf-h: 26px; --leaf-color: rgba(168,179,154,.66); --leaf-alpha: .45; --leaf-duration: 35s; --leaf-delay: -9s; --leaf-mid-x: -44px; --leaf-end-x: -124px; --leaf-rotate-start: 26deg; --leaf-rotate-mid: -24deg; --leaf-rotate-end: -86deg; }
.falling-leaves--date .falling-leaves__leaf:nth-child(n+5),
.falling-leaves--program .falling-leaves__leaf:nth-child(n+5) { display: none; }
.falling-leaves--date .falling-leaves__leaf:nth-child(1) { --leaf-x: 2%; --leaf-w: 10px; --leaf-h: 24px; --leaf-color: rgba(47,58,40,.96); --leaf-alpha: .14; --leaf-duration: 34s; --leaf-delay: -22s; --leaf-mid-x: 10px; --leaf-end-x: 24px; --leaf-rotate-start: -12deg; --leaf-rotate-mid: 24deg; --leaf-rotate-end: 72deg; }
.falling-leaves--date .falling-leaves__leaf:nth-child(2) { --leaf-x: 94%; --leaf-w: 12px; --leaf-h: 28px; --leaf-color: rgba(168,179,154,.92); --leaf-alpha: .12; --leaf-duration: 37s; --leaf-delay: -9s; --leaf-mid-x: -12px; --leaf-end-x: -30px; --leaf-rotate-start: 18deg; --leaf-rotate-mid: -20deg; --leaf-rotate-end: -74deg; }
.falling-leaves--date .falling-leaves__leaf:nth-child(3) { --leaf-top: 18%; --leaf-x: 7%; --leaf-w: 11px; --leaf-h: 26px; --leaf-color: rgba(168,179,154,.96); --leaf-alpha: .18; --leaf-duration: 31s; --leaf-delay: -17s; --leaf-mid-x: 12px; --leaf-end-x: 32px; --leaf-rotate-start: -20deg; --leaf-rotate-mid: 18deg; --leaf-rotate-end: 68deg; }
.falling-leaves--date .falling-leaves__leaf:nth-child(4) { --leaf-top: 18%; --leaf-x: 88%; --leaf-w: 10px; --leaf-h: 25px; --leaf-color: rgba(47,58,40,.88); --leaf-alpha: .16; --leaf-duration: 35s; --leaf-delay: -28s; --leaf-mid-x: -8px; --leaf-end-x: -26px; --leaf-rotate-start: 16deg; --leaf-rotate-mid: -24deg; --leaf-rotate-end: -78deg; }
.falling-leaves--date .falling-leaves__leaf:nth-child(5) { --leaf-top: 42%; --leaf-x: 1%; --leaf-w: 12px; --leaf-h: 29px; --leaf-color: rgba(168,179,154,.86); --leaf-alpha: .10; --leaf-duration: 40s; --leaf-delay: -31s; --leaf-mid-x: 8px; --leaf-end-x: 26px; --leaf-rotate-start: -16deg; --leaf-rotate-mid: 28deg; --leaf-rotate-end: 82deg; }
.falling-leaves--date .falling-leaves__leaf:nth-child(6) { --leaf-top: 42%; --leaf-x: 96%; --leaf-w: 11px; --leaf-h: 27px; --leaf-color: rgba(47,58,40,.82); --leaf-alpha: .12; --leaf-duration: 38s; --leaf-delay: -14s; --leaf-mid-x: -10px; --leaf-end-x: -34px; --leaf-rotate-start: 20deg; --leaf-rotate-mid: -18deg; --leaf-rotate-end: -70deg; }
.falling-leaves--program .falling-leaves__leaf:nth-child(1) { --leaf-x: 3%; --leaf-w: 11px; --leaf-h: 26px; --leaf-color: rgba(220,225,213,.9); --leaf-alpha: .18; --leaf-duration: 33s; --leaf-delay: -20s; --leaf-mid-x: 12px; --leaf-end-x: 34px; --leaf-rotate-start: -14deg; --leaf-rotate-mid: 26deg; --leaf-rotate-end: 78deg; }
.falling-leaves--program .falling-leaves__leaf:nth-child(2) { --leaf-x: 93%; --leaf-w: 13px; --leaf-h: 30px; --leaf-color: rgba(247,241,232,.82); --leaf-alpha: .16; --leaf-duration: 36s; --leaf-delay: -11s; --leaf-mid-x: -14px; --leaf-end-x: -36px; --leaf-rotate-start: 18deg; --leaf-rotate-mid: -22deg; --leaf-rotate-end: -82deg; }
.falling-leaves--program .falling-leaves__leaf:nth-child(3) { --leaf-x: 8%; --leaf-w: 10px; --leaf-h: 24px; --leaf-color: rgba(247,241,232,.76); --leaf-alpha: .12; --leaf-duration: 39s; --leaf-delay: -29s; --leaf-mid-x: 10px; --leaf-end-x: 28px; --leaf-rotate-start: -22deg; --leaf-rotate-mid: 20deg; --leaf-rotate-end: 68deg; }
.falling-leaves--program .falling-leaves__leaf:nth-child(4) { --leaf-x: 87%; --leaf-w: 12px; --leaf-h: 29px; --leaf-color: rgba(220,225,213,.86); --leaf-alpha: .22; --leaf-duration: 34s; --leaf-delay: -25s; --leaf-mid-x: -10px; --leaf-end-x: -30px; --leaf-rotate-start: 14deg; --leaf-rotate-mid: -26deg; --leaf-rotate-end: -76deg; }
.falling-leaves--program .falling-leaves__leaf:nth-child(5) { --leaf-x: 1%; --leaf-w: 13px; --leaf-h: 31px; --leaf-color: rgba(247,241,232,.72); --leaf-alpha: .14; --leaf-duration: 41s; --leaf-delay: -16s; --leaf-mid-x: 14px; --leaf-end-x: 36px; --leaf-rotate-start: -18deg; --leaf-rotate-mid: 22deg; --leaf-rotate-end: 86deg; }
.falling-leaves--program .falling-leaves__leaf:nth-child(6) { --leaf-x: 96%; --leaf-w: 10px; --leaf-h: 25px; --leaf-color: rgba(220,225,213,.82); --leaf-alpha: .20; --leaf-duration: 37s; --leaf-delay: -34s; --leaf-mid-x: -12px; --leaf-end-x: -32px; --leaf-rotate-start: 20deg; --leaf-rotate-mid: -18deg; --leaf-rotate-end: -72deg; }

@keyframes leaf-fall {
    0% {
        opacity: 0;
        transform: translate3d(0, -18vh, 0) rotate(var(--leaf-rotate-start, -16deg));
    }
    12%, 76% { opacity: var(--leaf-alpha, .5); }
    44% {
        transform: translate3d(var(--leaf-mid-x, 24px), 48vh, 0) rotate(var(--leaf-rotate-mid, 38deg));
    }
    100% {
        opacity: 0;
        transform: translate3d(var(--leaf-end-x, 72px), 118vh, 0) rotate(var(--leaf-rotate-end, 100deg));
    }
}

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 850ms ease, transform 850ms cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }

.rsvp-dialog {
    position: fixed;
    inset: 0;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--olive);
    background: var(--cream);
    overflow-x: hidden;
}
.rsvp-dialog::backdrop { background: rgba(20,25,18,.72); }
.rsvp-dialog[open] { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); animation: dialog-in 350ms ease both; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(18px); } }
.rsvp-dialog__bar { position: sticky; z-index: 5; top: 0; display: flex; width: 100%; min-width: 0; max-width: none; align-items: center; justify-content: space-between; min-height: 64px; padding: 10px 18px; border-bottom: 1px solid rgba(47,58,40,.1); background: rgba(247,241,232,.94); backdrop-filter: blur(14px); }
.rsvp-dialog__bar p { margin: 0; font-family: var(--serif); font-size: 20px; }
.close-button { position: fixed; z-index: 8; top: 11px; right: 12px; display: grid; width: 42px; height: 42px; padding: 0; border: 1px solid var(--border); border-radius: 50%; color: var(--olive); background: var(--cream); font-size: 27px; line-height: 1; place-items: center; cursor: pointer; }
.rsvp-dialog__scroll { width: 100%; min-width: 0; max-width: none; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.rsvp-form, .success-screen { width: min(calc(100% - 40px), 720px); max-width: 720px; min-width: 0; margin: 0 auto; padding: 54px 0 80px; }
.form-header { margin-bottom: 48px; text-align: center; }
.form-header h2 { font-size: 38px; }
.form-header h2 { margin-bottom: 18px; }
.form-header > p:last-child { color: var(--muted); font-size: 13px; }
.form-header p { max-width: 100%; overflow-wrap: anywhere; }

.form-field { margin-bottom: 38px; }
.form-field, .choice-group, .preference-card { width: 100%; max-width: 100%; min-width: 0; }
.form-field label, .choice-group legend { display: block; margin-bottom: 12px; font-family: var(--serif); font-size: 23px; line-height: 1.1; text-transform: uppercase; }
.form-field em, .choice-group em { color: var(--error); font-style: normal; }
.form-field input, .form-field textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--olive);
    background: var(--cream-light);
}
.form-field input { height: 52px; padding: 0 16px; }
.form-field textarea { min-height: 128px; padding: 14px 16px; resize: vertical; }
.form-field input::placeholder, .form-field textarea::placeholder { color: #969a91; }
.form-field small { display: block; margin-top: 8px; color: var(--muted); font-size: 10px; }
.field-error, .group-error { display: none !important; color: var(--error) !important; }
.form-field.has-error input, .form-field.has-error textarea { border-color: var(--error); }
.form-field.has-error .field-error, .choice-group.has-error .group-error { display: block !important; }

.choice-group { min-width: 0; margin: 0 0 40px; padding: 0; border: 0; }
.choice { display: flex; align-items: flex-start; gap: 12px; margin: 13px 0; cursor: pointer; }
.choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.choice span { position: relative; display: block; padding-left: 32px; color: var(--muted); font-size: 13px; }
.choice span::before { content: ""; position: absolute; top: 0; left: 0; width: 20px; height: 20px; border: 1.5px solid #929b88; border-radius: 50%; background: var(--cream-light); }
.choice input[type="checkbox"] + span::before { border-radius: 4px; }
.choice input:checked + span::before { border-color: var(--olive); background: var(--olive); box-shadow: inset 0 0 0 5px var(--cream-light); }
.choice input[type="checkbox"]:checked + span::before { box-shadow: inset 0 0 0 4px var(--cream-light); }
.choice input:focus-visible + span::before { outline: 3px solid rgba(197,164,109,.45); outline-offset: 3px; }
.choice-group--compact legend { margin-bottom: 16px; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .08em; }
.choice-grid { display: grid; grid-template-columns: 1fr; column-gap: 16px; }
.choice-grid legend { grid-column: 1 / -1; }
.group-error { margin-top: 8px; font-size: 10px; }

.conditional-block { animation: reveal-block 350ms ease both; }
@keyframes reveal-block { from { opacity: 0; transform: translateY(10px); } }
.preference-card { position: relative; margin: 10px 0 42px; padding: 28px 22px 12px; border: 1px solid rgba(197,164,109,.75); border-radius: 16px; background: var(--cream-light); }
.preference-card h3 { margin-bottom: 28px; font-size: 34px; }
.preference-card__number { position: absolute; top: 22px; right: 22px; color: var(--gold); font-family: var(--serif); font-size: 22px; }
.preference-card--companion { border-color: rgba(168,179,154,.9); }

.segmented-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.segmented-choice label { cursor: pointer; }
.segmented-choice input { position: absolute; opacity: 0; }
.segmented-choice span { display: grid; min-height: 48px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--cream-light); text-align: center; place-items: center; }
.segmented-choice input:checked + span { color: var(--cream); border-color: var(--olive); background: var(--olive); }

.form-submit { width: 100%; }
.privacy-note { margin: 14px 0 0; color: var(--muted); font-size: 9px; text-align: center; }
.success-screen { display: grid; min-height: calc(100svh - 64px); align-content: center; text-align: center; }
.success-screen__mark { display: grid; width: 72px; height: 72px; margin: 0 auto 26px; border: 1px solid var(--gold); border-radius: 50%; color: var(--olive); font-family: var(--serif); font-size: 34px; place-items: center; }
.success-screen h2 { text-transform: none; }
.success-screen > p:not(.script-line) { max-width: 500px; margin: 0 auto 30px; color: var(--muted); font-size: 13px; }

[hidden] { display: none !important; }

@media (hover:hover) {
    .button:hover { transform: translateY(-2px); }
    .button--light:hover { background: #fff; }
    .button--dark:hover { background: var(--olive-soft); }
    .button--outline:hover { color: var(--cream); background: var(--olive); }
}

@media (min-width: 700px) {
    .container { width: min(100% - 80px, 1080px); }
    .container.narrow { width: min(100% - 80px, 760px); }
    .date-story { margin-top: -30px; padding-top: 30px; }
    .date-story::before {
        top: -42px;
        height: 86px;
        clip-path: polygon(0 23%, 6% 16%, 14% 22%, 23% 14%, 34% 20%, 46% 12%, 57% 18%, 69% 13%, 80% 21%, 91% 15%, 100% 22%, 100% 100%, 0 100%);
    }
    .date-story::after {
        top: -9px;
        width: min(72vw, 520px);
        height: 16px;
        opacity: 0.64;
    }
    .paper-divider {
        height: 32px;
        margin-top: -20px;
        clip-path: polygon(0 31%, 9% 23%, 20% 29%, 33% 21%, 47% 28%, 60% 23%, 73% 30%, 87% 22%, 100% 29%, 100% 100%, 0 100%);
    }
    .paper-divider::after {
        top: 12px;
        width: min(44vw, 300px);
    }
    .hero h1 { font-size: clamp(78px, 8vw, 108px); }
    .hero h1 span { display: inline; }
    .hero__intro { font-size: 14px; }
    .location-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .wish-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .wish-card { border: 1px solid rgba(47,58,40,.13); border-radius: 14px; }
    .palette i { display: block; }
    .dress-examples { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 54px; }
    .dress-code__note { margin-top: 0; }
    .choice-grid { grid-template-columns: 1fr 1fr; }
    .preference-card { padding: 38px 38px 20px; }
    .rsvp-dialog__bar { padding-inline: 32px; }
    .rsvp-form, .success-screen { width: min(calc(100% - 80px), 720px); }
    .form-header h2 { font-size: 60px; }
    .falling-leaves__leaf:nth-child(n+9) { display: block; }
    .falling-leaves--date .falling-leaves__leaf:nth-child(n+5),
    .falling-leaves--program .falling-leaves__leaf:nth-child(n+5) { display: block; }
}

@media (min-width: 1024px) {
    .hero { min-height: 900px; }
    .hero__content { max-width: 900px; }
    .countdown > div { min-height: 120px; }
    .calendar { padding: 36px 42px; }
    .calendar__days { row-gap: 14px; }
    .program, .locations, .dress-code, .wishes { padding-block: 120px; }
    .timeline__item { grid-template-columns: 100px 1fr; }
    .timeline time { font-size: 36px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    .falling-leaves { display: none; }
    .reveal, .timeline__item { opacity: 1; transform: none; }
}