:root{
  --bg:#fffdf8;
  --paper:#fff7e7;
  --ink:#4c3b2f;
  --tint:#cf8f62;
  --accent:#6aa0a5;
  --rose:#f27a62;
  --shadow: 0 6px 20px rgba(60,40,20,.12);
  --radius: 18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Patrick Hand', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
  font-size:18px; line-height:1.6; color:var(--ink);
  background: radial-gradient(1200px 800px at 10% 0%, #fff9e8, var(--bg));
}
.wrap{width:min(1100px, 92vw); margin:0 auto;}

h1,h2,h3{font-family:'Chewy', cursive; margin:0 0 .4rem; color:#3a2b22; letter-spacing:.2px}
.section-title{font-size:clamp(28px, 3.2vw, 40px);}
.tint{color:var(--tint)}

.site-header{position:sticky; top:0; z-index:10; background:rgba(255,253,248,.9); backdrop-filter:saturate(140%) blur(6px); border-bottom:1px solid #f0e6d6}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; padding:10px 0}
.brand{display:flex; flex-direction:column; font-size:24px}
.brand-top{font-size:22px}
.brand-sub{font-size:16px; margin-top:-2px; color:var(--tint); letter-spacing:.6px}
.nav a{margin-left:18px; text-decoration:none; color:#6b5b4f; font-weight:700}
.nav a:hover{color:#3a2b22}

.hero{padding:40px 0 10px}
.hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:center}
.hero-copy .lead{font-size:22px}
.cta-row{display:flex; gap:12px; margin-top:12px}
.btn{display:inline-block; padding:10px 16px; border-radius:14px; text-decoration:none; font-weight:700; box-shadow:var(--shadow)}
.btn.primary{background:var(--rose); color:white}
.btn.primary:hover{filter:brightness(0.95)}
.btn.ghost{background:var(--paper); color:#5a4639; border:1px solid #ead9c6}
.btn.ghost:hover{background:#fff1dc}
.hero-art{position:relative; isolation:isolate}
.hero-art img{width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow); background:#fff}
.hero-art .dna{position:absolute; right:-20px; bottom:-20px; width:160px; opacity:.8; filter:drop-shadow(0 4px 12px rgba(0,0,0,.06))}

.book{padding:36px 0 20px}
.book-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:28px; align-items:flex-start}
.cover{position:relative; text-align:center}
.cover-link img{width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow); background:#fff}
.see-inside{position:absolute; right:12px; bottom:12px}
.book-copy p{margin:.6rem 0}
.badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.badge{background:#ffe9d4; color:#5a4639; padding:6px 10px; border-radius:999px; border:1px solid #f3d1b2; font-weight:700}

.book-button-row {display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end;  margin-top: 16px}

.learn-subpanel {margin-top: 20px; padding: 18px 20px; background: #fff9ef; border: 1px solid #f0e3d2; border-radius: var(--radius); box-shadow: var(--shadow)}
.learn-subpanel h3 {margin: 0 0 12px; font-family: 'Patrick Hand'; font-size: 26px; color: var(--tint)}
.learn-list {margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px}
.learn-list li {background: var(--paper); border: 1px solid #f0e3d2; border-radius: 12px; padding: 8px 10px; box-shadow: var(--shadow); font-size: 17px}
.learn-list li::before {content: "✓"; margin-right: 6px; color: #3a2b22; font-weight: 700}
@media (max-width: 800px) {.learn-list {grid-template-columns: 1fr}}

.quotes{padding:28px 0}
.quotes.kids{background:linear-gradient(180deg, transparent, #fff6e9)}
.quote-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.quote-card{position:relative; background:var(--paper); border:1px solid #f0e3d2; padding:18px 58px 14px 18px; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.quote-card .qmark{position:absolute; width:44px; right:16px; top:16px; opacity:.6; pointer-events:none; z-index:0}
.quote-card blockquote{position:relative; z-index:1; margin:0 0 8px; font-size:18px}
.quote-card figcaption{position:relative; z-index:1; color:#7a6656; font-weight:700}

.author{padding:32px 0 48px}
.author-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:22px; align-items:center}
.author-copy p{margin:.5rem 0}
.author-art{display:flex; align-items:center; justify-content:center}
.author-art .bio{max-width:280px; border-radius:var(--radius); box-shadow:var(--shadow)}

.site-footer{border-top:1px solid #efdfcb; margin-top:20px; padding:16px 0; background:#fffaf1}
.site-footer .wrap{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px}
.footer-nav a{margin-left:16px; color:#6b5b4f; text-decoration:none; font-weight:700}
.footer-nav a:hover{color:#3a2b22}

@media (max-width: 900px){
  .hero-grid {display: flex; flex-direction: column}
  .hero .hero-copy {display: contents}
  .hero .hero-title {order: 1}
  .hero .hero-art   {order: 2}
  .hero .hero-text  {order: 3}
  .hero-grid, .book-grid, .author-grid{grid-template-columns:1fr}
  .hero-art .dna{right:-6px; bottom:-10px; width:120px}
  .quote-grid{grid-template-columns:1fr; gap:14px}
}