:root{
    --bg:#e6f3df;
    --bg-2:#d3ecc6;
    --paper:#f6fcf1;
    --ink:#153a1d;
    --ink-soft:#467a52;
    --sage:#8fc99a;
    --moss:#3a9d4e;
    --moss-deep:#1d6b30;
    --clay:#f5c842;
    --clay-deep:#d4a010;
    --honey:#f9d94a;
    --sand:#d6ecca;
    --line:rgba(30,110,50,.14);
    --shadow:0 22px 60px -32px rgba(20,60,30,.28);
  }

/* ---- password gate ---- */
#gate{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(175deg,#cfe9bf 0%,#e8f7df 45%,#fffde8 100%);
}
#gate.gone{display:none;}
.gate-card{
  background:rgba(255,255,255,.82);backdrop-filter:blur(12px);
  border-radius:24px;
  box-shadow:0 24px 64px -20px rgba(30,110,50,.18);
  padding:48px 40px 44px;
  width:min(420px,90vw);text-align:center;
}
.gate-flower{font-size:3rem;line-height:1;margin-bottom:16px;}
.gate-title{
  font-family:"Bricolage Grotesque",sans-serif;
  font-size:clamp(1.6rem,5vw,2.2rem);font-weight:800;
  color:#1d6b30;margin:0 0 6px;
}
.gate-sub{color:#4a8a5a;margin:0 0 28px;font-size:.95rem;}
.gate-label{display:block;text-align:left;font-size:.8rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:#4a8a5a;margin-bottom:6px;}
#gate-input{
  width:100%;padding:13px 16px;border-radius:10px;
  border:1.5px solid rgba(40,130,60,.2);background:rgba(235,248,230,.6);
  font-family:inherit;font-size:1rem;color:#1d4a26;
  outline:none;transition:border-color .15s;
}
#gate-input:focus{border-color:#5ab86a;}
.gate-error{color:#c0550a;font-size:.875rem;margin:8px 0 0;text-align:left;}
#gate .gate-btn{
  width:100%;margin-top:20px;padding:14px;
  background:linear-gradient(135deg,#5ab86a,#2a8d3e) !important;
  box-shadow:0 8px 24px -8px rgba(42,141,62,.5) !important;
}
#gate .gate-btn:hover{background:linear-gradient(135deg,#6ac87a,#3a9d4e) !important;}

*{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:"Figtree",system-ui,sans-serif;
    color:var(--ink);
    background:
      radial-gradient(620px 620px at 74% 2%, rgba(255,214,40,.36), transparent 70%),
      radial-gradient(760px 520px at 12% 6%, rgba(255,150,110,.18), transparent 65%),
      radial-gradient(900px 520px at 50% -8%, rgba(120,200,130,.42), transparent 60%),
      radial-gradient(640px 460px at 88% 22%, rgba(255,170,90,.16), transparent 62%),
      linear-gradient(175deg, var(--bg-2) 0%, var(--bg) 48%, #ffe9c7 88%, #ffdca8 100%);
    background-attachment:fixed;
    min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;
  }

  /* ---------- dappled light ---------- */
  #dapple{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
  .dot{
    position:absolute;border-radius:50%;filter:blur(14px);opacity:.0;
    animation:drift linear infinite;
  }
  @keyframes drift{
    0%{opacity:0;transform:translate(0,0) scale(.85);}
    25%{opacity:.5;}
    75%{opacity:.4;}
    100%{opacity:0;transform:translate(34px,-46px) scale(1.1);}
  }

  .wrap{position:relative;z-index:1;}

  .eyebrow{
    font-size:.74rem;letter-spacing:.34em;text-transform:uppercase;
    color:var(--moss);font-weight:600;
  }
  .hairline{height:2px;width:60px;background:linear-gradient(90deg,#f9d94a,#f5c842);border-radius:2px;margin:0 auto;opacity:.9;box-shadow:0 0 8px rgba(249,217,74,.5);}
  .sun-orb{
    position:absolute;top:-150px;left:50%;transform:translateX(-50%);
    width:440px;height:440px;border-radius:50%;pointer-events:none;
    background:radial-gradient(circle,
      rgba(255,238,150,.55) 0%,
      rgba(255,214,70,.38) 22%,
      rgba(255,180,80,.2) 45%,
      transparent 72%);
    animation:pulse-sun 4s ease-in-out infinite;
  }
  @keyframes pulse-sun{0%,100%{transform:translateX(-50%) scale(1);opacity:.85;}50%{transform:translateX(-50%) scale(1.07);opacity:1;}}

  /* ---------- subtle tropical fronds ---------- */
  .frond{position:absolute;pointer-events:none;user-select:none;font-size:clamp(5rem,16vw,11rem);opacity:.10;line-height:1;z-index:0;filter:saturate(.9);}
  .frond.tl{top:64px;left:-26px;transform:rotate(-24deg) scaleX(-1);}
  .frond.tr{top:48px;right:-30px;transform:rotate(18deg);}
  @media(max-width:560px){.frond{font-size:6rem;opacity:.08;}}

  /* ---------- journey stepper ---------- */
  .journey{
    position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:30;
    display:flex;align-items:center;gap:8px;
    background:rgba(251,250,242,.82);backdrop-filter:blur(10px);
    border:1px solid var(--line);border-radius:999px;padding:7px 12px;
    box-shadow:0 10px 30px -18px rgba(15,45,80,.22);
    animation:rise .9s ease .2s both;
  }
  .jstep{display:flex;align-items:center;gap:7px;text-decoration:none;color:var(--ink-soft);padding:4px 9px;border-radius:999px;transition:color .2s ease;}
  .jnum{
    display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
    background:var(--sand);color:var(--moss-deep);font-family:"Bricolage Grotesque",sans-serif;
    font-weight:700;font-size:.78rem;transition:.2s ease;
  }
  .jlabel{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;}
  .jstep:hover{color:var(--moss-deep);}
  .jstep.active{color:var(--moss-deep);}
  .jstep.active .jnum{background:var(--moss);color:#fff;}
  .jline{width:14px;height:1.5px;background:var(--line);border-radius:2px;}
  @media(max-width:520px){
    .jlabel{display:none;}
    .jstep{padding:3px;}
    .journey{gap:6px;padding:6px 8px;}
    .jline{width:10px;}
  }

  /* ---------- hero / invite ---------- */
  .hero{
    position:relative;overflow:hidden;
    min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:88px 22px 60px;
  }
  .hero .eyebrow{margin-bottom:26px;animation:rise .9s ease both;}

  .guest{
    font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
    font-size:clamp(3.4rem,13vw,8.2rem);line-height:.9;letter-spacing:-.025em;
    color:var(--moss-deep);margin:0;animation:rise 1s ease .08s both;
  }
  .turning{
    font-size:clamp(.95rem,2.6vw,1.2rem);color:var(--ink-soft);font-weight:400;
    letter-spacing:.02em;margin:20px 0 4px;animation:rise 1s ease .16s both;
  }
  .forty{
    font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
    font-size:clamp(5rem,22vw,11.5rem);line-height:.82;letter-spacing:-.03em;
    background:linear-gradient(165deg,#f9e26a 0%, var(--clay) 52%, var(--clay-deep) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    margin:6px 0 0;animation:rise 1.1s ease .24s both;
  }
  .tagline{
    max-width:32ch;margin:24px auto 0;color:var(--ink-soft);
    font-size:clamp(1rem,2.3vw,1.16rem);font-weight:300;line-height:1.55;
    animation:rise 1.1s ease .32s both;
  }

  .details{
    margin:46px auto 0;max-width:580px;width:100%;
    background:var(--paper);border:1px solid var(--line);border-radius:22px;
    padding:32px 32px 26px;box-shadow:var(--shadow);
    animation:rise 1.2s ease .4s both;
  }
  .details-grid{display:grid;grid-template-columns:1fr;gap:22px;text-align:left;}
  @media(min-width:520px){.details-grid{grid-template-columns:1fr 1fr;}}
  .detail .k{
    font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
    color:var(--clay);font-weight:600;margin-bottom:6px;
  }
  .detail .v{font-size:1.06rem;color:var(--ink);line-height:1.4;font-weight:500;}
  .detail .v small{display:block;color:var(--ink-soft);font-size:.86rem;margin-top:3px;font-weight:400;}
  .rsvp{
    margin-top:26px;padding-top:22px;border-top:1px solid var(--line);
    text-align:center;font-size:.98rem;color:var(--ink-soft);
  }
  .rsvp strong{color:var(--moss);font-weight:600;}

  .scrollcue{
    margin-top:50px;display:inline-flex;flex-direction:column;align-items:center;gap:10px;
    color:var(--moss);text-decoration:none;font-size:.7rem;letter-spacing:.26em;
    text-transform:uppercase;font-weight:600;animation:rise 1.2s ease .5s both;
  }
  .scrollcue .arrow{width:2px;height:32px;background:linear-gradient(#f9d94a,transparent);border-radius:2px;animation:bob 1.8s ease-in-out infinite;box-shadow:0 0 6px rgba(249,217,74,.4);}

  /* ---------- rsvp ---------- */
  .rsvp-cta{
    display:inline-block;font-family:"Figtree",sans-serif;font-weight:600;color:#fff;
    background:linear-gradient(165deg,#5ab86a,var(--moss));padding:13px 28px;border-radius:999px;
    text-decoration:none;letter-spacing:.04em;box-shadow:0 12px 26px -12px rgba(20,90,40,.35);transition:transform .15s ease;
  }
  .rsvp-cta:hover{transform:translateY(-2px);}
  .rsvp-note{margin-top:13px;font-size:.9rem;color:var(--ink-soft);}

  .rsvp-section{min-height:100vh;scroll-margin-top:78px;padding:96px 22px 44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;}
  .rsvp-card{
    max-width:560px;width:100%;background:var(--paper);border:1px solid var(--line);
    border-radius:22px;padding:38px 32px 34px;box-shadow:var(--shadow);text-align:center;
  }
  .rsvp-card h2{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:clamp(1.7rem,5vw,2.4rem);letter-spacing:-.02em;color:var(--moss-deep);margin:14px 0 0;}
  .rsvp-sub{color:var(--ink-soft);font-weight:300;margin:10px auto 26px;max-width:38ch;}
  #rsvp-form{text-align:left;display:flex;flex-direction:column;gap:18px;}
  .field{display:flex;flex-direction:column;gap:8px;}
  .field-label{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);font-weight:600;}
  .field-label em{font-style:normal;color:var(--ink-soft);text-transform:none;letter-spacing:0;font-weight:400;}
  #rsvp-form input[type=text],#rsvp-form input[type=email],#rsvp-form textarea{
    font-family:"Figtree",sans-serif;font-size:1rem;color:var(--ink);background:#fff;
    border:1px solid var(--line);border-radius:12px;padding:12px 14px;width:100%;resize:vertical;
  }
  #rsvp-form input[type=text]:focus,#rsvp-form textarea:focus{outline:2px solid var(--sage);outline-offset:1px;border-color:var(--sage);}
  .toggle{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .toggle-btn{font-family:"Figtree",sans-serif;font-size:.94rem;font-weight:500;cursor:pointer;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:13px 10px;transition:.18s ease;}
  .toggle-btn:hover{border-color:var(--sage);}
  .toggle-btn.active{background:var(--moss);border-color:var(--moss);color:#fff;}
  .toggle-btn.active.no{background:var(--ink-soft);border-color:var(--ink-soft);}
  .stepper{display:inline-flex;align-items:center;gap:16px;}
  .stepper button{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);background:#fff;font-size:1.2rem;cursor:pointer;color:var(--moss);font-weight:600;line-height:1;}
  .stepper button:hover{border-color:var(--sage);}
  .stepper output{font-family:"Bricolage Grotesque",sans-serif;font-size:1.3rem;font-weight:700;color:var(--moss-deep);min-width:1.5ch;text-align:center;}
  .form-error{color:#b5482f;font-size:.9rem;margin:0;font-weight:500;}
  .rsvp-submit{align-self:center;margin-top:4px;}
  .rsvp-done h3{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.6rem;color:var(--moss-deep);margin:0 0 8px;}
  .rsvp-done p{color:var(--ink-soft);margin:0;line-height:1.5;}

  /* ---------- game ---------- */
  .game{position:relative;min-height:100vh;scroll-margin-top:78px;padding:96px 22px 104px;}
  .game-head{text-align:center;max-width:640px;margin:0 auto 14px;}
  .game-head h2{
    font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
    font-size:clamp(2rem,6vw,3.2rem);line-height:1.04;letter-spacing:-.02em;
    margin:18px 0 0;color:var(--moss-deep);
  }
  .game-head h2 em{font-style:normal;color:var(--clay);}
  .game-head p{color:var(--ink-soft);font-weight:300;font-size:1.05rem;margin:14px auto 0;max-width:48ch;line-height:1.55;}

  .scoreboard{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:32px auto 24px;}
  .stat{
    background:var(--paper);border:1px solid var(--line);border-radius:14px;
    padding:12px 22px;min-width:108px;text-align:center;box-shadow:var(--shadow);
  }
  .stat .num{font-family:"Bricolage Grotesque",sans-serif;font-size:1.55rem;font-weight:700;color:var(--moss);line-height:1;}
  .stat .lbl{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-top:7px;font-weight:500;}

  .board{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:620px;margin:0 auto;}
  @media(min-width:620px){.board{grid-template-columns:repeat(4,1fr);}}

  .card{appearance:none;border:0;padding:0;background:transparent;cursor:pointer;aspect-ratio:3/4;perspective:900px;border-radius:16px;}
  .card:focus-visible{outline:2px solid var(--clay);outline-offset:3px;}
  .card-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.8,.25,1);}
  .card.is-flipped .card-inner,.card.is-matched .card-inner{transform:rotateY(180deg);}
  .card-face{
    position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;
    display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;
    box-shadow:0 12px 26px -16px rgba(15,45,80,.3);
  }
  .card-back{
    background:
      radial-gradient(circle at 50% 36%, rgba(120,200,130,.22), transparent 60%),
      linear-gradient(155deg,#eaf6e2,#cfe8c2);
    border:1px solid var(--line);
  }
  .card-back .mono{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;color:var(--moss);font-size:1.45rem;letter-spacing:.02em;}
  .card-back .leaf{font-size:.95rem;margin-top:7px;opacity:.65;}
  .card-front{transform:rotateY(180deg);border:1px solid rgba(255,255,255,.4);color:#3a2c22;}
  .card-front .emoji{font-size:clamp(2.2rem,9vw,3.1rem);filter:drop-shadow(0 3px 6px rgba(0,0,0,.14));}
  .card-front img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .card-front .age{
    position:absolute;bottom:8px;right:8px;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
    background:rgba(15,45,80,.55);color:#fff;padding:3px 8px;border-radius:999px;font-weight:600;
  }
  .card-front .ribbon{display:none;}
  .card.is-matched .card-front{box-shadow:0 0 0 2px var(--moss), 0 14px 26px -14px rgba(95,115,80,.5);}

  .controls{text-align:center;margin-top:32px;}
  .btn{
    font-family:"Figtree",sans-serif;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
    color:#fff;cursor:pointer;background:linear-gradient(165deg,#5ab86a,var(--moss));
    border:0;border-radius:999px;padding:14px 30px;box-shadow:0 12px 26px -12px rgba(20,90,40,.35);
    transition:transform .15s ease, filter .15s ease;
  }
  .btn:hover{transform:translateY(-2px);filter:brightness(1.04);}
  .btn.ghost{background:transparent;color:var(--moss);border:1.5px solid var(--moss);box-shadow:none;}

  /* ---------- bonus · trivia ---------- */
  .bonus{position:relative;min-height:100vh;scroll-margin-top:78px;padding:96px 22px 104px;display:flex;flex-direction:column;align-items:center;}
  .bonus-head{text-align:center;max-width:640px;margin:0 auto 30px;}
  .bonus-head h2{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:clamp(2rem,6vw,3.2rem);line-height:1.04;letter-spacing:-.02em;margin:18px 0 0;color:var(--moss-deep);}
  .bonus-head h2 em{font-style:normal;color:var(--clay);}
  .bonus-head p{color:var(--ink-soft);font-weight:300;font-size:1.05rem;margin:14px auto 0;max-width:46ch;line-height:1.55;}
  .quiz-card,.quiz-done{max-width:560px;width:100%;background:var(--paper);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);}
  .quiz-card{padding:30px 32px 32px;}
  .quiz-progress{display:flex;justify-content:space-between;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);font-weight:600;margin-bottom:11px;}
  .quiz-bar{height:6px;background:var(--sand);border-radius:999px;overflow:hidden;margin-bottom:24px;}
  .quiz-bar-fill{height:100%;width:0;background:var(--moss);border-radius:999px;transition:width .4s ease;}
  .quiz-q{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:1.32rem;line-height:1.3;color:var(--moss-deep);margin:0 0 20px;}
  .quiz-options{display:flex;flex-direction:column;gap:10px;}
  .opt{font-family:"Figtree",sans-serif;font-size:1rem;font-weight:500;text-align:left;cursor:pointer;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:13px 15px;display:flex;align-items:center;gap:12px;transition:.16s ease;}
  .opt:hover:not(:disabled){border-color:var(--sage);}
  .opt:disabled{cursor:default;}
  .opt:focus-visible{outline:2px solid var(--clay);outline-offset:2px;}
  .opt .mark{width:25px;height:25px;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:.82rem;flex:0 0 auto;color:var(--moss);font-weight:700;}
  .opt.correct{background:rgba(95,115,80,.12);border-color:var(--moss);color:var(--moss-deep);}
  .opt.correct .mark{background:var(--moss);border-color:var(--moss);color:#fff;}
  .opt.wrong{background:rgba(181,72,47,.09);border-color:#c8755e;color:#8f3f2a;}
  .opt.wrong .mark{background:#c8755e;border-color:#c8755e;color:#fff;}
  .quiz-note{margin:18px 0 0;color:var(--ink-soft);font-size:.95rem;line-height:1.5;}
  .quiz-next{margin-top:22px;}
  .quiz-done{padding:38px 32px;text-align:center;}
  .quiz-done h3{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:clamp(1.7rem,5vw,2.3rem);color:var(--moss-deep);margin:0;letter-spacing:-.02em;}
  .quiz-done .score-big{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:3rem;color:var(--clay);line-height:1;margin:14px 0;}
  .quiz-done p{color:var(--ink-soft);margin:0 auto 22px;max-width:36ch;line-height:1.5;}
  .quiz-capture{display:flex;flex-direction:column;gap:12px;max-width:320px;margin:0 auto 16px;}
  .quiz-capture input{
    font-family:"Figtree",sans-serif;font-size:1rem;color:var(--ink);background:#fff;
    border:1px solid var(--line);border-radius:12px;padding:12px 14px;width:100%;text-align:center;
  }
  .quiz-capture input:focus{outline:2px solid var(--sage);outline-offset:1px;border-color:var(--sage);}
  .quiz-capture .form-error{margin-top:2px;}
  .quiz-sent{color:var(--moss-deep);font-weight:600;margin:0 auto 18px;max-width:36ch;}

  /* ---------- win overlay ---------- */
  .overlay{position:fixed;inset:0;z-index:40;display:none;align-items:center;justify-content:center;padding:22px;background:rgba(15,45,80,.45);backdrop-filter:blur(5px);}
  .overlay.show{display:flex;animation:fade .4s ease both;}
  .modal{
    position:relative;max-width:600px;width:100%;text-align:center;
    background:var(--paper);border:1px solid var(--line);border-radius:24px;
    padding:42px 30px 36px;box-shadow:0 30px 80px -30px rgba(15,45,80,.4);
  }
  .modal .eyebrow{margin-bottom:14px;}
  .modal h3{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:clamp(1.9rem,6vw,2.8rem);margin:0;color:var(--moss-deep);letter-spacing:-.02em;}
  .modal p{color:var(--ink-soft);font-weight:300;line-height:1.55;margin:14px auto 24px;max-width:42ch;}
  .timeline{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 28px;}
  .ti{display:flex;flex-direction:column;align-items:center;gap:6px;width:76px;}
  .ti .face{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;border:2px solid var(--clay);overflow:hidden;}
  .ti .face img{width:100%;height:100%;object-fit:cover;}
  .ti .cap{font-size:.62rem;color:var(--ink-soft);line-height:1.2;font-weight:500;}
  .modal .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

  #confetti{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden;}
  .confetto{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;will-change:transform;}

  footer{text-align:center;padding:38px 22px 58px;color:var(--ink-soft);font-size:.92rem;}
  footer .heart{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;color:var(--clay);font-size:1.12rem;}

  @keyframes rise{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}
  @keyframes bob{0%,100%{transform:translateY(0);opacity:.7;}50%{transform:translateY(8px);opacity:1;}}
  @keyframes fade{from{opacity:0;}to{opacity:1;}}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important;animation-iteration-count:1 !important;scroll-behavior:auto;}
    .card-inner{transition:transform .2s ease;}
    #dapple{display:none;}
  }