/* ═══════════════════════════════════════════════════════════
   Ethan's 1st Birthday Party — watercolor invitation site
   Palette + hand-drawn feel modelled on the printed invite.
   ═══════════════════════════════════════════════════════════ */

:root{
  --paper:      #FBF3E4;
  --paper-2:    #F6EADA;
  --paper-3:    #FFF9EF;
  --ink:        #3D4B60;
  --ink-2:      #5A6B82;
  --ink-3:      #8A99AC;

  --blue:       #9DC5DC;
  --blue-2:     #CBE0EE;
  --blue-deep:  #6FA3C2;
  --sage:       #B3C39B;
  --sage-2:     #D7E0CB;
  --sage-deep:  #8CA173;
  --tan:        #E9C48F;
  --tan-2:      #F3DFBC;
  --tan-deep:   #CE9F5E;
  --peach:      #F0C9A3;
  --pink:       #F2C3BF;
  --pink-deep:  #DE9A95;
  --lav:        #C6BBDC;

  --f-display: 'Baloo 2', 'Comic Sans MS', 'Trebuchet MS', cursive;
  --f-script:  'Caveat', 'Segoe Script', 'Bradley Hand', cursive;
  --f-body:    'Quicksand', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;

  --shadow-s:  0 2px 6px rgba(90,76,54,.07);
  --shadow-m:  0 8px 22px -8px rgba(90,76,54,.18), 0 2px 6px rgba(90,76,54,.06);
  --shadow-l:  0 20px 48px -16px rgba(90,76,54,.26), 0 4px 12px rgba(90,76,54,.07);

  --wrap: 1140px;
  --r-lg: 30px;
  --r-md: 22px;
  --r-sm: 14px;
}

*,*::before,*::after{ box-sizing:border-box; }

[hidden]{ display:none !important; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--paper);
}

