/* ================= PaperPea — bright, taped-together ================= */
:root{
  --cream:#fffbf0; --paper:#ffffff; --ink:#3a3b2e; --ink-soft:#71735f;
  --pea:#8fbf62; --pea-deep:#6b9c40; --pea-pale:#eaf5dd;
  --pink:#f7a8b8; --pink-deep:#ec7692; --pink-pale:#fdeaef;
  --sky:#7ccbe8; --sky-pale:#e4f5fb;
  --sun:#ffd166; --sun-pale:#fff5da;
  --tangerine:#ff9f68; --lilac:#bfa6e8; --gold:#d9b65f;
  --shadow:rgba(58,59,46,.16);
  --display:"Fredoka",'Hiragino Maru Gothic ProN',system-ui,sans-serif;
  --body:"M PLUS Rounded 1c",'Hiragino Maru Gothic ProN',system-ui,sans-serif;
  --maxw:1080px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;overflow-x:hidden;color:var(--ink);font-family:var(--body);font-weight:400;
  font-size:17px;line-height:1.72;-webkit-font-smoothing:antialiased;
  background-color:var(--cream);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(247,168,184,.13) 0 9px, transparent 9px),
    radial-gradient(circle at 78% 42%, rgba(143,191,98,.13) 0 11px, transparent 11px),
    radial-gradient(circle at 44% 82%, rgba(124,203,232,.12) 0 8px, transparent 8px);
  background-size:340px 300px;
}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:22px}
img{max-width:100%;height:auto}
a{color:var(--pea-deep)}
.svgdefs{position:absolute;width:0;height:0;overflow:hidden}

