@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/Fredoka.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/Fredoka.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/Fredoka.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/Nunito.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/Nunito.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sniglet';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Sniglet.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{--ink:#4a2c48;--cream:#fffaf0;--sky1:#9fd3ec;--sky2:#d9f0f7;--sun:#fbe7a1;--coral:#e9785a;--gold:#f6b84b;--teal:#3c9d9b}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:Nunito,system-ui,sans-serif;color:var(--ink);background:var(--cream);overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::after{content:"";position:fixed;inset:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");z-index:50;mix-blend-mode:multiply}
h1,h2{font-family:Fredoka,Sniglet,sans-serif;line-height:1.05}
img{max-width:100%;height:auto;display:block}

/* ---------- SKY HERO ---------- */
.sky{position:relative;min-height:0;overflow:hidden;background:
 radial-gradient(120% 70% at 80% 10%,#fff3c4 0,transparent 42%),
 linear-gradient(180deg,var(--sky1) 0%,#b9e2f1 42%,var(--sky2) 78%,var(--cream) 100%);
 display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"kicker kicker" "copy balloon";
 align-items:center;column-gap:10px;row-gap:6px;padding:12px 14px 10px}
.sun{position:absolute;width:min(46vw,280px);aspect-ratio:1;border-radius:50%;right:-18%;top:-30%;background:radial-gradient(circle,#fff4b8 0 52%,#fbe7a1 53% 60%,transparent 61%);filter:url(#paint);opacity:.85;animation:sun 9s ease-in-out infinite;z-index:0}
@keyframes sun{50%{transform:scale(1.05)}}
.kicker{grid-area:kicker;position:relative;z-index:3;justify-self:start;font-weight:800;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#2f7f8f;background:#ffffffd0;display:inline-block;padding:5px 10px;border-radius:99px;transform:none}
.hero-copy{grid-area:copy;position:relative;z-index:3;text-align:left;min-width:0}
h1{font-size:clamp(1.7rem,6.4vw,3.5rem);font-weight:700;color:var(--cream);margin:0 0 .12em;
 text-shadow:1px 0 0 var(--ink),-1px 0 0 var(--ink),0 1px 0 var(--ink),0 -1px 0 var(--ink)}
h1 .w{display:inline-block;animation:hop 4.8s ease-in-out infinite}
h1 .w:nth-child(1){color:var(--gold)}h1 .w:nth-child(2){color:var(--coral);animation-delay:.25s}h1 .w:nth-child(3){color:#8fd0a8;animation-delay:.5s}
@keyframes hop{0%,80%,100%{transform:translateY(0)}86%{transform:translateY(-8px)}92%{transform:translateY(1px)}}
.sub{font-size:clamp(.92rem,3.2vw,1.08rem);line-height:1.35;font-weight:600;max-width:38ch;margin:0}
.hero-actions{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:10px}
.hero-pick{font-size:1.2rem;min-height:54px;padding:12px 18px;box-shadow:0 5px 0 var(--ink)}
.hero-pick span{display:inline-block;animation:nudge 1.6s ease-in-out infinite}

.balloon-wrap{grid-area:balloon;position:relative;z-index:4;width:min(34vw,148px);margin:0}
.balloon-drift{transform-origin:50% 0;animation:drift 17s ease-in-out infinite}
.balloon{position:relative;transform-origin:50% 0;animation:bob 6s ease-in-out infinite}
.balloon img{display:block;width:100%;height:auto}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes drift{0%,100%{transform:translateX(-8px)}50%{transform:translateX(8px)}}

.clouds{position:absolute;inset:0;pointer-events:none;will-change:transform;z-index:1}
.c{position:absolute;fill:#fff;filter:url(#paint)}
.far .c{opacity:.75;fill:#f4fbff}.mid .c{opacity:.9}
.near{z-index:1;top:auto;bottom:-8px;height:auto}
.near .c{fill:var(--cream)}
.c1{width:120px;height:56px;top:8%;left:2%;animation:float 60s linear infinite}
.c2{width:90px;height:42px;top:28%;left:72%;animation:float 75s linear infinite -30s}
.c3{width:70px;height:34px;top:58%;left:18%;animation:float 50s linear infinite -10s}
.c4{width:150px;height:70px;top:6%;left:58%;animation:float 40s linear infinite -12s}
.c5{width:130px;height:60px;top:48%;left:-8%;animation:float 46s linear infinite -24s}
.c6{width:min(46vw,240px);height:70px;bottom:-28px;left:-8%;animation:sway 12s ease-in-out infinite}
.c7{width:min(40vw,200px);height:64px;bottom:-32px;right:-10%;animation:sway 14s ease-in-out infinite reverse}
@keyframes float{from{transform:translateX(-30vw)}to{transform:translateX(130vw)}}
@keyframes sway{50%{transform:translateX(16px)}}
@keyframes nudge{50%{transform:translateY(4px)}}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;justify-content:center;font-family:Fredoka;font-weight:600;font-size:1.1rem;color:var(--ink);background:var(--gold);border:2.5px solid var(--ink);border-radius:18px 22px 16px 24px;padding:14px 22px;text-decoration:none;box-shadow:0 5px 0 var(--ink);transition:transform .15s,box-shadow .15s;min-height:52px}
.btn:hover,.btn:focus-visible{animation:wiggle .5s ease-in-out}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.btn:focus-visible{outline:3px dashed var(--teal);outline-offset:4px}
.btn.alt{background:#8fd0a8}
.btn.hero-pick{font-size:1.2rem;min-height:54px;padding:12px 18px;box-shadow:0 5px 0 var(--ink)}
.btn.insta{background:#f4a9c6}
.btn svg{flex:none;width:22px;height:22px;display:block}
@keyframes wiggle{20%{transform:scale(1.03)}40%{transform:scale(1.05)}60%{transform:scale(1.03)}80%{transform:scale(1.01)}}

/* ---------- BOOKS ---------- */
section{padding:clamp(48px,8vw,96px) clamp(20px,5vw,40px);max-width:1080px;margin:0 auto}
section+section{padding-top:0}
h2{font-size:clamp(2rem,8vw,3rem);text-align:center;margin-bottom:clamp(28px,5vw,44px)}
.books{padding:8px 14px 28px;scroll-margin-top:8px}
.books h2{font-size:clamp(1.45rem,5.5vw,2.1rem);margin:4px 0 10px}
.book-grid{display:grid;gap:12px;grid-template-columns:1fr}
.book{display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:12px;row-gap:3px;align-items:center;text-align:left}
.book-body{display:contents}
.book p{grid-column:2;grid-row:2;font-weight:600;line-height:1.35;margin:0;font-size:.92rem}
.book .btn-row{grid-column:2;grid-row:3;justify-content:flex-start;gap:8px}
.books .btn{font-size:.92rem;padding:8px 10px;min-height:44px;border-radius:14px;box-shadow:0 3px 0 var(--ink)}
.cover-wrap{grid-column:1;grid-row:1 / span 3;position:relative;align-self:stretch;min-height:112px}
.cover{position:relative;height:100%;border-radius:6px 14px 14px 6px;overflow:hidden;border:3px solid var(--ink);box-shadow:5px 6px 0 var(--tint);transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.9,.3,1.4);background:var(--tint)}
.cover img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 6s ease-out}
.cover img.china-face{object-position:center center;transform:none}
.cover:hover img.china-face{transform:scale(1.04)}
.cover:hover img{transform:scale(1.14)}
.spine{position:absolute;inset:0 auto 0 0;width:16px;background:linear-gradient(90deg,#0003,#fff3 60%,transparent)}
.title-card{grid-column:2;grid-row:1;margin:0;font-weight:inherit;position:static;translate:none;rotate:none;background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;white-space:normal;text-align:left;align-self:end}
.title-card small{display:block;font-family:Fredoka;font-weight:600;color:var(--coral);font-size:.78rem;line-height:1.1}
.title-card b{font-family:Fredoka;font-size:1.12rem;line-height:1.1}
.new-badge{position:absolute;z-index:3;top:6px;right:6px;background:var(--gold);color:var(--ink);font-family:Fredoka,sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;line-height:1;padding:4px 8px;border-radius:99px;border:2px solid var(--ink);box-shadow:0 2px 0 var(--ink);transform:none}
.confetti i{position:absolute;top:-10px;width:9px;height:14px;border-radius:3px;background:var(--gold);animation:fall 5s linear infinite;opacity:.9}
.confetti i:nth-child(2n){background:#e96aa0;width:7px}.confetti i:nth-child(3n){background:#5bc0be}.confetti i:nth-child(5n){background:#8f7be6}
.confetti i:nth-child(1){left:8%}.confetti i:nth-child(2){left:20%;animation-delay:-1s}.confetti i:nth-child(3){left:33%;animation-delay:-2.6s}.confetti i:nth-child(4){left:47%;animation-delay:-3.4s}.confetti i:nth-child(5){left:60%;animation-delay:-.6s}.confetti i:nth-child(6){left:72%;animation-delay:-4.2s}.confetti i:nth-child(7){left:84%;animation-delay:-1.8s}.confetti i:nth-child(8){left:93%;animation-delay:-3s}
@keyframes fall{to{transform:translateY(110cqh) translateY(520px) rotate(540deg)}}

/* pop-in on scroll */
.js .pop{opacity:0;transform:translateY(40px) scale(.92);transition:opacity .6s,transform .8s cubic-bezier(.2,1.4,.4,1)}
.js .pop.in{opacity:1;transform:none}
.js .books,.js .books .pop{opacity:1;transform:none}

/* ---------- MAP ---------- */
.journey{max-width:1100px}
.lede{text-align:center;font-weight:700;margin:-18px 0 28px}
.map{background:#f6ecd2;border:3px solid var(--ink);border-radius:24px;padding:10px;box-shadow:0 8px 0 #d9c49a;overflow:hidden}
.map svg{border-radius:16px}
.map svg{width:100%;height:auto;display:block}
.land{fill:#efe1bd;stroke:#c7a874;stroke-width:1.6;stroke-linejoin:round}
.land-shadow{fill:#a98f6a;opacity:.25}
.route-future{fill:none;stroke:#7d6f8f;stroke-width:3;stroke-dasharray:3 10;stroke-linecap:round;opacity:.55}
.route{fill:none;stroke:#fff;stroke-width:10;stroke-linecap:round;opacity:.6}
.route-dash{fill:none;stroke:var(--coral);stroke-width:5;stroke-linecap:round;stroke-dasharray:2 14}
.pin text{font-family:Fredoka;font-weight:600;font-size:22px;text-anchor:middle;fill:var(--ink);paint-order:stroke;stroke:#fff;stroke-width:6px}
.pin.lit>circle:nth-of-type(2){stroke:var(--ink);stroke-width:4}
.halo{animation:halo 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes halo{50%{transform:scale(1.25);opacity:.6}}
.mystery circle{fill:#5d4f73;opacity:.88;stroke:#fff;stroke-width:3;stroke-dasharray:4 4}
.mystery .q{fill:#fff;stroke:none;font-size:26px}
.mystery{animation:wob 3s ease-in-out infinite}
.mystery:nth-of-type(odd){animation-delay:-1.3s}
@keyframes wob{50%{translate:0 -6px}}
.mystery text:not(.q){font-size:18px}

/* ---------- TEACHERS ---------- */
.teachers{display:grid;gap:clamp(14px,3vw,32px);align-items:end;grid-template-columns:110px 1fr}
@media(min-width:700px){.teachers{grid-template-columns:200px 1fr}}
.stu-stand{width:100%;animation:stubob 3.4s ease-in-out infinite;transform-origin:50% 100%}
.js .stu-stand.pop.in{animation:stubob 3.4s ease-in-out infinite}
@keyframes stubob{50%{transform:translateY(-6px)}}
.t-card{background:#fff;border:3px solid var(--ink);border-radius:26px 26px 26px 6px;padding:clamp(24px,4vw,36px);box-shadow:0 7px 0 #8fd0a8;position:relative}
.t-card h2{text-align:left;font-size:clamp(1.6rem,6vw,2.2rem);margin-bottom:12px}
.t-card p{font-weight:600;line-height:1.55;margin-bottom:22px}
.t-card .btn{font-size:clamp(.92rem,3.8vw,1.05rem);padding:12px 16px;word-break:break-all}

.follow{text-align:center;padding-bottom:clamp(40px,6vw,64px)}
.tag{font-family:Sniglet;font-size:1.3rem;margin-top:20px;color:var(--teal)}

@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .js .pop{opacity:1;transform:none}
}
@media(min-width:900px){
 .sky{padding:16px 5vw 12px;column-gap:28px;row-gap:8px;align-items:center}
 .kicker{font-size:.8rem;letter-spacing:.12em;padding:6px 12px}
 .sky h1{font-size:clamp(2.5rem,4vw,3.6rem)}
 .sub{font-size:1.05rem;max-width:46ch}
 .balloon-wrap{width:200px}
 .hero-actions{flex-direction:row;align-items:center}
 .btn.hero-pick{font-size:1.28rem;min-height:58px;padding:14px 26px}
 .books{padding:6px 40px 40px}
 .books h2{margin-bottom:14px}
 .book-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
 .book{position:relative;display:flex;flex-direction:column;text-align:center;align-items:stretch}
 .motto{font-size:1rem;margin-top:8px;padding:6px 12px}
 .cover-wrap{width:100%;min-height:0}
 .cover{height:auto;aspect-ratio:4/3;max-height:176px;box-shadow:8px 8px 0 var(--tint)}
 .book-body{display:flex;flex-direction:column;align-items:center;flex:1}
 .book .btn-row{margin-top:auto}
 .title-card{position:absolute;left:50%;top:10px;translate:-50% 0;z-index:2;background:var(--cream);border:2.5px solid var(--ink);border-radius:14px;padding:6px 12px 7px;box-shadow:0 3px 0 var(--ink);white-space:nowrap;text-align:center;max-width:calc(100% - 78px)}
 .title-card small{font-size:.82rem}
 .title-card b{font-size:clamp(1.05rem,1.5vw,1.35rem)}
 .book p{margin:12px 0 10px;font-size:1rem;line-height:1.4;max-width:34ch}
 .book .btn-row{justify-content:center}
 .books .btn{font-size:1rem;padding:10px 14px}
 .new-badge{top:8px;right:8px;font-size:.84rem}
}

.motto{position:relative;z-index:5;text-align:center;font-family:Sniglet,Fredoka,sans-serif;font-size:.82rem;line-height:1.2;color:var(--ink);margin-top:4px;background:#fffaf0d9;padding:4px 8px;border-radius:99px;transform:none}

/* ---------- FOOTER ---------- */
.site-footer{position:relative;background:#2f5a3a;color:#f3efe0;text-align:center;margin-top:clamp(60px,8vw,110px)}
.foot-edge{display:block;width:100%;height:clamp(60px,8vw,110px);position:absolute;left:0;top:calc(-1 * clamp(60px,8vw,110px) + 1px)}
.foot-inner{max-width:720px;margin:0 auto;padding:clamp(28px,5vw,44px) 24px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:14px}
.foot-mark{display:inline-flex;align-items:center;gap:10px;color:#fffaf0;text-decoration:none;font-family:Fredoka,sans-serif;font-weight:700;font-size:1.25rem}
.foot-mark img{width:30px;height:auto;animation:bob 5s ease-in-out infinite}
.foot-motto{font-family:Sniglet,Fredoka,sans-serif;font-size:1.05rem;color:#d8ecc0}
.foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 0}
.foot-nav a{color:#fffaf0;font-weight:800;font-size:.95rem;text-decoration:none;padding:10px 11px;border-radius:99px;min-height:44px;display:inline-flex;align-items:center}
.foot-nav a:hover,.foot-nav a:focus-visible{background:#ffffff1f;text-decoration:underline;text-underline-offset:3px}
.foot-nav a:focus-visible,.foot-mark:focus-visible{outline:3px dashed #f6b84b;outline-offset:2px}
.foot-credit{font-size:.82rem;font-weight:600;line-height:1.6;color:#e4ecd6;max-width:46ch;border-top:1px solid #ffffff2e;padding-top:16px;margin-top:4px}
.foot-credit cite{font-style:normal}

.btn-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}