body{
  margin:0;
  font-family:var(--f-body);
  font-weight:500;
  color:var(--ink);
  background:
    radial-gradient(1100px 640px at 10% -8%, #FFFDF7 0%, rgba(255,253,247,0) 62%),
    radial-gradient(820px 560px at 94% 2%, #FEF9EE 0%, rgba(254,249,238,0) 58%),
    var(--paper),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.022'/%3E%3C/svg%3E");
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(18px,4vw,32px); }

/* ─────────── decorative background ─────────── */
.deco{ position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.deco__leaves{ position:absolute; width:min(30vw,260px); opacity:.75; }
.deco__leaves--tr{ top:-18px; right:-40px; }
.deco__leaves--bl{ bottom:-30px; left:-50px; transform:scaleX(-1); }
.deco__star{ position:absolute; width:34px; opacity:.9; animation:twinkle 3.6s ease-in-out infinite; }
.deco__star--1{ top:18%; right:12%; }
.deco__star--2{ top:46%; right:6%; width:22px; animation-delay:-1.4s; }
.deco__heart{ position:absolute; width:22px; opacity:.85; animation:floaty 5s ease-in-out infinite; }
.deco__heart--1{ top:24%; right:19%; animation-delay:-.6s; }
.deco__heart--2{ top:62%; right:16%; width:17px; animation-delay:-2.2s; }
.deco__heart--3{ top:35%; left:4%; width:19px; animation-delay:-3.1s; }

@keyframes twinkle{ 0%,100%{transform:scale(1) rotate(0);opacity:.85} 50%{transform:scale(1.22) rotate(14deg);opacity:1} }
@keyframes floaty{ 0%,100%{transform:translateY(0) rotate(-6deg)} 50%{transform:translateY(-13px) rotate(7deg)} }

/* ─────────── bunting ─────────── */
.bunting{
  position:absolute; top:0; left:0; z-index:2;
  width:min(460px,48vw); height:auto; pointer-events:none;
}
.bunting__flags{ transform-origin:top center; animation:bunt 7s ease-in-out infinite; }
@keyframes bunt{ 0%,100%{transform:rotate(-.5deg)} 50%{transform:rotate(.9deg)} }

/* ═══════════ HERO ═══════════ */
.hero{ position:relative; z-index:1; padding:clamp(78px,12vw,142px) 0 clamp(40px,6vw,80px); }
.hero__grid{
  display:grid; gap:clamp(24px,4vw,48px);
  grid-template-columns:1fr;
  align-items:center;
}
@media (min-width:900px){
  .hero__grid{ grid-template-columns:minmax(330px,47%) 1fr; gap:clamp(28px,4vw,52px); }
  .hero{ padding-top:clamp(104px,11vw,158px); }
}

/* ─── the sky (bear + balloons) ─── */
.sky{
  position:relative;
  width:100%;
  aspect-ratio:1/1.3;
  max-width:520px; margin-inline:auto;
}
@media (min-width:900px){ .sky{ margin-inline:0; max-width:560px; aspect-ratio:1/1.26; } }
@media (max-width:480px){ .sky{ aspect-ratio:1/1.28; } }

.sky__bear{
  position:absolute; left:50%; bottom:-3%;
  transform:translateX(-50%);
  width:62%; max-width:340px;
  filter:drop-shadow(0 16px 20px rgba(120,96,64,.16));
  animation:bearbob 6.5s ease-in-out infinite;
  z-index:3;
}
@media (min-width:900px){ .sky__bear{ width:57%; max-width:330px; } }
@media (max-width:620px){ .sky__bear{ width:58%; max-width:260px; } }
@keyframes bearbob{ 0%,100%{transform:translateX(-50%) translateY(0) rotate(0)} 50%{transform:translateX(-50%) translateY(-8px) rotate(-.6deg)} }

.sky__strings{ position:absolute; inset:0; width:100%; height:100%; z-index:1; overflow:visible; }
.sky__strings path{ fill:none; stroke:#B88F6E; stroke-width:.7; vector-effect:non-scaling-stroke; stroke-linecap:round; }

.sky__balloons{ position:absolute; inset:0; z-index:2; }

/* one balloon = a strand that sways from the bear's paw */
.strand{
  position:absolute;
  transform-origin:50% 100%;
  animation:sway var(--dur,7s) ease-in-out infinite;
  animation-delay:var(--delay,0s);
}
@keyframes sway{
  0%,100%{ transform:rotate(calc(var(--amp,3deg) * -1)) translateY(0); }
  50%    { transform:rotate(var(--amp,3deg)) translateY(-6px); }
}

.balloon{
  position:absolute;
  width:var(--bw,118px);
  transform:translate(-50%,0);
  left:var(--x); top:var(--y);
  z-index:2;
  cursor:pointer;
}
.balloon__body{
  position:relative;
  width:100%; aspect-ratio:1/1.44;
  border-radius:50% 50% 47% 47% / 60% 60% 40% 40%;
  background:
    radial-gradient(60% 45% at 32% 26%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 58%),
    radial-gradient(90% 80% at 50% 30%, var(--c1) 0%, var(--c2) 100%);
  box-shadow:inset -7px -10px 20px rgba(120,96,64,.13), 0 8px 16px -8px rgba(120,96,64,.28);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:8% 6% 5%;
  transform-origin:50% calc(100% + 7px);
  animation:balloontilt 5.5s ease-in-out infinite;
  animation-delay:var(--tdelay,0s);
  transition:filter .25s ease;
}
.balloon__body.is-popped{ filter:drop-shadow(0 0 14px rgba(233,196,143,.85)); }
.balloon__body.is-popped .balloon__photo{ transform:scale(1.07); }
.balloon__photo{
  width:76%; aspect-ratio:1;
  border-radius:50%;
  overflow:hidden;
  border:3px solid rgba(255,251,242,.95);
  box-shadow:0 2px 8px rgba(90,76,54,.2);
  background:var(--paper-3);
  transition:transform .25s ease;
}
.balloon__photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; }

.balloon__name{
  position:relative; z-index:2;
  margin-top:-9%;
  max-width:100%;
  background:rgba(255,251,242,.97);
  border-radius:999px;
  padding:2px 9px;
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(7.5px,.9vw,10.5px);
  line-height:1.2; text-align:center;
  color:var(--ink);
  box-shadow:0 1px 5px rgba(90,76,54,.2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.balloon__knot{
  position:absolute; left:50%; bottom:-7px; transform:translateX(-50%);
  width:0; height:0;
  border-left:7px solid transparent; border-right:7px solid transparent;
  border-top:11px solid var(--c2);
}
@keyframes balloontilt{ 0%,100%{transform:rotate(-2.4deg)} 50%{transform:rotate(2.4deg)} }

.balloon__photo{
  width:100%; height:100%;
  border-radius:50%;
  overflow:hidden;
  border:3px solid rgba(255,251,242,.95);
  box-shadow:0 2px 8px rgba(90,76,54,.2);
  background:var(--paper-3);
}
.balloon__photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 32%; }

.balloon__knot{
  position:absolute; left:50%; bottom:-7px; transform:translateX(-50%);
  width:0; height:0;
  border-left:7px solid transparent; border-right:7px solid transparent;
  border-top:11px solid var(--c2);
}

.balloon__tip{
  position:absolute; left:50%; top:calc(100% + 14px);
  transform:translate(-50%,-6px);
  width:max-content; max-width:190px;
  background:var(--ink); color:var(--paper-3);
  font-size:.78rem; font-weight:600; line-height:1.4;
  padding:8px 12px; border-radius:12px;
  box-shadow:var(--shadow-m);
  opacity:0; pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
  z-index:9;
}
.balloon__tip::after{
  content:''; position:absolute; left:50%; top:-5px;
  width:10px; height:10px; background:var(--ink);
  transform:translateX(-50%) rotate(45deg);
}
.balloon:hover .balloon__tip,
.balloon:focus-visible .balloon__tip,
.balloon__body.is-popped ~ .balloon__tip{ opacity:1; transform:translate(-50%,0); }

/* ─── hero copy ─── */
.hero__copy{ text-align:center; }
@media (min-width:900px){ .hero__copy{ text-align:left; } }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:clamp(12px,1.5vw,13.5px); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue-deep);
  background:rgba(203,224,238,.55);
  border-radius:999px; padding:6px 16px;
  margin:0 0 clamp(14px,2.4vw,22px);
}
.eyebrow__dot{ width:7px; height:7px; border-radius:50%; background:var(--sage-deep); }

.name{
  position:relative;
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(3.4rem,13vw,6.2rem);
  line-height:.94; margin:0;
  color:var(--ink);
  letter-spacing:.01em;
}
.name__word{ display:inline-block; }
.name__spark{
  position:absolute; top:50%; width:clamp(16px,2.4vw,26px); height:clamp(16px,2.4vw,26px);
  background:
    linear-gradient(var(--ink),var(--ink)) center/100% 3px no-repeat,
    linear-gradient(var(--ink),var(--ink)) center/3px 100% no-repeat;
  opacity:.8;
}
.name__spark--l{ left:-6%; transform:translateY(-50%) rotate(-18deg); }
.name__spark--r{ right:-6%; transform:translateY(-50%) rotate(18deg); }

.turning{
  font-family:var(--f-script); font-weight:600;
  font-size:clamp(1.7rem,5.4vw,2.5rem);
  color:var(--tan-deep);
  margin:.06em 0 0; line-height:1;
}

.one{
  position:relative;
  display:flex; align-items:center; justify-content:center; gap:.02em;
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(4rem,17vw,7.6rem);
  line-height:1; margin:.06em 0 clamp(14px,2.6vw,24px);
}
.one__l{ display:inline-block; }
.one__l--o{ color:var(--blue); }
.one__l--n{ color:var(--sage); }
.one__l--e{ color:var(--tan); }
.one__crown{ width:.62em; height:.56em; margin-left:.12em; align-self:flex-start; margin-top:.1em; }

.brush{ position:relative; margin:0 auto 2px; max-width:520px; display:inline-block; }
.brush__stroke{ position:absolute; left:-4%; top:2%; width:108%; height:96%; z-index:0; }
.brush__text{
  position:relative; z-index:1;
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.02rem,2.7vw,1.32rem);
  line-height:1.42; margin:0; color:var(--ink);
}
.brush__text--2{ margin:0 0 clamp(16px,2.6vw,24px); font-weight:800; }
.brush__text strong{ font-weight:800; }

.perks{ list-style:none; margin:0 0 clamp(20px,3vw,28px); padding:0; display:grid; gap:11px; }
.perks li{
  display:flex; align-items:center; gap:12px;
  font-size:clamp(.98rem,2.3vw,1.08rem); font-weight:600; color:var(--ink-2);
}
@media (min-width:900px){ .perks li{ justify-content:flex-start; } }
.perks__ico{
  flex:0 0 auto; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
}
.perks__ico svg{ width:21px; height:21px; }
.perks__ico--blue{ background:var(--blue-2); color:var(--blue-deep); }
.perks__ico--peach{ background:var(--tan-2); color:var(--tan-deep); }
.perks__ico--tan{ background:var(--sage-2); color:var(--sage-deep); }

.hero__note{ font-size:.9rem; color:var(--ink-3); margin:.85rem 0 0; }
.hero__note strong{ color:var(--pink-deep); font-weight:800; }

/* ═══════════ buttons ═══════════ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--f-display); font-weight:700;
  font-size:1rem; line-height:1;
  padding:15px 26px; border-radius:999px;
  border:2.5px solid transparent; cursor:pointer;
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn svg{ width:19px; height:19px; }
.btn--primary{ background:var(--blue); color:#fff; box-shadow:0 8px 18px -8px rgba(111,163,194,.75); }
.btn--primary:hover{ transform:translateY(-2px); background:var(--blue-deep); }
.btn--ghost{ background:rgba(255,251,242,.85); color:var(--ink); border-color:var(--blue); box-shadow:var(--shadow-s); }
.btn--ghost:hover{ transform:translateY(-2px); background:#fff; }
.btn--soft{ background:var(--sage-2); color:#4E5F3E; border-color:rgba(140,161,115,.4); }
.btn--soft:hover{ background:#CBD9B6; }
.btn--sm{ padding:11px 18px; font-size:.9rem; }
.btn--lg{ padding:17px 32px; font-size:1.05rem; }

.linkish{
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--f-body); font-weight:700; font-size:.88rem;
  color:var(--blue-deep); text-decoration:underline; text-underline-offset:3px;
}
.linkish:hover{ color:var(--ink); }
.linkish--quiet{ color:var(--ink-3); font-weight:600; }

/* ═══════════ sections ═══════════ */
.section{ position:relative; z-index:1; padding:clamp(44px,7vw,86px) 0; }
.section:nth-of-type(even){
  background:linear-gradient(180deg,
    rgba(255,253,246,0) 0%,
    rgba(255,253,246,.6) 18%,
    rgba(255,253,246,.6) 82%,
    rgba(255,253,246,0) 100%);
}

.sec-head{ text-align:center; max-width:620px; margin:0 auto clamp(26px,4vw,44px); }
.sec-head__title{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(1.9rem,5.4vw,2.9rem);
  margin:0 0 6px; color:var(--ink); line-height:1.12;
}
.sec-head__sub{ margin:0; color:var(--ink-2); font-size:clamp(.97rem,2.3vw,1.08rem); }
.sec-head__sub strong{ color:var(--blue-deep); }

/* ─── roster (who's coming) ─── */
.roster{
  display:grid; gap:clamp(14px,2.4vw,22px);
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
}
.roster__empty{
  text-align:center; color:var(--ink-3); font-size:1.05rem;
  background:rgba(255,251,242,.7); border:2px dashed rgba(157,197,220,.6);
  border-radius:var(--r-md); padding:30px 20px; margin:0;
}

.fcard{
  background:var(--paper-3);
  border:2px dashed rgba(157,197,220,.7);
  border-radius:var(--r-md);
  padding:20px 14px 16px;
  text-align:center;
  box-shadow:var(--shadow-s);
  transition:transform .22s ease, box-shadow .22s ease;
  animation:pop .5s cubic-bezier(.34,1.56,.64,1) both;
}
.fcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow-m); }
@keyframes pop{ 0%{transform:scale(.72);opacity:0} 60%{transform:scale(1.06);opacity:1} 100%{transform:scale(1)} }

