:root{
  --ink:#33296b; --yellow:#ffc918; --pink:#f26eaa; --teal:#22b99b; --green:#98ca3c;
  --orange:#f47920; --sky:#6ccff6; --red:#ed1c24; --blue:#3b53a4; --lav:#a98bc0; --white:#fff;
  --display:"Lilita One","Arial Rounded MT Bold","Trebuchet MS",sans-serif;
  --body:"Nunito","Trebuchet MS",Verdana,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);font-size:1.1rem;line-height:1.6;color:var(--ink);background:#fff}
img{max-width:100%;height:auto}
a{color:var(--blue)}
:focus-visible{outline:4px solid var(--orange);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.05;margin:0 0 .5em;letter-spacing:.01em}
h1{font-size:clamp(2.8rem,7vw,5rem);color:var(--ink);-webkit-text-stroke:0;text-shadow:3px 3px 0 #fff,-3px -3px 0 #fff,3px -3px 0 #fff,-3px 3px 0 #fff,0 5px 0 #fff}
h2{font-size:clamp(2.2rem,5vw,3.4rem)}
h3{font-size:1.7rem}
.wrap{max-width:1080px;margin:0 auto;padding:0 1.25rem}

/* buttons: sticker style */
.btn{display:inline-block;font-family:var(--display);font-size:1.25rem;text-decoration:none;color:var(--ink);background:var(--yellow);
  border:4px solid var(--ink);border-radius:999px;padding:.6rem 1.6rem;box-shadow:0 6px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(3px);box-shadow:0 3px 0 var(--ink)}
.btn:active{transform:translateY(6px);box-shadow:0 0 0 var(--ink)}
.btn.alt{background:#fff}

/* nav */
header{position:sticky;top:0;z-index:10;background:#fff;border-bottom:5px solid var(--ink)}
header .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem 1.5rem;padding-top:.6rem;padding-bottom:.6rem}
.logo{font-family:var(--display);font-size:1.7rem;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:.5rem}
.logo img{height:46px;width:auto;display:block}
nav{display:flex;flex-wrap:wrap;gap:.25rem .5rem}
nav a{font-weight:800;text-decoration:none;color:var(--ink);padding:.3rem .9rem;border-radius:999px}
nav a:hover{background:var(--sky)}

/* hero */
.hero{position:relative;overflow:hidden;padding:3.5rem 0 6rem;/*background:url(images/polka-dots.svg) no-repeat 100% 45%/700px auto,url(images/polka-dots.svg) no-repeat -12% 105%/460px auto,#fff*/}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
.hero p.lead{font-size:1.35rem;font-weight:700;max-width:34ch;background:#fff;border:4px solid var(--ink);border-radius:24px;padding:.9rem 1.2rem;transform:rotate(-1deg)}
.hero .btns{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.5rem}
.label{position:relative;justify-self:center;width:min(360px,80vw);animation:bob 4s ease-in-out infinite}
.label img{display:block;border-radius:36px;border:5px solid var(--ink);box-shadow:10px 10px 0 var(--ink);background:#fff}
@keyframes bob{50%{transform:translateY(-12px) rotate(1.5deg)}}
@media (prefers-reduced-motion:reduce){.label{animation:none}html{scroll-behavior:auto}.btn{transition:none}}

.wave{display:block;width:100%;height:60px;margin-top:-1px}
.hero+.wave{position:relative;margin-top:-60px}

/* sections */
section{padding:4.5rem 0}
.shop{background:var(--yellow)}
.intro{max-width:52ch;font-size:1.2rem;font-weight:700}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem;margin-top:2.5rem}
.card{position:relative;background:#fff;border:5px solid var(--ink);border-radius:28px;padding:1.6rem 1.4rem 1.4rem;box-shadow:8px 8px 0 var(--ink)}
.card:nth-child(1){transform:rotate(-1.2deg)}
.card:nth-child(2){transform:rotate(.8deg)}
.card:nth-child(3){transform:rotate(-.6deg)}
.card .price{font-family:var(--display);font-size:2.6rem;line-height:1}
.card .size{font-weight:800;margin:.2rem 0 .6rem}
.card p{margin:.4rem 0 0}
.tag{position:absolute;top:-18px;right:-10px;font-family:var(--display);background:var(--pink);color:#fff;border:4px solid var(--ink);border-radius:999px;padding:.15rem .9rem;transform:rotate(6deg)}
.tag.hot{background:var(--red)}
.dot{width:54px;height:54px;border-radius:50%;margin-bottom:.8rem;border:4px solid var(--ink)}
.small{font-size:.95rem;font-weight:700;margin-top:1.75rem}

.more{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;margin-top:2.5rem}
.panel{border:5px solid var(--ink);border-radius:28px;padding:1.6rem;background:#fff}
.panel.teal{background:var(--teal)}
.panel.pink{background:var(--pink)}
.panel.teal,.panel.pink{color:var(--ink)}
.panel h3{margin-bottom:.3rem}

.buy{background:var(--teal);position:relative;overflow:hidden;
  background-image:radial-gradient(circle at 95% 10%,var(--green) 0 80px,transparent 81px),radial-gradient(circle at 2% 95%,var(--blue) 0 60px,transparent 61px)}
.buy .card{background:#fff}
.buy ul,.panel ul{padding-left:1.2rem;margin:.6rem 0 0}
.buy li{margin:.4rem 0}
.buy h2,.story h2{color:var(--ink);text-shadow:3px 3px 0 #fff,-3px -3px 0 #fff,3px -3px 0 #fff,-3px 3px 0 #fff}

.story{background:var(--lav)}
.story .card{max-width:760px;margin:2rem auto 0;transform:rotate(.4deg)}
.story .meta{font-weight:800;color:var(--blue)}

footer{background:var(--ink);color:#fff;text-align:center;padding:3rem 1.25rem 2.5rem}
footer .badge{width:120px;height:120px;margin:0 auto 1rem;background:#fff;border:5px solid var(--yellow);border-radius:50%;display:grid;place-items:center}
footer .badge img{width:66px;height:auto;display:block}
footer a{color:var(--yellow);font-weight:800}
footer h2{color:#fff;font-size:2rem}

@media (max-width:760px){
  .hero .wrap{grid-template-columns:1fr;text-align:center}
  .hero p.lead{margin:0 auto}
  .hero .btns{justify-content:center}
  .label{order:-1;width:min(260px,70vw)}
  .hero{background-size:620px auto,340px auto;background-position:50% 12%,-20% 105%}
  header .wrap{justify-content:center}
  .card{transform:none!important}
}
footer a{text-underline-offset:3px}