@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&display=swap');

:root { --ink: #27252a; --coral: #f07867; --cream: #fff7f1; --paper: #fffdf9; --yellow: #f7d971; --blue: #cce4ec; --pink: #f5d1d7; --line: rgba(39,37,42,.16); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: 'DM Sans', sans-serif; }
button, a { font: inherit; }
button { cursor: pointer; }
.page-noise { position: fixed; inset: 0; pointer-events: none; opacity: .035; z-index: 10; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.welcome-page { min-height: 100vh; background: #f7ddd5; }
.welcome-shell { min-height: 100vh; position: relative; overflow: hidden; padding: 28px 6vw 30px; background: radial-gradient(circle at 50% 42%, rgba(255,248,235,.7), transparent 34%), linear-gradient(135deg, #f7ddd5 0%, #f4d4cc 58%, #eebdb2 100%); }
.welcome-shell::before, .welcome-shell::after { content: ''; position: absolute; border: 1px solid rgba(240,120,103,.25); border-radius: 50%; pointer-events: none; }
.welcome-shell::before { width: 58vw; height: 58vw; max-width: 760px; max-height: 760px; left: -25vw; bottom: -30vw; }
.welcome-shell::after { width: 38vw; height: 38vw; max-width: 480px; max-height: 480px; right: -14vw; top: -16vw; }
.welcome-content { position: relative; z-index: 1; width: min(680px, 100%); margin: 76px auto 0; text-align: center; }
.welcome-eyebrow { text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 700; color: var(--coral); }
.full-flight-path { position: absolute; z-index: 0; inset: 0; pointer-events: none; opacity: .72; }.full-flight-path svg { width: 100%; height: 100%; overflow: visible; }.flight-curve { fill: none; stroke: var(--coral); stroke-width: 2; stroke-dasharray: 7 10; opacity: .48; }.flight-plane { position: absolute; left: 0; top: 0; color: var(--coral); font-size: 28px; transform-origin: center; animation: fly-curved-route 9s ease-in-out infinite; }.flight-city { position: absolute; color: var(--ink); text-transform: uppercase; letter-spacing: .16em; font-size: 10px; font-weight: 700; }.flight-dhaka { left: 8%; bottom: 17%; }.flight-ottawa { right: 8%; top: 25%; color: var(--coral); }@keyframes fly-curved-route { 0% { left: 8%; top: 76%; transform: rotate(-34deg); } 20% { left: 20%; top: 51%; transform: rotate(28deg); } 42% { left: 38%; top: 62%; transform: rotate(-25deg); } 64% { left: 55%; top: 40%; transform: rotate(-35deg); } 82% { left: 73%; top: 20%; transform: rotate(18deg); } 100% { left: 88%; top: 24%; transform: rotate(8deg); } }
.welcome-stars { color: var(--coral); font-size: 28px; letter-spacing: .35em; margin: 35px 0 20px; }.welcome-stars span { font-size: 18px; vertical-align: 5px; }
.welcome-greeting { margin: 0; font-family: 'Playfair Display', serif; font-size: clamp(28px, 4.4vw, 48px); font-style: italic; }
.welcome-content h1 { margin: 7px 0 0; font-size: clamp(64px, 10vw, 126px); line-height: .82; }.welcome-content h1 em { color: var(--coral); }
.welcome-subtitle { margin: 27px 0 0; font-family: 'Playfair Display', serif; font-size: 17px; letter-spacing: .03em; }
.welcome-rule { width: 66px; height: 1px; margin: 27px auto 23px; background: var(--coral); opacity: .55; }
.welcome-copy { font-size: 14px; line-height: 1.6; margin: 12px 0; opacity: .76; }.welcome-copy strong { font-family: 'Playfair Display', serif; font-size: 19px; color: var(--ink); }
.welcome-question { margin: 23px 0 20px; font-family: 'Playfair Display', serif; font-size: 22px; }
.lets-go { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 30px; padding: 16px 21px 16px 24px; color: var(--ink); text-decoration: none; border: 1px solid var(--ink); font-size: 10px; font-weight: 700; letter-spacing: .18em; transition: background .25s, color .25s, transform .25s; }.lets-go span { font-size: 22px; line-height: 10px; }.lets-go:hover, .lets-go:focus-visible { color: var(--paper); background: var(--ink); transform: translateY(-3px); outline: none; }
.welcome-footer { position: absolute; z-index: 1; left: 6vw; right: 6vw; bottom: 28px; display: flex; justify-content: space-between; text-transform: uppercase; letter-spacing: .14em; font-size: 9px; font-weight: 700; opacity: .55; pointer-events: none; }.welcome-footer span { color: var(--coral); font-size: 18px; }
.birthday-message-page { min-height: 100vh; background: #f5d9d1; }
.birthday-message-shell { min-height: 100vh; position: relative; display: grid; place-items: center; align-content: center; overflow: hidden; padding: 60px 7vw; text-align: center; background: radial-gradient(circle at 50% 46%, rgba(255,248,235,.9), transparent 34%), linear-gradient(135deg, #f7ddd5, #efc4bb); }
.birthday-message-shell::before, .birthday-message-shell::after { content: ''; position: absolute; border: 1px solid rgba(240,120,103,.25); border-radius: 50%; pointer-events: none; }.birthday-message-shell::before { width: 65vw; height: 65vw; left: -27vw; bottom: -38vw; }.birthday-message-shell::after { width: 44vw; height: 44vw; right: -18vw; top: -24vw; }
.message-eyebrow { position: relative; z-index: 1; text-transform: uppercase; letter-spacing: .2em; color: var(--coral); font-size: 10px; font-weight: 700; }.message-stars { position: relative; z-index: 1; margin: 0 0 18px; color: var(--coral); font-size: 27px; letter-spacing: .35em; }
.birthday-message-shell h1 { position: relative; z-index: 1; margin: 0; font-size: clamp(65px, 12vw, 150px); line-height: .82; }.birthday-message-shell h1 em { color: var(--coral); }.message-name { position: relative; z-index: 1; margin: 22px 0 0; font-family: 'Playfair Display', serif; font-size: clamp(28px, 4.5vw, 54px); font-style: italic; }.message-name span { font-style: normal; font-size: .65em; }
.message-rule { position: relative; z-index: 1; width: 70px; height: 1px; margin: 29px auto 22px; background: var(--coral); opacity: .6; }.message-copy, .message-signoff { position: relative; z-index: 1; line-height: 1.7; font-size: 14px; opacity: .72; }.message-signoff { margin-top: 24px; font-family: 'Playfair Display', serif; font-size: 17px; }.message-signoff em { color: var(--coral); }.message-letters-button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 28px; margin-top: 27px; padding: 15px 18px 15px 21px; color: var(--paper); background: var(--ink); text-decoration: none; text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 700; transition: transform .25s, background .25s; }.message-letters-button span { font-size: 20px; line-height: 10px; }.message-letters-button:hover, .message-letters-button:focus-visible { background: var(--coral); transform: translateY(-3px); outline: none; }.message-back { position: relative; z-index: 1; display: block; width: fit-content; margin: 25px auto 0; color: var(--ink); text-decoration: none; text-transform: uppercase; letter-spacing: .14em; font-size: 9px; font-weight: 700; border-bottom: 1px solid currentColor; padding-bottom: 6px; }
.message-ready-button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 28px; margin-top: 28px; padding: 15px 18px 15px 21px; color: var(--paper); background: var(--ink); text-decoration: none; text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 700; transition: transform .25s, background .25s; }.message-ready-button span { font-size: 20px; line-height: 10px; }.message-ready-button:hover, .message-ready-button:focus-visible { background: var(--coral); transform: translateY(-3px); outline: none; }
.message-photo-button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 24px; margin-top: 12px; padding: 13px 17px 13px 20px; color: var(--ink); background: var(--yellow); text-decoration: none; text-transform: uppercase; letter-spacing: .13em; font-size: 9px; font-weight: 700; transition: transform .25s, background .25s; }.message-photo-button span { font-size: 18px; line-height: 9px; }.message-photo-button:hover, .message-photo-button:focus-visible { background: var(--coral); transform: translateY(-3px); outline: none; }
.letters-photo-button { position: relative; z-index: 1; display: flex; width: fit-content; align-items: center; gap: 24px; margin: 38px auto 0; padding: 13px 17px 13px 20px; color: var(--ink); background: var(--yellow); text-decoration: none; text-transform: uppercase; letter-spacing: .13em; font-size: 9px; font-weight: 700; transition: transform .25s, background .25s; }.letters-photo-button span { font-size: 18px; line-height: 9px; }.letters-photo-button:hover, .letters-photo-button:focus-visible { background: var(--coral); transform: translateY(-3px); outline: none; }
.message-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }.message-confetti i { position: absolute; top: -20px; width: 9px; height: 18px; background: var(--coral); animation: message-fall 4s linear infinite; }.message-confetti i:nth-child(2n) { background: var(--yellow); width: 7px; height: 13px; animation-delay: -1.2s; }.message-confetti i:nth-child(3n) { background: var(--blue); border-radius: 50%; animation-delay: -2.3s; }.message-confetti i:nth-child(1) { left: 9%; }.message-confetti i:nth-child(2) { left: 19%; }.message-confetti i:nth-child(3) { left: 31%; }.message-confetti i:nth-child(4) { left: 43%; }.message-confetti i:nth-child(5) { left: 55%; }.message-confetti i:nth-child(6) { left: 66%; }.message-confetti i:nth-child(7) { left: 76%; }.message-confetti i:nth-child(8) { left: 87%; }.message-confetti i:nth-child(9) { left: 95%; }.message-confetti i:nth-child(10) { left: 25%; }.message-confetti i:nth-child(11) { left: 72%; }.message-confetti i:nth-child(12) { left: 4%; }
.childhood-page { min-height: 100vh; background: #f7ddd5; }.childhood-shell { min-height: 100vh; position: relative; overflow: hidden; padding: 30px 7vw 70px; background: radial-gradient(circle at 50% 45%, rgba(255,248,235,.9), transparent 35%), linear-gradient(135deg, #f7ddd5, #efc4bb); }.childhood-shell::before, .childhood-shell::after { content: ''; position: absolute; border: 1px solid rgba(240,120,103,.25); border-radius: 50%; pointer-events: none; }.childhood-shell::before { width: 62vw; height: 62vw; left: -29vw; bottom: -35vw; }.childhood-shell::after { width: 42vw; height: 42vw; right: -17vw; top: -23vw; }.childhood-back { position: relative; z-index: 2; color: var(--ink); text-decoration: none; text-transform: uppercase; letter-spacing: .13em; font-size: 9px; font-weight: 700; opacity: .62; }.childhood-content { position: relative; z-index: 1; max-width: 850px; margin: 50px auto 0; text-align: center; }.childhood-eyebrow { color: var(--coral); text-transform: uppercase; letter-spacing: .18em; font-size: 10px; font-weight: 700; }.childhood-frame { width: min(650px, 100%); margin: 28px auto 0; padding: 14px; background: #fffdf9; box-shadow: 0 18px 40px rgba(72,47,39,.15); transform: rotate(-1.5deg); }.childhood-frame img { display: block; width: 100%; aspect-ratio: 1.2; object-fit: cover; object-position: center; background: #eaded5; }.childhood-stars { margin: 28px 0 17px; color: var(--coral); font-size: 26px; letter-spacing: .35em; }.childhood-content h1 { margin: 0; font-size: clamp(37px, 6vw, 70px); line-height: .98; }.childhood-content h1 em { color: var(--coral); }.childhood-heart { margin-top: 20px; font-family: 'Playfair Display', serif; font-size: 18px; font-style: italic; }
.more-button { display: inline-flex; align-items: center; gap: 25px; margin-top: 28px; padding: 14px 18px 14px 21px; color: var(--paper); background: var(--ink); text-decoration: none; text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 700; transition: transform .25s, background .25s; }.more-button span { font-size: 20px; line-height: 9px; }.more-button:hover, .more-button:focus-visible { background: var(--coral); transform: translateY(-3px); outline: none; }
.proposal-page { min-height: 100vh; background: #f7ddd5; }.proposal-shell { min-height: 100vh; position: relative; display: grid; place-items: center; align-content: center; overflow: hidden; padding: 50px 7vw; text-align: center; background: radial-gradient(circle at 50% 46%, rgba(255,248,235,.92), transparent 34%), linear-gradient(135deg, #f7ddd5, #efc4bb); }.proposal-shell::before, .proposal-shell::after { content: ''; position: absolute; border: 1px solid rgba(240,120,103,.25); border-radius: 50%; pointer-events: none; }.proposal-shell::before { width: 70vw; height: 70vw; left: -31vw; bottom: -40vw; }.proposal-shell::after { width: 44vw; height: 44vw; right: -18vw; top: -25vw; }.proposal-sparkles { position: relative; z-index: 1; color: var(--coral); font-size: 31px; letter-spacing: .4em; margin-bottom: 25px; }.proposal-eyebrow { position: relative; z-index: 1; color: var(--coral); text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 700; }.proposal-shell h1 { position: relative; z-index: 1; margin: 21px 0 0; font-size: clamp(48px, 8vw, 105px); line-height: .94; }.proposal-shell h1 em { color: var(--coral); }.proposal-question { position: relative; z-index: 1; margin: 25px 0 0; font-family: 'Playfair Display', serif; font-size: clamp(25px, 4vw, 45px); font-style: italic; }.proposal-heart { position: relative; z-index: 1; margin: 25px auto 20px; color: var(--coral); font-size: 60px; line-height: 1; animation: heartbeat 1.5s ease-in-out infinite; }.proposal-options { position: relative; z-index: 1; display: flex; justify-content: center; gap: 13px; margin-top: 23px; }.proposal-choice { min-width: 112px; border: 1px solid var(--ink); padding: 13px 18px; color: var(--ink); background: transparent; text-transform: uppercase; letter-spacing: .15em; font-size: 10px; font-weight: 700; transition: transform .25s, background .25s, color .25s; }.proposal-choice span { margin-left: 8px; font-size: 17px; }.proposal-choice:hover, .proposal-choice:focus-visible { color: var(--paper); background: var(--ink); transform: translateY(-3px); outline: none; }.proposal-yes:hover, .proposal-yes:focus-visible { background: var(--coral); border-color: var(--coral); }.proposal-response { position: relative; z-index: 1; min-height: 25px; margin: 21px 0 0; color: var(--coral); font-family: 'Playfair Display', serif; font-size: 19px; font-style: italic; }@keyframes heartbeat { 50% { transform: scale(1.12); } }
.celebration-page { min-height: 100vh; background: #f7ddd5; }.celebration-shell { min-height: 100vh; position: relative; display: grid; place-items: center; overflow: hidden; padding: 50px 7vw; text-align: center; background: radial-gradient(circle at 50% 44%, rgba(255,248,235,.94), transparent 37%), linear-gradient(135deg, #f7ddd5, #efc4bb); }.celebration-shell::before { content: ''; position: absolute; top: 80px; left: 7%; right: 7%; height: 70px; border-top: 3px solid var(--ink); border-radius: 50%; opacity: .8; }.celebration-content { position: relative; z-index: 2; }.celebration-eyebrow { color: var(--coral); text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 700; }.celebration-content h1 { margin: 20px 0 0; font-size: clamp(64px, 12vw, 150px); line-height: .82; }.celebration-content h1 em { color: var(--coral); }.celebration-message { display: inline-block; margin: 28px 0 0; padding: 19px 25px; background: #fffdf9; box-shadow: 8px 8px 0 rgba(240,120,103,.22); font-family: 'Playfair Display', serif; font-size: clamp(20px, 3vw, 32px); transform: rotate(-2deg); }.celebration-note { font-family: 'Playfair Display', serif; font-size: 17px; font-style: italic; }.balloon { position: absolute; z-index: 1; width: 62px; height: 76px; border-radius: 50% 50% 46% 46%; animation: balloon-float 3.4s ease-in-out infinite; }.balloon::after { content: ''; position: absolute; top: 73px; left: 50%; width: 1px; height: 160px; background: var(--ink); transform: rotate(4deg); opacity: .35; }.balloon::before { content: ''; position: absolute; bottom: -6px; left: 50%; border: 5px solid transparent; border-top-color: currentColor; transform: translateX(-50%); }.balloon-one { left: 9%; top: 27%; background: var(--coral); color: var(--coral); }.balloon-two { right: 10%; top: 25%; background: var(--yellow); color: var(--yellow); animation-delay: -.8s; }.balloon-three { left: 19%; bottom: 11%; background: var(--blue); color: var(--blue); animation-delay: -1.5s; }.balloon-four { right: 20%; bottom: 9%; background: var(--pink); color: var(--pink); animation-delay: -2.1s; }.festoon { position: absolute; z-index: 1; top: 78px; width: 16px; height: 24px; background: var(--yellow); clip-path: polygon(0 0, 100% 0, 50% 100%); }.festoon-one { left: 20%; }.festoon-two { left: 30%; background: var(--coral); }.festoon-three { left: 40%; background: var(--blue); }.festoon-four { left: 50%; background: var(--pink); }.festoon-five { left: 60%; background: var(--coral); }.festoon-six { left: 70%; background: var(--yellow); }@keyframes balloon-float { 50% { transform: translateY(-13px) rotate(3deg); } }
.bubu-gif-frame { width: min(180px, 42vw); margin: 25px auto 9px; padding: 7px; background: #fffdf9; box-shadow: 5px 5px 0 rgba(240,120,103,.2); transform: rotate(2deg); }.bubu-gif-frame img { display: block; width: 100%; height: auto; }
.celebration-next { margin-top: 25px; }
.ayhay-page { min-height: 100vh; background: #f7ddd5; }.ayhay-shell { min-height: 100vh; position: relative; display: grid; place-items: center; overflow: hidden; padding: 48px 7vw; text-align: center; background: radial-gradient(circle at 50% 42%, rgba(255,248,235,.94), transparent 36%), linear-gradient(135deg, #f7ddd5, #efc4bb); }.ayhay-shell::before, .ayhay-shell::after { content: ''; position: absolute; border: 1px solid rgba(240,120,103,.25); border-radius: 50%; pointer-events: none; }.ayhay-shell::before { width: 68vw; height: 68vw; left: -31vw; bottom: -40vw; }.ayhay-shell::after { width: 44vw; height: 44vw; right: -18vw; top: -25vw; }.ayhay-content { position: relative; z-index: 1; width: min(700px, 100%); }.ayhay-eyebrow { color: var(--coral); text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 700; }.ayhay-stars { margin: 23px 0 18px; color: var(--coral); font-size: 28px; letter-spacing: .35em; }.ayhay-content h1 { margin: 0; font-size: clamp(48px, 8vw, 92px); line-height: .9; }.ayhay-content h1 em { color: var(--coral); }.ayhay-frame { width: min(390px, 78vw); margin: 29px auto 0; padding: 12px; background: var(--paper); box-shadow: 8px 9px 0 rgba(240,120,103,.2); transform: rotate(-2deg); }.ayhay-frame img { display: block; width: 100%; height: auto; }.ayhay-message { margin: 35px 0 0; font-family: 'Playfair Display', serif; font-size: clamp(25px, 4vw, 42px); line-height: 1.2; }.ayhay-message em { color: var(--coral); }.ayhay-back { margin-top: 28px; }
@media (max-width: 760px) { .celebration-next { margin-top: 22px; }.ayhay-shell { padding: 38px 7vw; }.ayhay-frame { margin-top: 24px; } }
.ayhay-next { margin-top: 30px; }
.final-page { min-height: 100vh; color: #f8f3e8; background: #080d1d; }
.final-shell { min-height: 100vh; position: relative; display: grid; place-items: center; overflow: hidden; padding: 60px 7vw; text-align: center; background: radial-gradient(circle at 50% 42%, rgba(42,62,110,.55), transparent 30%), radial-gradient(circle at 20% 18%, rgba(255,255,255,.9) 0 1px, transparent 2px), radial-gradient(circle at 78% 26%, rgba(255,255,255,.8) 0 1px, transparent 2px), radial-gradient(circle at 33% 76%, rgba(255,255,255,.75) 0 1px, transparent 2px), radial-gradient(circle at 88% 82%, rgba(255,255,255,.85) 0 1px, transparent 2px), linear-gradient(160deg, #111a38, #080d1d 68%); }
.final-shell::before, .final-shell::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(255,255,255,.8) 0 1px, transparent 1.5px); background-size: 137px 113px; opacity: .45; }
.final-shell::after { background-size: 211px 179px; background-position: 48px 71px; opacity: .3; }
.final-content { position: relative; z-index: 1; width: min(640px, 100%); }
.final-eyebrow { color: #f4c978; text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 700; }
.final-content h1 { margin: 24px 0 0; color: #fffaf0; font-size: clamp(43px, 7vw, 78px); line-height: .96; }.final-content h1 em { color: #f4c978; }
.final-subtitle { margin: 19px 0 0; color: rgba(248,243,232,.7); font-family: 'Playfair Display', serif; font-size: 17px; font-style: italic; }
.final-envelope-button { position: relative; display: block; width: min(300px, 78vw); height: 190px; margin: 42px auto 0; border: 0; padding: 0; color: #161426; background: #d97868; box-shadow: 0 22px 45px rgba(0,0,0,.35); transition: transform .3s ease, box-shadow .3s ease; }
.final-envelope-button::before { content: ''; position: absolute; z-index: 2; inset: 0; clip-path: polygon(0 0, 50% 56%, 100% 0); background: #efad91; transition: transform .45s ease; transform-origin: top; }
.final-envelope-button::after { content: ''; position: absolute; z-index: 1; inset: 0; clip-path: polygon(0 100%, 0 48%, 50% 100%, 100% 48%, 100% 100%); background: #c8615b; }
.final-envelope-label { position: relative; z-index: 3; display: grid; place-items: center; width: 100%; height: 100%; padding-top: 50px; font-family: 'Playfair Display', serif; font-size: 22px; font-style: italic; }
.final-envelope-button:hover, .final-envelope-button:focus-visible { transform: translateY(-7px) rotate(-1deg); box-shadow: 0 30px 55px rgba(0,0,0,.45); outline: 2px solid #f4c978; outline-offset: 7px; }.final-envelope-button:focus-visible { outline-offset: 8px; }
.final-envelope-button.open::before { transform: rotateX(180deg); }
.final-message { max-width: 590px; margin: 38px auto 0; color: #fffaf0; font-family: 'Playfair Display', serif; font-size: clamp(20px, 3vw, 29px); line-height: 1.45; opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }.final-message.show { opacity: 1; transform: translateY(0); }.final-message strong { display: block; margin-top: 25px; color: #f4c978; font-size: clamp(23px, 3.4vw, 34px); }
@media (max-width: 760px) { .final-shell { padding: 40px 7vw; }.final-envelope-button { height: 165px; margin-top: 34px; }.final-message { margin-top: 32px; } }
.funny-page { min-height: 100vh; background: #f7ddd5; }
.funny-shell { min-height: 100vh; position: relative; overflow: hidden; padding: 42px 7vw 76px; background: radial-gradient(circle at 15% 18%, rgba(255,248,235,.8), transparent 26%), linear-gradient(145deg, #f7ddd5, #f2c9bf 58%, #e9b5ad); }
.funny-shell::before, .funny-shell::after { content: ''; position: absolute; border: 1px solid rgba(240,120,103,.25); border-radius: 50%; pointer-events: none; }.funny-shell::before { width: 62vw; height: 62vw; left: -28vw; bottom: -38vw; }.funny-shell::after { width: 44vw; height: 44vw; right: -18vw; top: -25vw; }
.funny-content { position: relative; z-index: 1; width: min(1040px, 100%); margin: auto; }
.funny-kicker { color: var(--coral); text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 700; text-align: center; }.funny-title { margin: 19px 0 0; text-align: center; font-size: clamp(48px, 8vw, 96px); line-height: .9; }.funny-title em { color: var(--coral); }.funny-intro { max-width: 530px; margin: 21px auto 0; text-align: center; line-height: 1.65; font-size: 14px; opacity: .72; }
.starter-pack { display: grid; grid-template-columns: .85fr 1.15fr; gap: 34px; align-items: center; margin: 52px auto 0; padding: 20px; background: rgba(255,253,249,.7); box-shadow: 12px 14px 0 rgba(240,120,103,.2); transform: rotate(-1deg); }.starter-avatar { position: relative; overflow: hidden; min-height: 490px; background: #d7b7a9; }.starter-avatar img { display: block; width: 100%; height: 100%; min-height: 490px; object-fit: cover; object-position: center top; }.avatar-sticker { position: absolute; right: 14px; bottom: 14px; padding: 8px 10px; color: var(--ink); background: var(--yellow); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; transform: rotate(5deg); }
.starter-copy { padding: 16px 22px 20px 4px; }.starter-label { display: inline-block; padding: 7px 9px; color: var(--paper); background: var(--ink); text-transform: uppercase; letter-spacing: .13em; font-size: 9px; font-weight: 700; transform: rotate(-3deg); }.starter-copy h2 { margin: 20px 0 24px; font-size: clamp(31px, 4vw, 52px); line-height: .98; }.starter-copy h2 span { color: var(--coral); }.starter-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }.starter-list li { display: flex; gap: 11px; align-items: start; padding-bottom: 11px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.35; }.starter-list li::before { content: '☑'; flex: 0 0 auto; color: var(--coral); font-size: 18px; line-height: 1; }.starter-list strong { color: var(--coral); }.inside-jokes { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 25px; }.inside-jokes span { padding: 8px 10px; background: var(--blue); font-family: 'Playfair Display', serif; font-size: 14px; transform: rotate(-2deg); }.inside-jokes span:nth-child(2n) { background: var(--yellow); transform: rotate(2deg); }.funny-next { display: flex; width: fit-content; margin: 42px auto 0; }
@media (max-width: 760px) { .funny-shell { padding: 32px 7vw 58px; }.starter-pack { grid-template-columns: 1fr; gap: 23px; margin-top: 38px; padding: 12px; }.starter-avatar, .starter-avatar img { min-height: 390px; }.starter-copy { padding: 12px 10px 18px; }.starter-copy h2 { margin-top: 18px; }.starter-list li { font-size: 13px; } }
.funny-details { display: grid; grid-template-columns: 1.15fr .85fr .85fr; gap: 15px; margin: 38px auto 0; }.funny-detail { min-height: 245px; padding: 23px; background: var(--paper); box-shadow: 6px 7px 0 rgba(39,37,42,.1); }.funny-detail:nth-child(2) { background: var(--yellow); transform: rotate(1deg); }.funny-detail:nth-child(3) { background: var(--blue); transform: rotate(-1deg); }.detail-label { display: inline-block; margin-bottom: 18px; color: var(--coral); text-transform: uppercase; letter-spacing: .14em; font-size: 9px; font-weight: 700; }.funny-detail ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }.funny-detail li { position: relative; padding-left: 20px; font-size: 13px; line-height: 1.35; }.funny-detail li::before { content: '-'; position: absolute; left: 0; color: var(--coral); font-weight: 700; }.funny-detail p { margin: 0 0 15px; font-size: 13px; line-height: 1.5; }.funny-detail strong { color: var(--coral); }.detail-stamp { margin-top: 25px !important; padding: 10px; border: 1px solid var(--coral); color: var(--coral); text-align: center; text-transform: uppercase; letter-spacing: .14em; font-size: 10px !important; font-weight: 700; transform: rotate(-3deg); }.detail-stamp small { color: var(--ink); font-size: 8px; }.detail-fine-print { margin-top: 28px !important; font-family: 'Playfair Display', serif; font-size: 14px !important; font-style: italic; }
@media (max-width: 760px) { .funny-details { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }.funny-detail { min-height: auto; }.funny-detail:nth-child(2), .funny-detail:nth-child(3) { transform: none; } }
.cartoon-scene { position: absolute; z-index: 3; left: 50%; bottom: 7%; width: min(440px, 68vw); height: 190px; transform: translateX(-50%); pointer-events: none; }.cartoon-character { position: absolute; bottom: 0; width: 72px; height: 150px; }.cartoon-boy { right: 13%; }.cartoon-girl { left: 0; animation: girl-run-and-hug 4.2s cubic-bezier(.7,0,.25,1) infinite; }.cartoon-head { position: absolute; z-index: 3; top: 0; left: 18px; width: 48px; height: 52px; border-radius: 47% 47% 45% 45%; background: #f2b38c; border: 2px solid var(--ink); }.cartoon-head::before, .cartoon-head::after { content: ''; position: absolute; top: 26px; width: 5px; height: 7px; border-radius: 50%; background: var(--ink); }.cartoon-head::before { left: 14px; }.cartoon-head::after { right: 14px; }.cartoon-hair { position: absolute; z-index: 4; top: -7px; left: 14px; width: 56px; height: 25px; border-radius: 55% 55% 25% 25%; background: #45322d; transform: rotate(-5deg); }.cartoon-boy .cartoon-hair { background: #342b2a; }.cartoon-body { position: absolute; top: 52px; left: 12px; width: 60px; height: 59px; border-radius: 20px 20px 10px 10px; background: var(--blue); border: 2px solid var(--ink); }.cartoon-boy .cartoon-body { background: var(--coral); }.cartoon-arm, .cartoon-leg { position: absolute; z-index: 2; width: 12px; border: 2px solid var(--ink); border-radius: 10px; transform-origin: top center; }.cartoon-arm { top: 58px; height: 58px; background: #f2b38c; }.arm-boy-left { left: 8px; transform: rotate(28deg); }.arm-boy-right { right: 5px; transform: rotate(-35deg); }.arm-girl-left { left: 5px; transform: rotate(32deg); }.arm-girl-right { right: 5px; transform: rotate(-38deg); }.cartoon-leg { top: 105px; height: 48px; background: #f2b38c; }.leg-boy-left { left: 22px; transform: rotate(8deg); }.leg-boy-right { right: 21px; transform: rotate(-8deg); }.leg-girl-left { left: 22px; transform: rotate(8deg); }.leg-girl-right { right: 21px; transform: rotate(-8deg); }.hug-heart { position: absolute; z-index: 5; left: 58%; top: 8px; color: var(--coral); font-size: 30px; opacity: 0; animation: hug-heart-pop 4.2s ease-in-out infinite; }@keyframes girl-run-and-hug { 0%, 24% { left: 0; transform: scale(.92); } 43%, 78% { left: 45%; transform: scale(1); } 100% { left: 45%; transform: scale(1); } }@keyframes hug-heart-pop { 0%, 42% { opacity: 0; transform: translateY(8px) scale(.5); } 52%, 82% { opacity: 1; transform: translateY(-7px) scale(1); } 100% { opacity: 0; transform: translateY(-20px) scale(.8); } }
@keyframes message-fall { 0% { transform: translateY(-20px) rotate(0); } 100% { transform: translateY(110vh) rotate(540deg); } }
.hero { min-height: 760px; position: relative; overflow: hidden; background: #f5d9d1; padding: 28px 6vw; }
.letters-page { min-height: 100vh; background: var(--cream); }.letters-shell { max-width: 1260px; margin: auto; padding: 32px 7vw 90px; }.letters-back { color: var(--ink); text-decoration: none; text-transform: uppercase; letter-spacing: .13em; font-size: 9px; font-weight: 700; opacity: .62; }.letters-header { max-width: 680px; margin: 75px auto 58px; text-align: center; }.letters-eyebrow { color: var(--coral); text-transform: uppercase; letter-spacing: .18em; font-size: 10px; font-weight: 700; }.letters-sparkles { color: var(--coral); font-size: 26px; letter-spacing: .35em; margin: 25px 0 16px; }.letters-header h1 { margin: 0; font-size: clamp(56px, 8vw, 100px); }.letters-header h1 em { color: var(--coral); }.letters-header > p:last-child { line-height: 1.7; font-size: 14px; opacity: .68; }.envelope-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 17px; }.envelope-card { min-height: 285px; grid-column: span 2; position: relative; overflow: hidden; border: 0; color: var(--ink); text-align: left; padding: 22px; isolation: isolate; transition: transform .3s ease, box-shadow .3s ease; }.envelope-card:nth-child(4), .envelope-card:nth-child(5) { grid-column: span 3; min-height: 255px; }.envelope-card::before { content: ''; position: absolute; z-index: -1; left: -10%; right: -10%; bottom: -37%; height: 78%; border-top: 1px solid rgba(39,37,42,.18); background: rgba(255,255,255,.18); transform: rotate(0deg) skewY(-18deg); }.envelope-card::after { content: ''; position: absolute; z-index: -1; left: -8%; right: -8%; top: 20%; height: 1px; background: rgba(39,37,42,.15); transform: rotate(24deg); }.envelope-card:hover, .envelope-card:focus-visible { transform: translateY(-8px) rotate(-1deg); box-shadow: 0 18px 30px rgba(72,47,39,.15); outline: none; }.envelope-coral { background: #f08b78; }.envelope-cream { background: #f7e8b1; }.envelope-blue { background: #c4dfe7; }.envelope-yellow { background: #f5d578; }.envelope-pink { background: #efcbd1; }.envelope-number { font-size: 10px; letter-spacing: .1em; font-weight: 700; opacity: .6; }.envelope-flap { position: absolute; top: 15px; right: 21px; font-family: 'Playfair Display', serif; font-size: 41px; }.envelope-label { position: absolute; left: 22px; bottom: 64px; font-family: 'Playfair Display', serif; font-size: 28px; line-height: .98; }.envelope-action { position: absolute; left: 22px; bottom: 23px; text-transform: uppercase; letter-spacing: .14em; font-size: 9px; font-weight: 700; opacity: .62; }.envelope-action::first-letter { color: var(--coral); }
.envelope-orange { grid-column: 2 / span 4; min-height: 255px; background: #f6b98f; }
.topbar { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 700; }
.brand { display: flex; gap: 10px; align-items: center; color: inherit; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--ink); border-radius: 50%; font-size: 18px; font-weight: 400; }
.date-stamp { opacity: .65; }
.hero-content { position: relative; z-index: 1; max-width: 720px; margin: 154px auto 0; text-align: center; }
.eyebrow, .small-label, .section-kicker, .modal-label { text-transform: uppercase; letter-spacing: .18em; font-size: 10px; font-weight: 700; }
.eyebrow { display: flex; justify-content: center; align-items: center; gap: 12px; }
.eyebrow span { width: 34px; height: 1px; background: currentColor; opacity: .5; }
h1, h2 { margin: 20px 0; font-family: 'Playfair Display', serif; font-weight: 600; line-height: .98; letter-spacing: 0; }
h1 { font-size: clamp(62px, 9vw, 130px); }
h1 em, h2 em { color: var(--coral); font-weight: 600; }
.cake-emoji { display: inline-block; font-size: .5em; transform: translateY(-.55em) rotate(8deg); }
.hero-copy { line-height: 1.7; opacity: .75; font-size: 14px; }
.scroll-cue { position: absolute; top: 430px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; text-transform: uppercase; letter-spacing: .14em; font-size: 9px; font-weight: 700; white-space: nowrap; }
.scroll-line { display: block; width: 42px; height: 1px; background: var(--ink); }
.hero-sun { position: absolute; width: 56vw; height: 56vw; max-width: 720px; max-height: 720px; border-radius: 50%; background: #f0aa98; opacity: .42; bottom: -390px; left: 50%; transform: translateX(-50%); }
.hero-sparkle { position: absolute; color: var(--coral); font-size: 36px; }.sparkle-one { top: 38%; left: 14%; }.sparkle-two { top: 24%; right: 12%; font-size: 27px; }
.wish-section, .letters-section { padding: 112px 9vw 126px; max-width: 1400px; margin: auto; }
.section-kicker { color: var(--coral); border-top: 1px solid var(--line); padding-top: 14px; }
.wish-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; align-items: center; margin-top: 82px; }
.section-intro h2, .letters-heading h2 { font-size: clamp(45px, 5vw, 76px); }
.instruction { max-width: 250px; margin-top: 35px; line-height: 1.7; font-size: 13px; opacity: .67; }
.candle-instruction-highlight { max-width: 330px; padding: 15px 16px; color: var(--ink); background: #f7d971; border-left: 4px solid var(--coral); box-shadow: 7px 7px 0 rgba(240,120,103,.18); font-size: 12px; font-weight: 700; line-height: 1.35; letter-spacing: .08em; opacity: 1; }.instruction-icon { color: var(--coral); margin: 0 4px; }
.wish-progress { width: 180px; height: 3px; margin-top: 42px; background: #eadcd4; overflow: hidden; }.wish-progress span { display: block; height: 100%; width: 100%; background: var(--coral); transition: width .45s ease; }
.progress-text { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; opacity: .55; }
.cake-stage { min-height: 430px; display: grid; place-items: center; align-content: center; position: relative; }
.cake-glow { position: absolute; width: 380px; height: 380px; border-radius: 50%; background: #f9e9b3; opacity: .55; }
.cake { position: relative; z-index: 1; width: min(430px, 78vw); padding-top: 90px; filter: drop-shadow(0 17px 8px rgba(126,73,54,.12)); }
.candles { position: absolute; z-index: 3; top: 0; left: 50%; width: 77%; transform: translateX(-50%); display: flex; justify-content: space-around; align-items: end; }
.candle { border: 0; background: transparent; width: 40px; height: 120px; position: relative; padding: 0; }.candle-body { position: absolute; bottom: 0; left: 13px; width: 15px; height: 64px; border-radius: 4px 4px 1px 1px; background: repeating-linear-gradient(135deg, #f07867 0 5px, #ffe0be 5px 10px); box-shadow: inset -3px 0 rgba(125,55,48,.1); }.wick { position: absolute; bottom: 64px; left: 20px; width: 2px; height: 14px; background: #59423c; }.flame { position: absolute; bottom: 75px; left: 13px; width: 16px; height: 26px; border-radius: 70% 40% 65% 45%; background: #f3a638; box-shadow: 0 0 20px 7px rgba(247,185,59,.44); transform: rotate(8deg); animation: flicker .7s ease-in-out infinite alternate; }.candle:nth-child(even) .flame { animation-delay: -.3s; }.candle.off .flame { opacity: 0; transform: translateY(12px) scale(.5); }.candle.off .candle-body { filter: saturate(.3); opacity: .7; }
@keyframes flicker { from { transform: rotate(-7deg) scale(.9); } to { transform: rotate(8deg) scale(1.1); } }
.frosting-top { position: absolute; z-index: 2; left: 7%; right: 7%; top: 82px; height: 45px; background: #fff1df; border-radius: 30px 30px 20px 20px; }.cake-top { position: relative; z-index: 1; height: 75px; margin: 0 5%; border-radius: 45% 45% 12% 12%; background: #e99a7f; }.cake-body { height: 115px; margin: -12px 8% 0; background: #edaa87; border-radius: 14px 14px 28px 28px; display: flex; justify-content: space-evenly; overflow: hidden; }.cake-body span { width: 8px; height: 100%; background: #dd876f; opacity: .8; }.cake-base { height: 22px; margin: -3px 5% 0; border-radius: 50%; background: #cf7663; }.cake-note { position: relative; z-index: 2; margin-top: 35px; font-family: 'Playfair Display', serif; font-style: italic; font-size: 15px; opacity: .6; }
.birthday-reveal { position: absolute; inset: 20px; z-index: 4; display: grid; place-items: center; align-content: center; gap: 12px; text-align: center; background: rgba(255,247,241,.92); opacity: 0; pointer-events: none; transform: scale(.92); transition: .6s ease; }.birthday-reveal.show { opacity: 1; pointer-events: auto; transform: scale(1); }.birthday-reveal strong { font-family: 'Playfair Display', serif; font-size: clamp(27px, 4vw, 48px); line-height: 1.05; }.birthday-reveal em { color: var(--coral); }.reveal-stars { color: var(--coral); letter-spacing: .7em; }
.reveal-message-button { display: inline-flex; align-items: center; gap: 20px; margin-top: 8px; padding: 13px 16px 13px 18px; color: var(--paper); background: var(--ink); text-decoration: none; text-transform: uppercase; letter-spacing: .13em; font-size: 9px; font-weight: 700; }.reveal-message-button span { font-size: 18px; line-height: 9px; }
.letters-section { padding-top: 35px; }.letters-heading { display: flex; justify-content: space-between; align-items: end; margin: 70px 0 48px; }.letters-heading h2 { margin-bottom: 0; }.letters-intro { line-height: 1.7; font-size: 13px; opacity: .65; text-align: right; }.letters-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 15px; }.letter-card { border: 0; min-height: 315px; padding: 23px; text-align: left; position: relative; overflow: hidden; color: var(--ink); transition: transform .3s ease, box-shadow .3s ease; }.letter-card:hover, .letter-card:focus-visible { transform: translateY(-8px) rotate(-1deg); box-shadow: 0 15px 26px rgba(72,47,39,.13); outline: none; }.letter-card:nth-child(1), .letter-card:nth-child(2), .letter-card:nth-child(3) { grid-column: span 2; }.letter-card:nth-child(4), .letter-card:nth-child(5) { grid-column: span 3; min-height: 270px; }.letter-coral { background: #f08b78; }.letter-cream { background: #f7e8b1; }.letter-blue { background: #c4dfe7; }.letter-yellow { background: #f5d578; }.letter-pink { background: #efcbd1; }.letter-number { font-size: 10px; font-weight: 700; letter-spacing: .1em; opacity: .6; }.letter-icon { position: absolute; top: 16px; right: 22px; font-size: 43px; font-family: 'Playfair Display', serif; font-weight: 600; }.letter-title { position: absolute; left: 23px; bottom: 62px; font-family: 'Playfair Display', serif; font-size: 28px; line-height: .98; }.letter-title em { font-weight: 600; }.open-label { position: absolute; left: 23px; bottom: 23px; text-transform: uppercase; letter-spacing: .14em; font-size: 9px; font-weight: 700; opacity: .62; }.open-label b { font-size: 16px; margin-left: 8px; }
.footer { border-top: 1px solid var(--line); margin: 0 9vw; padding: 25px 0 40px; display: flex; justify-content: space-between; text-transform: uppercase; letter-spacing: .14em; font-size: 9px; font-weight: 700; opacity: .55; }
.letter-modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .3s; }.letter-modal.open { opacity: 1; pointer-events: auto; }.modal-backdrop { position: absolute; inset: 0; background: rgba(39,37,42,.52); backdrop-filter: blur(6px); }.open-letter { width: min(560px, 100%); max-height: calc(100vh - 40px); min-height: 500px; position: relative; z-index: 1; padding: 66px 70px 62px; background: #fffdf9; box-shadow: 0 22px 70px rgba(0,0,0,.2); transform: translateY(20px) rotate(1deg); transition: transform .4s; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; }.letter-modal.open .open-letter { transform: translateY(0) rotate(1deg); }.close-modal { position: absolute; top: 15px; right: 18px; border: 0; background: none; font-size: 30px; font-weight: 300; color: inherit; }.modal-postmark { font-size: 9px; letter-spacing: .13em; opacity: .45; }.modal-label { color: var(--coral); margin: 58px 0 15px; }.open-letter h2 { font-size: 45px; margin: 0; max-width: 420px; }.letter-rule { height: 1px; background: var(--line); margin: 30px 0; }.open-letter #modal-message { font-family: 'Playfair Display', serif; font-size: 19px; line-height: 1.65; max-width: 420px; white-space: pre-line; }.letter-signoff { margin-top: 32px; line-height: 1.6; font-family: 'Playfair Display', serif; }.letter-signoff em { color: var(--coral); }.modal-stamp { position: absolute; right: 62px; bottom: 50px; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--coral); border-radius: 50%; color: var(--coral); font-size: 24px; transform: rotate(-15deg); }
.confetti-container { position: fixed; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }.confetto { position: absolute; top: -20px; width: 9px; height: 15px; animation: fall 2.9s linear forwards; }.confetto:nth-child(3n) { border-radius: 50%; }.confetto:nth-child(2n) { width: 7px; height: 20px; transform: rotate(35deg); }@keyframes fall { to { top: 110vh; transform: translateX(var(--drift)) rotate(720deg); } }
@media (max-width: 760px) { .hero { min-height: 650px; padding: 20px 6vw; }.date-stamp { display: none; }.hero-content { margin-top: 125px; }.hero-copy { font-size: 13px; }.desktop-break { display: none; }.scroll-cue { top: 400px; }.wish-section, .letters-section { padding: 80px 7vw; }.wish-layout { grid-template-columns: 1fr; gap: 40px; margin-top: 55px; }.cake-stage { min-height: 370px; }.cake-glow { width: 300px; height: 300px; }.letters-heading { display: block; margin-top: 50px; }.letters-intro { text-align: left; margin-top: 28px; }.letters-grid { grid-template-columns: 1fr 1fr; gap: 10px; }.letter-card, .letter-card:nth-child(4), .letter-card:nth-child(5), .letter-card:nth-child(1), .letter-card:nth-child(2), .letter-card:nth-child(3) { grid-column: span 1; min-height: 260px; padding: 17px; }.letter-title { left: 17px; bottom: 53px; font-size: 22px; }.open-label { left: 17px; bottom: 17px; }.letter-icon { right: 15px; font-size: 32px; }.footer { margin: 0 7vw; flex-direction: column; gap: 12px; }.open-letter { padding: 48px 28px; min-height: 480px; }.open-letter h2 { font-size: 37px; }.modal-stamp { right: 28px; bottom: 35px; } }
@media (max-width: 760px) { .welcome-shell { padding: 20px 7vw 25px; }.welcome-content { margin-top: 72px; }.welcome-stars { margin-top: 26px; }.welcome-copy { font-size: 14px; }.welcome-copy br.desktop-break { display: none; }.welcome-footer { left: 7vw; right: 7vw; bottom: 22px; } }
@media (max-width: 760px) { .letters-shell { padding: 24px 7vw 65px; }.letters-header { margin: 58px auto 42px; }.envelope-grid { grid-template-columns: 1fr 1fr; gap: 10px; }.envelope-card, .envelope-card:nth-child(4), .envelope-card:nth-child(5), .envelope-card:nth-child(6) { grid-column: span 1; min-height: 235px; padding: 17px; }.envelope-label { left: 17px; bottom: 53px; font-size: 22px; }.envelope-action { left: 17px; bottom: 17px; }.envelope-flap { right: 14px; font-size: 32px; } }
@media (max-width: 390px) { .envelope-grid { grid-template-columns: 1fr; }.envelope-card, .envelope-card:nth-child(4), .envelope-card:nth-child(5) { min-height: 215px; } }
.proposal-no-moving { position: fixed; z-index: 10; margin: 0; transition: left .16s ease, top .16s ease; }
@media (max-width: 760px) { .cartoon-scene { bottom: 4%; width: 320px; transform: translateX(-50%) scale(.82); transform-origin: bottom center; } }
.proposal-yes { color: #fffdf9; background: #f07867; border-color: #f07867; box-shadow: 4px 4px 0 rgba(39,37,42,.16); }.proposal-no { color: #27252a; background: #f7d971; border-color: #e4ba45; box-shadow: 4px 4px 0 rgba(39,37,42,.16); }.proposal-yes:hover, .proposal-yes:focus-visible { color: #fffdf9; background: #d85d55; border-color: #d85d55; }.proposal-no:hover, .proposal-no:focus-visible { color: #27252a; background: #f2c44c; border-color: #d9a936; }
@media (max-width: 390px) { .letters-grid { grid-template-columns: 1fr; }.letter-card, .letter-card:nth-child(4), .letter-card:nth-child(5) { min-height: 220px; } }
.aunty-page { min-height: 100vh; background: #f7ddd5; }
.aunty-shell { min-height: 100vh; position: relative; overflow: hidden; padding: 34px 7vw 76px; background: radial-gradient(circle at 50% 38%, rgba(255,248,235,.94), transparent 35%), linear-gradient(135deg, #f7ddd5, #efc4bb); }
.aunty-shell::before, .aunty-shell::after { content: ''; position: absolute; border: 1px solid rgba(240,120,103,.25); border-radius: 50%; pointer-events: none; }.aunty-shell::before { width: 64vw; height: 64vw; left: -30vw; bottom: -38vw; }.aunty-shell::after { width: 43vw; height: 43vw; right: -18vw; top: -24vw; }
.aunty-content { position: relative; z-index: 1; width: min(760px, 100%); margin: 20px auto 0; text-align: center; }
.aunty-eyebrow { color: var(--coral); text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 700; }.aunty-stars { margin: 23px 0 17px; color: var(--coral); font-size: 27px; letter-spacing: .35em; }
.aunty-frame { width: min(370px, 78vw); margin: 0 auto; padding: 12px; background: var(--paper); box-shadow: 0 18px 40px rgba(72,47,39,.16); transform: rotate(1.5deg); }.aunty-frame img { display: block; width: 100%; aspect-ratio: 1 / 1.12; object-fit: cover; object-position: center; }
.aunty-content h1 { margin: 35px 0 0; font-size: clamp(38px, 6vw, 68px); line-height: .98; }.aunty-content h1 em { color: var(--coral); }.aunty-rule { width: 68px; height: 1px; margin: 27px auto 24px; background: var(--coral); opacity: .6; }
.aunty-copy { max-width: 650px; margin: 0 auto; text-align: left; font-size: 14px; line-height: 1.75; white-space: pre-line; }.aunty-next { margin-top: 30px; }
@media (max-width: 760px) { .aunty-shell { padding: 25px 7vw 58px; }.aunty-content { margin-top: 12px; }.aunty-copy { font-size: 13px; line-height: 1.7; }.aunty-content h1 { margin-top: 30px; } }