:root { --navy:#082a58; --blue:#1265b4; --cream:#fff8e8; --paper:#f5e6bd; --ink:#112d51; --gold:#e0a22e; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.topbar { height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(22px,5vw,76px); background:#fffaf0dd; border-bottom:1px solid #ead8ab; position:relative; z-index:5; }
.wordmark { color:var(--navy); font-size:25px; font-weight:1000; letter-spacing:-1.4px; text-transform:uppercase; }
.wordmark span { display:block; font-size:9px; line-height:6px; letter-spacing:3px; text-align:center; }
nav { display:flex; gap:28px; font-weight:800; font-size:14px; }
nav a:hover { color:var(--blue); }
.hero { min-height:690px; display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; padding:72px clamp(24px,7vw,110px) 88px; overflow:hidden; background:radial-gradient(circle at 16% 20%,#fffdf7 0 12%,transparent 38%),linear-gradient(120deg,#fff8e7,#f5e3b5); position:relative; }
.hero:after { content:""; position:absolute; inset:0; opacity:.14; pointer-events:none; background-image:radial-gradient(#9b6f1d 0.7px,transparent .7px); background-size:8px 8px; }
.hero-copy,.hero-art { position:relative; z-index:1; }
.kicker,.section-label { text-transform:uppercase; letter-spacing:2.4px; font-weight:900; font-size:12px; color:#b65a2e; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(50px,6.2vw,88px); line-height:.98; letter-spacing:-4px; max-width:760px; margin-bottom:28px; color:var(--navy); }
h1 em { color:#17704a; font-style:normal; position:relative; }
.lede { max-width:650px; font-size:19px; line-height:1.75; color:#405979; }
.hero-actions { display:flex; gap:26px; align-items:center; margin-top:34px; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:8px; border-radius:14px; background:var(--navy); color:white; padding:16px 22px; font-weight:900; box-shadow:0 7px 0 #041a38; transition:.2s ease; }
.button:hover { transform:translateY(-2px); box-shadow:0 9px 0 #041a38; }
.button.small { padding:12px 15px; border-radius:11px; box-shadow:none; margin-top:18px; font-size:13px; }
.text-link { font-weight:900; color:var(--navy); }
.text-link span { color:#c6502c; font-size:22px; }
.skill-row { display:flex; gap:12px; margin-top:36px; text-transform:uppercase; font-size:12px; letter-spacing:2px; font-weight:1000; color:#1b653f; }
.skill-row b { color:#dd7b1d; }
.paper-frame { transform:rotate(2deg); padding:13px; border-radius:24px; background:white; box-shadow:0 24px 60px #6e4b1730; border:2px solid #ebcf8a; }
.paper-frame img { aspect-ratio:1; object-fit:cover; border-radius:14px; }
.doodle { position:absolute; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; color:white; font-size:26px; font-weight:900; box-shadow:0 8px 22px #082a5830; border:4px solid white; }
.d1 { background:#ea9426; right:-18px; top:10%; }.d2 { background:#794c9d; left:-25px; bottom:18%; }.d3 { background:#1a7660; right:8%; bottom:-25px; }
.grownups { text-align:center; padding:74px 24px; background:white; }
.grownups h2,.section-heading h2,.team-intro h2 { font-family:Georgia,serif; font-size:clamp(34px,4vw,54px); letter-spacing:-1.7px; color:var(--navy); margin-bottom:18px; }
.grownups>p:not(.section-label) { max-width:760px; margin:0 auto 30px; line-height:1.7; color:#526681; font-size:18px; }
.benefits { display:flex; justify-content:center; flex-wrap:wrap; gap:16px; }
.benefits span { border:1px solid #d9e1d1; border-radius:99px; padding:10px 16px; font-weight:800; color:#2d6c4c; background:#f4faef; }
.books-section { padding:88px clamp(24px,7vw,110px); background:var(--navy); color:white; }
.section-heading { display:flex; justify-content:space-between; gap:40px; align-items:end; margin-bottom:42px; }
.section-heading h2 { color:white; margin:0; }.section-heading>p { max-width:370px; color:#bcd0e7; line-height:1.6; }
.books-section .section-label { color:#f1b342; }
.book-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.book-card { min-width:0; background:#fff9e8; color:var(--ink); padding:14px; border-radius:22px; display:flex; flex-direction:column; box-shadow:0 15px 35px #00132f66; }
.book-card.featured { display:flex; }
.book-art { border-radius:16px; overflow:hidden; background:linear-gradient(145deg,#f7d678,#d77c2f); display:grid; place-items:center; }
.book-art { width:100%; aspect-ratio:4/5; }
.book-art img { width:100%; height:100%; object-fit:cover; }
.book-art>span { font-family:Georgia,serif; font-size:110px; color:#fff8; font-weight:900; }
.book-info { padding:18px 8px 8px; }
.book-info>p { text-transform:uppercase; color:#b45628; letter-spacing:1.6px; font-size:11px; font-weight:1000; }
.book-info h3 { font-family:Georgia,serif; font-size:24px; line-height:1.12; margin-bottom:13px; }
.status { display:block; font-size:12px; color:#678; font-weight:800; }
.future { opacity:.78; }
.team-section { padding:90px clamp(24px,7vw,110px) 100px; background:#fff8e8; }
.team-intro { text-align:center; max-width:790px; margin:0 auto 42px; }.team-intro>p:last-child { line-height:1.7; color:#526681; font-size:18px; }
.character-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.character { background:white; border-radius:20px; padding:14px 14px 24px; border-top:7px solid currentColor; box-shadow:0 10px 30px #082a5812; overflow:hidden; }
.character-portrait { width:100%; aspect-ratio:1; object-fit:cover; border-radius:14px; margin-bottom:20px; }
.character p { color:currentColor; text-transform:uppercase; font-size:10px; letter-spacing:1.2px; font-weight:1000; margin-bottom:6px; }.character h3 { color:var(--navy); font-family:Georgia,serif; font-size:24px; margin-bottom:10px; }.character>span { display:block; color:#667790; line-height:1.55; font-size:14px; }
.red{color:#bd432e}.green{color:#397b37}.purple{color:#71519d}.blue{color:#2473b7}.orange{color:#d47a1d}
footer { background:#051c3b; color:#d8e4f0; min-height:150px; padding:46px clamp(24px,7vw,110px); display:flex; justify-content:space-between; align-items:center; gap:30px; } footer .wordmark{color:white} footer p,footer small{margin:0;color:#9fb2c9}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:54px}.hero-art{max-width:600px;margin:auto}.book-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.book-card.featured{grid-column:auto}.character-grid{grid-template-columns:repeat(2,1fr)}.character:last-child{grid-column:1/-1}.section-heading{align-items:start;flex-direction:column}.section-heading>p{margin:0}
}
@media (max-width:600px){
  .topbar{height:64px;padding:0 18px}.wordmark{font-size:19px}nav{gap:14px;font-size:12px}.hero{min-height:auto;padding:48px 20px 62px;gap:42px}h1{font-size:51px;letter-spacing:-3px}.lede{font-size:16px}.hero-actions{align-items:stretch;flex-direction:column;gap:18px}.text-link{text-align:center}.skill-row{justify-content:center;font-size:10px}.doodle{width:43px;height:43px;font-size:19px}.grownups,.books-section,.team-section{padding:62px 20px}.benefits{align-items:stretch;flex-direction:column}.section-heading{margin-bottom:28px}.book-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.book-card,.book-card.featured{grid-column:auto;display:block;min-height:0;padding:10px;border-radius:18px}.book-art{aspect-ratio:4/5;border-radius:12px}.book-art>span{font-size:64px}.book-info{padding:13px 3px 4px}.book-info h3{font-family:Arial,sans-serif;font-size:15px;letter-spacing:-.3px}.book-info>p{font-size:9px}.button.small{width:100%;padding:10px 7px;font-size:11px}.character-grid{grid-template-columns:1fr}.character:last-child{grid-column:auto}.character{display:grid;grid-template-columns:96px 1fr;gap:0 14px;align-items:center;padding:12px}.character-portrait{grid-row:1/4;width:96px;height:96px;margin:0}.character p,.character h3{margin-bottom:5px}.character>span{grid-column:2}.team-intro>p:last-child{font-size:16px}footer{flex-direction:column;text-align:center;padding:40px 20px}
}