*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff7dc;font-family:Arial,sans-serif;color:#222}.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:22px;padding:10px 18px;background:rgba(44,28,11,.95);box-shadow:0 2px 12px #0005}.brand{font-weight:900;font-size:28px;color:#ffd82d;text-decoration:none;text-shadow:2px 2px #000}.brand span{font-size:20px}nav{display:flex;align-items:center;gap:4px;flex:1;justify-content:flex-end}nav a,.drop>button{color:white;background:none;border:0;text-decoration:none;padding:11px 12px;border-radius:10px;font-weight:700;cursor:pointer;font-size:14px}nav a:hover,.drop>button:hover{background:#ffffff1c}.drop{position:relative}.dropmenu{display:none;position:absolute;top:100%;left:0;min-width:190px;background:#2c1c0b;border-radius:10px;padding:7px;box-shadow:0 8px 24px #0007}.drop:hover .dropmenu,.drop:focus-within .dropmenu{display:grid}.dropmenu a{white-space:nowrap}.menuBtn{display:none;margin-left:auto;border:0;border-radius:9px;padding:9px 12px;font-weight:800;background:#ffd82d}.page{position:relative;max-width:1536px;margin:0 auto 16px;scroll-margin-top:70px;background:white;box-shadow:0 8px 28px #4931001f}.page>img{width:100%;height:auto;display:block}.floating{position:absolute;left:50%;bottom:2.5%;transform:translateX(-50%);display:flex;gap:10px;flex-wrap:wrap;justify-content:center;background:#ffffffd9;padding:9px;border-radius:16px;box-shadow:0 3px 12px #0004}.floating a,.floating button{border:0;border-radius:12px;padding:10px 15px;font-weight:900;text-decoration:none;background:#22a849;color:white;cursor:pointer}.floating a:nth-child(2){background:#1889ee}.floating a:nth-child(3){background:#e92936}.disabled{background:#777!important;cursor:not-allowed!important}.hotspot{position:absolute;display:block}.discover{left:38%;top:67%;width:25%;height:12%}.portrait{padding:30px;background:linear-gradient(#aee7ff,#eaf8d4)}.portraitWrap{max-width:1000px;margin:auto;display:grid;grid-template-columns:minmax(280px,520px) 1fr;gap:28px;align-items:center}.portraitWrap img{width:100%;border:12px solid white;box-shadow:0 8px 25px #0004}.portraitText{background:#fff9e5;border:5px solid #a86d2b;border-radius:18px;padding:25px}.portraitText h2{font-size:clamp(32px,5vw,62px);margin:0 0 12px;color:#6f4018}.portraitText p{font-size:clamp(18px,2vw,28px);line-height:1.45}footer{text-align:center;padding:28px;background:#2c1c0b;color:white;font-weight:700}#topBtn{position:fixed;right:18px;bottom:18px;z-index:40;width:48px;height:48px;border:0;border-radius:50%;background:#ffd82d;font-size:26px;font-weight:900;box-shadow:0 4px 14px #0005;cursor:pointer;display:none}
@media(max-width:900px){.topbar{flex-wrap:wrap}.menuBtn{display:block}nav{display:none;width:100%;flex-direction:column;align-items:stretch}nav.open{display:flex}nav a,.drop>button{text-align:left;width:100%}.dropmenu{position:static;box-shadow:none;background:#ffffff10;margin-left:12px}.drop.open .dropmenu{display:grid}.page{margin-bottom:8px}.floating{position:static;transform:none;border-radius:0}.portraitWrap{grid-template-columns:1fr}.discover{display:none}}
.actionbar{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center;padding:12px;background:#fff8df;border-top:3px solid #e6bd58}.actionbar a,.actionbar button{border:0;border-radius:12px;padding:11px 16px;font-weight:900;text-decoration:none;background:#22a849;color:#fff;cursor:pointer;font-size:15px}.actionbar a:nth-child(2),.actionbar button:nth-child(2){background:#1889ee}.actionbar a:nth-child(3),.actionbar button:nth-child(3){background:#e92936}.pending{font-weight:800;color:#6b5528;padding:8px}.sofia-fix{position:absolute;right:3%;top:10%;background:#fff9e9;border:3px solid #9a6227;border-radius:10px;padding:7px 13px;font-weight:900;box-shadow:0 3px 10px #0003}.final-fix{text-align:center;background:#fff8df;padding:12px;font-size:20px;font-weight:900;color:#6b3c16}.modal{display:none;position:fixed;inset:0;z-index:100;background:#0009;padding:20px;align-items:center;justify-content:center}.modal.show{display:flex}.modalCard{position:relative;max-width:620px;background:#fff8df;border:7px solid #8b5526;border-radius:22px;padding:30px;box-shadow:0 12px 40px #0008}.modalCard h2{margin-top:0;color:#754117;font-size:32px}.modalCard p{font-size:18px;line-height:1.5}.close{position:absolute;right:10px;top:7px;border:0;background:none;font-size:34px;cursor:pointer}.page .floating{display:none}@media(max-width:900px){.actionbar{position:static}.sofia-fix{position:static;margin:8px auto;width:max-content;max-width:90%}}
/* Image-map style hotspots: these make the buttons drawn into the artwork genuinely clickable. */
.hotspot{position:absolute;z-index:20;display:block;background:transparent;border:0;padding:0;cursor:pointer}
.hotspot:focus-visible{outline:4px solid #ffd82d;outline-offset:2px;border-radius:10px}
.home-discover{left:33.5%;top:83.2%;width:29.5%;height:11.5%}
.books-story{left:20.0%;top:72.0%;width:12.5%;height:9.0%}.books-colour{left:75.8%;top:72.0%;width:12.5%;height:9.0%}
.world-woods{left:36.5%;top:28%;width:16%;height:17%}.world-castle{left:66%;top:28%;width:16%;height:17%}.world-friends{left:47%;top:53%;width:17%;height:18%}.world-activity{left:65%;top:53%;width:17%;height:18%}
.activity-download{height:5.5%}.activity-download.a1{left:25.7%;top:44%;width:7.2%}.activity-download.a2{left:37.1%;top:44%;width:7.2%}.activity-download.a3{left:48.5%;top:44%;width:7.2%}.activity-download.a4{left:59.9%;top:44%;width:7.2%}.activity-download.a5{left:71.3%;top:44%;width:7.2%}.activity-download.b1{left:25.7%;top:68.8%;width:7.2%}.activity-download.b2{left:35.0%;top:68.8%;width:7.2%}.activity-download.b3{left:44.3%;top:68.8%;width:7.2%}.activity-download.b4{left:53.6%;top:68.8%;width:7.2%}.activity-download.b5{left:62.9%;top:68.8%;width:7.2%}.activity-download.b6{left:72.2%;top:68.8%;width:7.2%}.activity-download.b7{left:81.5%;top:68.8%;width:7.2%}.activities-back{left:33%;top:88%;width:16%;height:8%}.activities-next{left:73%;top:86%;width:17%;height:10%}
.design-back,.spot-back,.write-back{left:8%;top:88%;width:17%;height:8%}.design-next,.spot-next,.write-next{left:78%;top:87%;width:15%;height:9%}.design-print{left:76%;top:65%;width:15%;height:14%}.spot-print{left:86%;top:70%;width:10%;height:15%}.write-print{left:73%;top:63%;width:17%;height:16%}
.real-books{left:35.5%;top:83.0%;width:14%;height:8%}.real-activities{left:51%;top:83.0%;width:14%;height:8%}.real-amazon{left:66.5%;top:83.0%;width:14%;height:8%}
.final-books{left:13.0%;top:80.0%;width:15.5%;height:10.0%}.final-activities{left:29.2%;top:80.0%;width:15.5%;height:10.0%}.final-amazon{left:45.8%;top:80.0%;width:17.0%;height:10.0%}.disabled-hotspot{cursor:not-allowed}
/* Cover the old photo caption cleanly, rather than adding a second caption elsewhere. */
.sofia-fix{position:absolute;right:24.7%;top:34.5%;width:11.5%;min-height:5.2%;display:flex;align-items:center;justify-content:center;text-align:center;background:white;border:0;border-radius:0;padding:2px 4px;font-weight:900;font-size:clamp(8px,1vw,16px);box-shadow:none;transform:rotate(-2deg)}
@media(max-width:900px){.sofia-fix{position:absolute;right:24.7%;top:34.5%;width:11.5%;margin:0;min-height:5.2%;font-size:1.5vw}}
/* V3: guaranteed functional controls beneath artwork. These are real HTML links, not image hotspots. */
.actionbar{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;padding:14px 16px 18px;background:#fff4c8;border-top:3px solid #d69a2d}
.actionbar a,.actionbar button,.actionbar .coming{appearance:none;border:0;border-radius:12px;padding:12px 18px;font:800 15px Arial,sans-serif;text-decoration:none;background:#168bd2;color:white;box-shadow:0 3px 0 #0d5e90;cursor:pointer}
.actionbar button{background:#22a849;box-shadow:0 3px 0 #15712f}
.actionbar .downloadbtn{background:#e52b3c;box-shadow:0 3px 0 #9c1724}
.actionbar .coming{background:#777;box-shadow:0 3px 0 #444;cursor:default}
.actionbar a:hover,.actionbar button:hover{filter:brightness(1.08);transform:translateY(-1px)}
/* Corrected hotspot geometry for the colouring-page artwork itself. */
.activity-download{top:50.7%!important;height:5.8%!important}
.activity-download.a1{left:27.1%!important;width:10.7%!important}.activity-download.a2{left:39.2%!important;width:10.7%!important}.activity-download.a3{left:51.2%!important;width:10.7%!important}.activity-download.a4{left:63.1%!important;width:10.7%!important}.activity-download.a5{left:75.3%!important;width:11.7%!important}
.activity-download.b1,.activity-download.b2,.activity-download.b3,.activity-download.b4,.activity-download.b5,.activity-download.b6,.activity-download.b7{top:74.1%!important;height:5.5%!important;width:9.5%!important}
.activity-download.b1{left:13.7%!important}.activity-download.b2{left:24.3%!important}.activity-download.b3{left:34.8%!important}.activity-download.b4{left:45.3%!important}.activity-download.b5{left:55.8%!important}.activity-download.b6{left:66.4%!important}.activity-download.b7{left:77.0%!important;width:10.7%!important}
.activities-back{left:16%!important;top:88.4%!important;width:14.5%!important;height:8%!important}.activities-next{left:69.5%!important;top:87.6%!important;width:14.5%!important;height:9%!important}
/* Spot-the-difference artwork buttons */
.spot-back{left:16%!important;top:87.2%!important;width:13.5%!important;height:8%!important}.spot-next{left:69.5%!important;top:87.2%!important;width:13.5%!important;height:8%!important}
@media(max-width:700px){.actionbar{gap:8px;padding:10px}.actionbar a,.actionbar button,.actionbar .coming{width:100%;text-align:center;padding:11px;font-size:14px}}

/* REBUILT interaction geometry: every hotspot is now relative to the artwork image ONLY. */
.page{position:static}
.artwork{position:relative;width:100%;line-height:0;overflow:hidden}
.artwork>img{display:block;width:100%;height:auto}
.artwork .hotspot{position:absolute;z-index:25;display:block;line-height:normal}
.artwork .sofia-fix{line-height:1.15}
/* Make image hotspots easier to hit on touch devices without changing their appearance. */
@media (pointer:coarse){.artwork .hotspot{min-width:44px;min-height:44px}}
/* Real controls are deliberately always present as a reliable accessible fallback. */
.actionbar{position:relative;z-index:30}

/* Sofia caption correction: cover original caption and show only requested text */
.artwork .sofia-fix{position:absolute!important;left:70.2%!important;right:auto!important;top:34.0%!important;width:16.4%!important;height:6.6%!important;min-height:0!important;margin:0!important;padding:0 4px!important;background:#fffdf5!important;border:0!important;border-radius:0!important;box-shadow:none!important;transform:rotate(-2deg)!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;font-weight:900!important;font-size:clamp(9px,1.25vw,19px)!important;color:#111!important;z-index:8!important;}

/* FINAL PASS: branded Sofia caption and live Amazon controls */
.artwork .sofia-fix{
  left:69.55%!important; top:32.75%!important; width:18.1%!important; height:7.4%!important;
  background:linear-gradient(180deg,#fffdf2 0%,#f4e0b4 100%)!important;
  border:3px solid #a86b2b!important; border-radius:7px!important;
  box-shadow:0 3px 8px #0004!important; transform:rotate(-2deg)!important;
  color:#17110b!important; font-weight:900!important; font-size:clamp(10px,1.35vw,21px)!important;
  text-shadow:0 1px #fff!important; z-index:12!important;
}
.amazonbtn,.modalAmazon{background:#f3a712!important;color:#18110a!important;box-shadow:0 3px 0 #a86400!important}
.modalAmazon{display:inline-block;padding:12px 16px;border-radius:12px;font-weight:900;text-decoration:none}
/* Click feedback makes image buttons feel interactive without changing artwork. */
.artwork a.hotspot:hover,.artwork button.hotspot:hover{background:rgba(255,216,45,.10);box-shadow:inset 0 0 0 3px rgba(255,216,45,.55);border-radius:12px}
\n/* FINAL NAVIGATION + MAP PASS */
.drop.open .dropmenu{display:grid!important}
.drop>button[aria-expanded="true"]{background:#ffffff24}
.dropmenu{z-index:80}
@media(min-width:901px){.dropmenu{top:calc(100% + 2px)}.drop.open .dropmenu{display:grid!important}}
/* Sofia caption is now part of the actual artwork; suppress all legacy overlays. */
.sofia-fix{display:none!important}
/* Woodlands map hotspots, aligned to the wooden location signs. */
.map-castle{left:49.5%;top:11.5%;width:13.5%;height:8.5%}
.map-stinky{left:27.5%;top:28%;width:12%;height:9%}
.map-funky{left:69.5%;top:24.5%;width:12.5%;height:9.5%}
.map-friends{left:25%;top:48%;width:14%;height:8%}
.map-field{left:48%;top:29%;width:14%;height:8%}
.map-cave{left:84%;top:29%;width:13%;height:8%}
.map-lake{left:59%;top:65%;width:14%;height:8%}
.map-woods{left:8%;top:75%;width:16%;height:8%}