:root { --sylvia: #879b72; --sylvia-deep: #3f5b45; --sylvia-dark: #294435; --paper: #f7f3e8; --ink: #3b4039; --serif: 'Playfair Display', Georgia, serif; --script: 'Great Vibes', cursive; --sans: 'Montserrat', Arial, sans-serif;}
* { box-sizing: border-box; margin: 0; padding: 0;}
body { min-height: 100vh; overflow-x: hidden; color: var(--ink); font-family: var(--sans); background: #e7e4d8;}
body::before { position: fixed; inset: 0; z-index: -1; content: ''; opacity: .48; background: radial-gradient(circle at 20% 20%, #fff8 0 1px, transparent 1px), radial-gradient(circle at 80% 70%, #847f6d20 0 1px, transparent 1px); background-size: 4px 4px, 7px 7px;}
#envelope-container { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; flex-direction: column; cursor: pointer; perspective: 1300px; background: radial-gradient(circle at 50% 43%, #fffdf6 0 8%, transparent 36%), radial-gradient(ellipse at center, #f8f6ef 0%, #dfdfd2 100%); isolation: isolate; transition: opacity 1s ease, visibility 1s ease;}
#envelope-container::before { position: absolute; inset: 0; z-index: -1; content: ''; opacity: .7; background: radial-gradient(circle at 50% 42%, transparent 0 18%, #b8c5ad18 40%, transparent 68%); animation: ambient-glow 5s ease-in-out infinite;}
#envelope-container::after { position: absolute; top: 50%; left: 50%; z-index: -1; width: 4px; height: 4px; content: '✦ · ✧ · ✦'; color: #788f6f; font: 16px var(--serif); letter-spacing: 48px; opacity: 0; transform: translate(-50%, -50%) scale(.6); pointer-events: none;}
#envelope-container.open::after { animation: opening-sparkles 1.8s ease-out .35s both;}
.opening-note { margin-bottom: 30px; color: var(--sylvia-deep); font: italic 16px var(--serif); letter-spacing: .5px;}
.opening-note span { padding-left: 8px; color: var(--sylvia);}
.envelope-wrap { filter: drop-shadow(0 26px 20px #33472c35);}
.envelope { position: relative; width: min(390px, 82vw); height: min(255px, 53vw); transform-style: preserve-3d; transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .45s cubic-bezier(.2,.8,.2,1);}
.envelope-back, .pocket { position: absolute; inset: 0; border-radius: 4px 4px 9px 9px; background: linear-gradient(145deg, #a9b69a, #738c68);}
.envelope-back { z-index: 0;}
.envelope-back { box-shadow: inset 0 0 0 1px #ffffff42;}
.envelope-liner { position: absolute; inset: 3%; z-index: 1; overflow: hidden; background: var(--sylvia-deep); opacity: 1;}
.envelope-liner::after { position: absolute; inset: 0; content: ''; opacity: 0;}
.pocket { z-index: 2; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); background: linear-gradient(155deg, #94aa83, #607d5b);}
.pocket::before, .pocket::after { position: absolute; top: 0; width: 72%; height: 100%; content: ''; background: linear-gradient(135deg, #aabea6, #78936d);}
.pocket::before { left: -13%; transform: skewX(30deg); transform-origin: left top;}
.pocket::after { right: -13%; transform: skewX(-30deg); transform-origin: right top;}
.flap { position: absolute; top: 0; left: 0; z-index: 5; width: 100%; height: 58%; transform-origin: top center; clip-path: polygon(0 0, 100% 0, 50% 100%); background: var(--sylvia); box-shadow: 0 3px 4px #30492c20; transition: transform .9s cubic-bezier(.4,0,.2,1), z-index 0s .4s;}
.flap::after { position: absolute; inset: 8px 8px auto; height: 1px; content: ''; background: #ffffff45;}
.letter { position: absolute; top: auto; bottom: 3%; left: 5%; z-index: 1; width: 90%; height: 87%; padding: 25px 20px; text-align: center; border: 1px solid #d5cfbd; background: var(--paper); box-shadow: 0 5px 13px #34402c30; transform: translateY(0) scaleY(.91); transform-origin: bottom center; transition: transform 1.25s cubic-bezier(.2,.9,.2,1) .18s, z-index 0s .42s;}
.letter::before, .invitation-card::before { position: absolute; inset: 9px; border: 1px solid #aeb99e; content: ''; pointer-events: none;}
.letter::before { inset: 10px; border-color: #aab9a0;}
.wax-seal { position: absolute; right: 50%; top: 58%; bottom: auto; z-index: 7; display: grid; width: 48px; height: 48px; place-items: center; border: 2px solid #718363; border-radius: 50%; color: #eef0df; background: radial-gradient(circle at 35% 30%, #a8b99a, #526a54); box-shadow: 0 3px 4px #2c442b45, inset 0 0 0 3px #718363; transform: translate(50%, -50%); transition: opacity .35s, transform .35s;}
.wax-seal span { font: 11px var(--serif); letter-spacing: 1px;}
.wax-seal b { font-size: 8px;}
#envelope-container.open .wax-seal { opacity: 0; transform: translate(50%, -50%) scale(.6);}
.letter-text, .subtitle { color: var(--sylvia-deep); font: 11px var(--serif); letter-spacing: 3px; text-transform: uppercase;}
.letter-names { margin-top: 12px; color: var(--sylvia-dark); font: 44px/ .78 var(--script);}
.letter-names span { display: block; margin: 7px 0; font: 18px var(--serif);}
.letter-sub { margin-top: 20px; color: #788073; font: 10px var(--sans); letter-spacing: 1.5px; text-transform: uppercase;}
.opening-caption { margin-top: 32px; color: #5a6858; font: 10px var(--sans); letter-spacing: 2px; text-transform: uppercase;}
#envelope-container.open .flap { z-index: 1; animation: flap-open 1.05s cubic-bezier(.22,.75,.22,1) forwards;}
#envelope-container.open .letter { z-index: 10; animation: letter-open 1.85s cubic-bezier(.16,.86,.24,1) .22s forwards;}
#envelope-container.open .envelope { animation: envelope-settle 1.1s cubic-bezier(.2,.8,.2,1) forwards;}
#envelope-container.open .envelope-wrap { animation: envelope-lift 1.25s cubic-bezier(.16,.75,.25,1) .12s both;}
#envelope-container.open .opening-note, #envelope-container.open .opening-caption { animation: opening-copy-out .45s ease-out forwards;}
#envelope-container.fade-out { opacity: 0; visibility: hidden;}
@keyframes flap-open {
    0% { transform: rotateX(0deg);}
    42% { transform: rotateX(-112deg);}
    72% { transform: rotateX(-168deg);}
    100% { transform: rotateX(-180deg);}
}
@keyframes letter-open {
    0% { opacity: .98; transform: translateY(0) rotateX(-8deg) rotateZ(0deg) scale(.93, .91);}
    28% { opacity: .98; transform: translateY(0) rotateX(-8deg) rotateZ(0deg) scale(.93, .91);}
    48% { transform: translateY(-178px) rotateX(0deg) rotateZ(-1.6deg) scale(1.06, 1.005);}
    72% { transform: translateY(-151px) rotateX(0deg) rotateZ(-1.6deg) scale(1.05, 1.005);}
    88% { transform: translateY(-178px) rotateX(0deg) rotateZ(-1.6deg) scale(1.06, 1.005);}
    100% { transform: translateY(-166px) rotateX(0deg) rotateZ(-1.5deg) scale(1.04, 1);}
}
@keyframes envelope-settle {
    0% { transform: translateY(0) rotateZ(0deg);}
    55% { transform: translateY(5px) rotateZ(.2deg);}
    100% { transform: translateY(3px) rotateZ(0deg);}
}
@keyframes envelope-lift {
    0% { filter: drop-shadow(0 26px 20px #33472c35);}
    45% { filter: drop-shadow(0 35px 25px #33472c2e);}
    100% { filter: drop-shadow(0 28px 21px #33472c35);}
}
@keyframes opening-copy-out {
    to { opacity: 0; transform: translateY(-8px);}
}
@keyframes ambient-glow {
    0%, 100% { opacity: .55; transform: scale(.96);}
    50% { opacity: .9; transform: scale(1.06);}
}
@keyframes opening-sparkles {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.6) rotate(0deg);}
    35% { opacity: .8;}
    100% { opacity: 0; transform: translate(-50%, -50%) scale(2.4) rotate(12deg);}
}
@media (prefers-reduced-motion: reduce) {
    #envelope-container::before, #envelope-container.open::after { animation: none;}
    #envelope-container.open .flap { animation-duration: .01ms;}
    #envelope-container.open .letter { animation-duration: .01ms; animation-delay: 0s;}
    #envelope-container.open .envelope, #envelope-container.open .envelope-wrap { animation-duration: .01ms; animation-delay: 0s;}
    #main-content { transition: none;}
}
#main-content { display: flex; justify-content: center; width: 100%; min-height: 100vh; padding: 42px 18px; opacity: 0; transform: translateY(24px) scale(.985); background: linear-gradient(135deg, #e1e3d8, #f4f1e7 45%, #dfe4d8); transition: opacity 1.35s ease, transform 1.35s cubic-bezier(.2,.8,.2,1);}
#main-content.hidden { display: none; opacity: 0;}
#main-content.is-visible { opacity: 1; transform: translateY(0) scale(1);}
.invitation-card { position: relative; width: 100%; max-width: 700px; min-height: 900px; padding: 72px 58px 52px; overflow: hidden; text-align: center; border: 1px solid #b2bca5; border-radius: 2px; background-color: var(--paper); background-image: radial-gradient(#8d967d18 .7px, transparent .8px), radial-gradient(#fff9 .8px, transparent 1px); background-size: 5px 5px, 7px 7px; box-shadow: 0 20px 50px #48553e25, 0 2px 6px #48553e18;}
.floral { position: absolute; z-index: 1; width: 140px; height: 140px; color: var(--sylvia-deep); opacity: .56; transform: rotate(35deg);}
.floral svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.25;}
.floral .blossom { fill: #9faf8c; stroke: #668060; stroke-width: .8;}
.floral-top-left { top: 22px; left: 25px;}
.floral-top-right { top: 22px; right: 25px; transform: rotate(305deg);}
.floral-bottom-left { bottom: 20px; left: 25px; transform: rotate(-35deg) scaleY(-1);}
.floral-bottom-right { right: 25px; bottom: 20px; transform: rotate(55deg) scaleY(-1);}
.floral-top-right svg, .floral-bottom-right svg { transform: scaleX(-1); transform-origin: center;}
.floral-bottom-left { transform: rotate(-35deg) scaleY(-1);}
.invitation-card::after { position: absolute; inset: 16px; border: 1px solid #d3dac9; content: ''; pointer-events: none;}
.invitation-card header, .details-section, .separator, .events-section, .info-grid, .rsvp-section, footer { position: relative; z-index: 2;}
.eyebrow { margin-bottom: 18px; color: #8a9b80; font: 10px var(--sans); letter-spacing: 4px;}
.subtitle { margin-bottom: 44px; font-size: 13px;}
.names { color: var(--sylvia-dark); font: 94px/ .72 var(--script);}
.names .heart { display: block; margin: 12px 0; color: var(--sylvia); font: 32px var(--serif);}
.intro-text, .events-text { color: #60665b; font: italic 17px/1.65 var(--serif);}
.intro-text { margin: 36px 12px 0;}
.details-section { display: flex; align-items: center; margin: 43px 0 30px; padding: 25px 0; border-top: 1px solid #aeb99e; border-bottom: 1px solid #aeb99e;}
.detail-box { flex: 1; padding: 0 15px;}
.icon { margin-bottom: 10px; font-size: 22px; filter: grayscale(.25);}
.detail-title { color: var(--sylvia-deep); font: 12px var(--sans); letter-spacing: 2px; text-transform: uppercase;}
.detail-highlight { margin: 5px 0 0; color: var(--sylvia-dark); font: 50px var(--serif);}
.detail-sub { color: #6a7165; font: 11px/1.6 var(--sans); letter-spacing: 2px;}
.detail-text { margin: 8px 0 12px; color: #656b62; font: 13px/1.6 var(--serif);}
.divider { width: 1px; height: 105px; background: #aeb99e;}
.map-link { display: inline-block; padding: 8px 12px; border-bottom: 1px solid var(--sylvia); color: var(--sylvia-deep); font: 10px var(--sans); text-decoration: none; transition: color .2s, border-color .2s;}
.map-link:hover { border-color: var(--sylvia-dark); color: var(--sylvia-dark);}
.separator { display: flex; align-items: center; gap: 15px; margin: 26px 0; color: var(--sylvia);}
.separator::before, .separator::after { flex: 1; height: 1px; content: ''; background: #b4bea9;}
.separator .heart { font-size: 22px;}
.events-section { margin: 31px 0 30px; text-align: left;}
.events-intro { margin-bottom: 22px; text-align: center; color: #60665b; font: italic 17px var(--serif);}
.timeline { max-width: 500px; margin: 0 auto;}
.timeline-item { position: relative; display: grid; grid-template-columns: 67px 20px 1fr; min-height: 73px;}
.timeline-time { padding-top: 1px; color: var(--sylvia-deep); font: 600 12px var(--sans); letter-spacing: .5px; text-align: right;}
.timeline-line { position: relative; display: block; width: 1px; height: 100%; margin: 0 auto; background: #b7c1af;}
.timeline-line::before { position: absolute; top: 2px; left: -4px; width: 7px; height: 7px; content: ''; border: 1px solid var(--sylvia-deep); border-radius: 50%; background: var(--paper);}
.timeline-item > div { padding: 0 0 20px 17px;}
.timeline-item h3 { color: var(--sylvia-dark); font: 17px var(--serif);}
.timeline-item p { margin-top: 3px; color: #70776b; font: 12px/1.5 var(--serif);}
.timeline-item small { display: inline-block; margin-top: 5px; color: #8a9385; font: 9px var(--sans); letter-spacing: 1px; text-transform: uppercase;}
.timeline-last { min-height: 48px;}
.timeline-last .timeline-line { background: transparent;}
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 30px 0;}
.info-box { padding: 20px 15px; border: 1px solid #c5cdbb; background: #e8ecdf99;}
.info-box h3 { margin-bottom: 9px; color: var(--sylvia-deep); font: 16px var(--serif);}
.info-box p { margin-bottom: 5px; color: #697064; font: 12px/1.5 var(--serif);}
.rsvp-section { margin: 38px 0 32px;}
.guests-selector { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 16px; color: var(--sylvia-deep); font: 11px var(--sans); letter-spacing: .5px;}
.guests-selector span { text-transform: uppercase;}
.guest-counter { display: flex; align-items: center; border: 1px solid #9cac91; background: #f7f5ec;}
.guest-control { display: grid; width: 42px; height: 42px; place-items: center; border: 0; color: var(--sylvia-deep); background: transparent; font: 25px/1 var(--sans); cursor: pointer; touch-action: manipulation;}
.guest-control:hover { background: #dce5d5;}
.guest-control:focus-visible, #guest-count:focus-visible { outline: 2px solid var(--sylvia); outline-offset: 2px; z-index: 1;}
#guest-count { width: 48px; height: 42px; padding: 0; border: 0; border-right: 1px solid #c5cdbb; border-left: 1px solid #c5cdbb; border-radius: 0; color: var(--sylvia-dark); background: transparent; font: 16px var(--sans); text-align: center; -moz-appearance: textfield;}
#guest-count::-webkit-inner-spin-button, #guest-count::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none;}
.rsvp-button { display: inline-block; padding: 15px 25px; border: 1px solid var(--sylvia-dark); color: #f8f6ee; background: var(--sylvia-dark); font: 11px var(--sans); letter-spacing: 1.8px; text-decoration: none; box-shadow: 0 7px 14px #34503825; transition: transform .25s, background .25s, box-shadow .25s;}
.rsvp-button:hover { background: var(--sylvia-deep); box-shadow: 0 10px 18px #34503835; transform: translateY(-3px);}
footer .separator { margin: 12px 0 9px;}
.footer-names { color: var(--sylvia-deep); font: 38px var(--script);}
.footer-note { margin-top: 5px; color: #8a9385; font: italic 11px var(--serif);}
@media (max-width: 600px) {
    #main-content { padding: 20px 10px;}
    .invitation-card { min-height: 0; padding: 54px 22px 40px;}
    .floral { font-size: 70px;}
    .floral-top-left, .floral-bottom-left { left: 10px;}
    .floral-top-right, .floral-bottom-right { right: 10px;}
    .floral { width: 100px; height: 100px;}
    .names { font-size: 72px;}
    .details-section { flex-direction: column; gap: 22px;}
    .divider { width: 75%; height: 1px;}
    .info-grid { grid-template-columns: 1fr;}
    .letter-names { font-size: 38px;}
}
#envelope-container { justify-content: flex-start;}
.opening-note { position: absolute; top: max(7vh, calc(31vh - 80px)); margin: 0;}
.envelope-wrap { margin-top: 31vh;}
.opening-caption { position: absolute; top: calc(31vh + min(255px, 53vw) + 20px); margin: 0;}
.letter { overflow: hidden;}
.letter::after { position: absolute; top: 0; left: 50%; width: 1px; height: 100%; content: ''; opacity: .6; background: linear-gradient(#b3bea8, transparent 15%, #c4cbb9 50%, transparent 85%);}
.letter-names { white-space: nowrap; font-size: clamp(29px, 7vw, 42px); line-height: 1;}
.letter-names span { display: inline; margin: 0 5px; font-size: .5em; vertical-align: middle;}
.names { white-space: nowrap; font-size: clamp(62px, 10vw, 80px);}
.names .heart { display: inline; margin: 0 7px; font-size: .38em; vertical-align: middle;}
.icon { position: relative; width: 26px; height: 26px; margin: 0 auto 10px; color: var(--sylvia-deep);}
.icon::before, .icon::after { position: absolute; content: '';}
.icon-calendar { border: 1.5px solid var(--sylvia-deep); border-radius: 3px;}
.icon-calendar::before { top: 6px; left: 0; width: 100%; border-top: 1.5px solid var(--sylvia-deep);}
.icon-calendar::after { top: -4px; left: 6px; width: 12px; height: 7px; border-right: 1.5px solid var(--sylvia-deep); border-left: 1.5px solid var(--sylvia-deep);}
.icon-pin::before { top: 1px; left: 5px; width: 14px; height: 14px; border: 1.5px solid var(--sylvia-deep); border-radius: 50% 50% 50% 0; transform: rotate(-45deg);}
.icon-pin::after { top: 7px; left: 11px; width: 3px; height: 3px; border: 1px solid var(--sylvia-deep); border-radius: 50%;}
.icon-bed { border-bottom: 1.5px solid var(--sylvia-deep);}
.icon-bed::before { bottom: 5px; left: 2px; width: 21px; height: 9px; border: 1.5px solid var(--sylvia-deep); border-radius: 5px 5px 0 0;}
.icon-bed::after { bottom: 1px; left: 3px; width: 1.5px; height: 6px; background: var(--sylvia-deep); box-shadow: 18px 0 var(--sylvia-deep);}
.icon-leaf::before { top: 1px; left: 6px; width: 14px; height: 21px; border: 1.5px solid var(--sylvia-deep); border-radius: 100% 0 100% 0; transform: rotate(35deg);}
.icon-leaf::after { top: 8px; left: 12px; width: 1px; height: 16px; background: var(--sylvia-deep); transform: rotate(35deg);}
.hotel-row { padding: 8px 0; border-top: 1px solid #c5cdbb;}
.hotel-row:first-of-type { border-top: 0;}
.hotel-row p { margin-bottom: 5px;}
.hotel-row small { display: block; color: #8a9285; font: 10px var(--sans);}
.hotel-map { display: inline-block; padding: 5px 8px; border: 1px solid #9cac91; color: var(--sylvia-deep); font: 9px var(--sans); letter-spacing: .5px; text-decoration: none; transition: background .2s, color .2s;}
.hotel-map:hover { color: #fff; background: var(--sylvia-deep);}
.hotel-map span { font-size: 12px;}
.allergy-list { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 4px; margin-top: 12px; text-align: left;}
.allergy-list label { display: flex; align-items: center; gap: 6px; color: #60695d; font: 10px var(--sans); cursor: pointer;}
.allergy-list input { position: absolute; opacity: 0;}
.allergy-list label span { width: 100%; padding: 7px 6px; border: 1px solid #c5cdbb; background: #f7f5ec99; transition: background .2s, border-color .2s, color .2s;}
.allergy-list input:checked + span { border-color: var(--sylvia-deep); color: var(--sylvia-dark); background: #dce5d5;}
.allergy-list input:focus-visible + span { outline: 2px solid var(--sylvia); outline-offset: 2px;}
@media (max-width: 600px) {
    .envelope-wrap { margin-top: 30vh;}
    .opening-caption { top: calc(30vh + min(255px, 53vw) + 20px);}
    .names { font-size: clamp(52px, 15vw, 70px);}
    .invitation-card { padding: 48px 16px 36px;}
    .floral { width: 76px; height: 76px; opacity: .42;}
    .floral-top-left, .floral-bottom-left { left: 7px;}
    .floral-top-right, .floral-bottom-right { right: 7px;}
    .eyebrow { margin-bottom: 14px; letter-spacing: 3px;}
    .subtitle { margin-bottom: 30px;}
    .names { font-size: clamp(42px, 12vw, 52px);}
    .names .heart { margin: 0 4px; font-size: .34em;}
    .intro-text, .events-intro { font-size: 15px;}
    .details-section { margin: 32px 0 24px; padding: 20px 0;}
    .detail-box { padding: 0 8px;}
    .detail-highlight { font-size: 44px;}
    .events-section { margin: 25px 0 24px;}
    .timeline-item { grid-template-columns: 55px 14px 1fr; min-height: 68px;}
    .timeline-time { font-size: 10px;}
    .timeline-item > div { padding-left: 10px;}
    .timeline-item h3 { font-size: 16px;}
    .info-grid { gap: 18px;}
    .info-box { margin: 0 7px; padding: 17px 12px;}
    .rsvp-section { margin: 34px 20px 28px;}
    .guests-selector { flex-direction: column; gap: 9px;}
    .guest-control { width: 46px; height: 46px;}
    #guest-count { width: 52px; height: 46px;}
    .rsvp-button { width: 100%; padding: 14px 12px; font-size: 10px;}
}

.invitation-card .eyebrow { font-size: 12px;}
.invitation-card .subtitle { font-size: 15px;}
.invitation-card .intro-text, .invitation-card .events-text, .events-intro { font-size: 19px; line-height: 1.7;}
.detail-title { font-size: 14px;}
.detail-sub { font-size: 13px; line-height: 1.7;}
.detail-text { font-size: 15px; line-height: 1.7;}
.map-link { font-size: 12px;}
.timeline-time { font-size: 14px;}
.timeline-item h3 { font-size: 19px;}
.timeline-item p { font-size: 14px; line-height: 1.65;}
.timeline-item small { font-size: 11px;}
.info-box h3 { font-size: 18px;}
.info-box p { font-size: 14px; line-height: 1.65;}
.guests-selector { font-size: 13px;}
.rsvp-button { font-size: 13px;}
.hotel-row small { font-size: 12px;}
.hotel-map { font-size: 11px;}
.allergy-list label { font-size: 12px;}

@media (max-width: 600px) {
    .invitation-card .subtitle { font-size: 14px;}
    .invitation-card .intro-text, .invitation-card .events-text, .events-intro { font-size: 17px;}
    .detail-title { font-size: 13px;}
    .detail-sub { font-size: 12px;}
    .timeline-time { font-size: 12px;}
    .timeline-item h3 { font-size: 18px;}
    .timeline-item p { font-size: 14px;}
    .info-box h3 { font-size: 17px;}
    .info-box p { font-size: 14px;}
    .guests-selector { font-size: 13px;}
    .rsvp-button { font-size: 12px;}
}