/* Refined storybook garden-party art direction */
:root {
    --primary: #a34865;
    --primary-dark: #632f43;
    --secondary: #d69b33;
    --accent: #df7772;
    --blush: #f3c5c8;
    --background: #fffaf3;
    --surface: #fffdf8;
    --peach: #f6dfcc;
    --plum: #422833;
    --muted: #776269;
    --line: rgba(99, 47, 67, .14);
    --shadow: 0 30px 80px rgba(82, 38, 52, .13);
}

body {
    background:
        radial-gradient(circle at 6% 20%, rgba(243, 197, 200, .23), transparent 24rem),
        radial-gradient(circle, rgba(99, 47, 67, .07) 1px, transparent 1.3px) 0 0 / 18px 18px,
        var(--background);
}

html, body, main {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

body::before {
    position: fixed;
    z-index: 200;
    inset: 0;
    border: 7px solid rgba(255, 255, 255, .7);
    pointer-events: none;
    content: "";
}

.section { padding-block: clamp(6rem, 11vw, 10rem); }
.eyebrow { display: flex; align-items: center; gap: .8rem; }
.eyebrow::before { width: 28px; height: 1px; background: currentColor; content: ""; }
.section-heading .eyebrow { justify-content: center; }
.section-heading .eyebrow::after { width: 28px; height: 1px; background: currentColor; content: ""; }

.nav { top: 1rem; left: 3%; width: 94%; padding: .85rem 1.2rem; border: 1px solid transparent; border-radius: 100px; }
.nav.scrolled { top: .65rem; padding-block: .65rem; border-color: rgba(255,255,255,.85); border-radius: 100px; }
.brand { font-size: 1.05rem; letter-spacing: .03em; }
.nav-links { gap: 1.8rem; }
.nav-rsvp { padding-inline: 1.25rem !important; background: var(--primary); color: white !important; }

.hero {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    min-height: 100svh;
    padding: 9rem max(5vw, calc((100vw - 1320px) / 2)) 7rem;
    background:
        linear-gradient(90deg, var(--background) 0 60%, transparent 60%),
        linear-gradient(180deg, transparent 75%, rgba(255,250,243,.75)),
        #f4ded6;
}

.hero::after {
    position: absolute;
    z-index: -2;
    inset: 0 0 0 35%;
    background: url('../image-optimized/DSC07382-1800.webp') center / cover no-repeat;
    content: "";
}

.hero-ribbon {
    position: absolute;
    z-index: 4;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    gap: clamp(1.2rem, 4vw, 4rem);
    padding: .65rem 1rem;
    overflow: hidden;
    background: var(--primary-dark);
    color: #fff7e8;
    font-size: .62rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    white-space: nowrap;
}
.hero-ribbon i { color: #efbd5d; font-style: normal; }
.hero-copy { align-self: center; width: 100%; max-width: min(650px, calc(60vw - max(5vw, (100vw - 1320px) / 2) - 2rem)); padding: clamp(1rem, 3vw, 3rem) 0; }
.hero-copy::before { display: block; width: 86px; height: 86px; margin-bottom: -2.4rem; border: 1px solid rgba(163,72,101,.2); border-radius: 50%; content: ""; }
.hero h1 { margin: 0 0 1.8rem; font-size: clamp(4rem, 6vw, 7.2rem); text-shadow: 0 2px 0 rgba(255,255,255,.4); }
.hero h1 em { display: inline-block; padding-left: clamp(1.5rem, 4vw, 4rem); font-size: .7em; }
.hero .lead { max-width: 440px; }
.hero-date { width: fit-content; padding: .55rem 1rem; border-block: 1px solid var(--line); }
.hero-visual { display: none; }
.hero .button { min-width: 180px; }
.scroll-note { bottom: 3.6rem; }
.spark-one { left: 38%; top: 24%; }
.spark-two { right: 4%; top: 18%; color: rgba(255,255,255,.9); }
.orb-one { right: 58%; background: transparent; border: 1px solid var(--secondary); }

.intro { grid-template-columns: 1.08fr .92fr; position: relative; gap: clamp(4rem, 9vw, 9rem); }
.intro::after {
    position: absolute;
    z-index: -1;
    right: -9vw;
    bottom: 4rem;
    width: 280px;
    height: 280px;
    opacity: .45;
    background:
        radial-gradient(ellipse at 50% 18%, rgba(214,155,51,.17) 0 13%, transparent 14%),
        radial-gradient(ellipse at 82% 50%, rgba(163,72,101,.13) 0 13%, transparent 14%),
        radial-gradient(ellipse at 50% 82%, rgba(214,155,51,.14) 0 13%, transparent 14%),
        radial-gradient(ellipse at 18% 50%, rgba(163,72,101,.12) 0 13%, transparent 14%);
    content: "";
    transform: rotate(18deg);
}
.intro::before { position: absolute; top: 6rem; left: 49%; color: rgba(214,155,51,.12); font-family: var(--display); font-size: 18rem; line-height: 1; content: "1"; }
.intro-photo { padding: .8rem .8rem 3.8rem; border-radius: .4rem; transform: rotate(-2deg); }
.intro-photo::after { position: absolute; right: 1rem; bottom: 1rem; color: var(--primary); font-family: var(--display); font-size: 1.1rem; font-style: italic; content: "our favorite little chapter"; }
.intro-photo img { aspect-ratio: 3 / 2; border-radius: .15rem; }
.intro-copy { position: relative; z-index: 1; }
.intro-copy h2 { max-width: 650px; }
.signature span,.signature strong { display: block; }
.signature strong { margin-top: .35rem; }

.memories {
    position: relative;
    padding-bottom: clamp(7rem, 12vw, 12rem);
    background:
        radial-gradient(ellipse at 50% 0, rgba(255,255,255,.7), transparent 38%),
        radial-gradient(circle at 10px 10px, rgba(163,72,101,.08) 1.5px, transparent 1.8px) 0 0 / 28px 28px,
        linear-gradient(180deg, #f7e6e2, #faefea);
}
.memories::before,
.memories::after {
    position: absolute;
    width: 170px;
    height: 320px;
    opacity: .28;
    background:
        radial-gradient(ellipse at 25% 18%, transparent 0 27%, rgba(163,72,101,.35) 28% 29%, transparent 30%),
        radial-gradient(ellipse at 78% 42%, transparent 0 30%, rgba(214,155,51,.42) 31% 32%, transparent 33%),
        radial-gradient(ellipse at 25% 70%, transparent 0 25%, rgba(163,72,101,.3) 26% 27%, transparent 28%);
    content: "";
    pointer-events: none;
}
.memories::before { top: 5rem; left: -2rem; transform: rotate(-18deg); }
.memories::after { right: -2rem; bottom: 4rem; transform: rotate(165deg); }
.memories .section-heading { max-width: 850px; }
.gallery { grid-auto-rows: 145px; max-width: 1220px; margin: auto; gap: 1.25rem; }
.gallery-item { border: 10px solid #fffdf8; border-radius: .35rem; box-shadow: 0 16px 40px rgba(77,45,58,.12); }
.gallery-1 { transform: rotate(-1.3deg); }
.gallery-2 { transform: translateY(1.5rem) rotate(1deg); }
.gallery-3 { transform: rotate(2deg); }
.gallery-4 { transform: translateY(2.2rem) rotate(-1deg); }
.gallery-5 { transform: rotate(1.2deg); }
.gallery-6 { transform: translateY(1rem) rotate(-2deg); }
.gallery-item:hover { transform: translateY(-8px) rotate(0); }

.memory-carousel { position: relative; max-width: 1050px; margin: 0 auto; overflow: hidden; border: 10px solid rgba(255,253,248,.92); border-radius: 10rem 10rem 1.5rem 1.5rem; background: var(--surface); box-shadow: var(--shadow); isolation: isolate; }
.memory-carousel::before,.memory-carousel::after { position: absolute; z-index: 4; top: 2rem; width: 68px; height: 68px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; content: ""; pointer-events: none; }
.memory-carousel::before { left: 2rem; }
.memory-carousel::after { right: 2rem; border-color: rgba(214,155,51,.7); }
.memory-track { display: flex; transition: transform .75s cubic-bezier(.22,.61,.36,1); touch-action: pan-y; }
.memory-slide { position: relative; flex: 0 0 100%; height: clamp(440px, 62vw, 690px); padding: 0; overflow: hidden; border: 0; background: #ead7d2; cursor: zoom-in; }
.memory-slide::after { position: absolute; inset: auto 0 0; height: 35%; background: linear-gradient(transparent, rgba(45,21,29,.48)); content: ""; pointer-events: none; }
.memory-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.035); transition: transform 5s ease-out, filter .7s ease; filter: saturate(.9) brightness(.94); }
.memory-slide.is-active img { transform: scale(1); filter: saturate(1.04) brightness(1); }
.memory-slide span { position: absolute; z-index: 2; right: 2rem; bottom: 1.5rem; color: white; font-family: var(--display); font-size: 1.15rem; letter-spacing: .08em; }
.memory-slide span i { margin-inline: .3rem; font-size: .75rem; opacity: .7; }
.memory-controls { display: flex; align-items: center; justify-content: center; gap: 1.2rem; min-height: 76px; padding: .7rem 1rem; background: var(--surface); }
.memory-navigation { display: grid; justify-items: center; gap: .4rem; min-width: 210px; }
.memory-status { color: var(--muted); font-size: .58rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.memory-status strong { color: var(--primary); }
.memory-prev,.memory-next { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--primary-dark); font-size: 1.15rem; cursor: pointer; transition: .2s; }
.memory-prev:hover,.memory-next:hover { border-color: var(--primary); background: var(--primary); color: white; }
.memory-dots { display: flex; align-items: center; justify-content: center; gap: .55rem; }
.memory-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(99,47,67,.25); cursor: pointer; transition: .25s; }
.memory-dots button.active { width: 25px; border-radius: 99px; background: var(--primary); }
.memory-progress { width: 100%; height: 2px; overflow: hidden; border-radius: 99px; background: rgba(99,47,67,.1); }
.memory-progress i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,var(--secondary),var(--primary)); transform-origin: left; }
@keyframes memoryProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.memory-journal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 72px; gap: clamp(.75rem, 1.5vw, 1.15rem); max-width: 1160px; margin: 0 auto; }
.journal-card { position: relative; z-index: 1; min-width: 0; margin: 0; overflow: hidden; border-radius: 1.25rem; background: #fffdf8; box-shadow: 0 14px 35px rgba(82,38,52,.1); transition: transform .35s, box-shadow .35s; }
.journal-card button { display: block; width: 100%; height: 100%; padding: 0; overflow: hidden; border: 0; background: #ead8d2; cursor: zoom-in; }
.journal-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.journal-card:hover { z-index: 3; box-shadow: 0 28px 65px rgba(82,38,52,.2); transform: translateY(-7px) rotate(0deg); }
.journal-card:hover img { transform: scale(1.035); }
.journal-card:nth-child(1) { grid-column: 1 / 8; grid-row: 1 / 8; border-radius: 5rem 1.25rem 1.25rem; }
.journal-card:nth-child(2) { grid-column: 8 / 13; grid-row: 1 / 5; }
.journal-card:nth-child(3) { grid-column: 8 / 13; grid-row: 5 / 8; }
.journal-card:nth-child(4) { grid-column: 1 / 5; grid-row: 8 / 13; }
.journal-card:nth-child(5) { grid-column: 5 / 9; grid-row: 8 / 13; }
.journal-card:nth-child(6) { grid-column: 9 / 13; grid-row: 8 / 13; }
.journal-card:nth-child(7) { grid-column: 3 / 11; grid-row: 13 / 20; border-radius: 1.25rem 1.25rem 5rem; }
.journal-card:nth-child(n + 8) { grid-column: span 4; grid-row: span 5; }
.gallery-extra { display: none; }
.memory-journal.is-expanded .gallery-extra { display: block; animation: galleryIn .55s both; }
.gallery-toggle { display: flex; align-items: center; gap: .65rem; margin: 2rem auto 0; padding: .9rem 1.35rem; border: 1px solid rgba(99,47,67,.25); border-radius: 99px; background: rgba(255,253,248,.75); color: var(--primary-dark); font: 600 .75rem var(--body); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: .25s; }
.gallery-toggle:hover { border-color: var(--primary); background: var(--primary); color: white; }
.gallery-toggle i { font-size: 1rem; font-style: normal; transition: transform .3s; }
.gallery-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.journal-note { width: min(100%, 460px); margin: 2.5rem auto 0; padding: 1.2rem 1.5rem; border: 1px solid rgba(214,155,51,.35); border-radius: 99px; background: rgba(255,250,243,.8); text-align: center; }
.journal-note span { color: var(--secondary); font-size: 1.4rem; }
.journal-note p { display: inline; margin: 0 0 0 .5rem; color: var(--primary-dark); font-family: var(--display); font-size: 1.05rem; font-style: italic; }
@keyframes galleryIn { from { opacity: 0; transform: translateY(18px); } }

.details { padding-top: 3rem; background: linear-gradient(180deg, #faefea 0 13%, var(--background) 13%); }
.details-card { grid-template-columns: 1.12fr .88fr; max-width: 1160px; min-height: 650px; border: 10px solid rgba(255,255,255,.75); border-radius: 10rem 10rem 1.5rem 1.5rem; }
.details-title { display: flex; flex-direction: column; justify-content: end; padding: clamp(3rem, 6vw, 5rem); background-position: center; }
.details-title::before { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 25%, rgba(63,27,40,.72)); content: ""; }
.details-title { position: relative; }
.details-title > * { position: relative; z-index: 1; }
.details-title h2 { max-width: 560px; margin-bottom: 0; font-size: clamp(2.35rem, 3.6vw, 3.8rem); line-height: 1.02; text-wrap: balance; }
.detail-list { display: flex; flex-direction: column; justify-content: center; background: linear-gradient(145deg, #74364d, #512938); }
.detail-list article { padding-block: 1.6rem; }

.countdown {
    position: relative;
    padding-top: 7rem;
    background:
        radial-gradient(circle at 15% 25%, rgba(214,155,51,.12) 0 3px, transparent 4px),
        radial-gradient(circle at 85% 72%, rgba(163,72,101,.1) 0 2px, transparent 3px),
        radial-gradient(circle at 72% 18%, rgba(214,155,51,.11) 0 1.5px, transparent 2.5px);
    background-size: 130px 130px, 95px 95px, 70px 70px;
}
.countdown::before,
.countdown::after { position: absolute; color: rgba(214,155,51,.28); font-size: clamp(2rem,5vw,4rem); content: "✦"; }
.countdown::before { top: 22%; left: 8%; transform: rotate(12deg); }
.countdown::after { right: 8%; bottom: 20%; font-size: 2rem; transform: rotate(-15deg); }
.timer { gap: clamp(.7rem, 2vw, 1.5rem); }
.timer div { position: relative; border: 0; background: linear-gradient(145deg, #fff, #f8e9e2); }
.timer div::after { position: absolute; inset: 7px; border: 1px solid rgba(163,72,101,.16); border-radius: 50%; content: ""; }
.timer strong,.timer span { position: relative; z-index: 1; }

.celebration-story {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 18%, rgba(214,155,51,.13), transparent 18rem),
        radial-gradient(circle at 92% 80%, rgba(163,72,101,.12), transparent 20rem),
        linear-gradient(180deg, #fffaf3, #faeee9);
}
.celebration-story::before { position: absolute; top: 3rem; left: 50%; color: rgba(214,155,51,.1); font-family: var(--display); font-size: clamp(13rem, 30vw, 28rem); line-height: 1; content: "1"; transform: translateX(-50%); pointer-events: none; }
.celebration-story .section-heading { position: relative; z-index: 1; }
.celebration-story .section-heading > p:last-child { max-width: 680px; margin-inline: auto; }
.milestone-cards { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); max-width: 1160px; margin: 4rem auto 0; }
.milestone-card { min-width: 0; padding: clamp(2rem, 4vw, 3.2rem); border: 1px solid rgba(163,72,101,.12); border-radius: 50% 50% 1.5rem 1.5rem; background: rgba(255,253,248,.9); box-shadow: 0 20px 55px rgba(82,38,52,.09); text-align: center; }
.milestone-card:nth-child(1) { transform: rotate(-1.5deg); }
.milestone-card:nth-child(3) { transform: rotate(1.5deg); }
.milestone-featured { background: linear-gradient(150deg, #73364e, #4e2938); color: white; transform: translateY(-1.2rem); }
.milestone-icon,.milestone-number { display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 1.5rem; border: 1px solid rgba(214,155,51,.45); border-radius: 50%; color: var(--secondary); font-family: var(--display); font-size: 2.4rem; line-height: 1; }
.milestone-number { font-size: 3.8rem; }
.milestone-card small { color: var(--primary); font-size: .65rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.milestone-featured small { color: #f2c874; }
.milestone-card h3 { margin: .65rem 0 .8rem; font-family: var(--display); font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 400; line-height: 1; }
.milestone-card p { margin: 0; color: var(--muted); font-size: .92rem; }
.milestone-featured p { color: rgba(255,255,255,.72); }

.wish { grid-template-columns: 1.08fr .92fr; background: #ecd2ca; }
.wish-image { height: min(78vw, 850px); padding: clamp(1rem, 3vw, 2rem); }
.wish-image img { border-radius: 50% 50% .6rem .6rem; box-shadow: 0 24px 60px rgba(72,31,44,.18); }
.wish blockquote { padding-inline: clamp(2.5rem, 8vw, 8rem); }
.wish blockquote p { color: var(--primary-dark); }

.rsvp { grid-template-columns: .85fr 1.15fr; background:
    radial-gradient(circle at 0 50%, rgba(243,197,200,.5), transparent 28rem),
    radial-gradient(circle, rgba(99,47,67,.065) 1px, transparent 1.4px) 0 0 / 22px 22px,
    linear-gradient(180deg, #fffaf3, #f9eee9); }
.rsvp-intro h2 { font-size: clamp(4rem, 6.2vw, 6.3rem); }
.rsvp-intro .mini-photo { width: min(360px, 100%); max-width: none; padding: 10px 10px 3.5rem; border-radius: .2rem; transform: rotate(-4deg); }
.mini-photo img { display: block; width: 100%; height: auto; aspect-ratio: auto; border-radius: 0; object-fit: contain; }
.rsvp-form { border: 8px solid rgba(255,255,255,.7); border-radius: 4rem 4rem 1.5rem 1.5rem; background: rgba(255,253,248,.96); }
.rsvp-form::before { display: block; width: 45px; height: 1px; margin: 0 auto 2rem; background: var(--secondary); box-shadow: -12px 0 var(--secondary), 12px 0 var(--secondary); content: ""; }
.attendance label > span { border-radius: 1.5rem; }
.guest-details { display: block; }
.plus-one-label { margin: 1.5rem 0 .7rem; color: var(--primary-dark); font-size: .82rem; font-weight: 700; }
.plus-one-choice label > span { min-height: 82px; }
.plus-one-name { margin-top: 1rem; }
.slot-note { margin: .8rem 0 0; color: var(--muted); font-size: .75rem; line-height: 1.5; }
.submit { background: linear-gradient(100deg, var(--primary-dark), var(--primary)); }

.footer { position: relative; padding-block: 5rem; background: linear-gradient(135deg, #432631, #633246); }
.footer::before { display: block; width: 70px; height: 70px; margin: -7.2rem auto 2.5rem; border-radius: 50%; background: var(--background); color: var(--secondary); content: "✦"; line-height: 70px; }

@media (max-width: 1100px) and (min-width: 801px) {
    .section { padding-inline: 4vw; }
    .hero { grid-template-columns: minmax(0, 58%) minmax(0, 42%); padding-inline: 4vw; }
    .hero-copy { max-width: 54vw; }
    .hero h1 { font-size: clamp(4rem, 6.3vw, 5.2rem); }
    .hero h1 em { padding-left: 1.5rem; }
    .details-card { min-height: 580px; }
    .rsvp { gap: 3rem; }
}

@media (max-width: 800px) {
    body::before { border-width: 4px; }
    .nav { top: .5rem; left: 4%; width: 92%; }
    .menu-btn { display: grid; place-items: center; min-width: 44px; min-height: 44px; }
    .nav-links { max-width: calc(100vw - 2rem); }
    .hero { display: block; width: 100%; max-width: none; min-height: auto; margin: 0; padding: clamp(34rem, 150vw, 45rem) 1rem 4.5rem; overflow: hidden; background: var(--background); text-align: left; }
    .hero::after { top: 0; right: 0; bottom: auto; left: 0; width: 100%; height: clamp(34rem, 150vw, 45rem); background-position: center; background-size: cover; }
    .hero-copy { position: relative; z-index: 2; width: 100%; max-width: 620px; margin: 0 auto; padding: 2.2rem 1.4rem 1.5rem; border: 1px solid rgba(99,47,67,.1); border-radius: 0 0 2rem 2rem; background: var(--surface); box-shadow: 0 20px 55px rgba(82,38,52,.1); backdrop-filter: none; }
    .hero-copy::before { display: none; }
    .hero h1 { margin-bottom: 1rem; font-size: clamp(3.6rem, 17vw, 5.8rem); }
    .hero h1 em { padding-left: 1rem; }
    .hero .lead { display: block; }
    .hero-date { flex-wrap: wrap; justify-content: flex-start; margin: 1rem 0; padding-left: 0; font-size: .78rem; }
    .hero-ribbon { justify-content: flex-start; }
    .intro { grid-template-columns: 1fr; }
    .intro::before { display: none; }
    .intro::after { right: -6rem; width: 220px; height: 220px; }
    .gallery-item { transform: none; }
    .details-card { grid-template-columns: 1fr; border-width: 6px; border-radius: 5rem 5rem 1rem 1rem; }
    .details-title { min-height: 500px; border-radius: 4.5rem 4.5rem 0 0; }
    .wish { grid-template-columns: 1fr; }
    .wish-image { height: 600px; padding: 1rem; }
    .rsvp { grid-template-columns: 1fr; }
    .rsvp-form { border-width: 5px; border-radius: 3rem 3rem 1rem 1rem; }
    input, select, textarea { font-size: 16px; }
    .lightbox, .success-modal { padding: 1rem; }
    .success-modal > div { width: min(100%, 560px); max-height: calc(100svh - 2rem); overflow-y: auto; }
    .milestone-cards { grid-template-columns: 1fr; max-width: 560px; margin-top: 3rem; }
    .milestone-card,.milestone-card:nth-child(1),.milestone-card:nth-child(3),.milestone-featured { border-radius: 3rem 3rem 1rem 1rem; transform: none; }
    .memory-journal { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 230px; }
    .journal-card,.journal-card:nth-child(1),.journal-card:nth-child(2),.journal-card:nth-child(3),.journal-card:nth-child(4),.journal-card:nth-child(5),.journal-card:nth-child(6),.journal-card:nth-child(7) { grid-column: auto; grid-row: auto; border-radius: 1.25rem; }
    .journal-card:nth-child(n + 8) { grid-column: auto; grid-row: auto; }
    .journal-card:nth-child(1),.journal-card:nth-child(7) { grid-column: 1 / -1; grid-row: span 2; }
}

@media (prefers-reduced-motion: no-preference) {
    .countdown::before { animation: pattern-float 6s ease-in-out infinite; }
    .countdown::after { animation: pattern-float 7s ease-in-out -3s infinite reverse; }
}

@keyframes pattern-float {
    50% { translate: 0 -9px; rotate: 7deg; }
}

@media (max-width: 520px) {
    .section { padding-block: 5.5rem; }
    .hero { width: 100%; padding-top: 150vw; padding-right: 1rem; padding-left: 1rem; }
    .hero::after { right: 0; bottom: auto; left: 0; width: 100%; height: 150vw; background-size: cover; background-repeat: no-repeat; }
    .hero-copy { padding: 1.35rem; }
    .hero .eyebrow { margin-bottom: .5rem; }
    .hero .button { min-height: 3.35rem; }
    .intro-photo { padding-bottom: 3.2rem; }
    .gallery { grid-auto-rows: 185px; }
    .gallery-1,.gallery-7 { grid-column: 1 / -1 !important; }
    .details { padding-inline: .7rem; }
    .details-title { min-height: 650px; padding: 450px 1.7rem 2rem; background-position: center top; background-size: auto 420px; background-repeat: no-repeat; background-color: var(--primary-dark); }
    .details-title h2 { max-width: 290px; font-size: clamp(2rem, 9.5vw, 2.75rem); }
    .detail-list { padding: 1.7rem; }
    .timer div { box-shadow: none; }
    .wish-image { height: 480px; }
    .rsvp-form { padding: 1.15rem; }
    .form-grid { gap: 1rem; }
    legend { font-size: 1.45rem; }
    .footer { padding-right: max(1rem, env(safe-area-inset-right)); padding-left: max(1rem, env(safe-area-inset-left)); padding-bottom: max(3rem, env(safe-area-inset-bottom)); }
    .memory-carousel { border-width: 5px; border-radius: 3.5rem 3.5rem 1rem 1rem; }
    .memory-slide { height: min(125vw, 540px); }
    .memory-slide span { right: 1.2rem; bottom: 1rem; }
    .memory-controls { min-height: 68px; gap: .8rem; }
    .memory-navigation { min-width: 0; flex: 1; }
    .memory-carousel::before,.memory-carousel::after { top: 1rem; width: 42px; height: 42px; }
    .memory-carousel::before { left: 1rem; }
    .memory-carousel::after { right: 1rem; }
    .memory-journal { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 210px; gap: .6rem; }
    .journal-card,.journal-card:nth-child(1),.journal-card:nth-child(2),.journal-card:nth-child(3),.journal-card:nth-child(4),.journal-card:nth-child(5),.journal-card:nth-child(6),.journal-card:nth-child(7) { grid-column: auto; grid-row: auto; border-radius: .8rem; }
    .journal-card:nth-child(n + 8) { grid-column: auto; grid-row: auto; }
    .journal-card:nth-child(1),.journal-card:nth-child(7) { grid-column: 1 / -1; grid-row: span 2; border-radius: 2.5rem .8rem .8rem; }
    .journal-card:nth-child(7) { border-radius: .8rem .8rem 2.5rem; }
}

@media (max-width: 380px) {
    .nav { left: .65rem; width: calc(100% - 1.3rem); padding: .65rem .8rem; }
    .brand { max-width: calc(100% - 52px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .hero { padding-right: .7rem; padding-left: .7rem; }
    .hero-copy { padding: 1.2rem 1rem 1.35rem; border-radius: 0 0 1.4rem 1.4rem; }
    .hero h1 { font-size: clamp(3rem, 15.5vw, 3.7rem); }
    .hero h1 em { padding-left: .35rem; }
    .hero .button { width: 100%; }
    .gallery { grid-template-columns: 1fr; grid-auto-rows: 260px; }
    .gallery-1, .gallery-7 { grid-column: auto !important; }
    .details-card { border-width: 4px; border-radius: 3rem 3rem 1rem 1rem; }
    .details-title { min-height: 600px; padding: 410px 1.25rem 1.5rem; border-radius: 2.7rem 2.7rem 0 0; background-size: auto 380px; }
    .detail-list { padding: 1.35rem; }
    .detail-list article { grid-template-columns: 42px 1fr; gap: .75rem; }
    .timer { display: grid; grid-template-columns: repeat(2, minmax(0, 110px)); }
    .timer div { width: 100%; }
    .wish-image { height: 420px; }
    .wish blockquote { padding-inline: 1rem; }
    .rsvp-form { padding: .9rem; border-width: 3px; border-radius: 2rem 2rem 1rem 1rem; }
}