/* ================= tokens ================= */
:root{
  --ink:#4A2640;          /* plum text */
  --ink-soft:#7A5570;
  --berry:#D6477F;        /* main pink */
  --berry-dark:#B03266;
  --milk:#FFD9E6;         /* strawberry milk */
  --blush:#FFEAF1;
  --lilac:#E6DCFF;
  --butter:#FFF1BE;
  --mint:#D8F5E6;
  --cloud:#FFFBFD;
  --gold:#F3C969;

  --display:"Bagel Fat One","Quicksand",system-ui,sans-serif;
  --body:"Quicksand",system-ui,sans-serif;

  --radius:22px;
  --radius-pill:999px;
  --shadow:0 6px 0 rgba(214,71,127,.18);
  --header-h:64px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px);}
body{
  margin:0;
  font-family:var(--body);
  font-weight:500;
  font-size:1.08rem;
  line-height:1.6;
  color:var(--ink);
  background-color:var(--blush);
  background-image:
    radial-gradient(circle at 12% 8%, var(--lilac) 0, transparent 38%),
    radial-gradient(circle at 92% 30%, var(--butter) 0, transparent 34%),
    radial-gradient(circle at 20% 78%, var(--milk) 0, transparent 40%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
h1,h2{font-family:var(--display); font-weight:400; margin:0 0 .5em; line-height:1.1;}
p{margin:0 0 1em;}
a{color:inherit;}
.wrap{max-width:1040px; margin:0 auto; padding:0 24px;}
.wrap-narrow{max-width:680px;}

.skip-link{position:absolute; left:-999px; top:0; background:var(--ink); color:#fff; padding:10px 16px; z-index:100; border-radius:0 0 12px 0;}
.skip-link:focus{left:0;}
:focus-visible{outline:3px solid var(--berry); outline-offset:3px; border-radius:8px;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
}

/* ================= buttons ================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:1.25rem;
  padding:14px 34px; border-radius:var(--radius-pill);
  border:3px solid var(--berry-dark); cursor:pointer; text-decoration:none;
  box-shadow:var(--shadow);
  transition:transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 8px 0 rgba(214,71,127,.22);}
.btn:active{transform:translateY(3px); box-shadow:0 2px 0 rgba(214,71,127,.22);}
.btn:disabled{opacity:.6; cursor:wait; transform:none;}
.btn-primary,.btn-yes{background:var(--berry); color:#fff;}
.btn-primary:hover,.btn-yes:hover{background:var(--berry-dark);}
.btn-no{background:var(--cloud); color:var(--ink); border-color:var(--ink-soft);}
.btn-no:hover{background:var(--lilac);}
.link-btn{background:none; border:0; padding:6px; font:inherit; font-weight:700; color:var(--berry-dark); text-decoration:underline; cursor:pointer;}

/* ================= header ================= */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,251,253,.92); backdrop-filter:blur(8px);
  border-bottom:3px solid var(--milk);
}
.header-inner{height:var(--header-h); display:flex; align-items:center; justify-content:space-between;}
.mark{font-family:var(--display); font-size:1.1rem; text-decoration:none; color:var(--ink);}
.mark span{color:var(--berry);}
.site-nav{display:flex; align-items:center; gap:22px;}
.site-nav a{text-decoration:none; font-weight:700; color:var(--ink-soft);}
.site-nav a:hover{color:var(--berry);}
.site-nav .nav-cta{background:var(--berry); color:#fff; padding:8px 18px; border-radius:var(--radius-pill);}
.site-nav .nav-cta:hover{background:var(--berry-dark); color:#fff;}

.menu-toggle{display:none; width:44px; height:44px; border:0; border-radius:50%; background:var(--milk); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px;}
.menu-toggle span{display:block; width:20px; height:3px; background:var(--ink); border-radius:2px; transition:transform .2s, opacity .2s;}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
.nav-scrim{position:fixed; inset:var(--header-h) 0 0 0; background:rgba(74,38,64,.25); z-index:900;}
.nav-scrim[hidden]{display:none;}

@media (max-width:700px){
  .menu-toggle{display:flex;}
  .mark{font-size:.98rem;}
  .site-nav{
    position:absolute; top:var(--header-h); left:0; right:0; z-index:1001;
    flex-direction:column; align-items:stretch; gap:6px; padding:16px 24px 22px;
    background:var(--cloud); border-bottom:3px solid var(--milk);
    transform:translateY(-8px); opacity:0; pointer-events:none; visibility:hidden;
    transition:transform .2s, opacity .2s, visibility .2s;
  }
  .site-nav.open{transform:none; opacity:1; pointer-events:auto; visibility:visible;}
  .site-nav a{padding:12px 4px; font-size:1.1rem;}
  .site-nav .nav-cta{text-align:center; margin-top:6px;}
}

/* ================= hero ================= */
.hero{padding:56px 0 72px; text-align:center; overflow:hidden;}
.hero-inner{position:relative;}
.halo{width:min(260px,60vw); height:auto; margin:0 auto -8px; display:block; animation:float 5s ease-in-out infinite;}
.hero h1{
  font-size:clamp(3.2rem, 13vw, 6.6rem);
  color:var(--berry);
  text-shadow:0 4px 0 var(--milk), 0 8px 0 rgba(214,71,127,.15);
  margin-bottom:.35em;
}
.lede{max-width:34ch; margin:0 auto 1.6em; font-size:1.2rem; color:var(--ink-soft); font-weight:600;}

.sparkle{position:absolute; color:var(--gold); font-size:1.8rem; animation:twinkle 3s ease-in-out infinite;}
.sparkle.s1{top:14%; left:6%;}
.sparkle.s2{top:30%; right:7%; font-size:2.4rem; animation-delay:.8s;}
.sparkle.s3{bottom:22%; left:10%; color:var(--berry); animation-delay:1.4s;}
.sparkle.s4{bottom:10%; right:12%; animation-delay:2s;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
@keyframes twinkle{0%,100%{opacity:.35; transform:scale(.85);}50%{opacity:1; transform:scale(1.1);}}

/* ================= letter ================= */
.letter-section{padding:24px 0 72px;}
.letter{
  background:var(--cloud); border:3px solid var(--milk); border-radius:var(--radius);
  padding:36px 34px 20px; box-shadow:var(--shadow); transform:rotate(-1deg);
}
.letter h2{font-size:2.2rem; color:var(--berry);}
.letter p{max-width:52ch;}
.letter .sign{margin-top:1.2em; font-weight:700; color:var(--berry-dark);}

.titles{list-style:none; margin:44px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
.titles li{padding:20px 22px; border-radius:var(--radius); display:flex; flex-direction:column; gap:4px;}
.titles b{font-family:var(--display); font-weight:400; font-size:1.5rem;}
.titles span{color:var(--ink-soft); font-weight:600; line-height:1.4;}
.t-virgo{background:var(--mint); transform:rotate(1deg);}
.t-princess{background:var(--milk); transform:rotate(-1.5deg);}
.t-angel{background:var(--lilac); transform:rotate(1.5deg);}
.t-goddess{background:var(--butter); transform:rotate(-1deg);}
@media (max-width:560px){.titles{grid-template-columns:1fr;}}

/* ================= question ================= */
.question-section{padding:24px 0 100px;}
.ask, .result{
  background:var(--cloud); border:4px solid var(--berry); border-radius:34px;
  padding:48px 28px 36px; text-align:center; box-shadow:0 10px 0 rgba(214,71,127,.2);
}
.ask-small{font-weight:700; color:var(--ink-soft); font-size:1.1rem; margin-bottom:.4em;}
.the-question{font-size:clamp(2rem, 7vw, 3.2rem); color:var(--ink); margin-bottom:.9em;}
.answers{display:flex; flex-wrap:wrap; justify-content:center; gap:18px; margin-bottom:1.4em;}
.btn-yes{min-width:170px; font-size:1.5rem;}
.btn-no{min-width:130px;}
.ask-note{margin:0; font-size:.98rem; color:var(--ink-soft);}
.ask[hidden],.result[hidden]{display:none;}

.result-emoji{font-size:3.4rem; margin-bottom:.1em; line-height:1;}
.result h2{font-size:clamp(1.9rem,6vw,2.7rem); color:var(--berry);}
.result p{max-width:40ch; margin-left:auto; margin-right:auto;}

/* ================= footer / toast / hearts ================= */
.site-footer{padding:30px 0 44px; text-align:center; color:var(--ink-soft); font-weight:700;}
.site-footer p{margin:0;}

.toast{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%,30px);
  background:var(--ink); color:#fff; padding:14px 22px; border-radius:var(--radius-pill);
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:2000;
  max-width:calc(100vw - 32px); text-align:center; font-weight:700;
}
.toast.show{opacity:1; transform:translate(-50%,0);}

.hearts{position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:1500;}
.heart{position:absolute; bottom:-40px; animation:rise var(--dur,3.4s) ease-out forwards; will-change:transform,opacity;}
@keyframes rise{
  0%{transform:translate(0,0) scale(.6); opacity:0;}
  10%{opacity:1;}
  100%{transform:translate(var(--drift,0),-110vh) scale(1.2) rotate(var(--rot,0deg)); opacity:0;}
}