/* ---------------- washi tape ---------------- */
.tape{
  position:relative;display:block;
  filter:url(#torn);
  box-shadow:0 3px 7px rgba(58,59,46,.14), inset 0 0 0 100vmax rgba(255,255,255,.06);
  opacity:.97;
}
/* sakura — pink blossoms + gold specks on warm blush */
.tape.sakura{
  background-color:#ffeef2;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2764%27%20height%3D%2764%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cg%20fill%3D%27%23f2879f%27%3E%3Ccircle%20cx%3D%2732.0%27%20cy%3D%2721.5%27%20r%3D%276.8%27%2F%3E%3Ccircle%20cx%3D%2742.0%27%20cy%3D%2728.8%27%20r%3D%276.8%27%2F%3E%3Ccircle%20cx%3D%2738.2%27%20cy%3D%2740.5%27%20r%3D%276.8%27%2F%3E%3Ccircle%20cx%3D%2725.8%27%20cy%3D%2740.5%27%20r%3D%276.8%27%2F%3E%3Ccircle%20cx%3D%2722.0%27%20cy%3D%2728.8%27%20r%3D%276.8%27%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%273.4%27%20fill%3D%27%23ffd98a%27%2F%3E%3C%2Fsvg%3E"),
                   url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2764%27%20height%3D%2764%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cg%20fill%3D%27%23f9b9c8%27%3E%3Ccircle%20cx%3D%2732.0%27%20cy%3D%2721.5%27%20r%3D%276.8%27%2F%3E%3Ccircle%20cx%3D%2742.0%27%20cy%3D%2728.8%27%20r%3D%276.8%27%2F%3E%3Ccircle%20cx%3D%2738.2%27%20cy%3D%2740.5%27%20r%3D%276.8%27%2F%3E%3Ccircle%20cx%3D%2725.8%27%20cy%3D%2740.5%27%20r%3D%276.8%27%2F%3E%3Ccircle%20cx%3D%2722.0%27%20cy%3D%2728.8%27%20r%3D%276.8%27%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%273.4%27%20fill%3D%27%23fbe3b0%27%2F%3E%3C%2Fsvg%3E"),
                   url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2730%27%20height%3D%2730%27%20viewBox%3D%270%200%2030%2030%27%3E%3Cellipse%20cx%3D%2715%27%20cy%3D%2715%27%20rx%3D%274.4%27%20ry%3D%272.4%27%20transform%3D%27rotate%28-28%2015%2015%29%27%20fill%3D%27%23d8ab52%27%2F%3E%3C%2Fsvg%3E");
  background-size:64px 64px,52px 52px,30px 30px;
  background-position:0 -4px,40px 16px,22px 8px;
}
/* stripe — bold diagonal candy stripes */
.tape.stripe{
  background-color:#fff8e2;
  background-image:repeating-linear-gradient(64deg,
    #8fbf62 0 13px, transparent 13px 27px,
    #ffc84d 27px 38px, transparent 38px 54px,
    #f7a8b8 54px 63px, transparent 63px 80px);
}
/* dots — sky and lilac spots on pale blue */
.tape.dots{
  background-color:#e8f6fc;
  background-image:
    radial-gradient(circle at 26% 46%, #63bfe0 0 7.5px, transparent 8px),
    radial-gradient(circle at 74% 58%, #b39be0 0 6px, transparent 6.5px),
    radial-gradient(circle at 50% 22%, #ffc84d 0 3.5px, transparent 4px);
  background-size:70px 100%;
}
/* confetti — multicoloured scatter on cream */
.tape.confetti{
  background-color:#fffaec;
  background-image:
    radial-gradient(circle at 14% 30%, #ff9457 0 6px, transparent 6.5px),
    radial-gradient(circle at 44% 70%, #63bfe0 0 5.5px, transparent 6px),
    radial-gradient(circle at 72% 28%, #8fbf62 0 6px, transparent 6.5px),
    radial-gradient(circle at 90% 66%, #f2879f 0 5px, transparent 5.5px),
    radial-gradient(circle at 30% 52%, #ffc84d 0 4px, transparent 4.5px);
  background-size:96px 100%;
}
/* leaves — botanical green on soft mint */
.tape.leaves{
  background-color:#eef7e4;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2746%27%20height%3D%2746%27%20viewBox%3D%270%200%2046%2046%27%3E%3Cpath%20d%3D%27M23%208c9%205%2013%2013%2010%2022-9%203-17-2-20-11%203-6%206-9%2010-11z%27%20fill%3D%27%237fae52%27%2F%3E%3C%2Fsvg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2746%27%20height%3D%2746%27%20viewBox%3D%270%200%2046%2046%27%3E%3Cpath%20d%3D%27M23%208c9%205%2013%2013%2010%2022-9%203-17-2-20-11%203-6%206-9%2010-11z%27%20fill%3D%27%23bcd9a0%27%2F%3E%3C%2Fsvg%3E");
  background-size:46px 46px,46px 46px;
  background-position:0 0,23px 20px;
}

/* full-bleed ribbon divider */
.ribbon{height:54px;width:118vw;margin-left:-9vw;margin-block:44px;transform:rotate(-1.4deg)}
.ribbon.tilt-r{transform:rotate(1.5deg)}
.ribbon.thin{height:34px}
@media (max-width:600px){.ribbon{height:40px;margin-block:32px}}

/* ---------------- masthead ---------------- */
header{background:var(--paper);border-bottom:3px solid var(--pea-pale)}
header .wrap{display:flex;align-items:center;gap:20px;padding-block:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);margin-right:auto}
.brand img{width:52px;height:52px;object-fit:contain}
.brand .name{font-family:var(--display);font-weight:600;font-size:1.6rem;line-height:1;letter-spacing:-.01em}
nav{display:flex;gap:7px;flex-wrap:wrap}
nav a{text-decoration:none;font-size:.97rem;font-weight:500;color:var(--ink-soft);
  padding:8px 16px;border-radius:999px}
nav a:hover{background:var(--pea-pale);color:var(--ink)}
nav a[aria-current="page"]{background:var(--pea);color:#fff}

/* ---------------- type ---------------- */
main{padding-bottom:20px}
h1{font-family:var(--display);font-weight:600;font-size:clamp(2.4rem,6.4vw,4.1rem);
  line-height:1.07;letter-spacing:-.02em;margin:0 0 20px}
h2{font-family:var(--display);font-weight:600;font-size:clamp(1.7rem,3.4vw,2.4rem);
  line-height:1.16;letter-spacing:-.015em;margin:0 0 16px}
h3{font-family:var(--display);font-weight:600;font-size:1.28rem;margin:0 0 8px;line-height:1.25}
p{margin:0 0 18px;max-width:62ch}
.lede{font-size:1.18rem;color:var(--ink-soft);max-width:54ch;margin:0 0 30px}
.sun-text{color:var(--pea-deep)}

/* ---------------- coming-soon badge ---------------- */
.badge{display:inline-flex;align-items:center;gap:10px;background:var(--sun);color:var(--ink);
  font-family:var(--display);font-weight:600;font-size:.92rem;letter-spacing:.04em;
  padding:9px 20px;border-radius:999px;margin-bottom:22px;
  box-shadow:0 3px 0 rgba(58,59,46,.18);transform:rotate(-1.4deg)}
.badge .pip{width:9px;height:9px;border-radius:50%;background:var(--pink-deep)}

/* ---------------- hero ---------------- */
.hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.82fr);gap:44px;
  align-items:center;padding-block:56px 42px}
.hero-art{display:grid;place-items:center}
.hero-art img{width:100%;max-width:360px;filter:drop-shadow(0 8px 18px rgba(58,59,46,.14))}
@media (max-width:820px){
  .hero{grid-template-columns:1fr;gap:26px;padding-block:34px 26px}
  .hero-art{order:-1}.hero-art img{max-width:250px}
}

/* ---------------- taped cards ---------------- */
.grid{display:grid;gap:34px 26px;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  margin:40px 0 4px}
.card{position:relative;background:var(--paper);border-radius:20px;padding:34px 26px 26px;
  box-shadow:0 4px 0 var(--shadow);transform:rotate(-.7deg)}
.card:nth-child(2n){transform:rotate(.8deg)}
.card:nth-child(3n){transform:rotate(-.3deg)}
.card::before{content:"";position:absolute;top:-14px;left:50%;width:96px;height:28px;
  transform:translateX(-50%) rotate(-3.4deg);filter:url(#torn);opacity:.96;
  background-color:#fffdf6;box-shadow:0 2px 4px rgba(58,59,46,.1)}
.card:nth-child(4n+1)::before{background-image:
  radial-gradient(circle at 25% 40%,var(--pink) 0 4.5px,transparent 5px),
  radial-gradient(circle at 70% 66%,var(--pink) 0 4.5px,transparent 5px);background-size:52px 100%}
.card:nth-child(4n+2)::before{background-image:repeating-linear-gradient(66deg,
  var(--sky) 0 8px,transparent 8px 18px)}
.card:nth-child(4n+3)::before{background-image:
  radial-gradient(circle at 30% 50%,var(--sun) 0 5px,transparent 5.5px),
  radial-gradient(circle at 78% 46%,var(--tangerine) 0 4px,transparent 4.5px);background-size:48px 100%}
.card:nth-child(4n)::before{background-image:repeating-linear-gradient(-66deg,
  var(--pea) 0 8px,transparent 8px 18px)}
.card .jp{display:block;font-size:.8rem;color:var(--ink-soft);letter-spacing:.16em;margin:-4px 0 10px}
.card p{margin:0;font-size:.98rem;color:var(--ink-soft)}

/* tinted panel */
.panel{border-radius:26px;padding:42px 38px;margin:8px 0 10px}
.panel.green{background:var(--pea-pale)}
.panel.pink{background:var(--pink-pale)}
.panel.sky{background:var(--sky-pale)}
.panel.sun{background:var(--sun-pale)}
.panel h2{margin-bottom:12px}
.panel p:last-child{margin-bottom:0}
@media (max-width:600px){.panel{padding:28px 22px;border-radius:20px}}

/* split */
.split{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.4fr);gap:40px;align-items:start}
@media (max-width:760px){.split{grid-template-columns:1fr;gap:16px}}

/* ---------------- buttons ---------------- */
.btn{display:inline-block;text-decoration:none;font-family:var(--display);font-weight:600;
  font-size:1rem;padding:13px 28px;border-radius:999px;background:var(--pea-deep);color:#fff;
  box-shadow:0 4px 0 rgba(58,59,46,.22);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(2px);box-shadow:0 2px 0 rgba(58,59,46,.22)}
.btn.pink{background:var(--pink-deep)}
.btn.ghost{background:var(--paper);color:var(--ink);box-shadow:0 4px 0 var(--shadow)}
.actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:6px}

/* ---------------- footer ---------------- */
footer{background:var(--paper);border-top:3px solid var(--pea-pale);margin-top:26px;
  padding-block:32px 40px;font-size:.92rem;color:var(--ink-soft)}
footer .wrap{display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;align-items:center}
footer a{text-decoration:none;color:var(--ink-soft);font-weight:500}
footer a:hover{color:var(--pea-deep)}
@media (max-width:560px){main{padding-bottom:6px}}

@media (max-width:430px){
  header .wrap{padding-block:11px;gap:12px}
  .brand img{width:44px;height:44px}
  .brand .name{font-size:1.4rem}
  nav{gap:3px;width:100%}
  nav a{padding:7px 13px;font-size:.93rem}
}