:root{
  --cream:#f7f2e9;
  --paper:#fffaf3;
  --olive:#6e7452;
  --olive-dark:#4e543c;
  --blue:#a9c4dd;
  --blue-dark:#55718a;
  --mocha:#8d6b52;
  --espresso:#3f2d24;
  --gold:#b88a3d;
  --shadow:0 24px 70px rgba(70,54,42,.15)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--espresso);
  background:
    radial-gradient(circle at 10% 10%,rgba(169,196,221,.35),transparent 28%),
    radial-gradient(circle at 88% 22%,rgba(141,107,82,.18),transparent 24%),
    linear-gradient(180deg,#faf6ef,#f2eadf)
}
.paper-noise{
  pointer-events:none;position:fixed;inset:0;opacity:.12;z-index:20;mix-blend-mode:multiply;
  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='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E")
}
.eyebrow{letter-spacing:.28em;font-size:.78rem;font-weight:700;color:var(--gold);text-transform:uppercase}
h1,h2,.question,.signature span{font-family:Georgia,"Times New Roman",serif}

.hero{
  min-height:100svh;display:grid;place-items:center;text-align:center;padding:72px 20px;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 9% 88%,rgba(169,196,221,.28),transparent 18%),
    radial-gradient(circle at 92% 12%,rgba(169,196,221,.25),transparent 18%),
    radial-gradient(circle at 80% 78%,rgba(169,196,221,.18),transparent 18%),
    radial-gradient(circle at 20% 20%,rgba(255,255,255,.68),transparent 26%),
    linear-gradient(180deg,#fbf7f0,#f7f2ea);
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:.8;
  background:
    radial-gradient(circle at 14% 18%,rgba(184,138,61,.09) 0 2px,transparent 3px),
    radial-gradient(circle at 76% 20%,rgba(184,138,61,.09) 0 2px,transparent 3px),
    radial-gradient(circle at 24% 82%,rgba(184,138,61,.09) 0 2px,transparent 3px),
    radial-gradient(circle at 88% 78%,rgba(184,138,61,.09) 0 2px,transparent 3px);
}
.hero__inner{
  max-width:890px;position:relative;z-index:3;padding:clamp(32px,4vw,56px) clamp(20px,4vw,44px);
  border-radius:30px;background:rgba(255,250,243,.50);border:1px solid rgba(184,138,61,.10);
  box-shadow:0 18px 45px rgba(89,71,55,.05)
}
.hero-floral{
  position:absolute;z-index:1;pointer-events:none;user-select:none;
  opacity:.78;
  mix-blend-mode:multiply;
  filter:blur(.35px) saturate(.95);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
}
.hero-floral--tl{left:-28px;top:-16px;width:min(29vw,330px);}
.hero-floral--tr{right:-46px;top:-2px;width:min(25vw,280px);transform:scaleX(-1);}
.hero-floral--bl{left:-34px;bottom:-38px;width:min(26vw,300px);transform:scaleX(-1) scaleY(-1);opacity:.68;}
.hero-floral--br{right:-10px;bottom:-26px;width:min(31vw,350px);}
/* Fade every image edge so the paper background has no rectangular boundary.
   Masks use source-image coordinates; transforms mirror the whole decoration. */