.fcard__balloon{
  position:relative; width:96px; margin:0 auto 12px;
}
.fcard__body{
  position:relative; width:100%; aspect-ratio:1/1.22;
  border-radius:50% 50% 47% 47% / 60% 60% 40% 40%;
  background:
    radial-gradient(60% 45% at 32% 26%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 58%),
    radial-gradient(90% 80% at 50% 30%, var(--c1) 0%, var(--c2) 100%);
  box-shadow:inset -6px -8px 16px rgba(120,96,64,.13);
  display:grid; place-items:center; padding:9%;
}
.fcard__photo{
  width:100%; aspect-ratio:1; border-radius:50%; overflow:hidden;
  border:3px solid rgba(255,251,242,.95);
  background:var(--paper-3);
}
.fcard__photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.fcard__knot{
  position:absolute; left:50%; bottom:-6px; transform:translateX(-50%);
  width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent;
  border-top:9px solid var(--c2);
}
.fcard__string{
  width:1.5px; height:16px; margin:0 auto;
  background:repeating-linear-gradient(180deg,#C7A183 0 4px,transparent 4px 7px);
}
.fcard__name{
  font-family:var(--f-display); font-weight:700; font-size:1.02rem;
  margin:6px 0 2px; color:var(--ink); line-height:1.25;
}
.fcard__meta{ margin:0; font-size:.84rem; color:var(--ink-3); font-weight:600; }
.fcard__note{
  margin:8px 0 0; font-size:.82rem; color:var(--tan-deep); font-weight:600;
  background:var(--tan-2); border-radius:10px; padding:5px 9px; display:inline-block;
}
.fcard__by{
  margin:3px 0 0; font-size:.78rem; color:var(--ink-3); font-weight:600;
}

.who__cta{ text-align:center; margin-top:clamp(22px,3.4vw,34px); }

/* ─── the plan cards ─── */
.cards{ display:grid; gap:clamp(14px,2.4vw,22px); grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.card{
  background:var(--paper-3); border-radius:var(--r-lg);
  padding:clamp(20px,3vw,28px); text-align:center;
  box-shadow:var(--shadow-m);
  position:relative; overflow:hidden;
}
.card::after{
  content:''; position:absolute; inset:auto 0 0 0; height:6px;
  background:var(--accent); opacity:.75;
}
.card--blue{ --accent:var(--blue); }
.card--sage{ --accent:var(--sage); }
.card--tan{ --accent:var(--tan); }
.card__ico{
  display:grid; place-items:center; width:58px; height:58px; margin:0 auto 12px;
  border-radius:50%; background:var(--accent-soft,var(--blue-2)); color:var(--accent-deep,var(--blue-deep));
}
.card--blue .card__ico{ background:var(--blue-2); color:var(--blue-deep); }
.card--sage .card__ico{ background:var(--sage-2); color:var(--sage-deep); }
.card--tan  .card__ico{ background:var(--tan-2);  color:var(--tan-deep); }
.card__ico svg{ width:29px; height:29px; }
.card__label{
  font-family:var(--f-display); font-weight:700; font-size:1.02rem;
  margin:0 0 4px; color:var(--accent-deep,var(--blue-deep));
}
.card--blue .card__label{ color:var(--blue-deep); }
.card--sage .card__label{ color:var(--sage-deep); }
.card--tan  .card__label{ color:var(--tan-deep); }
.card__value{ font-family:var(--f-display); font-weight:800; font-size:1.42rem; margin:0; line-height:1.2; }
.card__hint{ margin:4px 0 0; color:var(--ink-3); font-size:.9rem; }
.card__link{
  display:inline-block; margin-top:10px;
  font-size:.88rem; font-weight:700; color:var(--tan-deep);
  text-decoration:none; border-bottom:2px dotted currentColor;
}
.card__link:hover{ color:var(--ink); }

/* ─── countdown ─── */
.countdown{ margin-top:clamp(26px,4vw,40px); text-align:center; }
.countdown__label{
  font-family:var(--f-script); font-size:1.35rem; color:var(--tan-deep);
  margin:0 0 10px; font-weight:600;
}
.countdown__grid{ display:flex; gap:clamp(8px,1.8vw,16px); justify-content:center; flex-wrap:wrap; }
.countdown__cell{
  width:clamp(64px,16vw,92px); aspect-ratio:1/1;
  border-radius:50%; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  background:var(--paper-3); box-shadow:var(--shadow-m);
  border:2.5px solid transparent;
}
.countdown__cell b{ font-family:var(--f-display); font-weight:800; font-size:clamp(1.25rem,4.4vw,1.8rem); line-height:1; }
.countdown__cell span{ font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:700; margin-top:3px; }
.countdown__cell--blue{ border-color:var(--blue); } .countdown__cell--blue b{ color:var(--blue-deep); }
.countdown__cell--sage{ border-color:var(--sage); } .countdown__cell--sage b{ color:var(--sage-deep); }
.countdown__cell--tan { border-color:var(--tan); }  .countdown__cell--tan  b{ color:var(--tan-deep); }
.countdown__cell--pink{ border-color:var(--pink); } .countdown__cell--pink b{ color:var(--pink-deep); }

/* ─── tiles ─── */
.tiles{ display:grid; gap:clamp(14px,2.4vw,20px); grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.tile{
  background:var(--paper-3); border-radius:var(--r-lg);
  padding:clamp(20px,3vw,26px);
  box-shadow:var(--shadow-s);
  border-top:5px solid var(--edge);
  transition:transform .22s ease, box-shadow .22s ease;
}
.tile:hover{ transform:translateY(-4px); box-shadow:var(--shadow-m); }
.tile--1{ --edge:var(--peach); } .tile--2{ --edge:var(--blue); }
.tile--3{ --edge:var(--sage); }  .tile--4{ --edge:var(--pink); }
.tile__art{ display:block; width:60px; margin-bottom:8px; }
.tile__art svg{ width:100%; height:auto; }
.tile h3{ font-family:var(--f-display); font-weight:700; font-size:1.16rem; margin:0 0 4px; color:var(--ink); }
.tile p{ margin:0; color:var(--ink-2); font-size:.95rem; }

/* ═══════════ HOST PANEL (password gated) ═══════════ */
.host{ padding-bottom:clamp(50px,7vw,90px); }
.host__grid{
  display:grid; gap:clamp(16px,2.6vw,26px);
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:900px){ .host__grid{ grid-template-columns:minmax(320px,42%) 1fr; } }

.host__h3{
  font-family:var(--f-display); font-weight:800; font-size:1.15rem;
  margin:0 0 12px; color:var(--ink);
}
.host__add{ padding:clamp(18px,2.8vw,26px); }
.host__add .form__row{ margin-bottom:12px; }

/* ─── the picture picker ─── */
.picker{
  display:grid; gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(62px,1fr));
  max-height:230px; overflow-y:auto;
  padding:10px; border-radius:var(--r-md);
  background:var(--paper);
  border:2px solid rgba(157,197,220,.45);
}
.picker__item{
  cursor:pointer; padding:0; background:none; border:0;
  border-radius:50%; line-height:0;
  transition:transform .16s ease, box-shadow .16s ease;
}
.picker__item img{
  width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
  border-radius:50%;
  border:2.5px solid transparent;
  box-shadow:0 1px 5px rgba(90,76,54,.18);
  display:block;
}
.picker__item:hover{ transform:translateY(-2px) scale(1.04); }
.picker__item.is-on img{
  border-color:var(--blue-deep);
  box-shadow:0 0 0 3px rgba(157,197,220,.4), 0 2px 8px rgba(90,76,54,.2);
}
.picker__hint{ margin:7px 0 0; font-size:.82rem; color:var(--ink-3); }

.host__list{
  background:var(--paper-3); border-radius:var(--r-lg);
  padding:clamp(18px,2.8vw,26px);
  box-shadow:var(--shadow-m);
}
.host__list-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:12px;
}
.host__list-head .host__h3{ margin:0; }
.host__count{ color:var(--ink-3); font-weight:600; font-size:.95rem; }
.host__list-tools{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.host__items{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.host__item{
  display:flex; align-items:center; gap:12px;
  background:var(--paper); border:2px solid rgba(157,197,220,.4);
  border-radius:var(--r-sm); padding:9px 12px;
}
.host__thumb{
  flex:0 0 auto; width:40px; height:40px; border-radius:50%;
  overflow:hidden; background:var(--paper-3);
  border:2px solid #fff; box-shadow:0 1px 4px rgba(90,76,54,.16);
  cursor:pointer; padding:0; transition:transform .16s ease, box-shadow .16s ease;
}
.host__thumb:hover{ transform:scale(1.08); box-shadow:0 0 0 3px rgba(157,197,220,.45); }
.host__thumb img{ width:100%; height:100%; object-fit:cover; }
.host__body{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1 1 auto; }
.host__name{ font-family:var(--f-display); font-weight:700; font-size:.98rem; color:var(--ink); }
.host__meta{ font-size:.8rem; color:var(--ink-3); font-weight:600; }
.host__note{ font-size:.78rem; color:var(--tan-deep); font-weight:600; }
.host__edit{
  flex:0 0 auto; cursor:pointer;
  background:none; border:1.5px solid rgba(157,197,220,.8);
  color:var(--blue-deep); font-family:var(--f-body); font-weight:700; font-size:.76rem;
  border-radius:999px; padding:4px 11px;
  transition:background-color .18s, color .18s;
}
.host__edit:hover{ background:var(--blue-2); color:var(--ink); }
.host__remove{
  flex:0 0 auto; cursor:pointer;
  background:none; border:1.5px solid rgba(222,154,149,.6);
  color:var(--pink-deep); font-family:var(--f-body); font-weight:700; font-size:.76rem;
  border-radius:999px; padding:4px 11px;
  transition:background-color .18s, color .18s;
}
.host__remove:hover{ background:var(--pink); color:#7E4A46; }
.host__empty{ margin:0; font-size:.92rem; color:var(--ink-3); text-align:center; padding:18px 0; }

.host .form__done{
  display:block; margin-top:12px; padding:11px 15px;
  background:var(--sage-2); color:#42522F; font-weight:700; font-size:.9rem;
  border-radius:var(--r-sm);
}

/* ─── RSVP (legacy) ─── */
.rsvp{ padding-bottom:clamp(50px,7vw,90px); }
.rsvp__wrap{
  display:grid; gap:clamp(22px,4vw,46px);
  grid-template-columns:1fr; align-items:start;
}
@media (min-width:880px){
  .rsvp__wrap{ grid-template-columns:minmax(260px,38%) 1fr; }
}
.rsvp__art{ text-align:center; }
.rsvp__art svg{ width:min(150px,42vw); margin:0 auto 12px; filter:drop-shadow(0 10px 16px rgba(120,96,64,.16)); }
.rsvp__title{ font-family:var(--f-display); font-weight:800; font-size:clamp(1.7rem,4.6vw,2.4rem); margin:0 0 8px; }
.rsvp__sub{ color:var(--ink-2); margin:0 0 14px; font-size:1rem; }
.rsvp__deadline{
  display:inline-block; margin:0;
  background:var(--pink); color:#7E4A46; font-weight:700; font-size:.92rem;
  padding:9px 18px; border-radius:999px;
}

.form{
  background:var(--paper-3); border-radius:var(--r-lg);
  padding:clamp(20px,3.4vw,34px);
  box-shadow:var(--shadow-l);
  display:grid; gap:16px;
}
.form__row{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:560px){
  .form__row{ grid-template-columns:1fr 1fr; }
  .form__row--3{ grid-template-columns:.7fr .7fr 1.6fr; }
}
.field{ display:block; }
.field__label{
  display:block; font-family:var(--f-display); font-weight:700;
  font-size:.9rem; color:var(--ink); margin:0 0 6px;
}
.field__label em{ font-style:normal; font-weight:600; color:var(--ink-3); font-size:.82rem; }
.field input{
  width:100%; font-family:var(--f-body); font-weight:600; font-size:1rem;
  color:var(--ink); background:var(--paper);
  border:2px solid rgba(157,197,220,.55);
  border-radius:var(--r-sm); padding:13px 15px;
  transition:border-color .18s, box-shadow .18s;
}
.field input::placeholder{ color:#B6C0CD; font-weight:500; }
.field input:focus{
  outline:none; border-color:var(--blue-deep);
  box-shadow:0 0 0 4px rgba(157,197,220,.28);
}
.field input[aria-invalid="true"]{ border-color:var(--pink-deep); }
.field__err{ display:none; font-size:.82rem; color:var(--pink-deep); font-weight:700; margin-top:5px; }
.field__err.is-on{ display:block; }

.uploader{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.uploader__preview{
  width:66px; height:66px; border-radius:50%; flex:0 0 auto;
  background:var(--paper); border:2.5px dashed rgba(157,197,220,.7);
  display:grid; place-items:center; color:var(--ink-3); overflow:hidden;
}
.uploader__preview svg{ width:26px; height:26px; }
.uploader__preview img{ width:100%; height:100%; object-fit:cover; }
.uploader__ctl{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.uploader__hint{ margin:0; font-size:.83rem; color:var(--ink-3); }

.form__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:2px; }
.form__privacy{ margin:0; font-size:.82rem; color:var(--ink-3); }

.form__done{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--sage-2); border-radius:var(--r-md); padding:18px 20px;
  animation:pop .45s cubic-bezier(.34,1.56,.64,1) both;
}
.form__done-ico{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  background:#fff; color:var(--sage-deep); display:grid; place-items:center;
}
.form__done-ico svg{ width:21px; height:21px; }
.form__done h3{ font-family:var(--f-display); font-weight:800; font-size:1.12rem; margin:0 0 3px; color:#42522F; }
.form__done p{ margin:0; font-size:.95rem; color:#55654A; }
.form__done-send{ margin-top:8px !important; font-weight:700; color:#42522F !important; }
.form__done-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:10px; }

/* ─── footer ─── */
.foot{ position:relative; z-index:1; text-align:center; padding:clamp(34px,5vw,58px) 0 clamp(30px,4vw,46px); }
.foot__blocks{ width:110px; margin:0 auto 10px; }
.foot__love{ font-family:var(--f-script); font-size:1.5rem; color:var(--ink-2); margin:0; }
.foot__sig{ font-family:var(--f-display); font-weight:800; font-size:clamp(1.4rem,4vw,1.9rem); margin:0 0 10px; color:var(--ink); }
.foot__tag{ font-family:var(--f-display); font-weight:600; font-size:clamp(1rem,2.8vw,1.2rem); color:var(--blue-deep); margin:0 0 22px; }
.foot__meta{ border-top:2px dashed rgba(157,197,220,.6); padding-top:16px; }
.foot__meta p{ margin:0 0 8px; font-size:.88rem; color:var(--ink-3); }

/* password-gated reset */
.reset{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; }
.reset__gate{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center; margin:0; }
.reset__input{
  font-family:var(--f-body); font-size:.86rem; font-weight:600; color:var(--ink);
  background:var(--paper-3);
  border:2px solid rgba(157,197,220,.7); border-radius:999px;
  padding:6px 14px; width:130px;
  transition:border-color .18s, box-shadow .18s;
}
.reset__input:focus{
  outline:none; border-color:var(--blue-deep);
  box-shadow:0 0 0 3px rgba(157,197,220,.3);
}
.reset__msg{ width:100%; margin:0 !important; font-size:.8rem !important; font-weight:700; color:var(--ink-3); }
.reset__msg.is-bad{ color:var(--pink-deep) !important; animation:shake .35s ease; }
@keyframes shake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-5px); }
  75%{ transform:translateX(5px); }
}

/* ─── confetti ─── */
.confetti{ position:fixed; inset:0; pointer-events:none; z-index:70; overflow:hidden; }
.confetti i{
  position:absolute; width:9px; height:14px; border-radius:2px;
  animation:fall var(--dur,2.6s) linear forwards;
}
@keyframes fall{
  0%{ transform:translateY(-24px) rotate(0deg); opacity:1; }
  100%{ transform:translateY(104vh) rotate(760deg); opacity:0; }
}

/* ─── focus ─── */
:focus-visible{ outline:3px solid var(--blue-deep); outline-offset:3px; border-radius:6px; }

/* ─── motion preferences ─── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}