/* inner pages */
.crumbs{font-size:.85rem;color:var(--ink-soft);padding-block:14px 0}
.crumbs a{color:var(--blue);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.ihero{padding-block:44px 64px;border-bottom:1px solid var(--edge)}
.ihero .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:center}
.ihero h1{font-size:clamp(2.1rem,4.8vw,3.6rem);font-weight:900;letter-spacing:-.015em;margin-top:12px}
.eyebrow{font-weight:700;color:var(--blue);letter-spacing:.06em;text-transform:uppercase;font-size:.82rem}
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
@media (max-width:880px){.ihero .wrap{grid-template-columns:1fr}}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:22px}
.cols2 p{color:var(--ink-soft);font-size:1.03rem}
@media (max-width:760px){.cols2{grid-template-columns:1fr}}
.ccards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}
.ccard{background:var(--sheet);border:1px solid var(--edge);border-radius:16px;padding:22px;display:grid;gap:12px;min-width:0}
.ccard h3{font-size:1.3rem}
.ccard .lbl{font:700 .72rem var(--body);letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:3px}
.ccard .usual{color:var(--ink-soft)}
.ccard .usual .lbl{color:var(--redpen)}
.ccard .ours{background:var(--paper);border-radius:12px;padding:12px 14px}
.ccard .ours .lbl{color:var(--blue)}
@media (max-width:760px){.ccards{grid-template-columns:1fr}}
.syl{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.sylc{background:var(--sheet);border:1px solid var(--edge);border-top:5px solid var(--blue);border-radius:14px;padding:20px;min-width:0}
.sylc h3{font-size:1.1rem;margin-bottom:10px}
.sylc ul{margin:0;padding-left:1.1em;color:var(--ink-soft);display:grid;gap:5px;font-size:.95rem}
@media (max-width:860px){.syl{grid-template-columns:1fr}}
.storyfeat{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:center;background:var(--band);color:var(--on-band);border-radius:20px;overflow:hidden;margin-top:10px}
.storyfeat img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 8%;display:block}
.storyfeat .txt{padding:24px 24px 24px 0;display:grid;gap:8px}
.storyfeat .txt p{font-size:1.15rem;line-height:1.45}
.storyfeat small{color:var(--on-blue-soft)}
.storyfeat a{color:var(--band-accent);font-weight:700}
@media (max-width:640px){.storyfeat{grid-template-columns:1fr}.storyfeat .txt{padding:0 20px 22px}}
.related{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.related a{background:var(--sheet);border:1px solid var(--edge);border-radius:14px;padding:16px;text-decoration:none;font-weight:700;display:grid;gap:4px;min-width:0}
.related a small{font-weight:500;color:var(--ink-soft);font-size:.85rem}
.related a:hover{border-color:var(--blue)}
@media (max-width:860px){.related{grid-template-columns:1fr 1fr}}
.faqgroup{margin-top:34px}
.faqgroup h2{font-size:clamp(1.4rem,2.6vw,1.9rem)}
.subjfaq{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px}
.subjfaq a{background:var(--sheet);border:1px solid var(--edge);border-radius:12px;padding:14px 16px;text-decoration:none;font-weight:600}
.subjfaq a:hover{border-color:var(--blue)}
@media (max-width:640px){.subjfaq{grid-template-columns:1fr}}
footer a{color:#c8cbe2;text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}

/* playful layer: buddies, books, stickers */
.ihero .reportcard{position:relative}
.sticker{position:absolute;top:-30px;right:-14px;transform:rotate(10deg);filter:drop-shadow(0 6px 10px rgba(36,64,60,.18))}
.sticker svg{display:block}
@media (max-width:640px){.sticker{right:4px;top:-26px}.sticker svg{width:58px;height:58px}}
.scene{display:grid;justify-items:center;gap:6px}
.scene .books{max-width:100%;height:auto}
.buddies{display:flex;gap:6px;align-items:flex-end;margin-top:-14px}
.buddy{max-width:100%;height:auto}
.buddy-why{animation:bob 3.2s ease-in-out infinite}
.buddy-aha{animation:bob 3.2s ease-in-out .5s infinite}
.buddy-gotit{animation:bob 3.2s ease-in-out 1s infinite}
@keyframes bob{50%{transform:translateY(-8px) rotate(-3deg)}}
@media (prefers-reduced-motion:reduce){.buddy{animation:none}}
.labband{background:linear-gradient(135deg,#fdf3e1,#e8f3ef);border:2px dashed var(--edge);border-radius:22px;padding:26px;display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center}
.labband h2{font-size:clamp(1.5rem,3vw,2.2rem)}
.labband p{color:#5e716d}
.labband h2,.labband b{color:#24403c}
@media (max-width:760px){.labband{grid-template-columns:1fr;text-align:center;justify-items:center}}

footer .grid{grid-template-columns:1.3fr 1fr 1fr 1fr}
@media (max-width:900px){footer .grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){footer .grid{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chips span{background:var(--sheet);border:1px solid var(--edge);border-radius:999px;padding:6px 12px;font-weight:600;font-size:.9rem}
.areagrid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;margin-top:22px;align-items:start}
.areagrid iframe{width:100%;aspect-ratio:4/3;border:0;border-radius:16px;border:1px solid var(--edge)}
.areagrid ul{color:var(--ink-soft);display:grid;gap:8px;padding-left:1.1em}
@media (max-width:860px){.areagrid{grid-template-columns:1fr}}
.areacards{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:20px}
.areacards a{background:var(--sheet);border:1px solid var(--edge);border-radius:14px;padding:14px;text-decoration:none;font-weight:700;min-width:0}
.areacards a:hover{border-color:var(--blue)}
@media (max-width:900px){.areacards{grid-template-columns:1fr 1fr}}

.labhero{padding-block:40px 56px;border-bottom:1px solid var(--edge);background:radial-gradient(circle at 85% 20%,rgba(246,200,95,.22),transparent 40%),radial-gradient(circle at 10% 90%,rgba(124,196,228,.2),transparent 40%)}
.labhero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.labhero h1{font-size:clamp(2.2rem,5vw,3.8rem);font-weight:900;margin-top:10px}
@media (max-width:880px){.labhero .wrap{grid-template-columns:1fr}}
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.tabs button{font:800 1rem var(--body);padding:12px 20px;border-radius:999px;border:3px solid #24403c;background:var(--sheet);color:var(--ink);cursor:pointer;box-shadow:4px 4px 0 #24403c;transition:transform .12s}
.tabs button:hover{transform:translate(-1px,-1px)}
.tabs button[aria-selected="true"]{background:#f6c85f;color:#24403c}
.panel{display:grid;gap:24px;margin-top:26px}
.panel[hidden]{display:none}
.act{background:var(--sheet);border:3px solid #24403c;border-radius:22px;box-shadow:6px 6px 0 #24403c;padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:26px;min-width:0}
.act h3{font-size:1.5rem}
.act .tag{display:inline-block;font:800 .75rem var(--body);letter-spacing:.08em;text-transform:uppercase;background:#e8f3ef;color:#2f665d;padding:5px 10px;border-radius:999px}
.act .why{background:var(--paper);border-radius:14px;padding:14px 16px;font-size:.96rem;color:var(--ink-soft)}
.act .why b{color:var(--ink)}
.act .stage{background:#fbf8f1;border:2px dashed var(--edge);border-radius:18px;padding:16px;display:grid;gap:12px;justify-items:center;align-content:start;min-width:0;color:#24403c}
.act .stage svg{max-width:100%;height:auto}
.act .row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:100%}
.act .play{font:800 1rem var(--body);padding:12px 18px;border-radius:14px;border:3px solid #24403c;background:#fff;color:#24403c;cursor:pointer;box-shadow:3px 3px 0 #24403c}
.act .play:hover{background:#fdf3e1}
.act .play.go{background:#4a8b7f;color:#fff}
.act label{font-weight:700;display:grid;gap:4px;width:100%;color:#24403c}
.act input[type=range]{width:100%;accent-color:#4a8b7f}
.act .msg{font:700 1.05rem var(--body);min-height:1.6em;text-align:center}
.act .score{font:700 .9rem var(--body);color:#5e716d}
.act .big{font:900 1.6rem var(--display)}
@media (max-width:860px){.act{grid-template-columns:1fr}}
.ok-burst{animation:pop .5s ease}
@keyframes pop{40%{transform:scale(1.12)}}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden}
.confetti i{position:absolute;top:-12px;width:10px;height:14px;border-radius:2px;animation:fall 1.4s ease-in forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(540deg);opacity:.6}}
@media (prefers-reduced-motion:reduce){.confetti{display:none}}
.polaroids{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:18px;margin-top:26px}
.polaroids figure{margin:0;background:#fff;padding:8px 8px 6px;border-radius:6px;box-shadow:0 10px 22px -12px rgba(36,64,60,.45);transform:rotate(var(--r));transition:transform .2s}
.polaroids figure:hover{transform:rotate(0) scale(1.05)}
.polaroids img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 8%;display:block;border-radius:3px}
.polaroids figcaption{font:700 1.3rem var(--hand);color:#24403c;text-align:center}
.sorter .chip{font:700 1rem var(--body);background:#fff7d6;border:3px solid #24403c;border-radius:14px;padding:12px 16px;text-align:center}