/* Fonts are self-hosted (assets/fonts/) so no visitor IP is sent to Google. */
@import url('../assets/fonts/fonts.css');

:root{
  --cream:#FFF9EF; --navy:#17345B; --coral:#F2668B; --purple:#8B5CF6;
  --teal:#169B8C; --yellow:#F7C84B; --orange:#F49A3F; --leaf:#79B85A;
  --sky:#A9DDF5; --pink:#F6A7A2; --lavender:#BCA9E8; --rose:#F7C4D4;
  --blue:#4FC3E8; --night:#1B2A52;
  /* Button and link variants of three brand colours, added 2026-09-12.
     The palette is tuned for bands and artwork, where nothing sits on top of it.
     Put text on those same colours and they land in a dead zone: measured
     against both white and navy, coral reached 2.98 and 4.20, teal 3.44 and
     3.63, purple 4.23 and 2.95. Neither text colour clears 4.5 on any of them,
     so a button painted in them was legible to some readers and not others.
     These are the same hues moved the smallest amount that clears the floor,
     and they are used ONLY for buttons and link text, so every band, tile and
     illustration keeps exactly the colour the brand brief specifies.
     Orange, blue and leaf needed no change at all, only navy text instead of
     white, which takes them from about 2.2 to well over 5. */
  --btn-coral:#F37798;   /* navy text,  4.71:1 */
  --btn-teal:#128175;    /* white text, 4.74:1 */
  --btn-purple:#8350F5;  /* white text, 4.73:1 */
  --teal-ink:#127E71; --night2:#121D3B;
  --disp:'Baloo 2',system-ui,sans-serif; --body:'Nunito',system-ui,sans-serif;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--navy);background:var(--cream)}
img{max-width:100%}
a{color:inherit}
/* Visible keyboard focus , a double ring so it reads on cream, on the meadow
   art, and on the navy night footer alike. */
:focus-visible{outline:3px solid var(--navy);outline-offset:3px;
  box-shadow:0 0 0 6px rgba(255,255,255,.92);border-radius:8px}
.ft :focus-visible{outline-color:#fff;box-shadow:0 0 0 6px rgba(23,52,91,.65)}
/* Skip link , lets keyboard and screen-reader users jump the nav */
.skip{position:absolute;left:-9999px;top:0;z-index:1000;background:#fff;color:var(--navy);
  font-family:var(--disp);font-weight:800;padding:12px 20px;border-radius:0 0 12px 0;
  box-shadow:0 4px 12px rgba(23,52,91,.25);text-decoration:none}
.skip:focus{left:0}

/* ---------- header ---------- */
.hd{background:#fff;box-shadow:0 2px 14px rgba(23,52,91,.08);position:sticky;top:0;z-index:50}
.hd .in{max-width:1280px;margin:0 auto;padding:10px 22px;display:flex;align-items:center;gap:26px}
.logo{display:flex;flex-direction:column;line-height:.9;text-decoration:none;position:relative;padding:8px 14px}
.logo::before{content:"";position:absolute;inset:0;background:#fff;border-radius:50% 60% 55% 60%/60% 55% 60% 50%;
  box-shadow:0 3px 10px rgba(23,52,91,.10);z-index:-1}
.logo .a{font-family:var(--disp);font-weight:800;font-size:26px;color:var(--coral)}
.logo .b{font-family:var(--disp);font-weight:800;font-size:20px;color:var(--purple);letter-spacing:.02em}
.nav{margin-left:auto}
.nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0}
.nav a{font-family:var(--disp);font-weight:700;font-size:16.5px;text-decoration:none;color:var(--navy);padding:6px 2px;border-bottom:3px solid transparent}
.nav a:hover,.nav a[aria-current]{color:var(--coral);border-bottom-color:var(--coral)}
/* The club button in the header, which appears on all 31 pages and so is the
   most repeated element on the site. It used to be white on coral, measured
   at 2.98:1 against a 4.5 floor, with the For grown-ups line dropped to 82%
   opacity on top of that. It was the hardest thing on the site to read.
   Now it matches the in-page club buttons exactly: lavender, navy text, navy
   outline. One club button everywhere, and 6.05:1. */
.club-btn{margin-left:8px;background:var(--lavender);color:var(--navy);font-family:var(--disp);font-weight:800;font-size:15.5px;
  text-decoration:none;padding:10px 20px;border-radius:999px;border:3px solid var(--navy);
  box-shadow:0 4px 0 rgba(23,52,91,.3);white-space:nowrap;
  display:inline-flex;align-items:center;gap:8px}
.club-btn:hover{transform:translateY(-2px);background:#CCBDEE}
.cb-tx{display:flex;flex-direction:column;line-height:1.05;text-align:left}
.cb-tx small{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;opacity:1}
.club-cta{background:var(--btn-teal);margin-top:auto}
.club-btn svg{width:16px;height:16px;fill:var(--navy)}
.burger{display:none;margin-left:auto;background:none;border:0;padding:6px;cursor:pointer}
.burger svg{width:30px;height:30px;stroke:var(--navy);stroke-width:2.6;stroke-linecap:round}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden}
.hero .bg{display:block;width:100%;height:auto}
.hero .kibi{position:absolute;left:46.5%;bottom:3.5%;height:56%;transform:translateX(-50%);
  filter:drop-shadow(0 14px 12px rgba(23,52,91,.25))}
.hero .kshadow{position:absolute;left:46.5%;bottom:3%;width:16%;height:3.5%;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(23,52,91,.22),transparent 70%);border-radius:50%}
.hero .copy{position:absolute;left:18.5%;top:11.5%;max-width:26%;display:flex;flex-direction:column;align-items:flex-start}
.hero .copy::before{content:"";position:absolute;inset:-8% -12%;z-index:-1;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.55),rgba(255,255,255,.28) 55%,transparent 75%);
  filter:blur(6px);border-radius:50%}
.hero .wel{font-family:var(--disp);font-weight:800;color:var(--navy);
  font-size:clamp(18px,2.4vw,36px);margin:0}
.hero h1{margin:0;line-height:.92}
.hero h1 .k{display:block;font-family:var(--disp);font-weight:800;color:var(--coral);
  font-size:clamp(38px,5.6vw,84px);text-shadow:0 3px 0 rgba(255,255,255,.65)}
.hero h1 .c{display:block;font-family:var(--disp);font-weight:800;color:var(--purple);
  font-size:clamp(38px,5.6vw,84px);text-shadow:0 3px 0 rgba(255,255,255,.65)}
