/* ---------- Huckleberries (ages 5 to 9) ---------- */
:root{--berry:#3A2F6B;--berry-deep:#251D49;--leaf:#2E7A52;--blush:#B04E62;--ripening:#8C3A4B;--stem:#6B3A2A}
.huck-hero{position:relative;background:var(--berry);color:var(--white);overflow:hidden;padding-top:26px}
.huck-dots{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(241,236,223,.22) 2.2px,transparent 2.6px);background-size:16px 16px;
  -webkit-mask-image:linear-gradient(200deg,#000 0%,transparent 60%);mask-image:linear-gradient(200deg,#000 0%,transparent 60%)}
.huck-ghost{top:20px;transform:rotate(-6deg)}
.huck-grid{position:relative;display:flex;flex-direction:column}
.huck-kicker{display:inline-block;background:var(--volt);color:var(--ink);border:3px solid var(--ink);border-radius:999px;padding:3px 14px;font-weight:800;font-size:14px;transform:rotate(-2deg)}
.huck-title{margin:14px 0 0;font-family:var(--display);font-weight:900;font-size:64px;line-height:.9;text-transform:uppercase;display:flex;flex-direction:column}
.huck-title .hl{display:flex}
.huck-title .hl span{display:inline-block;color:var(--volt);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:4px 4px 0 var(--ink);
  animation:pop .6s cubic-bezier(.3,1.6,.5,1) both}
.huck-title .hl:nth-child(1) span:nth-child(odd){transform:rotate(-4deg)}
.huck-title .hl:nth-child(2) span:nth-child(even){transform:rotate(3deg)}
.huck-title .hl:nth-child(2) span{color:var(--white)}
.huck-title .hl span:nth-child(1){animation-delay:.05s}.huck-title .hl span:nth-child(2){animation-delay:.1s}.huck-title .hl span:nth-child(3){animation-delay:.15s}
.huck-title .hl span:nth-child(4){animation-delay:.2s}.huck-title .hl span:nth-child(5){animation-delay:.25s}.huck-title .hl span:nth-child(6){animation-delay:.3s}
.huck-title .hl span:nth-child(7){animation-delay:.35s}
.huck-title .hl:nth-child(2) span{animation-delay:calc(var(--d,0s) + .35s)}
@keyframes pop{from{opacity:0;translate:0 30px;scale:.4}to{opacity:1;translate:0 0;scale:1}}
.huck-sub{margin:16px 0 0;font-size:18px;color:#E4E0F2;max-width:34ch}
.huck-actions{margin-top:20px;display:flex;flex-direction:column;gap:12px}
.huck-page .btn-big{border-radius:16px}
.huck-page .btn-line{border-radius:16px}

.huck-stage{position:relative;display:flex;justify-content:center;order:-1;margin:-6px 0 18px}
.huck-mascot{position:relative;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;width:min(210px,56vw)}
.huck-mascot svg{display:block;width:100%;height:auto;overflow:visible}
.huck-mascot:focus-visible{outline:3px solid var(--volt);outline-offset:6px;border-radius:24px}
.huck-bubble{position:absolute;top:14%;left:-8%;background:var(--white);color:var(--ink);border:3px solid var(--ink);border-radius:18px;padding:4px 12px;
  font-family:var(--display);font-weight:900;font-size:24px;text-transform:uppercase;box-shadow:3px 3px 0 var(--ink);transform:rotate(-8deg);z-index:2}
.huck-bubble::after{content:"";position:absolute;right:14px;bottom:-11px;width:16px;height:16px;background:var(--white);border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(35deg)}
.huck-bubble.say{animation:say .45s cubic-bezier(.3,1.7,.5,1)}
@keyframes say{from{scale:.3}to{scale:1}}
.huck-sticker{position:absolute;right:4%;bottom:4%;width:84px;height:84px}

/* the set loop: ball rises off the hands, berry squashes on each touch */
.huck-ball{animation:ballUp 1.5s cubic-bezier(.33,0,.66,1) infinite}
@keyframes ballUp{0%{transform:translateY(0)}45%{transform:translateY(-118px);animation-timing-function:cubic-bezier(.33,0,.66,1)}90%,100%{transform:translateY(0)}}
.huck-ball-spin{transform-box:fill-box;transform-origin:center;animation:spin 1.5s linear infinite}
.huck-body{transform-box:view-box;transform-origin:150px 392px;animation:squash 1.5s ease-in-out infinite}
@keyframes squash{0%,100%{transform:scale(1.05,.95)}12%{transform:scale(.97,1.04) translateY(-4px)}30%,85%{transform:scale(1,1)}}
.huck-shadow{transform-box:fill-box;transform-origin:center;animation:shadow 1.5s ease-in-out infinite}
@keyframes shadow{0%,100%{transform:scaleX(1.08)}50%{transform:scaleX(.92)}}
.huck-eyes{transform-box:fill-box;transform-origin:center;animation:blink 4.2s infinite}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.huck-leaf{transform-box:fill-box;transform-origin:0 100%;animation:leaf 3s ease-in-out infinite}
@keyframes leaf{0%,100%{transform:rotate(0)}50%{transform:rotate(-10deg)}}
.huck-mascot.hop .huck-body{animation:hop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes hop{0%{transform:scale(1.1,.88)}40%{transform:scale(.94,1.08) translateY(-26px)}100%{transform:none}}

.burst-berry{position:fixed;width:18px;height:18px;border-radius:50%;background:var(--berry);border:3px solid var(--ink);pointer-events:none;z-index:60;
  box-shadow:inset 3px 3px 0 rgba(241,236,223,.6)}

.huck-hills{display:block;width:100%;height:96px;margin-top:6px}
.berry-tape{background:var(--volt)}

/* Skills */
.skills{display:grid;grid-template-columns:1fr;gap:16px}
.skill{display:grid;grid-template-columns:72px 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;background:var(--white);border:3px solid var(--ink);border-radius:22px;box-shadow:5px 5px 0 var(--berry);padding:12px 16px}
.skill-ico{grid-row:1/3;width:72px;height:72px;background:var(--volt);border:3px solid var(--ink);border-radius:50%}
.skill h3{margin:0;font-family:var(--display);font-weight:900;font-size:30px;line-height:1;text-transform:uppercase}
.skill p{margin:2px 0 0;color:var(--muted);font-size:15px}
.skill:hover .i-ball,.skill:focus-within .i-ball{animation:tinyhop .5s cubic-bezier(.3,1.6,.5,1)}
.skill .i-ball{transform-box:fill-box;transform-origin:center}
@keyframes tinyhop{50%{transform:translateY(-8px)}}
.berry-checks{border-radius:22px;overflow:hidden}
.berry-checks li::before{width:18px;height:18px;border-radius:50%;transform:none;background:var(--berry);border:3px solid var(--ink)}

/* Season vine */
.vine{position:relative;padding-left:4px}
.vine-line{position:absolute;left:8px;top:6px;bottom:6px;width:40px;height:calc(100% - 12px)}
.vine-line path{stroke-dasharray:1;stroke-dashoffset:0}
.vine-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.vstep{position:relative;display:flex;align-items:center;gap:16px;min-height:62px}
.vberry{flex:none;position:relative;z-index:1;width:48px;height:48px;border-radius:50%;background:var(--berry);border:3px solid var(--ink);box-shadow:inset 6px 6px 0 rgba(241,236,223,.35),3px 3px 0 var(--ink)}
.vberry::before{content:"";position:absolute;top:-9px;left:50%;width:14px;height:12px;margin-left:-7px;background:var(--leaf);border:3px solid var(--ink);border-radius:0 12px 0 12px}
.vstep h3{margin:0;font-family:var(--display);font-weight:900;font-size:26px;line-height:1;text-transform:uppercase}
.vstep p{margin:2px 0 0;color:var(--muted)}
.vstep > div{background:var(--white);border:3px solid var(--ink);border-radius:18px;padding:10px 14px;flex:1}
.js .vine.grow .vine-line path{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.js .vine.grow .vberry{scale:0}
.js .vine.grow.in .vine-line path{transition:stroke-dashoffset 1.6s ease-out;stroke-dashoffset:0}
.js .vine.grow.in .vberry{transition:scale .5s cubic-bezier(.3,1.7,.5,1);scale:1}
.js .vine.grow.in .vstep:nth-child(2) .vberry{transition-delay:.3s}.js .vine.grow.in .vstep:nth-child(3) .vberry{transition-delay:.6s}
.js .vine.grow.in .vstep:nth-child(4) .vberry{transition-delay:.9s}.js .vine.grow.in .vstep:nth-child(5) .vberry{transition-delay:1.2s}
.fine-note{margin:0;font-size:14px;color:var(--muted)}

/* Where we play */
.huck-cards .pcard{border-radius:22px;box-shadow:7px 7px 0 var(--berry)}
.huck-cards .tag{border-radius:999px;background:var(--berry);color:var(--white)}
.huck-cards .rows.facts{border-radius:14px}

/* What to bring */
.bring{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.bring-item{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--white);border:3px solid var(--ink);border-radius:22px;padding:14px 8px;text-align:center;
  font-family:var(--display);font-weight:900;font-size:20px;text-transform:uppercase}
.bring-item svg{width:56px;height:56px}
.bring-item:nth-child(odd){transform:rotate(-1.5deg)}.bring-item:nth-child(even){transform:rotate(1.5deg)}

/* Closing CTA */
.huck-cta{position:relative;margin-top:56px;background:var(--berry);color:var(--white);border-top:6px solid var(--ink);border-bottom:6px solid var(--ink);overflow:hidden}
.huck-cta-in{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px;padding-top:40px;padding-bottom:44px}
.huck-cta h2{margin:0;font-family:var(--display);font-weight:900;font-size:52px;line-height:.88;text-transform:uppercase;color:var(--volt);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:4px 4px 0 var(--ink)}
.huck-cta p{margin:0;color:#E4E0F2;max-width:38ch}
.cta-berries{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle at 50% 50%,rgba(241,236,223,.14) 10px,transparent 11px);background-size:58px 58px;background-position:12px 8px}

@media (min-width:900px){
  .huck-grid{display:grid;grid-template-columns:1fr 380px;gap:30px;align-items:center}
  .huck-title{font-size:116px;flex-direction:row;flex-wrap:wrap}
  .huck-title .hl:first-child{margin-right:0}
  .huck-actions{flex-direction:row}
  .huck-stage{order:0;margin:0}
  .huck-sticker{width:104px;height:104px;right:-4%}
  .huck-mascot{width:340px}
  .skills{grid-template-columns:repeat(3,minmax(0,1fr))}
  .skill{grid-template-columns:1fr;grid-template-rows:auto;justify-items:start;padding:20px}
  .skill-ico{grid-row:auto;width:96px;height:96px;margin-bottom:10px}
  .bring{grid-template-columns:repeat(4,minmax(0,1fr))}
  .vine-list{max-width:620px}
  .huck-cta h2{font-size:84px}
  .huck-cta-in{align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .huck-ball,.huck-ball-spin,.huck-body,.huck-shadow,.huck-eyes,.huck-leaf,.huck-title .hl span{animation:none !important}
  .js .vine.grow .vine-line path{stroke-dashoffset:0}
  .js .vine.grow .vberry{scale:1}
}

.huck-cards.two{grid-template-columns:minmax(0,560px)}
@media (min-width:900px){.huck-cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Red accents so the purple doesn't read as grape */
.huck-dots{background-image:radial-gradient(rgba(241,236,223,.22) 2.2px,transparent 2.6px),radial-gradient(rgba(176,78,98,.55) 2.6px,transparent 3px);background-size:16px 16px,48px 48px;background-position:0 0,8px 8px}
.huck-kicker{box-shadow:3px 3px 0 var(--blush)}
.berry-tape .tape-track span:nth-child(even){color:var(--blush)}
.vine-list .vstep:nth-child(1) .vberry{background:var(--blush)}
.vine-list .vstep:nth-child(2) .vberry{background:var(--ripening)}
.huck-cards .tag{background:var(--blush)}
.huck-cards .pcard{box-shadow:7px 7px 0 var(--berry)}
.skill:nth-child(2){box-shadow:5px 5px 0 var(--blush)}
.huck-cta{border-top-color:var(--blush)}
.cta-berries{background-image:radial-gradient(circle at 50% 50%,rgba(241,236,223,.14) 10px,transparent 11px),radial-gradient(circle at 50% 50%,rgba(176,78,98,.55) 7px,transparent 8px);background-size:58px 58px,116px 116px;background-position:12px 8px,41px 37px}
.burst-berry.red{background:var(--blush)}
/* Photo slider */
.gal{display:flex;flex-direction:column;gap:14px}
.gal-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -18px;padding:14px 18px 28px;scrollbar-width:none;scroll-padding:0 18px}
.gal-track::-webkit-scrollbar{display:none}
.gal-track:focus-visible{outline:3px solid var(--berry);outline-offset:-3px}
.gslide{flex:0 0 78%;max-width:340px;scroll-snap-align:center;margin:0;background:var(--white);border:3px solid var(--ink);border-radius:6px;padding:10px 10px 46px;position:relative;
  box-shadow:6px 6px 0 var(--berry);transform:rotate(-1.5deg)}
.gslide:nth-child(even){transform:rotate(1.5deg)}
.gslide:nth-child(3n+2){box-shadow:6px 6px 0 var(--blush)}
.gslide img,.gph{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border:2px solid var(--ink);border-radius:2px}
.gph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-weight:700;font-size:14px;
  background:repeating-linear-gradient(135deg,#E9E4D6 0 12px,var(--volt) 12px 24px)}
.gph span{width:44px;height:44px;border-radius:50%;background:var(--berry);border:3px solid var(--ink);box-shadow:inset 6px 6px 0 rgba(241,236,223,.35)}
.gslide figcaption{position:absolute;left:12px;right:12px;bottom:10px;font-family:var(--display);font-weight:900;font-size:20px;line-height:1.1;text-transform:uppercase;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gal-ctrl{display:flex;align-items:center;justify-content:center;gap:16px}
.gal-btn{width:50px;height:50px;border-radius:50%;background:var(--berry);color:var(--volt);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.gal-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.gal-btn:disabled{opacity:.35;cursor:default}
.gal-dots{display:flex;gap:8px}
.gal-dots button{width:14px;height:14px;padding:0;border-radius:50%;border:2.5px solid var(--ink);background:var(--white);cursor:pointer}
.gal-dots button[aria-current="true"]{background:var(--blush);transform:scale(1.25)}
@media (min-width:900px){.gslide{flex-basis:320px}}