:root {
  color-scheme: light;
  --cream: #F8F3E8;
  --paper: #fffdf8;
  --pink: #E83D70;
  --pink-deep: #B91F50;
  --pink-pale: color-mix(in srgb, #E83D70 12%, white);
  --coral: #E94B45;
  --yellow: #F5B51B;
  --yellow-pale: color-mix(in srgb, #F5B51B 16%, white);
  --orange: #F28C28;
  --lilac: #8173C7;
  --blue: #3D6FD8;
  --blue-pale: color-mix(in srgb, #3D6FD8 11%, white);
  --mint: #5FAF91;
  --mint-pale: color-mix(in srgb, #5FAF91 13%, white);
  --ink: #38333F;
  --muted: #756d72;
  --display: "Fredoka", "Trebuchet MS", sans-serif;
  --body: "DM Sans", "Avenir Next", Avenir, sans-serif;
  font-family: var(--body);
  color: var(--ink);
  background: var(--cream);
  scroll-behavior: smooth;
  scroll-padding-top: 1rem;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
a { color: inherit; }
button, input { font: inherit; }
::selection { color: #583d44; background: #ffdce4; }
.skip-link { position: fixed; z-index: 20; top: .75rem; left: .75rem; padding: .8rem 1rem; transform: translateY(-160%); border-radius: 99px; background: #fff; }
.skip-link:focus { transform: translateY(0); }

.hero { position: relative; min-height: 760px; overflow: hidden; background: radial-gradient(ellipse at 79% 35%, #fffdf7 0, #fffdf7 19%, transparent 19.2%), linear-gradient(137deg, #fff7f2 0%, #fff4f3 51%, #fdf1f7 100%); }
.hero::after { position: absolute; z-index: 0; right: -8%; bottom: -95px; left: -8%; height: 160px; content: ""; border-radius: 50% 50% 0 0 / 40% 40% 0 0; background: #fffaf7; }
.hero-sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.topbar, .hero-content, .scroll-cue { position: relative; z-index: 1; }
.topbar { display: flex; max-width: 1200px; align-items: center; justify-content: space-between; margin: auto; padding: 25px 34px; }
.brand { display: flex; align-items: center; gap: 8px; color: #8b6672; font-family: var(--display); font-size: 1.04rem; font-weight: 600; text-decoration: none; }
.brand-mark { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: #ffdde4; color: var(--pink-deep); }
.nav-link { color: #806c72; font-size: .88rem; font-weight: 600; text-decoration: none; }
.nav-link span { margin-left: 5px; color: var(--pink-deep); }
.hero-content { display: grid; width: min(1120px, calc(100% - 64px)); min-height: 610px; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 30px; margin: 0 auto; padding: 26px 0 68px; }
.hero-copy { z-index: 1; max-width: 580px; padding: 5px 0 24px; }
.eyebrow, .section-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 15px; color: #bc6c81; font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow { padding: 9px 14px; border: 1px solid #f9d8dc; border-radius: 99px; background: #fff8f6; }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 4px #fce5e9; }
h1, h2, h3, p { margin-top: 0; }
.hero h1 { max-width: 570px; margin-bottom: 15px; color: #684b54; font-family: var(--display); font-size: clamp(2.5rem, 4.7vw, 4.05rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.06; }
.hero h1 span, .section-heading h2 span, .rsvp-copy h2 span { color: var(--pink-deep); }
.hero-intro { max-width: 430px; margin: 0 0 22px; color: #88757a; font-size: 1rem; line-height: 1.68; }
.name-lockup { margin: 19px 0 18px; padding-left: 15px; border-left: 3px solid #f3b1c0; }
.name-kicker { display: block; margin-bottom: 3px; color: #aa8b8e; font-size: .75rem; font-weight: 600; }
.birthday-name { margin: 0; color: #66464f; font-family: var(--display); font-size: clamp(1.75rem, 3.1vw, 2.55rem); font-weight: 600; line-height: 1.05; }
.birthday-name span { display: block; }
.age-pill { display: inline-block; margin-top: 9px; padding: 6px 11px; border-radius: 99px; background: #e9f6f1; color: #538778; font-size: .8rem; font-weight: 700; }
.hero-date { display: flex; align-items: center; gap: 12px; margin: 19px 0 21px; }
.date-icon { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 14px; background: #fff0cb; color: #cf9c41; font-size: 1.3rem; }
.hero-date strong, .hero-date small { display: block; }
.hero-date strong { color: #6c575d; font-size: .94rem; }
.hero-date small { margin-top: 3px; color: #998589; font-size: .76rem; }
.button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 19px; padding: 0 23px; border: 0; border-radius: 15px; cursor: pointer; font-size: .91rem; font-weight: 700; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button-primary { color: white; background: linear-gradient(110deg, #ee829e, #e66f91); box-shadow: 0 9px 18px #df779333; }
.button:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 13px 22px #df77934a; }
.button:active:not(:disabled) { transform: translateY(0); }
.button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #8853a2; outline-offset: 4px; }
.hero-button span, .submit-button span { font-size: 1.15rem; }
.hero-art { position: relative; display: grid; min-height: 500px; place-items: center; isolation: isolate; }
.hero-art::before { position: absolute; z-index: -1; width: min(92%, 420px); aspect-ratio: 1; content: ""; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #fff 0 4%, transparent 4.5%), linear-gradient(145deg, #fde9e6, #f9e4f0 55%, #e8f4ef); box-shadow: inset -12px -15px 0 #f0d7e344; }
.ice-cream { width: min(77%, 340px); overflow: visible; filter: drop-shadow(0 21px 15px #8a566125); animation: ice-float 4.5s ease-in-out infinite; }
.art-orbit { position: absolute; z-index: -1; border: 1px dashed #e1a7af; border-radius: 50%; opacity: .65; }
.orbit-one { width: 92%; aspect-ratio: 1; transform: rotate(-17deg) scaleY(.55); }
.orbit-two { width: 106%; aspect-ratio: 1; transform: rotate(36deg) scaleY(.44); }
.art-star, .art-heart { position: absolute; color: #e59db0; animation: twinkle 2.8s ease-in-out infinite; }
.star-a { top: 14%; left: 14%; font-size: 2rem; }.star-b { top: 32%; right: 8%; color: #9bcfc8; font-size: 2.5rem; animation-delay: .8s; }
.art-heart { right: 16%; bottom: 17%; color: #e78198; font-size: 1.4rem; animation-delay: 1.2s; }
.art-caption { position: absolute; right: 1%; bottom: 9%; display: grid; width: 104px; height: 104px; align-content: center; border: 1px solid #f4d9da; border-radius: 50%; background: #fffaf5; color: #a17a81; font-size: .7rem; text-align: center; transform: rotate(9deg); box-shadow: 0 5px 18px #79545212; }
.art-caption strong { color: var(--pink-deep); font-family: var(--display); font-size: .97rem; }
.art-caption span:last-child { color: var(--pink); font-size: .9rem; }
.scroll-cue { position: absolute; right: 0; bottom: 29px; left: 0; display: flex; width: fit-content; align-items: center; gap: 9px; margin: auto; color: #a38689; font-size: .75rem; text-decoration: none; }
.scroll-cue span { color: var(--pink-deep); font-size: 1rem; animation: nudge 1.6s ease-in-out infinite; }
.sprinkle { position: absolute; width: 9px; height: 24px; border-radius: 9px; background: #f3b4bd; opacity: .55; transform: rotate(35deg); animation: sprinkle-drift 7s ease-in-out infinite; }
.sprinkle-one { top: 24%; left: 6%; }.sprinkle-two { top: 65%; left: 46%; width: 8px; height: 18px; background: #a7dcd6; transform: rotate(-35deg); animation-delay: -3s; }
.sprinkle-three { top: 19%; right: 8%; width: 8px; height: 18px; background: #efc65f; transform: rotate(-28deg); animation-delay: -1s; }
.sprinkle-four { right: 43%; bottom: 12%; height: 15px; background: #c7b4e8; animation-delay: -4s; }
.sparkle { position: absolute; color: #e7b94f; }.sparkle-one { top: 43%; left: 8%; font-size: 1.4rem; }.sparkle-two { top: 71%; right: 6%; color: #d88ca7; font-size: 2rem; }.sparkle-three { top: 12%; left: 51%; color: #9dcfc7; font-size: 1.1rem; }

.section-pad { padding: 100px 24px; }
.message-section, .details-section { background: #fffaf7; }
.section-heading { margin: 0 auto 37px; text-align: center; }
.section-heading .section-kicker, .countdown-inner .section-kicker { margin-bottom: 9px; }
.section-heading h2, .countdown-inner h2, .rsvp-copy h2 { margin-bottom: 12px; color: #684b54; font-family: var(--display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.section-heading > p { margin-bottom: 0; color: var(--muted); font-size: .94rem; }
.message-card { position: relative; width: min(820px, 100%); margin: auto; padding: 45px 70px 40px; overflow: hidden; border: 1px solid #f3ded7; border-radius: 28px; background: linear-gradient(142deg, #fffefe, #fff7f1); box-shadow: 0 17px 45px #9d68700d; }
.quote-mark { display: block; height: 44px; color: #eda8b5; font-family: Georgia, serif; font-size: 5rem; line-height: .9; }
.message-card > p { position: relative; z-index: 1; margin: 9px 0 23px; color: #725d63; font-size: 1.04rem; line-height: 1.9; }
.message-signoff { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; color: #9a797e; font-family: var(--display); font-size: .94rem; }
.signoff-line { width: 34px; height: 1px; background: #e7abb4; }
.signoff-heart { color: var(--pink); }.message-flower { position: absolute; color: #f7e2dc; }.flower-one { right: 28px; bottom: 22px; font-size: 4.8rem; }.flower-two { top: 34px; right: 75px; color: #f5e6ca; font-size: 1.7rem; }

.countdown-section { padding-top: 26px; padding-bottom: 24px; background: #fffaf7; }
.countdown-inner { position: relative; display: flex; width: min(990px, 100%); min-height: 220px; align-items: center; justify-content: center; gap: 34px; margin: auto; padding: 34px; overflow: hidden; border: 1px solid #f2dfd9; border-radius: 28px; background: linear-gradient(112deg, #fff2e3, #ffeef1 57%, #f6f0ff); text-align: center; }
.countdown-scoop { display: grid; width: 106px; height: 106px; flex: 0 0 auto; place-items: center; border: 7px solid #fff8f0; border-radius: 47% 53% 48% 52%; background: linear-gradient(145deg, #f6a9b8, #ed7e9b); box-shadow: 0 6px 16px #ca769533; transform: rotate(-12deg); }
.countdown-scoop span { color: white; font-size: 2.3rem; }
.countdown-inner h2 { margin-bottom: 14px; font-size: 2.15rem; }
.countdown-display { display: flex; align-items: baseline; justify-content: center; gap: 10px; color: #96767e; font-size: .9rem; }
.countdown-number { color: #d76182; font-family: var(--display); font-size: 2.5rem; line-height: 1; }
.countdown-note { margin: 10px 0 0; color: #9b8588; font-size: .76rem; }
.countdown-confetti span { position: absolute; color: #d7b66f; }.countdown-confetti span:nth-child(1) { top: 29px; right: 55px; font-size: 1.8rem; }.countdown-confetti span:nth-child(2) { right: 99px; bottom: 24px; color: #b49bd3; font-size: 1.6rem; }.countdown-confetti span:nth-child(3) { top: 52px; left: 40px; color: #e68ba3; font-size: 1.6rem; }

.details-section { padding-top: 90px; }
.details-grid { display: grid; width: min(1000px, 100%); grid-template-columns: repeat(3, 1fr); gap: 15px; margin: auto; }
.detail-card { position: relative; min-height: 205px; padding: 23px 22px; overflow: hidden; border: 1px solid #f0e6dd; border-radius: 22px; background: #fff; transition: transform .22s ease, box-shadow .22s ease; }
.detail-card:hover { transform: translateY(-4px); box-shadow: 0 14px 26px #77576013; }
.detail-name { background: linear-gradient(145deg, #fff4f3, #fff); }.detail-age { background: linear-gradient(145deg, #eff9f5, #fff); }.detail-date { background: linear-gradient(145deg, #fff8e8, #fff); }.detail-place { grid-column: 1 / -1; min-height: 182px; background: linear-gradient(110deg, #f5f0ff, #fff 69%); }
.detail-icon { display: grid; width: 35px; height: 35px; margin-bottom: 15px; place-items: center; border-radius: 12px; background: #fff; color: #db8197; font-size: 1.15rem; box-shadow: 0 3px 10px #88555010; }
.detail-age .detail-icon { color: #5ba293; }.detail-date .detail-icon { color: #d1a13d; }.detail-place .detail-icon { color: #9c84c3; }
.detail-label { display: block; margin-bottom: 7px; color: #a18d91; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.detail-card h3 { margin-bottom: 6px; color: #684f56; font-family: var(--display); font-size: 1.35rem; font-weight: 600; line-height: 1.12; }
.detail-note, .detail-card address { color: #9a8589; font-size: .77rem; font-style: normal; line-height: 1.55; }
.detail-place h3 { margin-bottom: 7px; }.detail-place address { max-width: 690px; font-size: .81rem; }
.maps-link { position: absolute; right: 20px; bottom: 20px; display: inline-flex; min-height: 40px; align-items: center; gap: 9px; padding: 0 15px; border: 1px solid #ebdff4; border-radius: 12px; background: white; color: #876ea5; font-size: .8rem; font-weight: 700; text-decoration: none; transition: background .2s ease; }
.maps-link:hover { background: #f6effb; }

.rsvp-section { position: relative; overflow: hidden; background: linear-gradient(140deg, #e9f7f3 0%, #f1f8f1 48%, #fff2ee 100%); }
.rsvp-layout { display: grid; width: min(1000px, 100%); grid-template-columns: .85fr 1.15fr; align-items: center; gap: 65px; margin: auto; }
.rsvp-copy { position: relative; }.rsvp-copy h2 { max-width: 380px; margin-bottom: 16px; font-size: clamp(2.25rem, 4vw, 3.2rem); }.rsvp-copy > p { max-width: 360px; color: #7e7778; font-size: .96rem; line-height: 1.7; }
.rsvp-stamp { display: grid; width: 106px; height: 106px; align-content: center; justify-items: center; margin: 30px 0 0 12px; border: 1px dashed #dea1ad; border-radius: 50%; color: #af7682; font-family: var(--display); font-size: .75rem; line-height: 1.05; text-align: center; transform: rotate(-12deg); }
.rsvp-stamp strong { color: var(--pink); font-size: 1.25rem; }
.rsvp-form { padding: 31px; border: 1px solid #f2e4df; border-radius: 25px; background: #fffdfb; box-shadow: 0 17px 50px #637d7614; }
.form-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 23px; }.form-scoop { display: grid; width: 43px; height: 43px; place-items: center; border-radius: 15px; background: #ffebed; color: var(--pink-deep); font-size: 1.35rem; }
.form-heading h3 { margin: 0 0 3px; color: #684f56; font-family: var(--display); font-size: 1.35rem; font-weight: 600; }.form-heading p { margin: 0; color: #a28e91; font-size: .78rem; }
.form-field { margin-bottom: 17px; }.form-field label { display: block; margin-bottom: 7px; color: #705d62; font-size: .82rem; font-weight: 700; }
.form-field input { width: 100%; height: 49px; padding: 0 14px; border: 1px solid #eadfe0; border-radius: 12px; outline: 0; background: #fff; color: var(--ink); transition: border .2s ease, box-shadow .2s ease; }
.form-field input::placeholder { color: #b5a6a8; }.form-field input:focus { border-color: #df91a4; box-shadow: 0 0 0 3px #f8e0e5; }
.form-field input[aria-invalid="true"] { border-color: #c74457; }.number-wrap { position: relative; }.number-wrap input { padding-right: 95px; }
.number-suffix { position: absolute; top: 50%; right: 13px; color: #9e8b8e; font-size: .76rem; pointer-events: none; transform: translateY(-50%); }
.field-hint, .field-error { display: block; margin-top: 6px; font-size: .72rem; line-height: 1.4; }.field-hint { color: #9d8a8d; }.field-error { min-height: 0; color: #b4384e; font-weight: 600; }
.submit-button { width: 100%; min-height: 50px; margin-top: 2px; }.submit-button:disabled { cursor: wait; opacity: .75; }
.submit-button.is-loading span { display: inline-block; width: 15px; height: 15px; overflow: hidden; border: 2px solid #ffffff80; border-top-color: #fff; border-radius: 50%; font-size: 0; animation: spin .8s linear infinite; }
.form-status { min-height: 0; margin: 12px 0 0; border-radius: 10px; font-size: .82rem; line-height: 1.5; }.form-status:not(:empty) { padding: 10px 12px; }.form-status.is-success { background: #e9f7ef; color: #39795c; }.form-status.is-error { background: #fff0f0; color: #a93745; }
.privacy-note { margin: 14px 0 0; color: #a18e91; font-size: .7rem; text-align: center; }.privacy-note span { color: var(--pink); }
.rsvp-decoration span { position: absolute; color: #c5dad3; opacity: .75; }.rsvp-decoration span:nth-child(1) { top: 16%; left: 5%; font-size: 2rem; }.rsvp-decoration span:nth-child(2) { top: 57%; left: 7%; color: #e6b3bf; font-size: 1.7rem; }.rsvp-decoration span:nth-child(3) { right: 5%; bottom: 15%; color: #d4c1e7; font-size: 2.3rem; }.rsvp-decoration span:nth-child(4) { top: 10%; right: 12%; color: #edc769; font-size: 1.6rem; }
.site-footer { display: grid; min-height: 245px; align-content: center; justify-items: center; padding: 35px 20px; background: #fff8f4; text-align: center; }
.footer-scoop { display: grid; width: 42px; height: 42px; margin-bottom: 12px; place-items: center; border-radius: 15px; background: #ffebee; color: var(--pink); font-size: 1.5rem; }
.site-footer > p { margin-bottom: 11px; color: #816c72; font-family: var(--display); font-size: 1.05rem; line-height: 1.5; }
.site-footer > strong { color: #684b54; font-family: var(--display); font-size: 1.2rem; font-weight: 600; }.footer-age { margin-top: 4px; color: #aa8b90; font-size: .74rem; }.footer-age span { color: var(--pink); }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .65s ease, transform .65s ease; }.reveal.is-visible { opacity: 1; transform: translateY(0); }
@keyframes ice-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(1deg); } }
@keyframes twinkle { 0%, 100% { opacity: .55; transform: scale(.88) rotate(-8deg); } 50% { opacity: 1; transform: scale(1.12) rotate(8deg); } }
@keyframes sprinkle-drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes spin { to { transform: rotate(360deg); } }
.celebrate { animation: celebrate .55s ease-in-out 2; }
@keyframes celebrate { 25% { transform: translateY(-6px) rotate(-1deg); } 75% { transform: translateY(-3px) rotate(1deg); } }

@media (max-width: 820px) {
  .hero { min-height: auto; }.hero-content { min-height: 0; grid-template-columns: 1fr .78fr; gap: 8px; padding-top: 38px; padding-bottom: 88px; }
  .hero-art { min-height: 390px; }.art-caption { right: -1%; bottom: 11%; width: 86px; height: 86px; }.ice-cream { width: 87%; }
  .rsvp-layout { gap: 32px; }.details-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .hero { min-height: 0; }.hero::after { bottom: -120px; }.topbar { padding: 16px 20px; }.brand { font-size: .89rem; }.brand-mark { width: 27px; height: 27px; }.nav-link { font-size: .76rem; }
  .hero-content { width: calc(100% - 40px); grid-template-columns: 1fr; gap: 0; padding: 28px 0 73px; }
  .hero-copy { padding: 0; }.eyebrow { margin-bottom: 13px; font-size: .66rem; }.hero h1 { max-width: 470px; font-size: clamp(2.6rem, 12vw, 3.5rem); }.hero-intro { max-width: 420px; margin-bottom: 16px; font-size: .9rem; }
  .name-lockup { margin: 16px 0; }.birthday-name { font-size: 2.1rem; }.hero-date { margin: 16px 0; }.hero-button { min-height: 49px; }
  .hero-art { min-height: 300px; margin: 0 13px; }.hero-art::before { width: 75%; }.ice-cream { width: min(68%, 245px); }.orbit-one { width: 86%; }.orbit-two { width: 95%; }.art-caption { right: 5%; bottom: 2%; width: 77px; height: 77px; font-size: .62rem; }.art-caption strong { font-size: .82rem; }
  .scroll-cue { bottom: 20px; }.sprinkle-one { left: 2%; }.sparkle-two { right: 3%; }
  .section-pad { padding: 70px 20px; }.section-heading { margin-bottom: 27px; }.section-heading h2, .countdown-inner h2 { font-size: 2.15rem; }.section-heading > p { font-size: .85rem; }
  .message-card { padding: 32px 24px 30px; border-radius: 22px; }.quote-mark { height: 37px; font-size: 4.3rem; }.message-card > p { font-size: .91rem; line-height: 1.75; }.message-signoff { align-items: flex-start; font-size: .82rem; }.signoff-line { margin-top: 8px; flex: 0 0 24px; }.flower-one { right: 11px; bottom: 7px; font-size: 3.4rem; }
  .countdown-section { padding: 0 20px 25px; }.countdown-inner { min-height: 230px; flex-direction: column; gap: 13px; padding: 23px 14px; }.countdown-scoop { width: 64px; height: 64px; border-width: 5px; }.countdown-scoop span { font-size: 1.5rem; }.countdown-inner .section-kicker { margin-bottom: 6px; font-size: .64rem; }.countdown-inner h2 { margin-bottom: 10px; font-size: 1.8rem; }.countdown-confetti span:nth-child(1) { top: 12px; right: 17px; }.countdown-confetti span:nth-child(2) { right: 20px; bottom: 11px; }
  .details-section { padding-top: 67px; }.details-grid { gap: 10px; }.detail-card { min-height: 183px; padding: 18px 15px; border-radius: 18px; }.detail-icon { width: 32px; height: 32px; margin-bottom: 11px; }.detail-card h3 { font-size: 1.16rem; }.detail-label { font-size: .64rem; }.detail-note { font-size: .7rem; }.detail-place { min-height: 212px; padding-bottom: 70px; }.detail-place address { font-size: .76rem; }.maps-link { right: auto; bottom: 15px; left: 15px; }
  .rsvp-layout { grid-template-columns: 1fr; gap: 24px; }.rsvp-copy h2 { max-width: 420px; font-size: 2.5rem; }.rsvp-copy > p { max-width: 440px; font-size: .9rem; }.rsvp-stamp { position: absolute; top: 16px; right: 4px; width: 78px; height: 78px; margin: 0; font-size: .62rem; }.rsvp-stamp strong { font-size: 1rem; }
  .rsvp-form { padding: 23px 19px; border-radius: 21px; }.form-heading { margin-bottom: 19px; }.form-heading h3 { font-size: 1.22rem; }.form-field label { font-size: .78rem; }.form-field input { height: 47px; }.privacy-note { font-size: .65rem; }
  .site-footer { min-height: 220px; }.site-footer > p { font-size: .95rem; }
}
@media (max-width: 370px) {
  .nav-link { font-size: .7rem; }.hero-content { width: calc(100% - 32px); }.hero h1 { font-size: 2.45rem; }.birthday-name { font-size: 1.9rem; }.hero-art { min-height: 270px; }.detail-card { padding-right: 12px; padding-left: 12px; }.detail-card h3 { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

.hero { background: radial-gradient(ellipse at 79% 35%, var(--paper) 0, var(--paper) 19%, transparent 19.2%), linear-gradient(137deg, var(--cream), color-mix(in srgb, var(--pink) 8%, var(--cream)) 51%, color-mix(in srgb, var(--lilac) 8%, var(--cream))); }
.hero::after, .message-section, .details-section, .countdown-section, .site-footer { background-color: var(--cream); }
.hero::after { background: var(--cream); }
.brand, .hero h1, .birthday-name, .section-heading h2, .countdown-inner h2, .rsvp-copy h2, .detail-card h3, .form-heading h3, .site-footer > strong { color: var(--ink); }
.brand-mark, .form-scoop, .footer-scoop { background: color-mix(in srgb, var(--pink) 13%, white); color: var(--pink-deep); }
.nav-link, .hero-intro, .hero-date strong, .section-heading > p, .message-card > p, .detail-note, .detail-card address, .rsvp-copy > p, .site-footer > p { color: var(--muted); }
.eyebrow, .section-kicker { color: var(--pink-deep); }
.eyebrow { border-color: color-mix(in srgb, var(--pink) 28%, white); background: color-mix(in srgb, var(--pink) 7%, white); }
.eyebrow-dot { background: var(--coral); box-shadow: 0 0 0 4px color-mix(in srgb, var(--coral) 15%, white); }
.hero h1 span, .section-heading h2 span, .rsvp-copy h2 span, .art-caption strong { color: var(--pink-deep); }
.name-lockup { border-left-color: var(--pink); }
.age-pill { background: var(--mint-pale); color: #286b52; }
.date-icon { background: var(--yellow-pale); color: #8a5800; }
.button-primary { background: linear-gradient(110deg, #C92658, #A91646); box-shadow: 0 9px 18px color-mix(in srgb, var(--pink) 24%, transparent); }
.button:hover:not(:disabled) { box-shadow: 0 13px 22px color-mix(in srgb, var(--pink) 32%, transparent); }
.button:focus-visible, a:focus-visible, input:focus-visible { outline-color: var(--lilac); }
.hero-art::before { background: radial-gradient(circle at 35% 32%, white 0 4%, transparent 4.5%), linear-gradient(145deg, color-mix(in srgb, var(--pink) 14%, white), color-mix(in srgb, var(--lilac) 14%, white) 55%, var(--mint-pale)); }
.art-orbit { border-color: color-mix(in srgb, var(--pink) 45%, white); }
.art-star, .sparkle-two { color: var(--pink); }
.star-b, .sparkle-three { color: var(--mint); }
.art-heart, .scroll-cue span { color: var(--coral); }
.art-caption { border-color: color-mix(in srgb, var(--coral) 22%, white); background: var(--paper); color: var(--muted); }
.sprinkle { background: var(--pink); }
.sprinkle-two, .sparkle-three { background-color: var(--mint); }
.sprinkle-three, .sparkle { color: var(--yellow); }
.sprinkle-four { background: var(--lilac); }
.message-card { border-color: color-mix(in srgb, var(--orange) 23%, white); background: linear-gradient(142deg, var(--paper), color-mix(in srgb, var(--orange) 7%, white)); }
.quote-mark, .signoff-heart, .message-flower { color: var(--pink); }
.signoff-line { background: color-mix(in srgb, var(--pink) 42%, white); }
.flower-two { color: var(--yellow); }
.countdown-inner { border-color: color-mix(in srgb, var(--orange) 24%, white); background: linear-gradient(112deg, var(--yellow-pale), color-mix(in srgb, var(--pink) 10%, white) 57%, color-mix(in srgb, var(--lilac) 11%, white)); }
.countdown-scoop { background: linear-gradient(145deg, var(--coral), var(--pink)); box-shadow: 0 6px 16px color-mix(in srgb, var(--pink) 28%, transparent); }
.countdown-number { color: var(--pink-deep); }
.countdown-display, .countdown-note { color: var(--muted); }
.countdown-confetti span { color: var(--yellow); }
.countdown-confetti span:nth-child(2) { color: var(--lilac); }
.countdown-confetti span:nth-child(3) { color: var(--pink); }
.detail-card { border-color: color-mix(in srgb, var(--lilac) 14%, white); background: var(--paper); }
.detail-name { background: linear-gradient(145deg, color-mix(in srgb, var(--pink) 11%, white), var(--paper)); }
.detail-age { background: linear-gradient(145deg, var(--mint-pale), var(--paper)); }
.detail-date { background: linear-gradient(145deg, var(--yellow-pale), var(--paper)); }
.detail-place { background: linear-gradient(110deg, color-mix(in srgb, var(--lilac) 12%, white), var(--paper) 69%); }
.detail-icon { color: var(--pink-deep); }
.detail-age .detail-icon { color: #286b52; }
.detail-date .detail-icon { color: #8a5800; }
.detail-place .detail-icon, .maps-link { color: #5D4D9F; }
.detail-label { color: #6f626a; }
.maps-link { border-color: color-mix(in srgb, var(--lilac) 30%, white); background: var(--paper); }
.maps-link:hover { background: color-mix(in srgb, var(--lilac) 13%, white); }
.rsvp-section { background: linear-gradient(140deg, var(--mint-pale), color-mix(in srgb, var(--yellow) 11%, white) 48%, color-mix(in srgb, var(--pink) 9%, white)); }
.rsvp-stamp { border-color: color-mix(in srgb, var(--pink) 50%, white); color: var(--pink-deep); }
.rsvp-form { border-color: color-mix(in srgb, var(--orange) 20%, white); background: var(--paper); }
.form-field label { color: var(--ink); }
.form-field input:focus { border-color: var(--lilac); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lilac) 18%, white); }
.form-field input[aria-invalid="true"] { border-color: #B42332; }
.field-hint, .number-suffix, .privacy-note { color: var(--muted); }
.field-error { color: #A21D32; }
.form-status.is-success { background: var(--mint-pale); color: #245C47; }
.form-status.is-error { background: color-mix(in srgb, var(--coral) 10%, white); color: #A12727; }
.rsvp-decoration span { color: var(--mint); }
.rsvp-decoration span:nth-child(2) { color: var(--pink); }
.rsvp-decoration span:nth-child(3) { color: var(--lilac); }
.rsvp-decoration span:nth-child(4) { color: var(--orange); }
.footer-scoop { color: var(--pink-deep); }
.footer-age { color: var(--muted); }