:root{--harbor:#123c46;--seaglass:#1f8a8a;--peach:#ef6f5a;--marigold:#f6c445;--playmat:#f3f7f6;--milk:#ffffff;--pewter:#4f6468;--seafoam:#d8e6e3}
*{box-sizing:border-box}body{margin:0;background:var(--playmat);color:var(--harbor);font:17px/1.72 "Avenir Next","Nunito","Trebuchet MS","Segoe UI",sans-serif}
a{color:var(--seaglass);text-underline-offset:3px;font-weight:600}a:hover{color:var(--peach)}
.loopline{background:var(--milk);border-bottom:1px solid var(--seafoam)}
.loopline-in{max-width:1120px;margin:0 auto;padding:14px 20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px}
.sprout{display:flex;align-items:center;gap:10px;font:800 21px/1 "Avenir Next","Nunito","Trebuchet MS",sans-serif;color:var(--harbor);text-decoration:none}
.sprout::before{content:"";width:30px;height:30px;border-radius:50%;border:6px solid var(--seaglass);border-right-color:var(--peach);border-bottom-color:var(--marigold)}
.pebbles{display:flex;flex-wrap:wrap;gap:6px}.pebbles a{font-size:14.5px;color:var(--harbor);text-decoration:none;padding:6px 13px;border-radius:999px;background:var(--playmat)}.pebbles a:hover{background:var(--marigold);color:var(--harbor)}
.yard{max-width:1120px;margin:0 auto;padding:0 20px}
.storytime{display:grid;grid-template-columns:1.2fr .8fr;gap:24px 48px;align-items:center;padding:50px 0 36px}
.storytime h1{font:800 clamp(30px,5.2vw,52px)/1.08 "Avenir Next","Nunito","Trebuchet MS",sans-serif;margin:0 0 14px;letter-spacing:-.015em}
.storytime p{margin:0;color:var(--pewter);font-size:18.5px;max-width:48ch}
.hoop{aspect-ratio:1;max-width:280px;width:100%;justify-self:center;border-radius:50%;border:22px solid var(--seaglass);border-top-color:var(--peach);border-left-color:var(--marigold);display:grid;place-items:center;text-align:center;font:700 15px/1.4 "Avenir Next","Trebuchet MS",sans-serif;color:var(--pewter);padding:20px}
.crayons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:0 0 84px}
.blockpiece{display:flex;flex-direction:column;gap:8px;background:var(--milk);border-radius:22px;padding:24px 22px 22px;text-decoration:none;color:var(--harbor);border:2px solid transparent;font-weight:400}
.blockpiece:hover{border-color:var(--seaglass);color:var(--harbor)}
.blockpiece h2{font:700 19.5px/1.3 "Avenir Next","Nunito","Trebuchet MS",sans-serif;margin:0}.blockpiece p{margin:0;font-size:15px;line-height:1.55;color:var(--pewter)}
.who{align-self:flex-start;font:700 11.5px/1 "Avenir Next","Trebuchet MS",sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:var(--seafoam);color:var(--harbor)}
.who.grownups{background:#fde3dd}.who.makers{background:#fdf0c7}
.lesson{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:32px;margin:40px 0 84px;align-items:start}
.lesson>*{min-width:0}
.worksheet{background:var(--milk);border-radius:26px;padding:34px 38px}
.worksheet h1{font:800 clamp(27px,4.6vw,42px)/1.12 "Avenir Next","Nunito","Trebuchet MS",sans-serif;margin:12px 0 16px;letter-spacing:-.01em}
.bigidea{font-size:19px;color:var(--pewter);margin:0 0 28px;padding:16px 18px;background:var(--playmat);border-radius:16px}
.worksheet h2{font:700 21px/1.3 "Avenir Next","Nunito","Trebuchet MS",sans-serif;margin:34px 0 8px;color:var(--seaglass)}
.worksheet ul,.worksheet ol{padding-left:22px}.worksheet li{margin:7px 0}.worksheet li::marker{color:var(--peach)}
.sticker{border:2px dashed var(--marigold);border-radius:16px;padding:14px 18px;font-size:16px}
.stamped{margin-top:36px;font-size:13.5px;color:var(--pewter)}
.margin{position:sticky;top:20px;background:var(--milk);border-radius:20px;padding:20px;font-size:14.5px;color:var(--pewter)}
.margin strong{display:block;color:var(--harbor);margin-bottom:8px}.margin ul{margin:0;padding-left:18px}.margin li{margin:6px 0}
.garden{background:var(--harbor);color:#c9dcdc;font-size:14px}.garden .yard{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 22px;padding-top:24px;padding-bottom:32px}.garden a{color:#fff}
@media(max-width:900px){.crayons{grid-template-columns:repeat(2,minmax(0,1fr))}.lesson{grid-template-columns:1fr}.margin{position:static}}
@media(max-width:620px){.crayons{grid-template-columns:1fr}.storytime{grid-template-columns:1fr;padding:30px 0 24px}.hoop{max-width:180px;border-width:16px;font-size:13px}.worksheet{padding:24px 18px;border-radius:20px}.lesson{margin-top:22px}}