:root{
  --navy:#10295f; --navy2:#183a7a; --orange:#ed6b1b; --gold:#ffbd28;
  --green:#397642; --cream:#fff6df; --paper:#fffdf7; --ink:#25332d;
  --sky:#eaf7ff; --pink:#f06a9b; --line:#dbe5e0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Trebuchet MS",Arial,sans-serif;color:var(--ink);background:var(--paper);line-height:1.55}
img{max-width:100%;display:block} .book-cover{height:auto}
a{color:inherit}
.wrap{width:min(1180px,92vw);margin:auto}
.site-head{position:sticky;top:0;z-index:50;background:rgba(255,253,247,.96);backdrop-filter:blur(9px);border-bottom:1px solid #10295f1c}
.nav{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:26px}
.brand{font-weight:900;font-size:clamp(1.08rem,2vw,1.5rem);color:var(--navy);text-decoration:none;letter-spacing:-.02em}
.brand span{color:var(--orange)}
.links{display:flex;gap:23px;align-items:center;font-weight:800;font-size:.94rem}
.links a{text-decoration:none}.links a:hover,.links a[aria-current="page"]{color:var(--orange)}
.hero{min-height:690px;display:flex;align-items:center;position:relative;overflow:hidden;background:
 linear-gradient(90deg,rgba(8,31,72,.92) 0%,rgba(8,31,72,.72) 45%,rgba(8,31,72,.08) 100%),
 url("assets/hero-cottage.webp") center 35%/cover no-repeat}
.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:100px;background:linear-gradient(transparent,var(--paper))}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .65fr;align-items:center;gap:55px;padding:70px 0 105px}
.kicker,.eyebrow{text-transform:uppercase;font-size:.78rem;letter-spacing:.1em;font-weight:900}
.kicker{display:inline-block;border:1px solid #ffffff66;color:#fff;background:#ffffff16;border-radius:999px;padding:8px 14px}
.eyebrow{color:var(--orange)}
h1,h2,h3{color:var(--navy);line-height:1.05;letter-spacing:-.035em}
.hero h1{font-size:clamp(3.2rem,7vw,6.6rem);color:#fff;margin:.25em 0 .18em;line-height:.84}
.hero h1 em{display:block;color:#ffd762;font-style:normal}
.hero .lead{color:#fff;font-size:clamp(1.1rem,2vw,1.42rem);max-width:700px;text-shadow:0 2px 10px #0008}
.cover{justify-self:end;position:relative}.cover img{width:min(360px,36vw);box-shadow:0 28px 68px #0008;border-radius:8px;transform:rotate(1.5deg)}
.badge{position:absolute;right:-25px;top:-22px;background:var(--orange);color:#fff;font-weight:900;border-radius:50%;width:78px;height:78px;display:grid;place-items:center;transform:rotate(7deg)}
.btns{display:flex;gap:13px;flex-wrap:wrap;margin-top:25px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 20px;border-radius:13px;text-decoration:none;font-weight:900;box-shadow:0 8px 24px #0002;transition:.18s}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--gold);color:#26210d}.btn.white{background:#fff;color:var(--navy)}.btn.navy{background:var(--navy);color:#fff}
.section{padding:82px 0}.section.alt{background:linear-gradient(180deg,#ecf8ff,#fff8e6)}
h2{font-size:clamp(2rem,4.5vw,3.7rem);margin:.2em 0 .3em}
h3{font-size:1.45rem;margin:.1em 0 .35em}
.copy{font-size:1.07rem;line-height:1.7;max-width:760px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.image-card{background:#fff;padding:12px;border-radius:22px;box-shadow:0 18px 50px #173c6f21;border:1px solid #10295f12}
.image-card img{width:100%;height:auto;object-fit:contain;border-radius:13px}
.pills{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}
.pill{padding:8px 12px;border-radius:999px;background:#edf6ec;color:var(--green);font-weight:900}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}
.card{background:#fff;border:1px solid #10295f13;border-radius:21px;padding:12px;box-shadow:0 13px 38px #173c6f17}
.media{background:#f6fbff;border-radius:14px;min-height:280px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.media img{max-width:100%;max-height:360px;width:auto;height:auto;object-fit:contain}
.card .pad{padding:17px 8px 10px}.card p{margin:.25em 0;color:#50615a}
.page-hero{background:linear-gradient(135deg,#e9f7ff,#fff0c9);padding:80px 0 64px;border-bottom:1px solid #10295f10}
.page-hero h1{font-size:clamp(2.8rem,6vw,5rem);margin:.08em 0;color:var(--navy)}
.book-hero{display:grid;grid-template-columns:.55fr 1.2fr;gap:52px;align-items:center}
.book-hero .book-cover{max-width:330px;box-shadow:0 18px 50px #173c6f2b;border-radius:8px}
.character-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.character{display:grid;grid-template-columns:180px 1fr;gap:22px;align-items:center;background:#fff;border-radius:22px;padding:14px;box-shadow:0 13px 38px #173c6f16}
.character img{width:180px;height:180px;object-fit:contain;background:#f7fbff;border-radius:15px}
.character p{margin:.2em 0}
.activity-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.activity{background:#fff;border-radius:20px;padding:20px;box-shadow:0 13px 38px #173c6f16}
.activity img{width:100%;height:420px;object-fit:contain;background:#fafafa;border-radius:12px}
.activity h3{margin-top:15px}
.note{background:#fff2c6;border-left:5px solid var(--gold);padding:18px 20px;border-radius:10px;margin:26px 0}
.quote{font-size:clamp(1.45rem,2.8vw,2.25rem);line-height:1.35;color:var(--navy);font-weight:900}
footer{background:#0b1d42;color:#dce7ff;padding:44px 0}.foot{display:flex;justify-content:space-between;gap:30px;align-items:center;flex-wrap:wrap}.small{font-size:.9rem;opacity:.8}
@media(max-width:850px){
 .nav{min-height:72px;flex-wrap:wrap;padding:12px 0}.brand{width:100%}.links{display:flex;width:100%;flex-wrap:wrap;gap:8px 14px;padding:2px 0 8px;font-size:.9rem}.links a{background:var(--cream);border:1px solid #10295f1a;border-radius:999px;padding:7px 10px}
 .hero{min-height:auto;background-position:67% center}.hero-grid,.grid2,.book-hero{grid-template-columns:1fr}
 .hero-grid{padding:62px 0 95px}.cover{justify-self:start}.cover img{width:220px}.cards,.character-grid,.activity-grid{grid-template-columns:1fr}
 .character{grid-template-columns:130px 1fr}.character img{width:130px;height:130px}.section{padding:62px 0}
}