/* $IMOKAY · soft, friendly, inviting */
:root{
  --cream:#fff8f1; --paper:#fffdfa; --ink:#4b4a58; --ink-soft:#77748a;
  --peach:#f9d3bd; --peach-d:#e9a382; --sage:#d3e8d4; --sage-d:#7fae8a;
  --lavender:#e3dcf5; --lav-d:#9a8cc8; --butter:#fdf0c8; --rose:#f7d9df;
  --r-lg:36px; --r-md:24px; --r-sm:16px;
  --shadow:0 14px 40px -18px rgba(120,96,110,.35), 0 3px 10px -4px rgba(120,96,110,.12);
  --hand:"Caveat", "Comic Sans MS", cursive; --body:"Nunito", system-ui, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family:var(--body); color:var(--ink); background:var(--cream); font-size:18px; line-height:1.7; overflow-x:hidden}
img{max-width:100%; height:auto; display:block}
a{color:#b06a4b; text-decoration-thickness:2px; text-underline-offset:3px; text-decoration-color:rgba(233,163,130,.6)}
a:hover{color:#8f4f35}
.sr{position:absolute; left:-9999px}.sr:focus{left:12px; top:12px; background:#fff; padding:8px 14px; border-radius:12px; z-index:99}
.wrap{max-width:1120px; margin:0 auto; padding-left:24px; padding-right:24px; position:relative; z-index:1}
.narrow{max-width:780px}
section{padding:56px 0}
.center{text-align:center}
.hand,.hand-title{font-family:var(--hand)}
.hand-title{font-weight:700; font-size:clamp(2.3rem,5vw,3.2rem); line-height:1.05; margin:0 0 .4em; color:#5b5670; letter-spacing:.5px}
.hand-title.big{font-size:clamp(2.8rem,7vw,4.8rem)}
.sub{color:var(--ink-soft); max-width:640px; margin:0 auto 26px; font-size:1.08rem}
.small{font-size:.95rem}.tiny{font-size:.85rem; color:var(--ink-soft); margin:.8em 0 0}
.soft{color:var(--sage-d); font-size:1.6rem; margin:.2em 0 0}

/* soft sky */
.sky{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.blob{position:absolute; border-radius:50%; filter:blur(50px); opacity:.55; animation:drift 38s ease-in-out infinite alternate}
.b1{width:520px; height:520px; background:var(--peach); top:-160px; left:-140px}
.b2{width:460px; height:460px; background:var(--sage); top:30%; right:-180px; animation-duration:46s}
.b3{width:420px; height:420px; background:var(--lavender); bottom:-160px; left:22%; animation-duration:52s}
.cloud{position:absolute; width:150px; height:46px; background:#fff; border-radius:40px; opacity:.7; animation:float 90s linear infinite}
.cloud::before,.cloud::after{content:""; position:absolute; background:#fff; border-radius:50%}
.cloud::before{width:64px; height:64px; left:22px; top:-30px}.cloud::after{width:48px; height:48px; left:72px; top:-20px}
.c1{top:14%; left:-180px}.c2{top:48%; left:-180px; animation-duration:120s; animation-delay:-50s; transform:scale(.7)}
.c3{top:78%; left:-180px; animation-duration:140s; animation-delay:-95s}
@keyframes drift{to{transform:translate(60px,40px) scale(1.08)}}
@keyframes float{to{left:110%}}

/* header */
.site-head{position:sticky; top:0; z-index:10; background:rgba(255,248,241,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:12px; padding-bottom:12px}
.logo{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink)}
.logo img{border-radius:50%; box-shadow:var(--shadow); border:3px solid #fff}
.logo span{font-family:var(--hand); font-size:2rem; font-weight:700; color:#5b5670}
.nav{list-style:none; display:flex; gap:8px; margin:0; padding:0}
.nav a{display:block; padding:6px 18px; border-radius:999px; text-decoration:none; color:var(--ink); font-weight:700; transition:background .4s}
.nav a:hover{background:var(--sage)}
.nav a[aria-current]{background:var(--peach)}

/* cards & pills */
.card{background:var(--paper); border-radius:var(--r-lg); padding:34px 36px; box-shadow:var(--shadow); border:2px solid rgba(255,255,255,.8)}
.card.sage{background:#eef6ee}.card.peach{background:#fdf0e7}.card.lavender{background:#f2eefb}.card.butter{background:#fef8e4}
.pill{display:inline-block; padding:12px 24px; border-radius:999px; font-weight:800; text-decoration:none; color:var(--ink); background:#fff; border:none; font:inherit; font-weight:800; cursor:pointer; box-shadow:0 6px 16px -8px rgba(120,96,110,.45); transition:transform .5s ease, box-shadow .5s ease}
.pill:hover{transform:translateY(-3px); box-shadow:0 12px 22px -10px rgba(120,96,110,.5); color:var(--ink)}
.pill.sage{background:var(--sage)}.pill.peach{background:var(--peach)}.pill.lavender{background:var(--lavender)}
.pill:focus-visible,.nav a:focus-visible,.kit-item:focus-visible,.post-card:focus-visible{outline:3px dashed var(--lav-d); outline-offset:3px}
.pills{display:flex; flex-wrap:wrap; gap:12px}

/* hero */
.hero{padding-top:34px}
.hero-art{border-radius:48px; overflow:hidden; box-shadow:var(--shadow); border:6px solid #fff; animation:breathe 9s ease-in-out infinite}
@keyframes breathe{50%{transform:translateY(-6px)}}
.hero-copy{margin:-70px auto 0; position:relative; max-width:760px; background:rgba(255,253,250,.94); border-radius:var(--r-lg); padding:36px 40px; box-shadow:var(--shadow); text-align:center}
.hero-copy .pills{justify-content:center}
.tag{display:inline-block; background:var(--sage); padding:4px 16px; border-radius:999px; font-weight:800; font-size:.9rem; margin:0 0 10px}
.lede{font-size:1.15rem; color:var(--ink-soft); margin:0 0 22px}

.two-col{display:grid; grid-template-columns:1fr 1.15fr; gap:40px; align-items:center}
.portrait{margin:0; border-radius:50%; overflow:hidden; border:8px solid #fff; box-shadow:var(--shadow); max-width:420px; justify-self:center; animation:sway 12s ease-in-out infinite}
@keyframes sway{50%{transform:rotate(1.5deg)}}
.lore p{margin:0 0 1em}

/* toys */
.toys{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.toy{text-align:center; display:flex; flex-direction:column; align-items:center}
.toy h3{font-family:var(--hand); font-size:1.9rem; margin:0 0 10px; color:#5b5670}
.breath{height:190px; display:flex; flex-direction:column; align-items:center; justify-content:center}
.bubble-ring{width:150px; height:150px; border-radius:50%; background:rgba(255,255,255,.7); display:grid; place-items:center}
.bubble-core{width:64px; height:64px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff,var(--sage) 55%,var(--sage-d)); box-shadow:0 0 30px rgba(127,174,138,.5); transition:transform 4s ease-in-out}
.breath.in .bubble-core{transform:scale(2.15)}
.breath-word{margin:10px 0 0; font-family:var(--hand); font-size:1.5rem}
.miss{min-height:190px; display:flex; flex-direction:column; align-items:center; justify-content:center}
.miss img{width:84px; cursor:pointer; transition:transform .8s}
.miss img:hover{transform:rotate(-6deg)}
.miss-line{font-family:var(--hand); font-size:1.6rem; line-height:1.2; margin:10px 0 0; min-height:2.4em; transition:opacity .8s}
.meter{font-family:var(--hand); font-size:3.4rem; margin:20px 0 6px; line-height:1}
.meter small{font-size:1.4rem}
.track{width:100%; height:56px; border-radius:999px; background:rgba(255,255,255,.75); position:relative; overflow:hidden}
.track img{position:absolute; top:6px; left:4px; width:46px; transition:left 1s linear}

/* stickers */
.kit-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:16px; align-items:end}
.kit-item{display:flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none; color:var(--ink); font-weight:700; font-size:.9rem; padding:12px 6px; border-radius:var(--r-md); transition:background .5s, transform .6s}
.kit-item:hover{background:#fff; transform:translateY(-4px)}
.kit-item img{max-height:110px; width:auto}
.kit-item img.round{border-radius:50%; border:4px solid #fff; max-height:104px}

/* blog cards */
.post-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
.post-card{text-decoration:none; color:var(--ink); padding:18px 18px 26px; transition:transform .6s ease, box-shadow .6s ease}
.post-card:hover{transform:translateY(-6px); color:var(--ink)}
.post-card .thumb{border-radius:var(--r-md); overflow:hidden; margin-bottom:14px}
.post-card h3{font-family:var(--hand); font-size:1.85rem; line-height:1.1; margin:4px 0 8px; color:#5b5670}
.post-card p{margin:0 0 10px; font-size:1rem; color:var(--ink-soft)}
.post-card .date{font-size:.8rem; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:var(--sage-d); margin:0}
.post-card .more{font-weight:800; color:#b06a4b}

.page-head{text-align:center; padding-top:50px}
.soft-center{text-align:center}
.not-list{padding-left:1.1em; margin:0}.not-list li{margin:0 0 .5em}

/* kind note */
.kind-note{display:flex; gap:20px; align-items:center; background:#f4f0fc; border-radius:var(--r-lg); padding:24px 28px; box-shadow:var(--shadow); margin:10px 0}
.kind-note img{width:96px; flex:none}
.kind-note p{margin:0; font-size:1rem}

/* post */
.post{max-width:780px; margin:0 auto; padding:40px 0 60px}
.post .meta{text-align:center; color:var(--sage-d); font-weight:800; text-transform:uppercase; letter-spacing:1px; font-size:.82rem; margin:0}
.post h1{text-align:center}
.hero-img{margin:20px 0 30px; border-radius:var(--r-lg); overflow:hidden; border:6px solid #fff; box-shadow:var(--shadow); background:#fff}
.hero-img figcaption{font-size:.8rem; color:var(--ink-soft); text-align:center; padding:6px}
.post-paper h2{font-family:var(--hand); font-size:2.1rem; color:#5b5670; margin:1.2em 0 .2em}
.post-paper h2:first-of-type{margin-top:.4em}
.facts{padding-left:0; list-style:none}
.facts li{position:relative; padding-left:30px; margin:0 0 .8em}
.facts li::before{content:""; position:absolute; left:4px; top:.55em; width:12px; height:12px; border-radius:50%; background:var(--sage)}
.pullquote{font-family:var(--hand); font-size:2rem; text-align:center; color:var(--lav-d); margin:1.2em 0; line-height:1.2}
.sources{margin-top:34px; padding-top:20px; border-top:2px dashed var(--peach)}
.sources h2{font-size:1.7rem!important}
.sources ol{font-size:.95rem; padding-left:1.3em}
.src{font-size:.85rem; color:var(--ink-soft)}
.back{margin-top:28px}

/* footer */
.site-foot{position:relative; z-index:1; background:#f3ece6; margin-top:40px; padding:44px 0 34px; text-align:center; border-radius:60px 60px 0 0}
.foot-snail{width:78px; margin:0 auto 10px}
.disclaimer{font-weight:800; max-width:620px; margin:0 auto 14px}
.foot-links{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; margin-bottom:10px}
.site-foot .hand{font-size:1.4rem; color:var(--ink-soft); margin:0}

@media (max-width:900px){
  .toys,.post-cards{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  .kit-grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:560px){
  body{font-size:17px}
  section{padding:40px 0}
  .wrap{padding-left:16px; padding-right:16px}
  .card{padding:26px 22px}
  .hero-art{border-radius:28px}
  .hero-art img{height:220px; width:100%; object-fit:cover; object-position:72% 50%}
  .hero-copy{margin-top:18px; padding:26px 20px}
  .logo span{font-size:1.6rem}.logo img{width:42px; height:42px}
  .nav a{padding:6px 11px}
  .kit-grid{grid-template-columns:repeat(3,1fr)}
  .kind-note{flex-direction:column; text-align:center}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important; transition:none!important; scroll-behavior:auto!important}
  .cloud{display:none}
}