@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,600;0,700;0,800;1,600&display=swap');

:root{
  --paper:#FFF7EC;
  --paper-2:#FFFDF8;
  --ink:#3B2D4A;
  --ink-soft:#6E6180;
  --pink:#FF5B8D;
  --teal:#3FC5BE;
  --yellow:#FFC24B;
  --grape:#7B6EF6;
  --line:#EAD9C6;
  --card-shadow:24px 28px 60px -30px rgba(59,45,74,.45);
  --font-display:'Fredoka', 'Trebuchet MS', sans-serif;
  --font-body:'Nunito', 'Segoe UI', sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,91,141,.16) 0 7px, transparent 8px),
    radial-gradient(circle at 82% 12%, rgba(63,197,190,.18) 0 9px, transparent 10px),
    radial-gradient(circle at 26% 74%, rgba(123,110,246,.15) 0 6px, transparent 7px),
    radial-gradient(circle at 90% 66%, rgba(255,194,75,.22) 0 8px, transparent 9px),
    radial-gradient(circle at 62% 88%, rgba(255,91,141,.13) 0 6px, transparent 7px),
    radial-gradient(circle at 46% 30%, rgba(255,194,75,.16) 0 5px, transparent 6px),
    radial-gradient(circle at 6% 52%, rgba(63,197,190,.14) 0 6px, transparent 7px);
  background-repeat:no-repeat;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:clamp(20px,5vw,64px) 18px 56px;
  line-height:1.55;
}

.balloons{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.balloon{position:absolute;width:64px;height:80px;border-radius:50% 50% 48% 48%;opacity:.85;
  animation:bob 6s ease-in-out infinite;box-shadow:inset -10px -12px 0 rgba(0,0,0,.06)}
.balloon::after{content:"";position:absolute;left:50%;bottom:-42px;width:1px;height:44px;
  background:rgba(59,45,74,.28);transform:translateX(-50%)}
.balloon.b1{left:5%;top:18%;background:var(--pink);animation-delay:0s}
.balloon.b2{left:88%;top:26%;background:var(--teal);animation-delay:1.1s;width:54px;height:68px}
.balloon.b3{left:80%;top:70%;background:var(--yellow);animation-delay:.5s}
.balloon.b4{left:9%;top:66%;background:var(--grape);animation-delay:1.6s;width:48px;height:60px}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-22px) rotate(3deg)}}

.card{
  position:relative;z-index:1;width:min(640px,100%);
  background:var(--paper-2);
  border:2px dashed var(--line);
  border-radius:30px;
  padding:clamp(30px,5vw,54px) clamp(24px,5vw,52px) clamp(34px,5vw,48px);
  box-shadow:var(--card-shadow);
}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-weight:600;
  text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;
  color:var(--pink);
  background:rgba(255,91,141,.12);
  padding:7px 14px;border-radius:999px;
}

h1{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.9rem,9vw,4.6rem);
  line-height:.98;margin:.32em 0 .1em;
  color:var(--ink);text-wrap:balance;letter-spacing:-.01em;
}
h1 .name{color:var(--grape);display:block}

.age{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.05rem,3.4vw,1.35rem);
  color:var(--ink-soft);margin:0 0 4px;
}
.age b{color:var(--teal);font-weight:700}

.lead{
  font-size:clamp(1rem,2.6vw,1.12rem);
  color:var(--ink-soft);margin:14px 0 0;max-width:46ch;
}

.rule{display:flex;align-items:center;gap:14px;margin:30px 0 26px;color:var(--yellow)}
.rule::before,.rule::after{content:"";height:2px;flex:1;background:var(--line);border-radius:2px}
.rule span{font-size:1.2rem}

.details{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:16px;margin:0 0 8px;
}
.detail{
  background:var(--paper);border:1.5px solid var(--line);
  border-radius:18px;padding:16px 18px;display:flex;gap:13px;align-items:flex-start;
  min-width:0;
}
.detail>div{min-width:0}
.detail .ic{
  flex:0 0 auto;width:38px;height:38px;border-radius:12px;
  display:grid;place-items:center;font-size:1.2rem;
}
.detail:nth-child(1) .ic{background:rgba(255,91,141,.15)}
.detail:nth-child(2) .ic{background:rgba(63,197,190,.16)}
.detail:nth-child(3) .ic{background:rgba(123,110,246,.15)}
.detail dt{
  font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.12em;font-size:.66rem;font-weight:600;color:var(--ink-soft);margin:2px 0 2px;
}
.detail dd{margin:0;font-weight:700;font-size:1.02rem;color:var(--ink);overflow-wrap:break-word}
.detail dd small{display:block;font-weight:600;font-size:.85rem;color:var(--ink-soft);overflow-wrap:break-word}

.extras{
  margin:26px 0 0;padding:18px 20px;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,194,75,.14),rgba(255,194,75,.06));
  border:1.5px solid rgba(255,194,75,.4);
}
.extras h2{
  font-family:var(--font-display);font-size:1rem;font-weight:600;margin:0 0 6px;
  text-transform:uppercase;letter-spacing:.1em;color:#B07A18;
}
.extras p{margin:0;color:var(--ink);font-weight:600}

.rsvp{
  margin:30px 0 0;text-align:center;
  padding:22px;border-radius:20px;background:var(--ink);color:#FFF6EE;
}
.rsvp p{margin:0 0 4px;font-weight:600;opacity:.85}
.rsvp .who{font-family:var(--font-display);font-size:1.35rem;font-weight:600;margin:2px 0 16px}
.rsvp .btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.btn{
  font-family:var(--font-display);font-weight:600;font-size:1rem;
  text-decoration:none;padding:12px 22px;border-radius:999px;
  display:inline-flex;align-items:center;gap:8px;transition:transform .12s ease, box-shadow .12s ease;
}
.btn.primary{background:var(--pink);color:#fff;box-shadow:0 8px 0 #d63a6c}
.btn.secondary{background:var(--teal);color:#08403d;box-shadow:0 8px 0 #2a9a94}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(4px);box-shadow:0 4px 0 rgba(0,0,0,.3)}
.btn:focus-visible{outline:3px solid var(--grape);outline-offset:3px}

.foot{
  margin:22px auto 0;text-align:center;color:var(--ink-soft);
  font-size:.9rem;max-width:44ch;
}
.tip{
  margin-top:26px;max-width:min(640px,100%);text-align:center;
  font-size:.82rem;color:var(--ink-soft);z-index:1;position:relative;
}
.tip code{background:rgba(123,110,246,.12);color:var(--grape);
  padding:2px 7px;border-radius:6px;font-family:'Nunito',monospace;font-weight:700}

@media (max-width:540px){
  .details{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .balloon{animation:none}
}