/* ==========================================================
   LEARN page: Nature Notebook, adventure doorways, mini-games.
   Layered on styles.css + elevated.css (+ critters.css).
   ========================================================== */
.learn-page{background:#f6edda}
.learn-page .site-header{gap:1rem}
.learn-page .logo-home{margin-right:auto}
.back-link{font:600 .85rem/1 var(--display);color:var(--forest);text-decoration:none;white-space:nowrap}

/* ---------- hero ---------- */
.nb-hero{max-width:1100px;margin:0 auto;padding:clamp(2rem,5vw,4rem) clamp(1rem,4vw,2rem) 1.2rem;text-align:center}
.nb-hero h1{font-size:clamp(2.2rem,5.5vw,4.2rem);line-height:1.02;margin:.3rem 0 .8rem;color:var(--forest)}
.nb-hero h1 span{color:var(--leaf)}
.nb-lede{max-width:56ch;margin:0 auto 1.2rem;font-size:1.15rem}
.nb-tools{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.8rem 1.2rem}
.talk-toggle{display:inline-flex;align-items:center;gap:.5rem;min-height:46px;padding:.55rem 1.1rem;border-radius:999px;border:2px solid var(--clay-blue);background:#eaf2f7;color:var(--clay-blue);font:600 1rem/1 var(--display);cursor:pointer;transition:background .2s,color .2s}
.talk-toggle.on{background:var(--clay-blue);color:#fff}
.star-tracker{display:grid;gap:.35rem;justify-items:center;padding:.55rem 1rem;border-radius:18px;background:#fffaf0;border:2px solid #e7d9b6}
.st-count{font:600 1rem/1.2 var(--display);color:var(--wood)}
.st-count.all{color:var(--leaf);animation:starGlow 1.4s ease-in-out 3}
.st-row{display:flex;gap:4px}
.st-row img{width:26px;height:26px;object-fit:contain;filter:grayscale(1);opacity:.3;transition:filter .4s,opacity .4s,transform .4s}
.st-row img.lit{filter:none;opacity:1;transform:scale(1.1)}
@keyframes starGlow{50%{transform:scale(1.08)}}

/* ---------- adventure doorways ---------- */
.zones{max-width:1240px;margin:0 auto;padding:.8rem clamp(1rem,4vw,2rem) 1.6rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.zone{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:.2rem 1rem;align-items:center;padding:1.3rem 1.4rem;border-radius:22px;text-decoration:none;color:#fff8e6;overflow:hidden;box-shadow:0 10px 26px rgba(20,30,40,.22);transition:transform .2s}
.zone:hover{transform:translateY(-4px) rotate(-.4deg)}
.zone-space{background:radial-gradient(circle at 80% 20%,#3a4a8a,#141d3d 60%)}
.zone-space::before{content:"";position:absolute;inset:0;background-image:radial-gradient(1.4px 1.4px at 20% 30%,#fff 60%,transparent),radial-gradient(1.2px 1.2px at 70% 70%,#fff 60%,transparent),radial-gradient(1px 1px at 45% 15%,#fff 60%,transparent),radial-gradient(1.6px 1.6px at 88% 55%,#fff4c8 60%,transparent),radial-gradient(1px 1px at 30% 80%,#fff 60%,transparent);opacity:.85}
.zone-weather{background:linear-gradient(160deg,#5f6f82,#2e3e52 70%)}
.zone-weather::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(105deg,transparent 0 14px,rgba(200,225,245,.18) 14px 15px);animation:zoneRain 1s linear infinite}
.zone-eco{background:radial-gradient(circle at 85% 15%,#8fb85a,#3f6a2e 55%,#28482a)}
.zone-eco::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 22% at 20% 105%,rgba(160,200,110,.55),transparent 70%),radial-gradient(ellipse 50% 18% at 80% 110%,rgba(120,170,90,.5),transparent 70%),radial-gradient(2px 2px at 30% 40%,rgba(255,240,180,.8) 60%,transparent),radial-gradient(1.6px 1.6px at 62% 28%,rgba(255,240,180,.7) 60%,transparent),radial-gradient(1.8px 1.8px at 78% 58%,rgba(255,240,180,.6) 60%,transparent);animation:zoneGlow 3.6s ease-in-out infinite}
.zone-ocean{background:linear-gradient(180deg,#2a9dbb 0%,#146a93 38%,#0c3a63 72%,#071d3a)}
.zone-ocean::before{content:"";position:absolute;inset:0;background:radial-gradient(3px 3px at 18% 70%,rgba(220,250,255,.75) 60%,transparent),radial-gradient(2px 2px at 24% 52%,rgba(220,250,255,.6) 60%,transparent),radial-gradient(2.5px 2.5px at 82% 78%,rgba(220,250,255,.7) 60%,transparent),radial-gradient(1.8px 1.8px at 86% 60%,rgba(220,250,255,.55) 60%,transparent),radial-gradient(1.6px 1.6px at 60% 88%,rgba(130,240,230,.8) 60%,transparent),linear-gradient(100deg,transparent 30%,rgba(220,255,255,.1) 34%,transparent 40%,transparent 58%,rgba(220,255,255,.08) 62%,transparent 68%);animation:zoneGlow 4.4s ease-in-out infinite}
@keyframes zoneGlow{50%{opacity:.6}}
@keyframes zoneRain{to{background-position:0 30px}}
.zone>*{position:relative}
.zone-art{grid-row:span 2;font-size:clamp(2.6rem,6vw,3.6rem);animation:zoneBob 3s ease-in-out infinite}
.zone-art img{display:block;width:clamp(64px,7vw,92px);height:auto;filter:drop-shadow(0 3px 4px rgba(0,0,0,.25))}
.zone-art.painted{line-height:0}
@keyframes zoneBob{50%{transform:translateY(-6px) rotate(6deg)}}
.zone-copy small{display:block;font:600 .72rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:#ffe9a0;margin-bottom:.25rem}
.zone-copy strong{display:block;font:600 1.6rem/1.1 var(--display)}
.zone-copy span{display:block;margin-top:.25rem;font-size:.98rem;color:#e8eef5}
.zone-go{grid-column:2;justify-self:start;margin-top:.5rem;padding:.4rem .9rem;border-radius:999px;background:rgba(255,255,255,.18);font:600 .9rem/1 var(--display)}

/* ---------- notebook intro + chips ---------- */
.nb-intro{max-width:1100px;margin:0 auto;padding:1rem clamp(1rem,4vw,2rem) .6rem;text-align:center}
.nb-intro h2{font-size:clamp(1.8rem,4vw,2.6rem);margin:.2rem 0 .4rem;color:var(--forest)}
.nb-intro p:not(.eyebrow){max-width:58ch;margin:0 auto 1rem}
.nb-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.nb-chips a{position:relative;display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .9rem .35rem .35rem;border-radius:999px;background:#fffaf0;border:1.5px solid #cdb88a;color:var(--forest);text-decoration:none;font:600 .95rem/1 var(--display);transition:transform .15s,background .15s}
.nb-chips a img{width:30px;height:30px;object-fit:contain}
.nb-chips a:hover{transform:translateY(-2px);background:#fff}
.chip-star{display:none;position:absolute;top:-8px;right:-6px;font-size:.9rem}
.nb-chips a.starred{border-color:var(--clay-yellow);background:#fff6d8}
.nb-chips a.starred .chip-star{display:block}

/* ---------- topic cards ---------- */
.nb-topics{max-width:1100px;margin:0 auto;padding:1rem clamp(1rem,4vw,2rem) 3rem;display:grid;gap:1.6rem}
.nb-topic{position:relative;scroll-margin-top:90px;background:#fffdf6;background-image:repeating-linear-gradient(0deg,transparent 0 31px,rgba(95,138,62,.07) 32px 33px);border:1.5px solid #e0cfa6;border-radius:22px;padding:clamp(1.1rem,3vw,1.8rem);box-shadow:0 6px 0 #e7d9b6}
.nb-topic.starred{border-color:#e8c46a;box-shadow:0 6px 0 #ecd28a}
.nb-head{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding-bottom:.9rem;border-bottom:2px dashed #e0cfa6;margin-bottom:1.1rem}
.nb-head img{width:76px;height:76px;object-fit:contain}
.nb-head h2{margin:0;font-size:clamp(1.8rem,4vw,2.5rem);line-height:1;color:var(--forest)}
.nb-num{margin:0 0 .25rem;font:600 .72rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--rust)}
.nb-star{display:none;font-size:1.8rem;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2))}
.nb-topic.starred .nb-star{display:block;animation:starPop .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes starPop{from{transform:scale(0) rotate(-40deg)}to{transform:scale(1)}}
.nb-head .read-aloud.nb-read{margin-left:auto;margin-right:0}
.nb-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:1.2rem 1.6rem;align-items:start}
.nb-body h3{margin:0 0 .55rem;font-size:1.12rem;color:var(--forest)}
.nb-body h3 small{font:400 .8rem/1 var(--read);color:#7a6a50;margin-left:.3rem}
.nb-facts ul{margin:0 0 1.1rem;padding:0;list-style:none;display:grid;gap:.5rem}
.nb-facts li{position:relative;padding:.55rem .8rem .55rem 2.2rem;background:#fff;border:1px solid #eadcb9;border-radius:12px;font-size:1.04rem;line-height:1.45}
.nb-facts li::before{content:"💡";position:absolute;left:.65rem;top:.5rem}

/* 3D flip word cards */
.word-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.word-card{position:relative;height:116px;padding:0;border:0;background:none;cursor:pointer;perspective:700px;font:inherit;color:var(--ink)}
.wc-inner{position:absolute;inset:0;transition:transform .55s cubic-bezier(.3,1.3,.5,1);transform-style:preserve-3d}
.word-card[aria-pressed="true"] .wc-inner{transform:rotateY(180deg)}
.wc-front,.wc-back{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:.2rem;padding:.5rem;border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:2px solid var(--clay-lavender);text-align:center}
.wc-front{background:#f3f1fc}
.wc-back{background:#fff;transform:rotateY(180deg)}
.wc-pic{font-size:2rem;line-height:1}
.wc-word{font:600 1.08rem/1.1 var(--display);color:#4a3f96}
.wc-word.small{font-size:.85rem}
.wc-mean{font-size:.86rem;line-height:1.3}
.word-card:hover .wc-front{background:#ebe7fb}
.word-card:focus-visible{outline:3px solid var(--clay-yellow);outline-offset:3px;border-radius:14px}

/* game panel */
.nb-game{background:#fff;border:2px solid #b7c49a;border-radius:18px;padding:.8rem;box-shadow:0 5px 0 #cfdcb3}
.nb-game-head{display:flex;align-items:baseline;gap:.6rem;margin:.1rem .2rem .6rem}
.nb-game-kicker{font:600 .7rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--leaf)}
.nb-game-head strong{font:600 1.2rem/1.1 var(--display);color:var(--forest)}
.g-stage{display:block;width:100%;height:auto;border-radius:12px;background:#eef4e2;user-select:none;-webkit-user-select:none}
.g-controls{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.6rem}
.g-btn{flex:1 1 auto;min-height:44px;padding:.5rem .8rem;border:0;border-radius:12px;background:var(--leaf);color:#fff;font:600 .98rem/1.1 var(--display);cursor:pointer;box-shadow:0 4px 0 #3f6a2a;transition:transform .12s,box-shadow .12s;touch-action:none}
.g-btn:active,.g-btn.down{transform:translateY(3px);box-shadow:0 1px 0 #3f6a2a}
.g-btn.ghost{background:#f1ecd7;color:var(--forest);box-shadow:0 4px 0 #d8cfa8}
.g-btn.ghost[aria-pressed="true"]{background:#dfeec9;box-shadow:0 4px 0 #a9c083}
.g-msg{margin:.6rem .2rem 0;min-height:2.8em;font-size:1rem;line-height:1.4}
.g-count,.g-prompt{margin:.5rem .2rem 0;font:600 1rem/1.3 var(--display);color:var(--forest)}
.g-prompt b{color:var(--rust);letter-spacing:.04em}
.g-win{display:flex;align-items:center;gap:.6rem;margin-top:.6rem;padding:.6rem .8rem;border-radius:12px;background:#fff6d8;border:2px solid var(--clay-yellow);font:600 1rem/1.3 var(--display);color:var(--wood)}
.g-win>span:first-child{font-size:1.6rem}
.g-win.pop{animation:winPop .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes winPop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.g-slider{display:flex;align-items:center;gap:.6rem;margin-top:.6rem;font-size:1.4rem}
.g-slider input{flex:1;height:32px;accent-color:var(--clay-yellow);cursor:pointer}
/* game bits */
.g-whoosh{fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:180;stroke-dashoffset:180;animation:whoosh .9s ease-out forwards}
@keyframes whoosh{to{stroke-dashoffset:-180}}
.g-wisp{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;animation:wisp 1.4s ease-out forwards;opacity:0}
@keyframes wisp{0%{opacity:0;transform:translateY(0)}20%{opacity:.9}100%{opacity:0;transform:translateY(-100px)}}
.g-drop{stroke:#4f8cb4;stroke-width:2;stroke-linecap:round;animation:gdrop .6s linear infinite}
@keyframes gdrop{from{transform:translateY(0)}to{transform:translateY(95px)}}
.g-waterdrop{animation:wdrop .9s ease-in forwards}
@keyframes wdrop{from{transform:translateY(0);opacity:1}to{transform:translateY(80px);opacity:0}}
.g-cloudshape{transition:transform .5s,fill .5s;transform-box:fill-box;transform-origin:center}
.g-sunny{transition:opacity .4s}
.g-tap [data-s]{cursor:pointer;transition:filter .2s}
.g-tap [data-s]:hover{filter:brightness(1.15) drop-shadow(0 0 4px #fff)}
.g-tap [data-s].found{filter:drop-shadow(0 0 5px #fff6a0) drop-shadow(0 0 2px #fff)}
.g-tap [data-s].nope{animation:nope .4s}
@keyframes nope{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.g-choices .g-btn{flex:1 1 40%}
/* grow a seed: the watering can rests on the bench, then a hand tips it over the pot */
.g-can{transform:translate(58px,176px);transition:transform .45s cubic-bezier(.3,.8,.4,1)}
.g-pouring .g-can{transform:translate(100px,100px) rotate(40deg)}
.g-seeddrop{opacity:0;animation:sdrop .5s ease-in forwards}
@keyframes sdrop{0%{transform:translateY(0);opacity:1}100%{transform:translateY(30px);opacity:.2}}
.g-arm{opacity:0;transition:opacity .2s}
.g-pouring .g-arm{opacity:1;transition-delay:.15s}
.g-canshadow{transition:opacity .3s}
.g-pouring .g-canshadow{opacity:0}
@media (prefers-reduced-motion:reduce){.g-can,.g-arm,.g-canshadow{transition:none}}
/* paint mixing */
.g-paint{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:.8rem;align-items:center;padding:.6rem;border-radius:12px;background:#fdf8ec}
.g-pots{display:flex;gap:.5rem;flex-wrap:wrap}
.g-pot{width:74px;height:74px;border-radius:50% 50% 44% 44%;border:4px solid #fff;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.55),rgba(255,255,255,0) 32%),radial-gradient(circle at 70% 80%,rgba(0,0,0,.22),rgba(0,0,0,0) 55%),var(--c);color:#fff;font:600 .8rem/1 var(--display);text-transform:capitalize;cursor:pointer;box-shadow:0 5px 0 rgba(0,0,0,.18);text-shadow:0 1px 2px rgba(0,0,0,.4);transition:transform .15s}
.g-pot:hover{transform:translateY(-3px)}
.g-pot.picked{transform:translateY(-6px) scale(1.06);box-shadow:0 0 0 4px var(--clay-yellow),0 8px 0 rgba(0,0,0,.18)}
.g-bowl{grid-row:span 2;width:120px;height:90px;border-radius:0 0 60px 60px;background:radial-gradient(ellipse at 50% 0%,#d9ceb2,#efe8d6 60%,#e2d7bd);box-shadow:inset 0 6px 10px rgba(90,70,30,.18),0 5px 0 rgba(0,0,0,.08);border:4px solid #c9b27a;display:grid;place-items:center;overflow:hidden}
.g-blob{width:70px;height:48px;border-radius:50%;transform:scale(0);transition:transform .4s cubic-bezier(.3,1.5,.5,1),background .4s}
.g-blob.show{transform:scale(1)}
.g-blob.swirl{animation:swirl .8s ease-out}
@keyframes swirl{0%{transform:scale(.3) rotate(0)}100%{transform:scale(1) rotate(360deg)}}
.g-made{display:flex;gap:.4rem}
.g-made span{flex:1;padding:.4rem .5rem;border-radius:999px;background:#eee6d2;color:#7a6a50;font:600 .85rem/1 var(--display);text-align:center;text-transform:capitalize}
.g-made span.got{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
/* Mix the paint: painted table, glass paint jars and a white mixing bowl (art painted by learn-games.js) */
.g-paint{background-color:#b88a58;background-size:cover;background-position:center;box-shadow:inset 0 0 0 2px rgba(90,56,26,.35)}
.g-pot.art{border:0;border-radius:10px;background-color:transparent;background-size:100% 100%;background-repeat:no-repeat;box-shadow:none;width:78px;height:80px;display:flex;align-items:flex-end;justify-content:center;padding:0 0 15px;color:#4a3a24;text-shadow:none;font-size:.78rem}
.g-pot.art:hover{transform:translateY(-3px) rotate(-2deg)}
.g-pot.art.picked{transform:translateY(-8px) scale(1.06);box-shadow:none;filter:drop-shadow(0 0 5px #fff3b0) drop-shadow(0 0 2px #fff)}
.g-pot:focus-visible{outline:3px solid #fff3b0;outline-offset:2px}
.g-bowl.art{border:0;border-radius:0;background-color:transparent;background-size:100% 100%;box-shadow:none;width:130px;height:96px;align-items:start;padding-top:14px}
.g-bowl.art .g-blob{width:84px;height:22px}
.g-made span{box-shadow:0 2px 0 rgba(60,36,16,.3)}
.g-paint{grid-template-columns:minmax(0,1fr) auto}.g-made{min-width:0}.g-made span{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width:560px){.g-made span{padding:.4rem .25rem;font-size:.74rem}.g-pot.art{width:64px;height:66px;padding-bottom:12px;font-size:.7rem}.g-bowl.art{width:104px;height:77px;padding-top:11px}.g-bowl.art .g-blob{width:68px;height:18px}}


/* actions + skills */
.nb-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.nb-act{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:.5rem 1rem;border-radius:999px;background:#f1ecd7;color:var(--forest);text-decoration:none;font:600 .95rem/1.1 var(--display);border:1.5px solid #dccaa0}
.nb-act:hover{background:#fff}
.nb-act.go{background:var(--leaf);border-color:var(--leaf);color:#fff}
.nb-act.yt{background:#fff0ee;border-color:#f3b9b1;color:#c4302b}
.nb-skills{margin:1rem 0 0;padding-top:.8rem;border-top:1px dashed #e0cfa6;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:.9rem}
.nb-skills span{font:600 .72rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:#7a6a50;margin-right:.2rem}
.nb-skills em{font-style:normal;background:#f1ecd7;border-radius:999px;padding:.25rem .65rem}

@media(min-width:861px) and (max-width:1120px){
  .zone{grid-template-columns:1fr;grid-template-rows:auto;padding:1.1rem 1.2rem}
  .zone-art{grid-row:auto;font-size:2.6rem}
  .zone-go{grid-column:1}
}
@media(max-width:860px){
  .nb-body{grid-template-columns:1fr}
  .zones{grid-template-columns:1fr}
  .learn-page{padding-bottom:0}
}
@media(max-width:540px){
  .nb-read{margin-left:0}
  .word-cards{grid-template-columns:1fr 1fr 1fr;gap:.4rem}
  .word-card{height:110px}
  .wc-pic{font-size:1.6rem}
  .wc-word{font-size:.95rem}
  .wc-mean{font-size:.76rem}
  .g-pot{width:62px;height:62px}
  .g-bowl{width:96px;height:74px}
  .learn-page .yt-pill{display:none}
  .st-row img{width:22px;height:22px}
  .nb-act{flex:1 1 100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){.wc-inner,.zone-art,.zone-weather::before,.zone-eco::before,.zone-ocean::before{transition:none;animation:none}}

@media(max-width:540px){.nb-head .read-aloud.nb-read{margin-left:0}}

/* notebook header: a naturalist's field journal page. Lined paper, a red margin line, two taped index cards that answer the headline
   questions (inside a bean seed, what makes wind), a sprouting strip, a dandelion letting go of its seeds and a ladybug on the margin */
.nb-hero{position:relative;isolation:isolate}
.nb-art{--ink:#3d3a30;--mx:max(24px,calc(50% - 600px));position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);overflow:hidden;pointer-events:none;background:repeating-linear-gradient(180deg,transparent 0 31px,rgba(79,159,196,.12) 31px 32px),linear-gradient(180deg,#fbf6e6,#f6edda)}
.nb-art::before{content:"";position:absolute;top:0;bottom:0;left:var(--mx);width:2px;background:rgba(200,69,42,.22)}
.nb-defs{position:absolute;width:0;height:0;overflow:hidden}
.nb-art svg{display:block;overflow:visible}
.nb-art text{font-family:var(--read);fill:var(--ink)}
.nb-art .nb-t{font:600 16.5px var(--display);text-anchor:middle;fill:var(--ink)}
.nb-art .nb-l{font-weight:700;font-size:11.5px}
.nb-art .nb-big{font-size:13px}
.nb-art .nb-s{font-size:10.5px}
.nb-art .nb-i{font-style:italic}
.nb-art .nb-n{font:600 10px var(--display);text-anchor:middle}
.nb-art .nb-wind{font-size:15px;fill:#2a6f9c}
.nb-art .mid{text-anchor:middle}.nb-art .end{text-anchor:end}
.nb-ink{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.nb-rule{stroke:#e6a89c;stroke-width:1.1}
.nb-ruled{stroke:#c6deeb;stroke-width:.8}
.nb-lead{fill:none;stroke:var(--ink);stroke-width:1;stroke-linecap:round}
.nb-hl{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;opacity:.45}
.nb-arr{fill:none;stroke-linecap:round;stroke-linejoin:round}

/* taped index cards (wide screens only, they sit in the side gutters beside the heading) */
.nb-card{display:none;position:absolute;top:14px;width:min(218px,calc(50% - 384px - var(--mx)));background:#fffdf7;border-radius:3px;box-shadow:0 1px 1px rgba(61,58,48,.1),0 10px 18px -8px rgba(61,58,48,.35)}
.nb-card::before{content:"";position:absolute;z-index:1;top:-9px;left:50%;width:76px;height:21px;margin-left:-38px;transform:rotate(-5deg);background:repeating-linear-gradient(45deg,rgba(255,255,255,.4) 0 4px,transparent 4px 9px),rgba(143,191,90,.6);clip-path:polygon(3% 0,97% 0,100% 18%,96.5% 36%,100% 54%,96.5% 72%,100% 90%,97% 100%,3% 100%,0 90%,3.5% 72%,0 54%,3.5% 36%,0 18%)}
.nb-card.c-seed{left:calc(var(--mx) - 14px);transform:rotate(-3deg)}
.nb-card.c-wind{right:calc(var(--mx) - 14px);transform:rotate(2.4deg)}
.nb-card.c-wind::before{transform:rotate(4deg);background:repeating-linear-gradient(-45deg,rgba(255,255,255,.4) 0 4px,transparent 4px 9px),rgba(110,172,208,.55)}

/* sprouting strip: three soil panels, bottom left */
.nb-sprouts{position:absolute;display:flex;gap:5px;left:calc(var(--mx) + 18px);bottom:6px;width:min(282px,calc(50% - 282px - var(--mx) - 18px))}
.nb-sprouts svg{flex:1 1 0;min-width:0}

/* dandelion clock, bottom right, with seeds drifting off on the breeze */
.nb-dand{position:absolute;left:calc(50% + 282px);bottom:4px;width:100px}
.nb-fly{position:absolute;left:43%;top:13%;width:17px;animation:nbFly 26s linear infinite}
.nb-fly.f1{transform:translate(56px,4px) rotate(-6deg)}
.nb-fly.f2{width:14px;transform:translate(116px,-8px) rotate(5deg);animation-name:nbFly2;animation-duration:31s;animation-delay:-8s}
.nb-fly.f3{width:18px;transform:translate(172px,8px) rotate(-4deg);animation-duration:23s;animation-delay:-14s}
.nb-fly.f4{width:13px;transform:translate(226px,-10px) rotate(7deg);animation-name:nbFly2;animation-duration:28s;animation-delay:-21s}
@keyframes nbFly{0%{transform:translate(0,0) rotate(0);opacity:0}6%{opacity:1}25%{transform:translate(58px,-6px) rotate(-8deg)}50%{transform:translate(122px,6px) rotate(6deg)}75%{transform:translate(186px,-4px) rotate(-5deg)}90%{opacity:1}100%{transform:translate(250px,8px) rotate(8deg);opacity:0}}
@keyframes nbFly2{0%{transform:translate(0,0) rotate(0);opacity:0}6%{opacity:1}25%{transform:translate(50px,-12px) rotate(7deg)}50%{transform:translate(112px,-2px) rotate(-6deg)}75%{transform:translate(176px,-14px) rotate(5deg)}90%{opacity:1}100%{transform:translate(236px,-6px) rotate(-7deg);opacity:0}}
.nb-note{display:none;position:absolute;left:calc(50% + 430px);bottom:20px;padding-left:4px;font:700 14px/1.2 var(--read);color:var(--ink);transform:rotate(-4deg);white-space:nowrap}
.nb-note svg{position:absolute;left:-26px;top:-28px;width:34px}

/* a native convergent lady beetle slowly walking up and down the margin line */
.nb-bugpath{position:absolute;left:calc(var(--mx) - 8px);width:18px;top:24px;bottom:8px}
.nb-bug{position:absolute;left:0;top:100%;width:18px;height:calc(100% - 23px);animation:nbClimb 46s linear infinite}
.nb-bug svg{position:absolute;left:0;top:-23px;width:18px;animation:nbTurn 46s linear infinite}
@keyframes nbClimb{0%,5%{transform:translateY(0)}45%,55%{transform:translateY(-100%)}95%,100%{transform:translateY(0)}}
@keyframes nbTurn{0%{transform:rotate(180deg)}5%,45%{transform:rotate(360deg)}55%,100%{transform:rotate(540deg)}}

@media (min-width:1180px){
  .nb-hero{padding-bottom:2.2rem}
  .nb-card,.nb-note{display:block}
  .nb-bugpath{top:280px}
}
@media (max-width:1179px){
  .nb-sprouts{width:min(216px,calc(50% - 282px - var(--mx) - 18px))}
  .nb-dand{left:calc(50% + 274px);width:78px}
}
@media (max-width:959px){
  .nb-sprouts{width:64px}
  .nb-sprouts .s1,.nb-sprouts .s2,.nb-sprouts .cap{display:none}
}
@media (max-width:759px){
  .nb-sprouts{left:8px;top:0;bottom:auto;width:48px}
  .nb-dand{left:auto;right:10px;top:4px;bottom:auto;width:36px}
  .nb-fly,.nb-bugpath{display:none}
}
@media (prefers-reduced-motion:reduce){.nb-art *{animation:none!important}}