.hero-floral{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 16%,#000 72%,transparent),linear-gradient(to bottom,transparent,#000 16%,#000 72%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 16%,#000 72%,transparent),linear-gradient(to bottom,transparent,#000 16%,#000 72%,transparent);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
h1{font-size:clamp(2.9rem,7.2vw,5.8rem);line-height:.98;margin:.28em 0 .22em;font-weight:500}
h1 em{font-weight:400;color:var(--olive);font-style:italic}
.ornament{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--gold);margin:14px auto 16px;width:min(380px,78%)}
.ornament span{display:block;height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--gold))}.ornament span:last-child{background:linear-gradient(90deg,var(--gold),transparent)}.ornament b{font-size:1.5rem;font-weight:400}
.hero__copy{max-width:710px;margin:0 auto 28px;font-size:clamp(1.02rem,2vw,1.16rem);line-height:1.75;color:#705d51}

.primary-btn,.yes-btn{border:0;border-radius:999px;padding:15px 24px;font-weight:750;cursor:pointer;transition:.25s ease}
.primary-btn{background:var(--olive);color:white;box-shadow:0 14px 30px rgba(78,84,60,.22)}
.primary-btn:hover,.yes-btn:hover{transform:translateY(-2px)}

.names{padding:90px 22px;max-width:1100px;margin:0 auto}
.section-head{text-align:center;max-width:720px;margin:0 auto 32px}
.section-head h2{font-size:clamp(2.2rem,5vw,4.2rem);margin:.15em 0}
.section-head p{line-height:1.7;color:#756255}
.name-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.name-card{background:rgba(255,250,243,.75);border:1px solid rgba(184,138,61,.25);border-radius:22px;padding:22px 16px;text-align:center;font-family:Georgia,serif;font-style:italic;font-size:1.35rem;color:var(--olive-dark);cursor:pointer;box-shadow:0 10px 30px rgba(76,57,44,.07);transition:.25s ease}
.name-card:hover{transform:translateY(-4px);border-color:rgba(184,138,61,.55);background:white}

.invite-shell{padding:24px 22px 100px;display:none}
.invite-shell.is-visible{display:block}
.invite-card{max-width:1100px;margin:0 auto;background:rgba(255,250,243,.9);border:1px solid rgba(184,138,61,.22);border-radius:34px;overflow:hidden;box-shadow:var(--shadow);display:grid;grid-template-columns:.9fr 1.1fr;min-height:720px}
.portrait-wrap{position:relative;background:#ece4d8;min-height:640px}
.portrait-wrap img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.portrait-badge{position:absolute;left:22px;bottom:22px;background:rgba(255,250,243,.88);backdrop-filter:blur(8px);padding:10px 16px;border-radius:999px;letter-spacing:.22em;font-size:.72rem;color:var(--gold);font-weight:800}
.message-wrap{padding:clamp(34px,6vw,72px);display:flex;flex-direction:column;justify-content:center}
.message-wrap h2{font-size:clamp(3.2rem,6vw,5.8rem);font-weight:500;font-style:italic;color:var(--olive);margin:.08em 0 .14em}
.lead{font-family:Georgia,serif;font-size:1.55rem;font-style:italic;margin:0 0 20px;color:var(--mocha)}
.friend-message{font-size:1.05rem;line-height:1.85;color:#5d4b40}
.question{font-size:clamp(2.1rem,4.8vw,4rem);line-height:1.05;margin:22px 0;color:var(--espresso)}
.question em{color:var(--blue-dark);font-weight:500}
.yes-row{display:flex;gap:12px;flex-wrap:wrap}
.yes-btn{background:var(--olive);color:#fff}
.yes-btn.secondary{background:#dfeaf3;color:#49667e}
.answer{margin-top:20px;border:1px solid rgba(184,138,61,.28);background:#fffaf3;border-radius:22px;padding:20px}
.answer span{font-size:2rem;color:var(--gold)}
.answer strong{display:block;margin:.25em 0 .4em;font-family:Georgia,serif;font-size:1.4rem}
.answer p{margin:0;line-height:1.6;color:#6f5d51}
.signature{font-size:1.1rem;margin-top:28px;line-height:1.2}
.signature span{font-size:2.1rem;font-style:italic;color:var(--olive)}
.text-btn{align-self:flex-start;background:none;border:0;padding:0;color:var(--blue-dark);cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.mission-card{margin:2px 0 22px;border:1px solid rgba(184,138,61,.28);border-radius:22px;padding:20px 22px;background:linear-gradient(135deg,rgba(223,234,243,.78),rgba(255,250,243,.95));box-shadow:0 10px 26px rgba(78,84,60,.08)}
.mission-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.mission-btn{max-width:100%;border:1px solid transparent;border-radius:20px;padding:12px 18px;background:var(--olive);color:white;font:inherit;font-size:.9rem;font-weight:700;line-height:1.4;cursor:pointer}
.mission-btn.secondary{background:#dfeaf3;color:#405b70;border-color:#b7cbdc}
.mission-btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.mission-btn[aria-pressed="true"]{box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--olive-dark)}
.mission-response{margin:18px 0 0;line-height:1.65;color:var(--olive-dark);font-size:.95rem}
.mission-kicker{margin:0 0 8px;color:var(--gold);letter-spacing:.16em;font-size:.72rem;font-weight:800;text-transform:uppercase}
.mission-card #missionText{margin:0;line-height:1.7;color:#5d4b40;font-size:1rem}
footer{text-align:center;padding:40px 20px 70px;color:#8b7768;letter-spacing:.12em;text-transform:uppercase;font-size:.72rem}
#confettiCanvas{position:fixed;inset:0;pointer-events:none;z-index:99;width:100%;height:100%}

@media(max-width:860px){
  .name-grid{grid-template-columns:repeat(2,1fr)}
  .invite-card{grid-template-columns:1fr}
  .portrait-wrap{min-height:0}
  .portrait-wrap img{height:auto;object-fit:contain}
  .portrait-badge{position:static;display:table;margin:0 auto 16px}
  .hero__inner{padding:30px 22px}
  .hero-floral--tl{width:260px;left:-44px;top:-24px}
  .hero-floral--tr{width:210px;right:-38px;top:-12px}
  .hero-floral--bl{width:240px;left:-54px;bottom:-34px}
  .hero-floral--br{width:260px;right:-24px;bottom:-16px}
}
@media(max-width:520px){
  .hero{min-height:92svh;padding:64px 16px}
  .hero__inner{width:100%;min-width:0;padding:28px 16px;border-radius:24px}
  h1{font-size:clamp(2rem,8.6vw,2.8rem);line-height:1.12;text-wrap:balance}
  .hero__copy{font-size:1rem;line-height:1.65;margin-bottom:24px}
  .eyebrow{font-size:.7rem;letter-spacing:.18em}
  .hero-floral--tl{width:200px;left:-46px;top:-16px}
  .hero-floral--tr{width:160px;right:-44px;top:-12px}
  .hero-floral--bl{width:170px;left:-44px;bottom:-26px}
  .hero-floral--br{width:200px;right:-26px;bottom:-24px}
  .names{padding:48px 16px}
  .name-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .name-card{font-size:1.12rem;padding:18px 10px;min-height:56px}
  .section-head h2{font-size:2.2rem;line-height:1.15}
  .invite-shell{padding:8px 12px 48px;scroll-margin-top:12px}
  .invite-card{min-height:0;border-radius:24px;grid-template-columns:minmax(0,1fr)}
  .message-wrap{padding:24px 20px 32px;min-width:0;overflow-wrap:break-word}
  .message-wrap h2{font-size:clamp(2.5rem,11vw,3.25rem);line-height:1.1}
  .lead{font-size:1.3rem;line-height:1.4}
  .friend-message{font-size:1rem;line-height:1.75}
  .question{font-size:clamp(1.9rem,8vw,2.5rem);line-height:1.15}
  .mission-card{padding:20px 16px;border-radius:18px}
  .mission-kicker{line-height:1.6;letter-spacing:.12em}
  .mission-actions,.yes-row{flex-direction:column;gap:12px}
  .mission-btn,.yes-btn,.primary-btn{width:100%;min-height:48px;font-size:1rem;line-height:1.4;white-space:normal}
  .mission-btn{padding:12px 14px}
  .text-btn{min-height:48px;padding:12px 0;font-size:1rem}
  footer{padding:24px 20px 40px;line-height:1.8}
}
button{touch-action:manipulation}
button:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
}