*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#12385d;background:#fffdf7;font-family:Arial Rounded MT Bold,Arial,sans-serif}
header{height:70px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;background:#fffdf8;position:relative;z-index:10;border-bottom:1px solid #dce8ef}
.logo{display:flex;align-items:center;gap:12px;color:#12385d;text-decoration:none;font-size:22px;font-weight:900}.mark{display:flex;gap:4px}.mark i{display:block;width:8px;height:31px;border-radius:8px;transform:rotate(-10deg)}.mark i:nth-child(1){background:#f24d70}.mark i:nth-child(2){background:#2b9ee9}.mark i:nth-child(3){background:#ffd64a}.mark i:nth-child(4){background:#ee72a9}.mark i:nth-child(5){background:#ff8736}
nav{display:flex;gap:30px}nav a{color:#12385d;text-decoration:none;font-weight:900}#menu{display:none;border:0;background:none;font-size:25px;color:#12385d}
.art-section{width:100%;overflow:hidden}.hero-art{background:#eaf8ff;padding:0 3% 22px}.friends-art{background:#eefaff;padding:48px 3%}.magic-art-v13{background:linear-gradient(100deg,#fff8db,#effcff);padding:55px 3%}
.art-wrap{position:relative;max-width:1600px;margin:0 auto;overflow:hidden}.art-wrap img{display:block;width:100%;height:auto}
.hotspot{position:absolute;display:block;z-index:5;border-radius:999px}
.hero-friends{left:11.4%;top:73%;width:12.5%;height:12%}.hero-books{left:25.5%;top:73%;width:11.7%;height:12%}
.magic-button{left:4.5%;top:70%;width:14.5%;height:20%}
.why{padding:70px 8%;background:#fffdf7}.why>span,.more-heading>span{letter-spacing:3px;font-size:12px;font-weight:900;color:#3379a1}.why h2,.more-heading h2{font-size:48px;line-height:1.05;margin:8px 0 18px}.why h2 em{font-style:normal;color:#f34e73}.why p,.more-heading p{font-family:Arial,sans-serif;color:#5e7b92;font-size:18px;line-height:1.55;max-width:900px}.chips{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px}.chips b{background:#e9f7ff;padding:12px 20px;border-radius:24px}
.more-v13{background:#eff9ff;padding:62px 3%}.more-heading{text-align:center;max-width:900px;margin:0 auto 30px}.cards-wrap{border-radius:26px}
.follow-art-v13{background:#062f60;padding:0 3% 28px}.night-wrap{max-width:1600px}
.yt{left:61.5%;top:15%;width:3.4%;height:27%}.ig{left:65.7%;top:15%;width:3.4%;height:27%}.tt{left:69.8%;top:15%;width:3.4%;height:27%}.fb{left:74%;top:15%;width:3.4%;height:27%}.email{left:70.5%;top:61%;width:23%;height:27%}
footer{padding:20px 6%;display:flex;justify-content:space-between;gap:25px;color:#12385d}footer span,footer small{color:#607c92}
@media(max-width:720px){
 header{height:66px;padding:0 4%}.logo{font-size:18px}nav{display:none;position:absolute;right:12px;top:58px;flex-direction:column;background:#fff;padding:18px;border-radius:16px;box-shadow:0 10px 25px #12385d33}nav.open{display:flex}#menu{display:block}
 .hero-art{padding:0 0 16px}.hero-wrap{width:100%;overflow:hidden}.hero-wrap img{width:205%;max-width:none;transform:translateX(-5%)}.hero-friends{left:15%;top:72%;width:27%;height:12%}.hero-books{left:45%;top:72%;width:25%;height:12%}
 .friends-art{padding:32px 0}.friends-art .art-wrap{width:175%;transform:translateX(-21%)} 
 .magic-art-v13{padding:34px 0}.magic-wrap{width:185%;transform:translateX(-2%)}.magic-button{left:4.5%;top:69%;width:15%;height:21%}
 .why{padding:50px 6%}.why h2,.more-heading h2{font-size:38px}
 .more-v13{padding:48px 0}.more-heading{padding:0 6%}.cards-wrap{width:190%;transform:translateX(-3%)}
 .follow-art-v13{padding:0 0 18px}.night-wrap{width:210%;transform:translateX(-6%)} 
 footer{flex-direction:column;align-items:center;text-align:center;gap:8px}
}


/* ===== V14 precision fixes ===== */

/* Cards artwork already includes its own title/subtitle. */
.more-v13{
  padding:38px 0 52px;
}
.more-v13 .cards-wrap{
  max-width:none;
  width:100%;
  border-radius:0;
}
.more-v13 .cards-wrap img{
  width:100%;
}

/* Make the entire night-sky reference artwork reach both viewport edges. */
.follow-art-v13{
  padding:0;
  width:100%;
  background:#062f60;
}
.follow-art-v13 .night-wrap{
  width:100%;
  max-width:none;
  margin:0;
  overflow:hidden;
}
.follow-art-v13 .night-wrap img{
  display:block;
  width:100%;
  height:auto;
}

/* Click targets aligned to the icon centers in the baked night artwork.
   Each target is intentionally tight so neighboring icons do not overlap. */
.follow-art-v13 .yt{
  left:68.1%;
  top:16.5%;
  width:3.0%;
  height:24%;
}
.follow-art-v13 .ig{
  left:72.0%;
  top:16.5%;
  width:3.0%;
  height:24%;
}
.follow-art-v13 .tt{
  left:75.8%;
  top:16.5%;
  width:3.0%;
  height:24%;
}
.follow-art-v13 .fb{
  left:79.7%;
  top:16.5%;
  width:3.0%;
  height:24%;
}
.follow-art-v13 .email{
  left:65.0%;
  top:62%;
  width:28.5%;
  height:25%;
}

/* Override the old mobile transforms so this section also stays full bleed. */
@media(max-width:720px){
  .more-v13{
    padding:30px 0 38px;
  }
  .more-v13 .cards-wrap{
    width:100%;
    transform:none;
  }
  .follow-art-v13{
    padding:0;
  }
  .follow-art-v13 .night-wrap{
    width:190%;
    max-width:none;
    transform:translateX(-45%);
  }

  /* On the mobile crop, keep the interactive right-hand controls aligned. */
  .follow-art-v13 .yt{left:68.1%;top:16.5%;width:3%;height:24%}
  .follow-art-v13 .ig{left:72.0%;top:16.5%;width:3%;height:24%}
  .follow-art-v13 .tt{left:75.8%;top:16.5%;width:3%;height:24%}
  .follow-art-v13 .fb{left:79.7%;top:16.5%;width:3%;height:24%}
  .follow-art-v13 .email{left:65%;top:62%;width:28.5%;height:25%}
}


/* ===== V15 cleanup + exact clickable icon alignment ===== */

/* The residual strips were removed directly from hero.jpg and cards.jpg. */

/* Exact hotspots for the four social icons baked into night_v13.jpg.
   Coordinates are relative to the actual 1280px-wide source artwork. */
.follow-art-v13 .yt{
  left:74.9%;
  top:16.5%;
  width:3.5%;
  height:27%;
}
.follow-art-v13 .ig{
  left:79.0%;
  top:16.5%;
  width:3.5%;
  height:27%;
}
.follow-art-v13 .tt{
  left:83.1%;
  top:16.5%;
  width:3.5%;
  height:27%;
}
.follow-art-v13 .fb{
  left:87.2%;
  top:16.5%;
  width:3.5%;
  height:27%;
}
.follow-art-v13 .email{
  left:71.1%;
  top:64%;
  width:25.2%;
  height:28%;
}

/* Same source-image coordinates remain valid on mobile because the
   hotspots live inside the transformed night-wrap itself. */
@media(max-width:720px){
  .follow-art-v13 .yt{left:74.9%;top:16.5%;width:3.5%;height:27%}
  .follow-art-v13 .ig{left:79.0%;top:16.5%;width:3.5%;height:27%}
  .follow-art-v13 .tt{left:83.1%;top:16.5%;width:3.5%;height:27%}
  .follow-art-v13 .fb{left:87.2%;top:16.5%;width:3.5%;height:27%}
  .follow-art-v13 .email{left:71.1%;top:64%;width:25.2%;height:28%}
}


/* ===== V16 final fine tuning ===== */

/* Let the Magic Pencil banner use substantially more of the screen width
   instead of sitting inside the old 1600px art-wrap constraint. */
.magic-art-v13{
  padding-left:0;
  padding-right:0;
}
.magic-art-v13 .magic-wrap{
  width:94%;
  max-width:none;
  margin:0 auto;
}
.magic-art-v13 .magic-wrap img{
  width:100%;
}

/* Tight independent social hotspots.
   V15 was slightly right-heavy, so all four targets move left and are narrower
   to prevent YouTube/Instagram and TikTok/Facebook cross-over. */
.follow-art-v13 .yt{
  left:73.7%;
  top:16.5%;
  width:2.6%;
  height:27%;
}
.follow-art-v13 .ig{
  left:77.8%;
  top:16.5%;
  width:2.6%;
  height:27%;
}
.follow-art-v13 .tt{
  left:81.9%;
  top:16.5%;
  width:2.6%;
  height:27%;
}
.follow-art-v13 .fb{
  left:86.0%;
  top:16.5%;
  width:2.6%;
  height:27%;
}

/* Keep mobile targets tied to the same source-image positions. */
@media(max-width:720px){
  .magic-art-v13 .magic-wrap{
    width:185%;
    max-width:none;
    margin:0;
    transform:translateX(-2%);
  }
  .follow-art-v13 .yt{left:73.7%;top:16.5%;width:2.6%;height:27%}
  .follow-art-v13 .ig{left:77.8%;top:16.5%;width:2.6%;height:27%}
  .follow-art-v13 .tt{left:81.9%;top:16.5%;width:2.6%;height:27%}
  .follow-art-v13 .fb{left:86.0%;top:16.5%;width:2.6%;height:27%}
}


/* ===== V17 surgical image cleanup ===== */

/* Magic Pencil: after physically cropping the empty margins, let artwork fill
   nearly the entire viewport while preserving its aspect ratio and readable text. */
.magic-art-v13{
  overflow:hidden;
}
.magic-art-v13 .magic-wrap{
  width:98%;
  max-width:none;
  margin:0 auto;
}
.magic-art-v13 .magic-wrap img{
  display:block;
  width:100%;
  height:auto;
  object-fit:fill;
}

/* V17 intentionally leaves the now-correct social hotspots from V16 untouched. */

@media(max-width:720px){
  .magic-art-v13 .magic-wrap{
    width:188%;
    max-width:none;
    margin:0;
    transform:translateX(-3%);
  }
}


/* ===== V20 MOBILE RESPONSIVE FIX =====
   Desktop V19 is intentionally unchanged.
   On phones, stop enlarging/translating the baked artwork. The entire artwork
   now fits inside the viewport so text and characters are not cut off.
*/
@media (max-width:720px){

  html, body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  /* HERO */
  .hero-art{
    padding:0 0 18px;
  }
  .hero-wrap{
    width:100%;
    max-width:100%;
    margin:0;
    transform:none;
    overflow:hidden;
  }
  .hero-wrap img{
    width:100%;
    max-width:100%;
    height:auto;
    transform:none;
  }
  /* hotspot positions revert to source-art coordinates */
  .hero-friends{
    left:11.4%;
    top:73%;
    width:12.5%;
    height:12%;
  }
  .hero-books{
    left:25.5%;
    top:73%;
    width:11.7%;
    height:12%;
  }

  /* FRIENDS */
  .friends-art{
    padding:26px 0;
  }
  .friends-art .art-wrap{
    width:100%;
    max-width:100%;
    margin:0;
    transform:none;
  }
  .friends-art .art-wrap img{
    width:100%;
    height:auto;
  }

  /* MAGIC PENCIL */
  .magic-art-v13{
    padding:28px 0;
  }
  .magic-art-v13 .magic-wrap{
    width:100%;
    max-width:100%;
    margin:0;
    transform:none;
  }
  .magic-art-v13 .magic-wrap img{
    width:100%;
    max-width:100%;
    height:auto;
    object-fit:contain;
  }
  .magic-button{
    left:4.5%;
    top:70%;
    width:14.5%;
    height:20%;
  }

  /* OUR WHY */
  .why{
    padding:46px 6%;
  }
  .why h2{
    font-size:clamp(34px,10vw,44px);
  }
  .why p{
    font-size:17px;
  }
  .chips{
    gap:10px;
  }
  .chips b{
    padding:11px 16px;
  }

  /* BOOKS / MORE */
  .more-v13{
    padding:28px 0 34px;
  }
  .more-v13 .cards-wrap{
    width:100%;
    max-width:100%;
    margin:0;
    transform:none;
    overflow:hidden;
  }
  .more-v13 .cards-wrap img{
    width:100%;
    max-width:100%;
    height:auto;
    transform:none;
  }

  /* FOLLOW / NIGHT SKY */
  .follow-art-v13{
    padding:0;
    overflow:hidden;
  }
  .follow-art-v13 .night-wrap{
    width:100%;
    max-width:100%;
    margin:0;
    transform:none;
  }
  .follow-art-v13 .night-wrap img{
    width:100%;
    max-width:100%;
    height:auto;
  }

  /* Social targets use the same source-image coordinates as desktop. */
  .follow-art-v13 .yt{left:73.7%;top:16.5%;width:2.6%;height:27%}
  .follow-art-v13 .ig{left:77.8%;top:16.5%;width:2.6%;height:27%}
  .follow-art-v13 .tt{left:81.9%;top:16.5%;width:2.6%;height:27%}
  .follow-art-v13 .fb{left:86.0%;top:16.5%;width:2.6%;height:27%}
  .follow-art-v13 .email{left:71.1%;top:64%;width:25.2%;height:28%}

  footer{
    padding:22px 5%;
  }
}