:root {
  --paper: #fdf6e8;
  --ink: #2b2320;
  --soft: #6b5a4c;
  --deep: #4a2c14;
  --amber: #b3661f;
  --orange: #c2401c;
  --gold: #ffd54f;
  --card: #ffffff;
  --line: #e5d8c0;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 21px;
  line-height: 1.65;
}
.wrap { max-width: 880px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 720px; margin: 0 auto; }

/* ---------- top nav ---------- */
nav {
  background: var(--deep);
  padding: 16px 0;
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 3px 14px rgba(43,35,32,0.35);
}
nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.brand { color: #f7ecd6; font-size: 26px; font-weight: 900; letter-spacing: 1px; text-decoration: none; }
.brand span { color: var(--gold); }
nav .links { display: flex; gap: 22px; flex-wrap: wrap; }
nav .links a { color: #f0dfc2; text-decoration: none; font-size: 19px; }
nav .links a:hover, nav .links a.here { color: var(--gold); text-decoration: underline; }

/* ---------- hero ---------- */
.hero { text-align: center; padding: 70px 0 40px; }
.hero .kicker {
  display: inline-block; background: var(--gold); color: var(--deep);
  font-size: 17px; letter-spacing: 3px; text-transform: uppercase; font-weight: 700;
  padding: 8px 22px; border-radius: 40px; margin-bottom: 26px;
}
h1 { font-size: clamp(38px, 6.5vw, 58px); line-height: 1.12; color: var(--deep); margin-bottom: 22px; }
.hero p.sub { font-size: 24px; color: var(--soft); max-width: 700px; margin: 0 auto 34px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; background: var(--orange); color: #fff8e7;
  font-size: 24px; font-weight: 700; letter-spacing: 0.5px;
  padding: 20px 44px; border-radius: 12px; text-decoration: none;
  box-shadow: 0 6px 0 #7a1f0a, 0 14px 30px rgba(122,31,10,0.3);
  border: none; cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #7a1f0a, 0 18px 34px rgba(122,31,10,0.35); }
.btn:active { transform: translateY(3px); box-shadow: 0 3px 0 #7a1f0a; }
.btn.brown { background: var(--deep); box-shadow: 0 6px 0 #241203, 0 14px 30px rgba(36,18,3,0.35); }
.btn.brown:hover { box-shadow: 0 8px 0 #241203, 0 18px 34px rgba(36,18,3,0.4); }
.btn.ghost {
  background: transparent; color: var(--deep); box-shadow: none;
  border: 3px solid var(--deep); padding: 17px 40px;
}
.btn.ghost:hover { background: var(--deep); color: #fff8e7; transform: none; }
.under-btn { font-size: 17px; color: var(--soft); margin-top: 14px; font-style: italic; }

/* ---------- book cards on homepage ---------- */
.bookrow { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin: 40px 0 20px; }
@media (max-width: 760px) { .bookrow { grid-template-columns: 1fr; } }
.bookcard {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 34px 30px; text-align: center;
  box-shadow: 0 10px 30px rgba(43,35,32,0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.bookcard:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(43,35,32,0.16); }
.bookcard img {
  width: 210px; max-width: 80%; border-radius: 6px;
  box-shadow: 8px 10px 0 rgba(74,44,20,0.15), 0 14px 34px rgba(43,35,32,0.3);
  margin-bottom: 24px;
}
.bookcard h3 { font-size: 28px; color: var(--deep); margin-bottom: 6px; }
.bookcard .who { font-size: 19px; color: var(--soft); font-style: italic; margin-bottom: 16px; }
.bookcard .price-line { font-size: 26px; margin: 14px 0 20px; }
.price-line s { color: var(--soft); font-size: 20px; }
.price-line .tag { display: inline-block; background: var(--gold); color: var(--deep); font-size: 15px; font-weight: 700; padding: 3px 12px; border-radius: 30px; margin-left: 8px; vertical-align: middle; }

/* ---------- sections ---------- */
section { padding: 44px 0; }
section.tint { background: #f4ead6; }
section.dark { background: var(--deep); color: #f3e7cf; }
section.dark h2 { color: var(--gold); }
h2 { font-size: clamp(30px, 5vw, 42px); color: var(--deep); text-align: center; margin-bottom: 26px; line-height: 1.2; }
.center { text-align: center; }
p { margin-bottom: 18px; }
.big { font-size: 24px; }

/* checklist bullets */
.checks { list-style: none; margin: 24px 0; }
.checks li { padding-left: 44px; position: relative; margin-bottom: 16px; font-size: 22px; }
.checks li::before {
  content: "✔"; position: absolute; left: 0; top: 0;
  color: var(--orange); font-size: 24px; font-weight: 700;
}

/* value stack */
.stack {
  background: var(--card); border: 2px dashed var(--amber); border-radius: 16px;
  padding: 30px 34px; margin: 30px auto; max-width: 640px;
}
.stack .row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 21px; }
.stack .row:last-of-type { border-bottom: none; }
.stack .row .val { color: var(--soft); white-space: nowrap; }
.stack .total { text-align: center; font-size: 26px; margin-top: 18px; }
.stack .total strong { color: var(--orange); font-size: 34px; }

/* guarantee */
.guarantee {
  display: flex; gap: 24px; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 28px 30px; max-width: 680px; margin: 26px auto;
}
.guarantee .seal {
  flex: 0 0 96px; height: 96px; border-radius: 50%;
  background: var(--gold); color: var(--deep);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; text-align: center; line-height: 1.25;
  border: 3px dashed var(--deep); padding: 10px;
}
@media (max-width: 560px) { .guarantee { flex-direction: column; text-align: center; } }

/* ---------- interactive: accordion ---------- */
.acc { max-width: 720px; margin: 0 auto; }
.acc details {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  margin-bottom: 14px; overflow: hidden;
}
.acc summary {
  cursor: pointer; padding: 20px 24px; font-size: 22px; font-weight: 700; color: var(--deep);
  list-style: none; position: relative; padding-right: 60px;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  font-size: 32px; color: var(--amber); font-weight: 400;
}
.acc details[open] summary::after { content: "–"; }
.acc details p { padding: 0 24px 20px; margin: 0; color: var(--ink); }

/* ---------- interactive: quiz ---------- */
.quiz { max-width: 680px; margin: 0 auto; }
.q {
  background: var(--card); border: 1px solid var(--line); border-left: 8px solid var(--orange);
  border-radius: 12px; padding: 26px 28px; margin-bottom: 20px;
}
.q .qtext { font-size: 23px; font-weight: 700; color: var(--deep); margin-bottom: 16px; }
.q .reveal {
  background: var(--gold); color: var(--deep); border: none; cursor: pointer;
  font-family: Georgia, serif; font-size: 19px; font-weight: 700;
  padding: 12px 26px; border-radius: 10px;
  box-shadow: 0 4px 0 #c9a227;
}
.q .reveal:active { transform: translateY(2px); box-shadow: 0 2px 0 #c9a227; }
.q .ans { display: none; margin-top: 16px; font-size: 21px; }
.q .ans strong { color: var(--orange); }
.q.answered .ans { display: block; }
.q.answered .reveal { display: none; }

/* ---------- interactive: age picker ---------- */
.picker { text-align: center; max-width: 720px; margin: 0 auto; }
.picker .ages { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 22px 0 28px; }
.picker .ages button {
  font-family: Georgia, serif; font-size: 22px; font-weight: 700;
  background: var(--card); color: var(--deep);
  border: 3px solid var(--deep); border-radius: 12px;
  padding: 16px 26px; cursor: pointer;
}
.picker .ages button:hover { background: var(--gold); }
.picker .ages button.on { background: var(--deep); color: var(--gold); }
.picker .result {
  display: none; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 26px 30px; text-align: left; font-size: 21px;
}
.picker .result.show { display: block; }
.picker .result h4 { font-size: 24px; color: var(--deep); margin-bottom: 8px; }

/* sample box */
.sample {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 30px 34px; max-width: 720px; margin: 26px auto;
  box-shadow: 0 10px 26px rgba(43,35,32,0.08);
}
.sample .from { font-size: 16px; letter-spacing: 2px; text-transform: uppercase; color: var(--amber); font-weight: 700; margin-bottom: 12px; }
.sample h4 { font-size: 25px; color: var(--deep); margin-bottom: 10px; }

/* two-col hero on book pages */
.bookhero { display: grid; grid-template-columns: 300px 1fr; gap: 50px; align-items: center; padding: 60px 0 30px; }
@media (max-width: 760px) { .bookhero { grid-template-columns: 1fr; text-align: center; } .bookhero img { margin: 0 auto; } }
.bookhero img {
  width: 100%; max-width: 300px; border-radius: 8px; display: block;
  box-shadow: 12px 14px 0 rgba(74,44,20,0.15), 0 20px 44px rgba(43,35,32,0.35);
}
.bookhero h1 { margin-bottom: 14px; }
.bookhero .sub { font-size: 23px; color: var(--soft); margin-bottom: 26px; }

/* footer */
footer { background: var(--deep); color: #d9c6a6; text-align: center; padding: 44px 20px 60px; font-size: 17px; }
footer .signoff { letter-spacing: 4px; text-transform: uppercase; font-size: 14px; margin-bottom: 16px; color: var(--gold); }
footer a { color: #f0dfc2; }
footer .fineprint { max-width: 620px; margin: 18px auto 0; font-size: 14px; line-height: 1.5; color: #b9a483; }
.divider { text-align: center; color: var(--amber); letter-spacing: 10px; font-size: 18px; padding: 8px 0; }