.hero .sub{font-weight:700;color:var(--navy);font-size:clamp(13px,1.35vw,19px);max-width:24ch;
  margin:.9em 0 1.2em;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.hero .btns{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.hbtn{display:inline-flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:800;
  font-size:clamp(13px,1.25vw,18px);color:#fff;text-decoration:none;padding:.75em 1.5em;border-radius:999px;
  box-shadow:0 5px 0 rgba(23,52,91,.22);margin:0 12px 12px 0}
.hbtn:hover{transform:translateY(-2px)}
.hbtn svg{width:1.15em;height:1.15em;fill:#fff}
.hbtn.pink{background:var(--btn-coral);color:var(--navy)} .hbtn.yellow{background:var(--orange);color:var(--navy)}

/* ---------- find banner ---------- */
.find{padding:56px 0 158px;background:linear-gradient(180deg,#FFF3D7 0%,var(--cream) 46%);
  position:relative}
.find .cloud{position:absolute;width:clamp(120px,14vw,210px);opacity:.9;z-index:1}
.find .cl1{left:3%;top:104px}
.find .cl2{right:4%;top:158px;transform:scaleX(-1)}
.find .hills{position:absolute;left:0;right:0;bottom:0;width:100%;height:200px;z-index:0}
.ribbon{max-width:760px;margin:-92px auto 44px;position:relative;z-index:5;background:var(--yellow);
  border-radius:22px;padding:18px 30px;text-align:center;rotate:-1.2deg;
  box-shadow:0 5px 0 #E8B33C,0 14px 26px rgba(23,52,91,.14);
  display:flex;align-items:center;justify-content:center;gap:16px}
.ribbon::before,.ribbon::after{content:"";position:absolute;top:15px;width:0;height:0;z-index:-1;
  border:24px solid #EDB841}
.ribbon::before{left:-32px;border-left-color:transparent}
.ribbon::after{right:-32px;border-right-color:transparent}
.ribbon h2{margin:0;font-family:var(--disp);font-weight:800;font-size:clamp(20px,2.6vw,30px);color:var(--navy)}
.ribbon svg{width:26px;height:26px;fill:var(--coral);flex:none}
.cards{max-width:1220px;margin:0 auto;padding:0 22px;display:grid;grid-template-columns:repeat(5,1fr);gap:20px;
  position:relative;z-index:2}
.card{border-radius:26px;padding:26px 18px 22px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;
  border:3px solid #fff;box-shadow:0 8px 20px rgba(23,52,91,.11)}
.card .ic{width:74px;height:74px;border-radius:50%;background:#fff;display:grid;place-items:center;
  box-shadow:0 4px 10px rgba(23,52,91,.10)}
.card .ic svg{width:44px;height:44px}
.card h3{margin:4px 0 0;font-family:var(--disp);font-weight:800;font-size:20px}
.card p{margin:0;font-size:14.5px;font-weight:600;line-height:1.45;opacity:.9}
.card .go{margin-top:auto;display:inline-block;font-family:var(--disp);font-weight:800;font-size:14.5px;color:#fff;
  text-decoration:none;padding:9px 22px;border-radius:999px;box-shadow:0 4px 0 rgba(23,52,91,.18)}
.card .go:hover{transform:translateY(-2px)}
.card.c1{background:#FCE4EC}.card.c1 .go{background:var(--btn-coral);color:var(--navy)}
.card.c2{background:#DDF1FB}.card.c2 .go{background:var(--blue);color:var(--navy)}
.card.c3{background:#FFF3D6}.card.c3 .go{background:var(--orange);color:var(--navy)}
.card.c4{background:#E4F2DC}.card.c4 .go{background:var(--leaf);color:var(--navy)}
.card.c5{background:#EAE3F8}.card.c5 .go{background:var(--btn-purple)}

/* ---------- meet row ---------- */
.meet{background:linear-gradient(180deg,#E2F0CF 0%,#F3F8EA 26%,#EAF4E1 78%);padding:26px 0 118px;position:relative;overflow:hidden}
.meet .grass{position:absolute;left:0;right:0;bottom:0;width:100%;height:88px;z-index:0}
.meet .in{max-width:1220px;margin:0 auto;padding:0 22px;display:grid;grid-template-columns:1.05fr 1fr 1.05fr;gap:26px;align-items:stretch;
  position:relative;z-index:2}
.pod{background:#fff;border-radius:28px;box-shadow:0 10px 24px rgba(23,52,91,.10);padding:30px 26px;display:flex;flex-direction:column;align-items:center;text-align:center}
.pod h2{font-family:var(--disp);font-weight:800;font-size:clamp(22px,2.4vw,30px);margin:0 0 10px}
.pod p{font-weight:600;line-height:1.55;margin:0 0 14px}
.pod .kimg{height:190px;margin:6px 0 4px;filter:drop-shadow(0 8px 8px rgba(23,52,91,.18))}
.pbtn{display:inline-block;font-family:var(--disp);font-weight:800;color:#fff;text-decoration:none;
  padding:11px 26px;border-radius:999px;box-shadow:0 4px 0 rgba(23,52,91,.18);margin-top:auto}
.pbtn:hover{transform:translateY(-2px)}
/* Soft buttons for pale bands. .pbtn alone is white text with no fill,
   which disappears on cream, so a button on a light background needs one of these. */
.pbtn.soft-pink{background:#F9CFDC;color:var(--navy);box-shadow:0 4px 0 rgba(23,52,91,.22)}
.pbtn.soft-pink:hover{background:#FCDEE7}
.pbtn.soft-green{background:#CFE7BC;color:var(--navy);box-shadow:0 4px 0 rgba(23,52,91,.22)}
.pbtn.soft-green:hover{background:#DDEFCE}
/* The club button.
   The newsletter is the only conversion on the site, so this one has to be
   findable on every band it lands on. Fill alone could not do that: the bands
   run cream, white, sky, teal, orange and lavender, and any fill that separates
   from one of those sinks into another. Measured before this existed, the
   worst case was a bare .pbtn on the sky band with no fill at all, and the
   homepage one sat at 3.44:1, under the 4.5 floor the accessibility statement
   promises.
   So the outline carries the job, not the color. Navy, 3px, the same outline
   every drawn thing here already has, which is why it reads as part of the
   same hand rather than a UI control dropped on top. Fill changes per band;
   the outline and the navy text are the constants. */
.pbtn.club,.btn.club{border:3px solid var(--navy);color:var(--navy);
  box-shadow:0 4px 0 rgba(23,52,91,.3)}
.pbtn.club{background:var(--lavender)}
.pbtn.club:hover,.btn.club:hover{filter:brightness(1.05)}
/* On the lavender panels a lavender button would disappear, so there it takes
   the sunny yellow those panels already use. */
.pod.join .pbtn.club,.cta-band .btn.club{background:var(--yellow)}
.pod.hi .pbtn{background:var(--btn-coral);color:var(--navy)}
.pod.new{background:#FDF6E3}
.pod.new .sign{background:#8B5E3C;color:#fff;font-family:var(--disp);font-weight:800;font-size:clamp(18px,2vw,24px);
  padding:10px 26px;border-radius:14px;box-shadow:0 4px 0 rgba(23,52,91,.25);margin-bottom:18px;position:relative}
.pod.new .sign::before{content:"";position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:8px;height:14px;background:#8B5E3C}
.vid{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 6px 16px rgba(23,52,91,.18);display:block}
.vid img{display:block;width:100%;height:180px;object-fit:cover}
.vid .play{position:absolute;inset:0;display:grid;place-items:center}
.vid .play span{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;
  box-shadow:0 4px 14px rgba(23,52,91,.3);transition:transform .2s}
.vid:hover .play span{transform:scale(1.1)}
.vid .play svg{width:26px;height:26px;fill:var(--teal);margin-left:4px}
.pod.new .pbtn{background:var(--btn-teal)}
.pod.join{background:var(--lavender);position:relative;overflow:hidden}
.pod.join::before{content:"";position:absolute;top:-56px;left:50%;transform:translateX(-50%);
  border-left:130px solid transparent;border-right:130px solid transparent;border-bottom:70px solid #9B7FDB;opacity:.5}
.pod.join h2{color:#fff;text-shadow:0 2px 0 rgba(23,52,91,.25)}
.pod.join p{color:#fff;font-weight:700}
.jform{width:100%;display:flex;flex-direction:column;gap:12px;margin-top:6px}
.jform input[type=email]{width:100%;padding:13px 18px;border-radius:14px;border:0;font-family:var(--body);
  font-weight:700;font-size:15px;color:var(--navy);box-shadow:inset 0 2px 6px rgba(23,52,91,.12)}
.jform button{background:var(--yellow);color:var(--navy);border:0;cursor:pointer;font-family:var(--disp);
  font-weight:800;font-size:17px;padding:12px;border-radius:999px;box-shadow:0 4px 0 rgba(23,52,91,.2)}
.jform button:hover{transform:translateY(-2px)}
.grownups{display:inline-block;background:rgba(255,255,255,.9);color:var(--navy);font-family:var(--disp);
  font-weight:800;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;margin-bottom:10px}
.club-note{font-size:12.5px;font-weight:700;color:#fff;opacity:.9;margin:10px 0 0;line-height:1.45}
.soc-note{font-size:13px;font-weight:700;opacity:.75;margin:0 0 8px}
.legal-id p{margin:0}
.legal-id .addr{font-size:12px;opacity:.62;margin-top:3px}
.join-ok{display:none;color:#fff;font-weight:800;margin-top:10px}

/* ---------- footer ---------- */
.ft{background:linear-gradient(180deg,var(--night),var(--night2));color:#fff;position:relative;overflow:hidden}
.ft .wave{display:block;width:100%;margin-bottom:-4px;background:#EAF4E1}
/* padding-bottom reserves a clear band for sleeping Kibi, so he never lands on the social row */
.ft .in{max-width:1220px;margin:0 auto;padding:26px 22px 128px;display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:30px;position:relative;z-index:2}
.ft h4{font-family:var(--disp);font-weight:800;font-size:19px;margin:0 0 10px;display:flex;align-items:center;gap:8px}
.ft h4 svg{width:18px;height:18px;fill:var(--coral)}
.ft p{margin:0;font-weight:600;line-height:1.6;opacity:.92;font-size:14.5px}
.ft ul{list-style:none;margin:0;padding:0}
.ft li{margin:6px 0}
.ft a{color:#fff;text-decoration:none;font-weight:700;font-size:14.5px;opacity:.92}
.ft a:hover{opacity:1;text-decoration:underline}
.soc{display:flex;gap:12px;margin-top:6px}
.soc a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;opacity:1}
.soc svg{width:20px;height:20px;fill:#fff}
.soc{flex-wrap:wrap}
.soc .ig{background:#D6407A}.soc .yt{background:#E23B3B}.soc .pi{background:#C4302B}.soc .fb{background:#3B5998}
.soc .tt{background:#fff}.soc .tt svg{fill:#010101}
.soc .tw{background:#fff}.soc .tw svg{fill:#000}
.ft .kibi-night{position:absolute;right:4%;bottom:96px;height:98px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.35));z-index:1;opacity:.97}
.ft .cloudpuff{position:absolute;right:3%;bottom:74px;width:172px;height:42px;background:#2A3C6E;border-radius:30px;z-index:0}
.ft .cloudpuff::before,.ft .cloudpuff::after{content:"";position:absolute;background:#2A3C6E;border-radius:50%}
.ft .cloudpuff::before{width:70px;height:70px;top:-30px;left:26px}
.ft .cloudpuff::after{width:52px;height:52px;top:-20px;right:34px}
.star{position:absolute;fill:#F7C84B;opacity:.9}
.moon{position:absolute;right:12%;top:10%;width:58px;filter:drop-shadow(0 0 16px rgba(247,200,75,.35));z-index:1}
.ft .legal{border-top:1px solid rgba(255,255,255,.16);position:relative;z-index:2}
.ft .legal .in2{max-width:1220px;margin:0 auto;padding:14px 22px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center}
.ft .legal p{font-size:13px;opacity:.75}
.ft .legal ul{display:flex;gap:20px;list-style:none;margin:0;padding:0}
.ft .legal a{font-size:13px}

/* ---------- gentle motion & interactivity ---------- */
@media (prefers-reduced-motion: no-preference){
  /* Kibi strolls in place */
  .hero .kibi{animation:kibiStroll 4.6s ease-in-out infinite}
  @keyframes kibiStroll{
    0%,100%{transform:translateX(-50%) translateY(0) rotate(0)}
    50%{transform:translateX(-50%) translateY(-1.3%) rotate(-1.2deg)}
  }
  .hero .kibi.hop{animation:kibiHop .65s ease}
  @keyframes kibiHop{
    0%,100%{transform:translateX(-50%) translateY(0)}
    35%{transform:translateX(-50%) translateY(-7%) scale(1.03)}
    65%{transform:translateX(-50%) translateY(-1%) scale(.99)}
  }
  /* drifting butterflies */
  .bfly{animation:drift var(--t,20s) ease-in-out infinite alternate}
  .bfly .wings{animation:flap 1.1s ease-in-out infinite alternate;transform-origin:center}
  @keyframes drift{
    0%{transform:translate(0,0) rotate(-4deg)}
    35%{transform:translate(9vw,-3vw) rotate(5deg)}
    70%{transform:translate(3vw,-6vw) rotate(-3deg)}
    100%{transform:translate(12vw,-2vw) rotate(4deg)}
  }
  @keyframes flap{from{transform:scaleX(1)}to{transform:scaleX(.55)}}
  /* heartbeat on club buttons + ribbon hearts */
  .club-btn svg,.ribbon svg{animation:beat 2.6s ease-in-out infinite}
  @keyframes beat{0%,20%,100%{transform:scale(1)}8%{transform:scale(1.25)}14%{transform:scale(1.08)}}
  /* footer stars twinkle + Kibi floats on his cloud */
  .ft .star{animation:tw 2.8s ease-in-out infinite alternate}
  .ft .star:nth-of-type(2){animation-delay:.5s}.ft .star:nth-of-type(3){animation-delay:1s}
  .ft .star:nth-of-type(4){animation-delay:1.4s}.ft .star:nth-of-type(5){animation-delay:.8s}
  .ft .star:nth-of-type(6){animation-delay:1.9s}.ft .star:nth-of-type(7){animation-delay:.3s}
  @keyframes tw{from{opacity:.35;transform:scale(.85)}to{opacity:1;transform:scale(1.1)}}
  .ft .kibi-night,.ft .cloudpuff{animation:floaty 5.5s ease-in-out infinite}
  .find .cloud{animation:floaty 7.5s ease-in-out infinite}
  .find .cl2{animation-duration:9.5s;animation-delay:-3.5s}
  .find .hill-kibi{animation:floaty 5.2s ease-in-out infinite}
  .find .bee{animation:beeBob 3.8s ease-in-out infinite}
  /* fireflies at dusk */
  .fly{animation:fireflyDrift var(--ft,9s) ease-in-out infinite alternate}
  @keyframes fireflyDrift{0%{translate:0 0;opacity:.3}30%{opacity:.95}60%{opacity:.5}100%{translate:var(--fx,14px) var(--fy,-10px);opacity:.9}}
  /* the night sky celebrates while the goodbye song plays */
  .ft.singing .star{animation-duration:1.4s}
  .ft.singing .fly{animation-duration:4.5s!important}
  /* soft page-turn veil */
  .page-veil{transition:opacity .32s ease}
  /* the world wakes up (first visit per tab) */
  .wake .hd{animation:wakeFade .8s ease both}
  .wake .hero .bg,.wake .hero .hem{animation:wakeFade 1s ease both}
  .wake .hero .kshadow{animation:wakeFade .9s .5s ease backwards}
  .wake .hero .copy::before{animation:wakeFade 1s .9s ease backwards}
  .wake .hero .kibi{animation:kibiWake 1s .45s ease backwards, kibiStroll 4.6s 1.6s ease-in-out infinite}
  .wake .hero .wel{animation:wakeRise .65s .95s ease backwards}
  .wake .hero h1{animation:wakeRise .65s 1.1s ease backwards}
  .wake .hero .sub{animation:wakeRise .65s 1.25s ease backwards}
  .wake .hero .btns{animation:wakeRise .65s 1.4s ease backwards}
  @keyframes wakeFade{from{opacity:0}}
  @keyframes wakeRise{from{opacity:0;transform:translateY(14px)}}
  @keyframes kibiWake{from{opacity:0;transform:translateX(-50%) translateY(3%)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
  @keyframes beeBob{0%,100%{translate:0 0;rotate:0deg}35%{translate:6px -10px;rotate:-5deg}70%{translate:-4px -4px;rotate:4deg}}
  @keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -7px}}
  /* hidden ladybug attention ring (until found) */
  .bugfind::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:3px solid rgba(255,255,255,.85);
    animation:ring 3.2s ease-out infinite}
  .bugfind.found::after{animation:none;opacity:0}
  @keyframes ring{0%{transform:scale(.7);opacity:0}12%{opacity:.9}60%{transform:scale(1.5);opacity:0}100%{opacity:0}}
}
/* hover play (transitions run even with reduced motion kept subtle) */
.card,.card .ic,.pod,.hbtn,.club-btn,.pbtn,.card .go,.soc a{transition:transform .22s ease,box-shadow .22s ease}
.card:hover{transform:translateY(-8px)}
.card:hover .ic{transform:scale(1.12) rotate(-5deg)}
.soc a:hover{transform:scale(1.15) rotate(-6deg)}
.vid{transition:transform .22s ease}.vid:hover{transform:scale(1.02)}
/* scroll reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease;transition-delay:var(--d,0s)}
.reveal.shown{opacity:1;transform:none}
/* butterflies overlay */
.bfly{position:absolute;width:clamp(30px,3.4vw,52px);z-index:4;pointer-events:none}
.bfly.b1{left:60%;top:58%;--t:22s}
.bfly.b2{left:55%;top:30%;--t:26s;animation-delay:-8s}
.bfly.b3{left:76%;top:14%;--t:24s;animation-delay:-6s}
/* storybook scalloped hem where the hero meets the next page */
.hero .hem{position:absolute;left:0;right:0;bottom:-2px;width:100%;height:44px;z-index:2;pointer-events:none}
/* mid-page life: Kibi keeps strolling, friends come along */
.find .hill-kibi{position:absolute;right:8%;bottom:16px;height:98px;z-index:1;
  filter:drop-shadow(0 6px 6px rgba(23,52,91,.2))}
.find .bee{position:absolute;left:11%;bottom:52px;width:44px;z-index:1}
.meet .snail{position:absolute;right:9%;bottom:22px;width:58px;z-index:1}
.mailprop{width:58px;margin:0 0 8px}
.shoot{position:absolute;opacity:.85}
/* storybook layer: narration, wonder sign, fireflies, page veil */
.storyline{font-style:italic;font-weight:700;text-align:center;color:var(--navy);opacity:.72;
  font-size:clamp(14px,1.35vw,17.5px);max-width:60ch;margin:-24px auto 38px;position:relative;z-index:2;padding:0 22px}
.meet .storyline{margin:0 auto 30px;padding-top:2px}
.ft .storyline{color:#fff;opacity:.8;margin:22px auto -4px;z-index:2}
.wonder-sign{position:absolute;right:14.5%;bottom:30px;z-index:1;rotate:-1.5deg}
.wonder-sign .board{background:#8B5E3C;border-radius:12px;padding:10px 16px 11px;box-shadow:0 4px 0 rgba(23,52,91,.25);
  display:flex;flex-direction:column;gap:2px;max-width:240px}
.wonder-sign .ws-title{font-family:var(--disp);font-weight:800;font-size:12.5px;color:var(--yellow);letter-spacing:.05em;text-transform:uppercase}
.wonder-sign .ws-text{font-family:var(--disp);font-weight:700;font-size:14.5px;color:#FFF6E6;line-height:1.35}
.wonder-sign::after{content:"";position:absolute;left:50%;top:99%;transform:translateX(-50%);width:9px;height:28px;background:#7A5232;border-radius:0 0 3px 3px;z-index:-1}
.fly{position:absolute;width:7px;height:7px;border-radius:50%;background:#FFE9A8;
  box-shadow:0 0 10px 3px rgba(255,233,168,.5);opacity:.8;z-index:1}
.page-veil{position:fixed;inset:0;background:var(--cream);z-index:999;opacity:0;pointer-events:none}
.page-veil.on{opacity:1;pointer-events:auto}
.songpill{position:relative;display:inline-flex;align-items:center;gap:11px;background:#fff;border:3px solid var(--navy);
  border-radius:999px;padding:7px 20px 7px 8px;cursor:pointer;margin-top:4px;text-align:left;
  box-shadow:0 4px 0 rgba(23,52,91,.2);transition:transform .2s ease}
.songpill:hover{transform:translateY(-2px)}
.songpill .sp-ic{width:38px;height:38px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;flex:none;
  transition:box-shadow .3s ease}
.songpill .sp-ic svg{width:19px;height:19px;fill:var(--navy)}
.songpill .pause{display:none}
.songpill.playing .note{display:none}
.songpill.playing .pause{display:block}
.songpill .sp-tx{display:flex;flex-direction:column;line-height:1.15}
.songpill .sp-tx strong{font-family:var(--disp);font-weight:800;font-size:15.5px;color:var(--navy)}
.songpill .sp-tx em{font-style:normal;font-weight:700;font-size:11.5px;color:var(--navy);opacity:.65}
.songpill.playing .sp-ic{box-shadow:0 0 0 4px rgba(247,200,75,.45)}
.songpill.night{background:#223463;border-color:#EAF0FF}
.songpill.night .sp-ic{background:var(--lavender)}
.songpill.night .sp-tx strong{color:#fff}
.songpill.night .sp-tx em{color:#fff;opacity:.7}
.songpill.night.playing .sp-ic{box-shadow:0 0 0 4px rgba(188,169,232,.4)}
.ft-songrow{position:relative;z-index:2;display:flex;justify-content:center;margin:16px 0 2px;padding:0 22px}
.ytlink{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-family:var(--disp);font-weight:800;
  font-size:13.5px;color:var(--navy);opacity:.78;text-decoration:none;transition:opacity .2s ease}
.ytlink:hover{opacity:1;text-decoration:underline}
.ytlink svg{width:19px;height:19px;fill:#E23B3B;flex:none}
/* Kibi speech bubble */
.say{position:absolute;left:52%;bottom:67%;transform:translateX(-50%) scale(.7);transform-origin:bottom center;
  background:#fff;border:3px solid var(--navy);border-radius:16px;padding:.55em 1em;
  font-family:var(--disp);font-weight:800;color:var(--navy);font-size:clamp(13px,1.5vw,20px);
  box-shadow:0 6px 14px rgba(23,52,91,.2);opacity:0;pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;z-index:6;white-space:nowrap}
.say::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:10px solid transparent;border-top-color:#fff}
.say::before{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(3px);
  border:12px solid transparent;border-top-color:var(--navy);z-index:-1}
.say.show{opacity:1;transform:translateX(-50%) scale(1)}
/* Kibi is tappable */
.hero .kibi{cursor:pointer}
/* hidden ladybug hotspot */
.bugfind{position:absolute;left:6.2%;top:81%;width:5%;aspect-ratio:1;border-radius:50%;
  background:transparent;border:0;cursor:pointer;z-index:5;padding:0}
/* The ladybug stays exactly the size she is drawn, and the hint ring drawn by
   ::after stays pinned to her. This only widens the invisible area a finger can
   land on, because at 5% of the hero she is about 19px on a phone and a small
   hand cannot reliably hit that. Nothing about how she looks changes. */
.bugfind::before{content:"";position:absolute;inset:-13px;border-radius:50%}
.sparkhost{position:absolute;inset:0;z-index:7;pointer-events:none;overflow:hidden}
.spark{position:absolute;width:16px;height:16px;fill:var(--yellow);opacity:0}

/* ---------- responsive ---------- */
@media(max-width:1060px){
  .nav{display:none}.burger{display:block}
  .cards{grid-template-columns:repeat(3,1fr)}
  .meet .in{grid-template-columns:1fr;max-width:640px}
  .ft .in{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .hero .copy{position:static;max-width:none;padding:22px 22px 6px;text-align:center;align-items:center}
  .hero .copy::before{display:none}
  .say{bottom:58%;font-size:14px}
  .bfly.b2{display:none}
  .hero .sub{margin-left:auto;margin-right:auto}
  .hero{background:linear-gradient(180deg,#CDEFFB,var(--cream))}
  .hero .scene{position:relative}
  .hero .kibi{height:52%;left:44%}
  .hero .kshadow{left:44%}
  .hero .btns{flex-direction:row;justify-content:center;flex-wrap:wrap}
  .ribbon{margin-top:26px}
  .cards{grid-template-columns:1fr 1fr}
  .find .hill-kibi{height:74px;bottom:12px;right:5%}
  .find .bee{width:34px;bottom:40px}
  .meet .snail{width:46px}
  .bfly.b3{display:none}
  .wonder-sign{position:static;rotate:none;margin:26px auto 0;display:flex;justify-content:center}
  .wonder-sign::after{display:none}
  .ft .in{grid-template-columns:1fr;padding-bottom:18px}
  .ft .kibi-night{display:none}.ft .cloudpuff{display:none}
}
/* Gentle mode , visitors whose device asks for reduced motion still get a living
   page: soft fades and glows only, nothing travels, bounces, or drifts. */
@media (prefers-reduced-motion:reduce){
  .hero .kibi,.hero .kibi.hop,.bfly,.bfly .wings,.club-btn svg,.ribbon svg,
  .ft .kibi-night,.ft .cloudpuff,.find .cloud,.find .hill-kibi,.find .bee,.fly{animation:none!important}
  .card:hover,.card:hover .ic,.soc a:hover,.vid:hover,.hbtn:hover,
  .club-btn:hover,.pbtn:hover,.card .go:hover,.jform button:hover{transform:none}
  .reveal{transform:none;transition:opacity .9s ease}
  .say{transform:translateX(-50%);transition:opacity .35s ease}
  .say.show{transform:translateX(-50%)}
  .ft .star{animation:twSoft 3.8s ease-in-out infinite alternate}
  @keyframes twSoft{from{opacity:.4}to{opacity:.95}}
  .bugfind::after{content:"";position:absolute;inset:-6px;border-radius:50%;
    border:3px solid rgba(255,255,255,.8);animation:ringSoft 4.2s ease-in-out infinite alternate}
  .bugfind.found::after{animation:none;opacity:0}
  @keyframes ringSoft{from{opacity:.2}to{opacity:.75}}
}

/* ================= INNER PAGES (club + legal) ================= */
.page-head{background:linear-gradient(180deg,#CDEFFB,var(--cream));padding:52px 22px 44px;text-align:center;position:relative;overflow:hidden}
.page-head .wrap{max-width:760px;margin:0 auto;position:relative;z-index:2}
.page-head h1{font-family:var(--disp);font-weight:800;font-size:clamp(30px,4.6vw,52px);margin:6px 0 10px;color:var(--navy)}
.page-head .lead{font-weight:700;font-size:clamp(15px,1.7vw,20px);margin:0 auto;max-width:52ch;line-height:1.55}
.page-head .eff{font-weight:700;font-size:13.5px;opacity:.7;margin-top:14px}
.page-head .grownups{background:#fff;box-shadow:0 3px 8px rgba(23,52,91,.12)}
.page-head .hem{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:34px;display:block;z-index:1}

.wrap{max-width:820px;margin:0 auto;padding:0 22px}
.prose{padding:48px 0 64px}
.prose h2{font-family:var(--disp);font-weight:800;font-size:clamp(21px,2.5vw,28px);margin:38px 0 12px;color:var(--navy)}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--disp);font-weight:800;font-size:18px;margin:24px 0 8px}
.prose .big{font-size:17.5px;line-height:1.7;font-weight:700}
.prose p{font-weight:600;line-height:1.72;margin:0 0 15px;font-size:16px}
/* A single word standing as its own paragraph. "Room." on the Treehouse is a
   beat rather than a sentence, so it gets air around it and a little weight.
   Without this it reads as a stray line that lost its paragraph. */
.prose p.beat{font-family:var(--disp);font-weight:800;font-size:clamp(20px,2.4vw,26px);
  color:var(--teal-ink);margin:26px 0 30px}
.prose ul{margin:0 0 16px;padding-left:22px}
.prose li{font-weight:600;line-height:1.7;margin-bottom:9px}
.prose strong{font-weight:800}
.prose a{color:var(--teal-ink);font-weight:800}
.prose .callout{background:#FFF3D7;border-radius:18px;padding:20px 24px;margin:26px 0;
  box-shadow:0 4px 14px rgba(23,52,91,.07)}
.prose .callout p:last-child{margin-bottom:0}
.prose .addr{font-weight:700;line-height:1.7}

/* club page */
.club-grid{max-width:1060px;margin:0 auto;padding:52px 22px 68px;display:grid;
  grid-template-columns:1fr 1fr;gap:30px;align-items:start}
.offer-card,.signup-card{border-radius:28px;padding:32px 28px;box-shadow:0 10px 26px rgba(23,52,91,.10)}
.offer-card{background:#FDF6E3;text-align:center}
.offer-card img{height:170px;width:auto;margin-bottom:6px;filter:drop-shadow(0 8px 8px rgba(23,52,91,.16))}
.offer-card h2,.signup-card h2{font-family:var(--disp);font-weight:800;font-size:clamp(20px,2.3vw,26px);margin:8px 0 10px}
.offer-card p,.signup-card p{font-weight:600;line-height:1.62;margin:0 0 12px}
.signup-card{background:var(--lavender);color:#fff}
.signup-card h2{color:#fff;text-shadow:0 2px 0 rgba(23,52,91,.22)}
.signup-card p{color:#fff}
.signup-card .fine{font-size:13px;opacity:.92;font-weight:700;margin-top:16px;
  border-top:1px solid rgba(255,255,255,.3);padding-top:14px}
.steps{list-style:none;margin:0 0 4px;padding:0;counter-reset:s}
.steps li{position:relative;padding-left:34px;margin-bottom:12px;font-weight:700;line-height:1.55;color:#fff}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:-1px;
  width:24px;height:24px;border-radius:50%;background:var(--yellow);color:var(--navy);
  font-family:var(--disp);font-weight:800;font-size:14px;display:grid;place-items:center}
@media(max-width:860px){.club-grid{grid-template-columns:1fr;max-width:560px}}

/* ================= INNER PAGE COMPONENTS ================= */
.band{padding:52px 0 60px}
.band.cream{background:var(--cream)}
.band.mint{background:linear-gradient(180deg,#EAF6EF,#F4FAF3)}
.band.sky{background:linear-gradient(180deg,#E4F4FD,#F3FAFE)}
.band.peach{background:linear-gradient(180deg,#FFF0DF,#FFF8F0)}
.band.rose{background:linear-gradient(180deg,#FDEEF3,#FFF7FA)}
.band-head{max-width:760px;margin:0 auto 34px;padding:0 22px;text-align:center}
.band-head h2{font-family:var(--disp);font-weight:800;font-size:clamp(24px,3.2vw,36px);margin:0 0 10px}
.band-head p{font-weight:600;line-height:1.6;margin:0;opacity:.88;font-size:16px}

/* Tracks are capped rather than 1fr, and the grid centres.
   With auto-fit and a 1fr maximum, a row holding a single tile collapsed its
   two empty tracks and stretched that one card to 965px, so one game took up
   as much room as three and looked like a mistake. A capped track keeps every
   card the same size whether its row holds one or three. */
.tiles{max-width:1180px;margin:0 auto;padding:0 22px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(258px,340px));gap:22px;
  justify-content:center}
.tiles.two{max-width:900px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.tile{background:#fff;border-radius:24px;padding:26px 22px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  box-shadow:0 8px 20px rgba(23,52,91,.09);border-top:6px solid var(--rose);
  transition:transform .22s ease,box-shadow .22s ease}
a.tile{text-decoration:none;color:inherit}
a.tile:hover{transform:translateY(-6px);box-shadow:0 14px 28px rgba(23,52,91,.13)}
.tile .ic{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:var(--cream);flex:none}
.tile .ic svg{width:36px;height:36px;stroke:var(--navy);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* illustrated icons paint themselves, so let their own fills through */
.tile .ic.art{width:76px;height:76px;background:transparent!important;box-shadow:none}
.tile .ic.art svg{width:76px;height:76px;stroke:none;fill:none;stroke-width:0}
.tile h3{font-family:var(--disp);font-weight:800;font-size:19px;margin:4px 0 0}
.tile p{margin:0;font-size:14.5px;font-weight:600;line-height:1.5;opacity:.9}
.tile .meta{font-size:12.5px;font-weight:700;opacity:.6;margin-top:2px}
.tile .go{margin-top:auto;padding-top:12px}
.tile .go span{display:inline-block;font-family:var(--disp);font-weight:800;font-size:14px;color:#fff;
  padding:9px 20px;border-radius:999px;box-shadow:0 4px 0 rgba(23,52,91,.18);background:var(--teal)}
.t-pink{border-top-color:var(--coral)} .t-pink .ic{background:#FCE4EC} .t-pink .go span{background:var(--btn-coral);color:var(--navy)}
.t-blue{border-top-color:var(--blue)} .t-blue .ic{background:#DDF1FB} .t-blue .go span{background:var(--blue);color:var(--navy)}
.t-yellow{border-top-color:var(--yellow)} .t-yellow .ic{background:#FFF3D6} .t-yellow .go span{background:var(--orange);color:var(--navy)}
.t-green{border-top-color:var(--leaf)} .t-green .ic{background:#E4F2DC} .t-green .go span{background:var(--leaf);color:var(--navy)}
.t-purple{border-top-color:var(--lavender)} .t-purple .ic{background:#EAE3F8} .t-purple .go span{background:var(--btn-purple)}
.t-teal{border-top-color:var(--teal)} .t-teal .ic{background:#D8F0EC} .t-teal .go span{background:var(--btn-teal)}

.chips{max-width:900px;margin:0 auto 30px;padding:0 22px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.chip{background:#fff;border-radius:999px;padding:9px 18px;font-family:var(--disp);font-weight:800;
  font-size:14px;box-shadow:0 3px 8px rgba(23,52,91,.09)}

.pull{max-width:800px;margin:0 auto;padding:30px 34px;background:#FFF3D7;border-radius:24px;
  text-align:center;font-family:var(--disp);font-weight:800;font-size:clamp(17px,2.2vw,23px);
  line-height:1.5;box-shadow:0 6px 18px rgba(23,52,91,.08)}
.pull.soft{background:var(--rose)}

.cta-band{max-width:900px;margin:0 auto;padding:36px 30px;background:var(--lavender);border-radius:28px;
  text-align:center;color:#fff;box-shadow:0 10px 26px rgba(23,52,91,.12)}
.cta-band h2{font-family:var(--disp);font-weight:800;font-size:clamp(22px,2.8vw,30px);margin:0 0 8px;
  color:#fff;text-shadow:0 2px 0 rgba(23,52,91,.22)}
.cta-band p{font-weight:700;margin:0 0 18px;line-height:1.6}
.cta-band .btn{display:inline-block;background:var(--yellow);color:var(--navy);font-family:var(--disp);
  font-weight:800;font-size:17px;text-decoration:none;padding:13px 30px;border-radius:999px;
  box-shadow:0 4px 0 rgba(23,52,91,.22);transition:transform .2s ease}
.cta-band .btn:hover{transform:translateY(-2px)}
.cta-band .grownups{background:rgba(255,255,255,.92);margin-bottom:12px}

/* contact form, parent facing */
.cform{max-width:660px;margin:0 auto;background:#fff;border-radius:26px;padding:32px 30px;
  box-shadow:0 10px 26px rgba(23,52,91,.10)}
.cform label{display:block;font-family:var(--disp);font-weight:800;font-size:14.5px;margin:16px 0 6px}
.cform input,.cform select,.cform textarea{width:100%;padding:12px 15px;border-radius:14px;
  border:2px solid #E7E0D3;font-family:var(--body);font-weight:600;font-size:15px;color:var(--navy);background:#FFFDF9}
.cform textarea{min-height:130px;resize:vertical}
.cform input:focus,.cform select:focus,.cform textarea:focus{border-color:var(--teal);outline:none}
.cform button{margin-top:20px;width:100%;background:var(--btn-coral);color:var(--navy);border:0;cursor:pointer;
  font-family:var(--disp);font-weight:800;font-size:17px;padding:14px;border-radius:999px;
  box-shadow:0 4px 0 rgba(23,52,91,.2);transition:transform .2s ease}
.cform button:hover{transform:translateY(-2px)}
.cform .consent{display:flex;gap:10px;align-items:flex-start;margin-top:18px;font-weight:600;font-size:14px;line-height:1.5}
.cform .consent input{width:auto;margin-top:3px;flex:none}
.form-ok{display:none;margin-top:16px;background:#E4F2DC;border-radius:14px;padding:14px 16px;
  font-weight:700;line-height:1.55}
@media(max-width:600px){.tiles{grid-template-columns:1fr}}

/* ================= PLACE NAVIGATION ================= */
/* The bar floats over the meadow as a rounded card instead of slicing it
   with a hard edge. Each door carries the color of the place it opens onto. */
.hd{background:transparent!important;box-shadow:none!important;position:sticky;top:0;z-index:60;
  padding:14px 16px 6px}
.hd .in{max-width:1340px;margin:0 auto;background:#fff;border-radius:26px;
  box-shadow:0 8px 26px rgba(23,52,91,.16);padding:9px 14px 9px 12px;
  display:flex;align-items:center;gap:10px}
.hd .logo{padding:6px 12px;flex:none}
.hd .logo::before{box-shadow:none}
.hd .logo .a{font-size:23px} .hd .logo .b{font-size:17px}

.doors{margin-left:auto;margin-right:6px}
.doors ul{display:flex;gap:3px;list-style:none;margin:0;padding:0}
.door{display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;
  color:var(--navy);padding:7px 9px 6px;border-radius:17px;min-width:80px;
  transition:background .2s ease,transform .2s ease}
.door .ic{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;
  transition:transform .2s ease}
.door .ic svg{width:19px;height:19px;fill:none;stroke:var(--navy);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.door .nm{font-family:var(--disp);font-weight:800;font-size:13px;line-height:1.05;white-space:nowrap}
.door .sub{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.5;
  line-height:1;white-space:nowrap}
.door:hover{transform:translateY(-2px)}
.door:hover .ic{transform:scale(1.12) rotate(-6deg)}
/* one color per place */
.d-tree   .ic{background:#E4F2DC} .d-tree:hover,   .d-tree[aria-current]  {background:#EFF7E9}
.d-theater .ic{background:#E6DCF9} .d-theater:hover,.d-theater[aria-current]{background:#F1EBFC}
.d-trail  .ic{background:#FFF3D6} .d-trail:hover,  .d-trail[aria-current] {background:#FFF8E7}
.d-read   .ic{background:#D8F0EC} .d-read:hover,   .d-read[aria-current]  {background:#E8F7F4}
.d-barn   .ic{background:#FFE7D2} .d-barn:hover,   .d-barn[aria-current]  {background:#FFF2E6}
.d-garden .ic{background:#FBE0E6} .d-garden:hover, .d-garden[aria-current]{background:#FDEFF2}
.d-cottage .ic{background:#DDF1FB} .d-cottage:hover,.d-cottage[aria-current]{background:#EDF8FD}
.d-mail   .ic{background:#FDE7CF} .d-mail:hover,   .d-mail[aria-current]  {background:#FEF2E4}
.d-shop   .ic{background:#E8E2D5} .d-shop:hover,   .d-shop[aria-current]  {background:#F2EEE6}
.door[aria-current]{box-shadow:inset 0 0 0 2px rgba(23,52,91,.13)}

.hd .club-btn{margin-left:0;flex:none;padding:9px 17px}
.burger{display:none;margin-left:auto;background:none;border:0;padding:8px;cursor:pointer;border-radius:14px}
.burger:hover{background:var(--cream)}
.burger svg{width:28px;height:28px;stroke:var(--navy);stroke-width:2.6;stroke-linecap:round;fill:none}

/* mobile panel */
.mobile-doors{display:none;max-width:1340px;margin:8px auto 0;background:#fff;border-radius:24px;
  box-shadow:0 10px 30px rgba(23,52,91,.18);padding:10px;overflow:hidden}
.mobile-doors.open{display:block}
.mobile-doors a{display:flex;align-items:center;gap:13px;padding:11px 13px;border-radius:16px;
  text-decoration:none;color:var(--navy)}
.mobile-doors a .ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none}
.mobile-doors a .ic svg{width:21px;height:21px;fill:none;stroke:var(--navy);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.mobile-doors .tx{display:flex;flex-direction:column;line-height:1.15}
.mobile-doors .nm{font-family:var(--disp);font-weight:800;font-size:16px}
.mobile-doors .sub{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;opacity:.5}

/* One row. Always. Logo, then the doors, then the Join button, exactly as it was.
   When the doors run out of room they slide sideways rather than wrapping the
   header into stacked rows, which looked terrible. */
.hd .in{flex-wrap:nowrap}
.doors{flex:1 1 auto;min-width:0;overflow:hidden;margin-left:auto;margin-right:6px}
.doors ul{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  scroll-snap-type:x proximity;padding-bottom:1px}
.doors ul::-webkit-scrollbar{display:none}
.door{flex:0 0 auto;scroll-snap-align:center}
.logo{flex:0 0 auto}
.hd .club-btn{flex:0 0 auto;margin-left:0}

@media(max-width:1180px){
  .door .sub{display:none}
  .door{min-width:66px;padding:6px 7px 5px}
  .door .nm{font-size:12px}
  .door .ic{width:28px;height:28px}
  .door .ic svg{width:16px;height:16px}
  .doors ul{gap:1px}
}
@media(max-width:760px){
  .door{min-width:58px;padding:5px 5px 4px}
  .door .nm{font-size:11px}
  .door .ic{width:26px;height:26px}
  .hd .club-btn{padding:8px 13px}
  .hd .club-btn .cb-tx small{display:none}
}
/* the old hard-coded drop-down markup is gone; the phone menu is built in nav.js */
.mobile-doors{display:none !important}
@media(max-width:560px){
  .hd{padding:10px 10px 4px}
  .hd .in{border-radius:22px;padding:8px 10px}
  .hd .club-btn .cb-tx small{display:none}
  .hd .club-btn{padding:9px 14px;font-size:14px}
}

/* ================= THE PAGE TURN ================= */
/* Leaving a page turns it, like a real book. The sheet swings shut on a hinge
   at the left edge, catches a soft shadow along its leading edge, and the next
   page is already there behind it. */
/* Kept fully transparent until a turn actually starts. The sheet's own shadow
   ignores backface-visibility, so without this it lurks at the left edge of
   every page as a faint dark band. */
.page-veil{position:fixed;inset:0;z-index:999;pointer-events:none;
  perspective:1800px;perspective-origin:left center;background:transparent;
  opacity:0;visibility:hidden}
.page-veil .sheet{position:absolute;inset:0;transform-origin:left center;
  transform:rotateY(-108deg);backface-visibility:hidden;
  background:linear-gradient(100deg,#FFFDF6 0%,var(--cream) 42%,#F6EEDF 100%);
  box-shadow:14px 0 44px rgba(23,52,91,.26), inset -22px 0 34px -22px rgba(23,52,91,.20);
  transition:transform .46s cubic-bezier(.42,0,.22,1)}
.page-veil .sheet::after{content:"";position:absolute;top:0;bottom:0;right:0;width:26px;
  background:linear-gradient(90deg,rgba(23,52,91,0),rgba(23,52,91,.09))}
.page-veil.on{pointer-events:auto;opacity:1;visibility:visible}
.page-veil.on .sheet{transform:rotateY(0deg)}
@media (prefers-reduced-motion: reduce){
  .page-veil{perspective:none}
  .page-veil .sheet{transform:none;opacity:0;transition:opacity .3s ease;box-shadow:none}
  .page-veil.on .sheet{opacity:1}
}

/* ================= PLACE SCENES ================= */
/* Every page opens on its own view of the same world. Same hills, same sky,
   different hour and different color, so the site reads as one book. */
.page-head{position:relative;overflow:hidden;padding:56px 22px 76px;
  background:linear-gradient(180deg,var(--sky-a,#CDEFFB) 0%,var(--sky-b,#EAF7FD) 58%,var(--sky-c,#FFF9EF) 100%)}
.page-head .scenery{position:absolute;inset:0;z-index:0;pointer-events:none}
.page-head .scenery svg{position:absolute;display:block}
.page-head .sky-sun{top:7%;left:5%;width:clamp(52px,7vw,96px);height:auto}
.page-head .sky-cloud{opacity:.95}
.page-head .cl-a{top:12%;left:22%;width:clamp(88px,13vw,170px)}
.page-head .cl-b{top:26%;right:12%;width:clamp(70px,10vw,132px)}
.page-head .hills{left:0;right:0;bottom:0;width:100%;height:auto}
.page-head .scene-kibi{position:absolute;right:5%;bottom:16px;height:clamp(92px,13vw,158px);
  z-index:1;filter:drop-shadow(0 9px 10px rgba(23,52,91,.22))}
.page-head .wrap{position:relative;z-index:2}
.page-head .flit{position:absolute;width:clamp(24px,2.6vw,38px);z-index:1}
@media (prefers-reduced-motion: no-preference){
  .page-head .sky-cloud{animation:pgDrift 34s linear infinite alternate}
  .page-head .cl-b{animation-duration:44s;animation-delay:-12s}
  .page-head .flit{animation:pgFlit 19s ease-in-out infinite alternate}
  .page-head .scene-kibi{animation:pgBob 5.4s ease-in-out infinite}
  @keyframes pgDrift{from{transform:translateX(-14px)}to{transform:translateX(30px)}}
  @keyframes pgFlit{0%{transform:translate(0,0) rotate(-5deg)}50%{transform:translate(5vw,-2.4vw) rotate(6deg)}100%{transform:translate(9vw,.6vw) rotate(-3deg)}}
  @keyframes pgBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
}
@media(max-width:720px){
  .page-head{padding:40px 20px 62px}
  .page-head .scene-kibi{height:86px;right:2%;opacity:.9}
  .page-head .flit{display:none}
}
/* per place palettes */
.pg-tree    {--sky-a:#DDF3E4;--sky-b:#EEF8EC;--sky-c:#FFF9EF}
.pg-theater {--sky-a:#E9DFF8;--sky-b:#F4EEFC;--sky-c:#FFF9EF}
.pg-trail   {--sky-a:#FFF0CC;--sky-b:#FFF7E4;--sky-c:#FFF9EF}
.pg-read    {--sky-a:#D6F0EB;--sky-b:#EAF8F5;--sky-c:#FFF9EF}
.pg-barn    {--sky-a:#FFE6D0;--sky-b:#FFF2E5;--sky-c:#FFF9EF}
.pg-garden  {--sky-a:#FBDEE6;--sky-b:#FDEFF3;--sky-c:#FFF9EF}
.pg-cottage {--sky-a:#CFE8F8;--sky-b:#E6F3FB;--sky-c:#FFF9EF}
.pg-mail    {--sky-a:#D3F0E9;--sky-b:#E9F8F4;--sky-c:#FFF9EF}
.pg-shop    {--sky-a:#FFE9DC;--sky-b:#FFF4EC;--sky-c:#FFF9EF}
.pg-events  {--sky-a:#FFF0CC;--sky-b:#FFF7E4;--sky-c:#FFF9EF}
.pg-club    {--sky-a:#E6DFF6;--sky-b:#F2EDFB;--sky-c:#FFF9EF}
.pg-legal   {--sky-a:#E4EFF7;--sky-b:#F1F7FB;--sky-c:#FFF9EF}

/* the landmark that tells you where you are */
.page-head .landmark{position:absolute;left:6%;bottom:8px;width:clamp(96px,15vw,190px);height:auto;z-index:1}
@media(max-width:720px){.page-head .landmark{width:90px;left:3%;opacity:.92}}
@media (prefers-reduced-motion: no-preference){
  .page-head .landmark{animation:pgBob 7s ease-in-out infinite}
}

/* ================= READING TREE, the learning page ================= */
.today-lesson{max-width:820px;margin:0 auto;background:#fff;border-radius:30px;padding:34px 32px;
  box-shadow:0 12px 30px rgba(23,52,91,.12);border-top:8px solid var(--teal);text-align:center}
.today-lesson .kick{font-family:var(--disp);font-weight:800;font-size:12.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--teal-ink)}
.today-lesson h2{font-family:var(--disp);font-weight:800;font-size:clamp(24px,3.4vw,36px);margin:6px 0 14px}
.today-lesson .say{font-weight:700;font-size:clamp(16px,2vw,19px);line-height:1.6;max-width:52ch;margin:0 auto 20px}
.today-lesson img{height:120px;margin-bottom:4px;filter:drop-shadow(0 8px 9px rgba(23,52,91,.18))}

/* topic picker */
.topics{max-width:940px;margin:0 auto 34px;padding:0 22px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.topic{font-family:var(--disp);font-weight:800;font-size:14.5px;color:var(--navy);background:#fff;
  border:3px solid var(--navy);border-radius:999px;padding:9px 20px;cursor:pointer;
  box-shadow:0 4px 0 rgba(23,52,91,.16);transition:transform .16s ease,background .16s ease}
.topic:hover{transform:translateY(-2px)}
.topic[aria-pressed="true"]{background:var(--btn-teal);color:#fff;border-color:var(--btn-teal)}

/* a lesson that opens */
.lessons{max-width:940px;margin:0 auto;padding:0 22px;display:grid;gap:18px}
.lesson{background:#fff;border-radius:24px;box-shadow:0 8px 22px rgba(23,52,91,.09);overflow:hidden;
  border-left:8px solid var(--rose)}
.lesson.is-color{border-left-color:var(--coral)} .lesson.is-number{border-left-color:var(--yellow)}
.lesson.is-shape{border-left-color:var(--leaf)} .lesson.is-letter{border-left-color:var(--blue)}
.lesson.is-feeling{border-left-color:var(--lavender)} .lesson.is-nature{border-left-color:var(--teal)}
.lesson > button{width:100%;background:none;border:0;cursor:pointer;text-align:left;
  padding:22px 26px;display:flex;align-items:center;gap:16px;font-family:var(--body)}
.lesson .lic{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--cream)}
.lesson .lic svg{width:30px;height:30px}
.lesson .ltx{flex:1}
.lesson .lkick{font-family:var(--disp);font-weight:800;font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;opacity:.55;display:block}
.lesson .lname{font-family:var(--disp);font-weight:800;font-size:clamp(18px,2.2vw,22px);color:var(--navy)}
.lesson .chev{width:26px;height:26px;flex:none;transition:transform .3s ease;
  stroke:var(--navy);fill:none;stroke-width:2.6;stroke-linecap:round}
.lesson[open] .chev{transform:rotate(180deg)}
.lesson .body{max-height:0;overflow:hidden;transition:max-height .42s cubic-bezier(.4,0,.2,1)}
.lesson[open] .body{max-height:640px}
.lesson .bin{padding:0 26px 26px;display:grid;gap:14px}
.lesson .step{background:var(--cream);border-radius:16px;padding:16px 18px}
.lesson .step b{font-family:var(--disp);display:block;margin-bottom:4px;font-size:14.5px}
.lesson .step p{margin:0;font-weight:600;line-height:1.6;font-size:15px}
.lesson .practice{display:inline-block;font-family:var(--disp);font-weight:800;font-size:14.5px;
  color:#fff;background:var(--btn-teal);text-decoration:none;padding:10px 22px;border-radius:999px;
  box-shadow:0 4px 0 rgba(23,52,91,.18);justify-self:start}
.lesson .practice:hover{transform:translateY(-2px)}

/* the two little toys */
.toys{max-width:940px;margin:0 auto;padding:0 22px;display:grid;gap:24px;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.toy{background:#fff;border-radius:26px;padding:28px 26px;box-shadow:0 9px 24px rgba(23,52,91,.10);text-align:center}
.toy h3{font-family:var(--disp);font-weight:800;font-size:21px;margin:0 0 6px}
.toy p{font-weight:600;line-height:1.55;margin:0 0 18px;font-size:14.5px;opacity:.88}
.mixrow{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
.mixrow button{width:58px;height:58px;border-radius:50%;border:4px solid var(--navy);cursor:pointer;
  box-shadow:0 4px 0 rgba(23,52,91,.2);transition:transform .16s ease}
.mixrow button:hover{transform:translateY(-3px)}
.mixrow button[aria-pressed="true"]{outline:4px solid var(--navy);outline-offset:3px}
.mixpot{width:110px;height:110px;border-radius:50%;border:5px solid var(--navy);margin:0 auto 12px;
  background:#FFFDF6;transition:background .5s ease;box-shadow:inset 0 -8px 0 rgba(23,52,91,.07)}
.mixname{font-family:var(--disp);font-weight:800;font-size:19px;min-height:26px}
.countrow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:14px;min-height:66px}
.countrow button{width:56px;height:56px;border:0;background:none;cursor:pointer;padding:0;transition:transform .2s ease}
.countrow button:hover{transform:translateY(-4px)}
.countrow button[data-on="1"]{transform:scale(.88);opacity:.45}
.countbig{font-family:var(--disp);font-weight:800;font-size:44px;color:var(--teal);line-height:1}
@media (prefers-reduced-motion: reduce){
  .lesson .body{transition:none}.mixpot{transition:none}
  .topic:hover,.mixrow button:hover,.countrow button:hover,.lesson .practice:hover{transform:none}
}

/* ================= THE GIFT SHED ================= */
.shed-hero{position:relative;overflow:hidden;padding:0;
  background:linear-gradient(180deg,#F5E2C8 0%,#EFD5B4 46%,#E7C79E 100%)}
.shed-hero .wrap{max-width:1000px;margin:0 auto;padding:54px 22px 30px;position:relative;z-index:3;text-align:center}
.shed-hero h1{font-family:var(--disp);font-weight:800;color:#5A3B22;
  font-size:clamp(32px,5vw,58px);margin:8px 0 10px;text-shadow:0 2px 0 rgba(255,255,255,.5)}
.shed-hero .lead{font-weight:700;color:#6B4A2D;font-size:clamp(15px,1.8vw,20px);
  max-width:46ch;margin:0 auto;line-height:1.55}
.shed-hero .grownups{background:#fff;color:#5A3B22;box-shadow:0 3px 8px rgba(90,59,34,.16)}

/* string lights across the rafters */
/* width:100% is not optional here. An SVG is a replaced element, so left:0 and
   right:0 position it but do not size it -- without a width it falls back to
   its viewBox, renders 1200px wide, and on a phone only the left third of the
   string of lights is inside the hero. */
.lights{position:absolute;top:0;left:0;right:0;width:100%;height:60px;z-index:2;pointer-events:none}
.lights .bulb{animation:glow 3.4s ease-in-out infinite alternate}
.lights .bulb:nth-of-type(2n){animation-delay:.7s}
.lights .bulb:nth-of-type(3n){animation-delay:1.4s}
@keyframes glow{from{opacity:.55}to{opacity:1}}

/* the plank shelf that runs under the hero */
.shelfline{display:block;width:100%;height:auto;margin-bottom:-2px;position:relative;z-index:3}

.shed-body{background:#FBF3E6;padding:56px 0 66px}
.shelves{max-width:1120px;margin:0 auto;padding:0 22px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.shelfcard{background:#fff;border-radius:26px;padding:0 0 26px;overflow:hidden;
  box-shadow:0 10px 26px rgba(90,59,34,.13);display:flex;flex-direction:column;
  transition:transform .22s ease,box-shadow .22s ease}
.shelfcard:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(90,59,34,.18)}
.shelfcard .top{padding:26px 20px 18px;display:grid;place-items:center;min-height:172px}
.shelfcard.s1 .top{background:#FCE4EC} .shelfcard.s2 .top{background:#DFF1FB} .shelfcard.s3 .top{background:#FFF3D6}
.shelfcard .top svg{width:132px;height:auto}
.shelfcard h3{font-family:var(--disp);font-weight:800;font-size:22px;margin:20px 22px 8px;color:#4A3520}
.shelfcard p{font-weight:600;line-height:1.6;margin:0 22px;font-size:15px;color:#5F4A34}
.shelfcard .soon{margin:16px 22px 0;display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  background:#F3E7D3;color:#6B4A2D;font-family:var(--disp);font-weight:800;font-size:12px;
  letter-spacing:.05em;text-transform:uppercase;padding:7px 13px;border-radius:999px}
.shelfcard .soon::before{content:"";width:7px;height:7px;border-radius:50%;background:#C58A3E}
/* where a real Buy Button embed drops in, once products exist */
.buyslot{margin:14px 22px 0}

.shopnote{max-width:760px;margin:52px auto 0;padding:0 22px}
.shopnote .card{background:#FFF9EF;border:2px dashed #D8C3A2;border-radius:24px;padding:26px 28px}
.shopnote h2{font-family:var(--disp);font-weight:800;font-size:22px;margin:0 0 10px;color:#4A3520}
.shopnote p{font-weight:600;line-height:1.68;margin:0 0 12px;color:#5F4A34;font-size:15.5px}
.shopnote p:last-child{margin-bottom:0}
.shopnote strong{color:#4A3520}

.shed-club{background:linear-gradient(180deg,#FBF3E6,#F3E3CB);padding:20px 22px 70px}
.shed-club .inner{max-width:720px;margin:0 auto;text-align:center;background:#fff;
  border-radius:28px;padding:34px 30px;box-shadow:0 12px 30px rgba(90,59,34,.14)}
.shed-club img{height:126px;margin-bottom:6px;filter:drop-shadow(0 8px 9px rgba(90,59,34,.22))}
.shed-club h2{font-family:var(--disp);font-weight:800;font-size:clamp(22px,2.6vw,30px);margin:6px 0 10px;color:#4A3520}
.shed-club p{font-weight:600;line-height:1.6;margin:0 auto 18px;max-width:46ch;color:#5F4A34}

@media(max-width:900px){.shelves{grid-template-columns:1fr;max-width:460px}}
@media (prefers-reduced-motion:reduce){
  .lights .bulb{animation:none;opacity:.9}
  .shelfcard:hover{transform:none}
}

/* ---- door strip: overflow should read as "more this way", never as clipping ----
   The mask holds a fully clear band the exact width of the arrow, THEN fades in.
   A plain gradient leaves the text 50% visible right under the button. */
.doors{position:relative}
.doors.can-scroll ul{
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 62px),transparent calc(100% - 30px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 62px),transparent calc(100% - 30px),transparent 100%);
  padding-right:64px}
.doors.can-scroll.at-end ul{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 30px,#000 62px);
  mask-image:linear-gradient(90deg,transparent 0,transparent 30px,#000 62px);
  padding-left:64px;padding-right:0}
.doors.can-scroll.at-both ul{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 30px,#000 62px,#000 calc(100% - 62px),transparent calc(100% - 30px));
  mask-image:linear-gradient(90deg,transparent 0,transparent 30px,#000 62px,#000 calc(100% - 62px),transparent calc(100% - 30px));
  padding-left:64px;padding-right:64px}
.doornav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:30px;height:30px;border-radius:50%;border:2px solid var(--navy);background:#fff;
  display:none;place-items:center;cursor:pointer;padding:0;
  box-shadow:0 2px 6px rgba(23,52,91,.2);transition:transform .18s ease,background .18s ease}
.doornav:hover{background:var(--cream);transform:translateY(-50%) scale(1.08)}
.doornav svg{width:15px;height:15px;fill:none;stroke:var(--navy);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.doornav.prev{left:0} .doornav.next{right:0}
.doors.can-scroll .doornav.next{display:grid}
.doors.can-scroll.at-end .doornav.next{display:none}
.doors.can-scroll.at-end .doornav.prev,
.doors.can-scroll.at-both .doornav.prev{display:grid}
@media (prefers-reduced-motion:reduce){.doornav:hover{transform:translateY(-50%)}}

/* reserve a gutter so an arrow never lands on top of a door name */
.doors.can-scroll ul{padding-right:60px}
.doors.can-scroll.at-end ul,
.doors.can-scroll.at-both ul{padding-left:60px}
.doors.can-scroll.at-end ul{padding-right:0}
.doornav.prev{left:0} .doornav.next{right:0}

/* ---- sing-along sheet: hidden until a song is actually playing ---- */
.lyrics{max-width:min(94vw,420px);margin:10px 0 0;padding:0 18px;
  background:rgba(255,255,255,.94);border-radius:18px;
  box-shadow:0 6px 18px rgba(23,52,91,.14);
  display:flex;flex-direction:column;gap:5px;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .45s ease,opacity .35s ease,padding .45s ease}
.lyrics.open{max-height:280px;opacity:1;padding:16px 18px 18px}
.lyrics .ly-title{font-family:var(--disp);font-weight:800;font-size:11.5px;
  letter-spacing:.09em;text-transform:uppercase;opacity:.5;margin:0 0 4px}
.lyrics span{font-family:var(--disp);font-weight:700;font-size:15px;
  line-height:1.42;color:var(--navy)}
.lyrics.night{background:rgba(255,255,255,.1);box-shadow:none;
  border:1.5px solid rgba(255,255,255,.22)}
.lyrics.night span{color:#fff}
.lyrics.night .ly-title{color:#fff;opacity:.6}
@media (prefers-reduced-motion:reduce){
  .lyrics{transition:opacity .3s ease}
  .lyrics.open{max-height:none}
}

/* the hero's sing-along sheet sits on the body so the hero crop cannot slice it */
.lyrics.floating{position:absolute;z-index:40}

/* ---- Kibi's hello film. Portrait video, so it sits in a soft window rather
       than being stretched across a landscape box. ---- */
.hello-film{position:relative;width:100%;max-width:250px;margin:0 auto;
  border-radius:26px;background:#FFF6E4;padding:10px;
  box-shadow:0 10px 26px rgba(23,52,91,.18);
  border:4px solid #fff}
/* the video keeps its own gentler radius inside the padding, so the frame's
   rounded corners never bite into Kibi's head */
.hello-film video{display:block;width:100%;height:auto;background:#FFF6E4;
  border-radius:17px}
.filmplay{position:absolute;inset:10px;border:0;padding:0;
  background:linear-gradient(180deg,rgba(23,52,91,.06),rgba(23,52,91,.22));
  cursor:pointer;display:grid;place-items:center;transition:opacity .3s ease}
.filmplay .ring{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.95);
  display:grid;place-items:center;box-shadow:0 5px 16px rgba(23,52,91,.3);
  transition:transform .22s ease}
.filmplay .ring svg{width:26px;height:26px;fill:var(--teal);margin-left:4px}
.filmplay:hover .ring{transform:scale(1.1)}
.hello-film.playing .filmplay{opacity:0;pointer-events:none}
.filmcap{position:absolute;left:10px;right:10px;bottom:10px;border-radius:0 0 17px 17px;margin:0;padding:26px 14px 12px;
  background:linear-gradient(180deg,transparent,rgba(23,52,91,.82));
  color:#fff;font-family:var(--disp);font-weight:800;font-size:13.5px;line-height:1.35;
  text-align:center;opacity:0;transition:opacity .3s ease;pointer-events:none}
.hello-film.playing .filmcap{opacity:1}
@media (prefers-reduced-motion:reduce){.filmplay:hover .ring{transform:none}}

/* ================= THE APPRECIATION WALL ================= */
.wall{background:linear-gradient(180deg,#FBEDF1 0%,#F6DFE7 55%,#F2D5E0 100%);
  padding:66px 22px 76px;position:relative;overflow:hidden}
.wall .in{max-width:1000px;margin:0 auto;position:relative;z-index:3}

/* petals drifting behind everything, so the band is never a flat color */
.petal{position:absolute;z-index:1;opacity:.5}
@media (prefers-reduced-motion: no-preference){
  .petal{animation:petalDrift var(--pt,16s) ease-in-out infinite alternate}
  @keyframes petalDrift{
    0%{transform:translate(0,0) rotate(0)}
    100%{transform:translate(var(--px,20px),var(--py,-16px)) rotate(var(--pr,14deg))}}
}

.wall-head{text-align:center;max-width:56ch;margin:0 auto 40px}
.wall-head h2{font-family:var(--disp);font-weight:800;font-size:clamp(28px,3.8vw,42px);
  margin:10px 0 14px;color:#7A3B4E}
.wall-head p{font-weight:600;line-height:1.7;margin:0 0 10px;color:#6E4A55;font-size:16.5px}
.wall-head .kicker{display:inline-block;background:#fff;color:#7A3B4E;font-family:var(--disp);
  font-weight:800;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  padding:7px 16px;border-radius:999px;box-shadow:0 3px 10px rgba(122,59,78,.16)}

/* the pinned notes: one real, two waiting behind it, so the wall never looks bare */
.boardstack{position:relative;max-width:600px;margin:0 auto;padding:14px 0 6px}
.ghost{position:absolute;left:50%;top:26px;width:88%;height:78%;border-radius:20px;
  background:#FFFDF8;box-shadow:0 6px 16px rgba(122,59,78,.10);z-index:1}
.ghost.g1{transform:translateX(-50%) rotate(-3.2deg)}
.ghost.g2{transform:translateX(-50%) rotate(2.6deg);opacity:.72}
.board{position:relative;z-index:2;background:#FFFDF8;border-radius:22px;
  padding:34px 30px 28px;box-shadow:0 14px 34px rgba(122,59,78,.18);text-align:center;
  transform:rotate(-.7deg)}
.board::before{content:"";position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#FF8FAC,#E14B72 62%);
  box-shadow:0 4px 8px rgba(122,59,78,.35),inset 0 -3px 0 rgba(0,0,0,.14);z-index:3}
.board::after{content:"";position:absolute;top:-2px;left:50%;transform:translateX(-50%);
  width:2px;height:14px;background:rgba(122,59,78,.22)}
.board .when{font-family:var(--disp);font-weight:800;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#C08C9C;margin:8px 0 16px}
.board .note{font-family:var(--disp);font-weight:700;font-size:clamp(18px,2.4vw,23px);
  line-height:1.55;color:#553440;margin:0 0 6px}
.board .signed{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:20px}
.board .signed img{height:68px;filter:drop-shadow(0 6px 8px rgba(122,59,78,.22))}
.board .who{font-weight:700;font-size:13.5px;color:#A8808C;margin:0}

/* two boards side by side: someone kind, and a teacher */
.boardpair{display:grid;grid-template-columns:1fr 1fr;gap:34px;max-width:980px;margin:0 auto;align-items:start}
.boardpair .boardstack{max-width:none;width:100%}
.boardpair .boardstack:nth-child(2) .board{transform:rotate(.7deg)}
.boardpair .board .when{color:#8E5767}
@media(max-width:760px){.boardpair{grid-template-columns:1fr;max-width:600px;gap:40px}}

.wall-cta{text-align:center;margin-top:38px}
.wall-note{max-width:560px;margin:26px auto 0;text-align:center;font-size:14.5px;
  font-weight:600;line-height:1.65;color:#7A5A66}
.wall-fine{text-align:center;font-size:12.5px;font-weight:600;color:#B08E9A;margin:14px auto 0}

/* ================= TELL US ABOUT SOMEONE KIND ================= */
.kindform{background:#FFFDF8;border-radius:26px;padding:34px 32px;max-width:620px;margin:0 auto;
  box-shadow:0 12px 30px rgba(122,59,78,.14)}
.kindform .row{margin-bottom:18px}
.kindform label{display:block;font-family:var(--disp);font-weight:800;font-size:14.5px;
  color:#7A3B4E;margin-bottom:6px}
.kindform input[type=text],.kindform input[type=email],.kindform textarea,.kindform select{
  width:100%;padding:13px 16px;border-radius:14px;border:2px solid #EEDCE3;background:#fff;
  font-family:var(--body);font-weight:600;font-size:15.5px;color:var(--navy);
  transition:border-color .2s ease}
.kindform input:focus,.kindform textarea:focus,.kindform select:focus{
  outline:none;border-color:#F2668B}
.kindform textarea{min-height:120px;resize:vertical;line-height:1.55}
.kindform .hint{font-size:12.5px;font-weight:600;color:#A8808C;margin:5px 0 0}
.kindform .agree{display:flex;gap:11px;align-items:flex-start;background:#FDF3F6;
  border-radius:16px;padding:15px 17px;margin:22px 0 20px}
.kindform .agree input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:#F2668B}
.kindform .agree label{font-family:var(--body);font-weight:600;font-size:14px;color:#6E4A55;
  margin:0;line-height:1.5}
.kindform button{width:100%;background:var(--btn-coral);color:var(--navy);border:0;cursor:pointer;
  font-family:var(--disp);font-weight:800;font-size:17px;padding:14px;border-radius:999px;
  box-shadow:0 4px 0 rgba(122,59,78,.28);transition:transform .2s ease}
.kindform button:hover{transform:translateY(-2px)}
.kind-ok{display:none;text-align:center;background:#FDF3F6;border-radius:18px;padding:20px;
  margin-top:16px;font-weight:700;color:#7A3B4E;line-height:1.55}
.kind-intro{text-align:center;max-width:52ch;margin:0 auto 28px}
.kind-intro h2{font-family:var(--disp);font-weight:800;font-size:clamp(24px,3.2vw,34px);
  margin:8px 0 10px;color:#7A3B4E}
.kind-intro p{font-weight:600;line-height:1.65;color:#6E4A55;margin:0}
@media(max-width:560px){.kindform{padding:26px 20px}}

/* ---- a ladybug making her way slowly across the wall ----
   Deliberately unhurried: one crossing takes the better part of a minute.
   She is not a game and nothing happens if you tap her. She is just there. */
.wallbug{position:absolute;bottom:38px;left:-60px;width:34px;z-index:2;pointer-events:none}
@media (prefers-reduced-motion: no-preference){
  .wallbug{animation:bugWalk 78s linear infinite}
  .wallbug .shell{animation:bugBob 1.6s ease-in-out infinite alternate;transform-origin:center}
  @keyframes bugWalk{
    0%{transform:translateX(0) rotate(0)}
    24%{transform:translateX(26vw) translateY(-8px) rotate(-3deg)}
    52%{transform:translateX(52vw) translateY(4px) rotate(2deg)}
    78%{transform:translateX(76vw) translateY(-6px) rotate(-2deg)}
    100%{transform:translateX(106vw) translateY(0) rotate(1deg)}}
  @keyframes bugBob{from{transform:translateY(0)}to{transform:translateY(-1.5px)}}
}
@media (prefers-reduced-motion: reduce){
  .wallbug{left:auto;right:9%;bottom:44px}
}

/* the ribbon's pointed tails stick out 32px each side, which on a phone is what
   was pushing the whole page sideways. Tuck them away on small screens. */
@media(max-width:620px){
  .ribbon{margin-left:14px;margin-right:14px;rotate:-.5deg;padding:16px 20px;gap:10px}
  .ribbon::before,.ribbon::after{display:none}
}

/* ---- the ladybug's walk, made legible ----
   Legs paddle, shell rocks, and she pauses now and then the way a real one does. */
@media (prefers-reduced-motion: no-preference){
  .wallbug{animation:bugWalk 74s linear infinite}
  .wallbug .shell{animation:bugRock 1.1s ease-in-out infinite alternate;transform-origin:50% 70%}
  .wallbug .legs{animation:bugLegs .55s steps(2,end) infinite}
  @keyframes bugRock{from{transform:rotate(-2.5deg) translateY(0)}
                     to{transform:rotate(2.5deg) translateY(-1.5px)}}
  @keyframes bugLegs{from{transform:translateX(-1.2px)}to{transform:translateX(1.2px)}}
  @keyframes bugWalk{
    0%  {transform:translateX(0)      translateY(0)}
    18% {transform:translateX(19vw)   translateY(-7px)}
    26% {transform:translateX(19.4vw) translateY(-7px)}   /* a pause for a look around */
    46% {transform:translateX(45vw)   translateY(3px)}
    62% {transform:translateX(63vw)   translateY(-5px)}
    70% {transform:translateX(63.3vw) translateY(-5px)}   /* another pause */
    100%{transform:translateX(108vw)  translateY(0)}}
}

/* ---- phones get a drop-down; everything wider keeps the row of doors ---- */
.burger{display:none;margin-left:auto;background:#fff;border:2.5px solid var(--navy);
  border-radius:14px;padding:7px 9px;cursor:pointer;flex:0 0 auto;
  min-height:44px;min-width:44px;align-items:center;justify-content:center;
  box-shadow:0 3px 0 rgba(23,52,91,.18);transition:transform .18s ease}
.burger:hover{transform:translateY(-1px)}
.burger svg{width:22px;height:22px;stroke:var(--navy);stroke-width:2.6;stroke-linecap:round;
  fill:none;display:block}
.burger .x{display:none}
.burger[aria-expanded="true"] .lines{display:none}
.burger[aria-expanded="true"] .x{display:block}

.dropdoors{display:none;background:#fff;border-radius:22px;margin:8px 0 0;padding:8px;
  box-shadow:0 10px 26px rgba(23,52,91,.16)}
.dropdoors.open{display:block}
.dropdoors a{display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:15px;
  text-decoration:none;color:var(--navy)}
.dropdoors a:hover,.dropdoors a[aria-current]{background:var(--cream)}
.dropdoors .ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none}
.dropdoors .ic svg{width:20px;height:20px;fill:none;stroke:var(--navy);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.dropdoors .tx{display:flex;flex-direction:column;line-height:1.15}
.dropdoors .nm{font-family:var(--disp);font-weight:800;font-size:16px}
.dropdoors .sub{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.5}

@media(max-width:620px){
  .doors{display:none}
  .burger{display:block}
  .hd .in{flex-wrap:wrap}
  .hd .club-btn{order:2}
  .burger{order:3}
  .dropdoors{order:4;flex:1 0 100%}
}

/* On a phone the header is a solid band rather than a floating pill.
   A pill lets the page scroll through the gaps around it, which made the
   headline look broken as it passed behind. */
@media(max-width:620px){
  .hd{padding:0;background:#fff;box-shadow:0 3px 14px rgba(23,52,91,.13)}
  .hd .in{border-radius:0;margin:0;padding:10px 14px;box-shadow:none;background:#fff}
  .dropdoors{border-radius:0 0 20px 20px;margin-top:6px;box-shadow:0 12px 24px rgba(23,52,91,.16)}
}

/* ================= LIVING BACKGROUNDS ON THE INNER PAGES =================
   The page heads always had scenery, but the bands underneath were flat color,
   so the world quietly stopped a screen down. Each band now carries a soft
   horizon and a few things drifting through, chosen to match the place.
   The homepage is deliberately excluded: it has its own scenery already. */
.band{position:relative;overflow:hidden}
.band > *{position:relative;z-index:2}

/* a low hill so bands meet the next one instead of butting up flat */
.band .horizon{position:absolute;left:0;right:0;bottom:0;width:100%;height:70px;
  display:block;z-index:0;pointer-events:none;opacity:.55}

/* things that drift through: leaves, petals, sparkles, whatever suits the place */
.drift{position:absolute;z-index:1;pointer-events:none;opacity:.42}
@media (prefers-reduced-motion: no-preference){
  .drift{animation:driftAcross var(--dd,34s) linear infinite}
  @keyframes driftAcross{
    0%  {transform:translate(0,0) rotate(0deg);opacity:0}
    8%  {opacity:.45}
    50% {transform:translate(28vw,var(--dy,-26px)) rotate(var(--dr,120deg))}
    92% {opacity:.4}
    100%{transform:translate(58vw,0) rotate(calc(var(--dr,120deg) * 2));opacity:0}}
}
@media (prefers-reduced-motion: reduce){ .drift{opacity:.3} }

/* Wildflowers along the way down the hill. Scattered, never in a row,
   because nothing in a meadow grows in a row. */
.meet{position:relative;overflow:hidden}
.meet .bloom{position:absolute;z-index:0;pointer-events:none;opacity:.9}
@media (prefers-reduced-motion: no-preference){
  .meet .bloom{animation:sway var(--sw,7s) ease-in-out infinite alternate;
    transform-origin:50% 100%}
  @keyframes sway{
    from{transform:rotate(var(--a,-4deg))}
    to{transform:rotate(var(--b,4deg))}
  }
}
@media(max-width:720px){ .meet .bloom.hide-sm{display:none} }

/* ================= ONE SWITCH FOR ALL SOUND ================= */
/* min-height keeps this at the 44px a small hand needs. On a phone the label
   drops away and it becomes a circle, which is where it was ending up 41x37
   and missing the target the accessibility statement promises. */
.mutebtn{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:none;
  min-height:44px;min-width:44px;
  background:#fff;border:2px solid rgba(23,52,91,.14);border-radius:999px;
  padding:7px 13px 7px 10px;cursor:pointer;font-family:var(--disp);font-weight:800;
  font-size:12.5px;color:var(--navy);white-space:nowrap;
  transition:transform .18s ease,border-color .18s ease}
.mutebtn:hover{transform:translateY(-2px);border-color:rgba(23,52,91,.28)}
.mutebtn svg{width:19px;height:19px;fill:none;stroke:var(--navy);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.mutebtn .off{display:none}
.mutebtn.quiet{background:#F1EEE8;color:#7A8699;border-color:rgba(23,52,91,.1)}
.mutebtn.quiet svg{stroke:#7A8699}
.mutebtn.quiet .on{display:none}
.mutebtn.quiet .off{display:block}
@media(max-width:900px){ .mutebtn .mt{display:none} .mutebtn{padding:7px 9px} }

/* the one word the round is about, marked so a child can find it */
.bubble .key{position:relative;color:#C6395F;font-weight:800;
  background:linear-gradient(180deg,transparent 58%,#FFE08A 58%,#FFE08A 92%,transparent 92%);
  padding:0 2px;border-radius:3px}

/* ================= READING TREE: the tree, and the together note ========= */
.pg-read .scenery{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.rt-tree{position:absolute;right:2%;bottom:-14px;width:clamp(180px,26vw,330px);opacity:.95}
.rt-blanket{position:absolute;right:6%;bottom:-6px;width:clamp(130px,18vw,230px);opacity:.9}
.rt-bird{position:absolute;left:9%;top:22%;width:38px;opacity:.65}
@media (prefers-reduced-motion: no-preference){
  .rt-tree{animation:treeSway 9s ease-in-out infinite alternate;transform-origin:50% 100%}
  @keyframes treeSway{from{transform:rotate(-1deg)}to{transform:rotate(1.2deg)}}
  .rt-bird{animation:birdFloat 14s ease-in-out infinite alternate}
  @keyframes birdFloat{from{transform:translate(0,0)}to{transform:translate(46px,-22px)}}
}
@media(max-width:760px){ .rt-blanket,.rt-bird{display:none} .rt-tree{opacity:.5} }

.together{display:flex;gap:20px;align-items:flex-start;
  background:#FFFDF6;border-radius:26px;padding:26px 28px;
  box-shadow:0 10px 26px rgba(23,52,91,.09);
  border-left:6px solid var(--teal)}
.together img{width:96px;height:auto;flex:none;margin-top:2px;
  filter:drop-shadow(0 6px 8px rgba(23,52,91,.14))}
.together .th{font-family:var(--disp);font-weight:800;font-size:19px;
  color:var(--teal-ink);margin:0 0 8px}
.together p{margin:0 0 10px;font-weight:600;line-height:1.68;font-size:15px}
.together p:last-child{margin-bottom:0}
@media(max-width:620px){
  .together{flex-direction:column;align-items:center;text-align:center;gap:12px}
  .together img{width:84px}
  .together{border-left:0;border-top:6px solid var(--teal)}
}

/* ============================================================
   PHONE PASS, 2026-08-08
   Three things Mia found on a real phone. None of this touches
   the desktop layout: the stacking fixes are correct at every
   width, and everything else sits inside a phone media query.
   ============================================================ */

/* 1. The scalloped hem was drawing over Kibi's feet.
      On desktop the hero is tall enough that 44px is nothing.
      On a 390px phone the hero is only 218px, so the hem ate a
      third of her. She now stands in front of it, and the hem
      scales with the screen instead of staying 44px. */
.hero .kibi{z-index:3}
.hero .kshadow{z-index:2}
.hero .hem{height:clamp(16px,3vw,44px)}
.page-head .hem{height:clamp(14px,2.4vw,34px)}

@media(max-width:760px){
  /* 2. Words over a busy illustration are hard to read. The art stays,
        but it moves out from behind the text and softens, and the text
        gets a gentle backing so it never has to fight the picture. */
  .page-head .landmark{width:74px;left:2%;bottom:2px;opacity:.55}
  .page-head .sky-cloud{opacity:.5}
  .page-head .wrap{
    background:radial-gradient(ellipse at center,
      rgba(255,255,255,.82) 0%, rgba(255,255,255,.62) 62%, rgba(255,255,255,0) 88%);
    border-radius:24px;
    padding:14px 12px 16px;
  }

  /* 3. The page ran to nearly seven screens. Most of that was air:
        big desktop padding stacked up once everything is one column. */
  .page-head{padding:34px 18px 30px}
  .find{padding:34px 0 104px}
  .meet{padding:18px 0 78px}
  .wall{padding:40px 18px 46px}

  .cards{gap:12px;padding:0 16px}
  .card{padding:18px 12px 16px;gap:7px}
  .card .ic{width:56px;height:56px}
  .card .ic svg{width:31px;height:31px}
  .card h3{font-size:17px}
  .card p{font-size:13.5px;line-height:1.4}

  .meet .in{gap:16px;padding:0 16px}
  .pod{padding:22px 18px}

  .band{padding-top:34px;padding-bottom:34px}
  .band-head{margin-bottom:20px}
  .storyline{margin:-10px auto 22px}
}

/* On the narrowest phones the five cards still read better two across
   than one, because a single card stretched full width leaves the empty
   space either side that Mia noticed. */
@media(max-width:430px){
  .cards{grid-template-columns:1fr 1fr;gap:10px}
  .card{padding:16px 10px 14px}
  .card h3{font-size:15.5px}
  .card p{font-size:12.5px}
  .card .go{font-size:13px;padding:8px 16px}
}

/* ================= SOUNDING OUT A WORD ================= */
.soundout{background:#FFFDF6;border-radius:30px;padding:34px 28px 30px;max-width:640px;
  margin:0 auto;text-align:center;box-shadow:0 12px 30px rgba(23,52,91,.10);
  border:3px solid #DCEFE9}
.soundout .kick{font-family:var(--disp);font-weight:800;font-size:11.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--teal-ink);margin:0 0 14px}
.soart{height:96px;display:grid;place-items:center;margin-bottom:6px}
.soart svg{height:96px;width:auto}
.soword{font-family:var(--disp);font-weight:800;font-size:clamp(40px,9vw,62px);
  color:var(--navy);line-height:1;margin:0 0 20px;letter-spacing:.02em}

/* each sound is its own tappable piece, so a child can poke one at a time */
.soletters{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.soletter{font-family:var(--disp);font-weight:800;font-size:clamp(28px,6vw,40px);
  min-width:74px;padding:14px 10px;border-radius:20px;cursor:pointer;
  background:#EAF6F3;color:var(--teal);border:3px solid #CFE9E2;
  transition:transform .18s ease,background .18s ease,color .18s ease;
  -webkit-tap-highlight-color:transparent}
.soletter:hover{transform:translateY(-3px)}
.soletter.lit{background:var(--teal);color:#fff;border-color:var(--teal);
  transform:translateY(-5px) scale(1.06)}
.soletter:focus-visible{outline:4px solid var(--navy);outline-offset:4px}

.sosay{min-height:26px;font-family:var(--disp);font-weight:800;font-size:17px;
  color:var(--teal);margin:0 0 20px}
.sobar{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.sobtn{font-family:var(--disp);font-weight:800;font-size:16px;border:0;cursor:pointer;
  padding:13px 26px;border-radius:999px;color:#fff;background:var(--btn-teal);
  box-shadow:0 4px 0 rgba(23,52,91,.2);transition:transform .18s ease}
.sobtn:hover{transform:translateY(-2px)}
.sobtn.alt{background:#fff;color:var(--teal-ink);border:3px solid #CFE9E2;box-shadow:none}
.sobtn.plain{background:#F1EEE8;color:var(--navy);box-shadow:0 4px 0 rgba(23,52,91,.12)}

@media (prefers-reduced-motion:reduce){
  .soletter,.soletter:hover,.soletter.lit,.sobtn:hover{transition:none;transform:none}
}
@media(max-width:560px){
  .soundout{padding:26px 18px 24px}
  .soletter{min-width:62px;padding:12px 8px}
  .sobar{gap:9px}
  .sobtn{padding:12px 18px;font-size:15px}
}