:root{
  --cream:#F7EEE0; --paper:#FFFBF4; --orange:#FC7F06; --orange-d:#D96500;
  --brown:#5C3E2D; --brown-l:#8A6B58; --sage:#7F9B7A; --line:#EADBC6;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--brown);font:17px/1.65 "Nunito",system-ui,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--orange-d)}
.wrap{width:min(1080px,100% - 32px);margin-inline:auto}
h1,h2,h3{font-family:"Fredoka",system-ui,sans-serif;line-height:1.15;margin:0 0 .4em;color:var(--brown)}
h1{font-size:clamp(28px,5vw,44px);font-weight:600}
h2{font-size:clamp(26px,4vw,36px);font-weight:600;text-align:center}
h3{font-size:20px;font-weight:600}

.top{padding:14px 0 56px;background:
  radial-gradient(circle at 12% 30%,#fff6e8 0 120px,transparent 121px),
  radial-gradient(circle at 88% 70%,#fbe4cc 0 160px,transparent 161px),var(--cream)}
.nav{display:flex;justify-content:flex-end;align-items:center;gap:22px;font-weight:700;font-size:15px}
.nav a{color:var(--brown);text-decoration:none}
.nav a:hover{color:var(--orange-d)}
.nav .pill{background:var(--brown);color:#fff;padding:7px 16px;border-radius:99px}
.nav .pill:hover{background:var(--orange-d);color:#fff}
.hero{text-align:center;padding-top:24px}
.logo{width:min(420px,80%);margin:0 auto 18px}
.lede{max-width:600px;margin:0 auto 26px;color:var(--brown-l);font-size:18px}
.btn{display:inline-block;background:var(--orange);color:#fff;font-family:"Fredoka",sans-serif;font-weight:600;
  font-size:19px;padding:13px 30px;border-radius:99px;text-decoration:none;box-shadow:0 4px 0 var(--orange-d);transition:transform .12s}
.btn:hover{transform:translateY(-2px)}

.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:-28px;position:relative}
.perk{background:var(--paper);border:2px solid var(--line);border-radius:20px;padding:22px 22px 18px}
.perk .ico{font-size:28px}
.perk p{margin:0;color:var(--brown-l);font-size:15.5px}

#books{padding:70px 0 30px}
.sub{text-align:center;color:var(--brown-l);margin:0 0 30px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--paper);border:2px solid var(--line);border-radius:18px;overflow:hidden;text-decoration:none;color:var(--brown);transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(92,62,45,.12)}
.card span{display:block;padding:12px 16px 16px;font-size:15px;color:var(--brown-l)}
.card b{display:block;font-family:"Fredoka",sans-serif;font-weight:600;font-size:19px;color:var(--brown)}

.about{max-width:760px;text-align:center;padding:50px 0 70px}
.about p{color:var(--brown-l)}

.foot{background:var(--brown);color:#f3e6d6;padding:26px 0;font-size:15px;text-align:center}
.foot p{margin:4px 0}
.foot a{color:#ffd2a3}

/* privacy page */
.doc{background:var(--paper);border:2px solid var(--line);border-radius:22px;padding:clamp(22px,5vw,48px);margin:10px auto 60px;max-width:820px}
.doc h1{text-align:center}
.doc h2{text-align:left;font-size:22px;margin-top:1.6em}
.doc p,.doc li{color:var(--brown)}
.doc .date{text-align:center;color:var(--brown-l);margin-top:-6px}
.small-logo{width:200px;margin:8px auto 0}

@media (max-width:820px){
  .perks{grid-template-columns:1fr;margin-top:-20px}
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .grid{grid-template-columns:1fr}
  .nav{justify-content:center;gap:14px;font-size:14px}
}