/* Bookapero — navy #102437 / cream, Merriweather + Merriweather Sans */

:root {
  --ink: #102437;
  --ink-deep: #0B1B2A;
  --paper: #FBF8F1;
  --cream: #F6F1D9;
  --accent: #F2C94C;
  --slate: #5A6878;
  --line: #E4DECB;
  --white: #FFFFFF;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Merriweather Sans", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); }
a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.wrap { max-width: 880px; margin: 0 auto; padding: 0 24px; }

/* ---------- header / nav ---------- */

.site-head { background: var(--ink); color: var(--white); }
.site-head .wrap {
  max-width: 1080px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  padding-bottom: 18px;
  flex-wrap: wrap;
}
.logo-link { display: inline-flex; align-items: center; }
.logo-link img { height: 34px; width: auto; display: block; }

.site-nav { display: flex; gap: 22px; flex-wrap: wrap; }
.site-nav a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.04em;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--cream); }

/* ---------- hero (landing) ---------- */

.hero {
  background: var(--ink);
  color: var(--white);
  padding: 64px 0 72px;
  position: relative;
  overflow: hidden;
}
.hero-lines {
  position: absolute;
  top: 0; right: 0;
  width: 55%;
  height: 100%;
  pointer-events: none;
}
.hero-lines path { stroke: var(--accent); }
.hero-lines path.line-1 { opacity: 0.35; }
.hero-lines path.line-2 { opacity: 0.2; }

.hero .wrap.hero-grid { max-width: 1080px; position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 36px;
  align-items: center;
}
.hero .eyebrow {
  color: var(--accent);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.hero h1 .hl { color: var(--accent); }
.hero h1 {
  font-family: "Merriweather", Georgia, serif;
  font-weight: 900;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.2;
  margin: 0 0 18px;
  max-width: 17ch;
}
.hero p.lede {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.85);
  max-width: 54ch;
  margin: 0 0 34px;
}
.hero .price-note { color: var(--accent); }

.hero-covers {
  position: relative;
  height: 260px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-covers::before {
  content: "";
  position: absolute;
  inset: -50px;
  background: radial-gradient(circle at 50% 45%, rgba(242, 201, 76, 0.22), rgba(242, 201, 76, 0) 68%);
}
.hero-covers .cv {
  position: absolute;
  width: 128px;
  height: auto;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  border: 3px solid var(--ink-deep);
}
.hero-covers .cv-1 { transform: rotate(-9deg) translate(-92px, 10px); z-index: 1; }
.hero-covers .cv-2 { transform: rotate(-2deg) translate(-24px, -14px); z-index: 2; }
.hero-covers .cv-3 { transform: rotate(4deg) translate(46px, 6px); z-index: 3; }
.hero-covers .cv-4 { transform: rotate(11deg) translate(112px, -8px); z-index: 2; }

@media (max-width: 780px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-covers { height: 160px; margin-top: 8px; }
  .hero-covers .cv { width: 88px; }
  .hero-covers .cv-1 { transform: rotate(-9deg) translate(-64px, 6px); }
  .hero-covers .cv-2 { transform: rotate(-2deg) translate(-16px, -8px); }
  .hero-covers .cv-3 { transform: rotate(4deg) translate(32px, 4px); }
  .hero-covers .cv-4 { transform: rotate(11deg) translate(78px, -4px); }
  .hero-lines { width: 100%; opacity: 0.6; }
}

/* ---------- stats row ---------- */

.stats { background: var(--ink); padding: 8px 0 64px; }
.stats .wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  text-align: center;
}
@media (max-width: 640px) {
  .stats .wrap { grid-template-columns: 1fr; row-gap: 32px; }
}
.stat { padding: 0 6px; }
.stat-num {
  font-family: "Merriweather", Georgia, serif;
  font-weight: 900;
  font-size: clamp(38px, 6vw, 62px);
  line-height: 1;
  color: var(--accent);
  margin: 0 0 10px;
}
.stat-label {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

/* ---------- credibility band ---------- */

.credibility {
  background: var(--cream);
  padding: 20px 0;
  text-align: center;
}
.credibility p {
  margin: 0;
  font-family: "Merriweather", Georgia, serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
}

/* ---------- pain points / checklist ---------- */

.pain-points { padding: 64px 0 8px; background: var(--paper); }
.pain-points h2 {
  font-family: "Merriweather", Georgia, serif;
  font-weight: 900;
  font-size: clamp(26px, 4vw, 32px);
  margin: 0 0 10px;
  max-width: 32ch;
}
.pain-points .sub {
  color: var(--slate);
  max-width: 60ch;
  margin: 0 0 32px;
}
.pain-list {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.pain-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-family: "Merriweather", Georgia, serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  max-width: 66ch;
}
.pain-list .check {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  margin-top: 2px;
}
.pain-close {
  font-weight: 700;
  font-size: 16px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
  margin: 8px 0 0;
}

/* ---------- topic hero (hub pages) ---------- */

.topic-hero {
  background: var(--ink);
  color: var(--white);
  padding: 20px 0 56px;
  position: relative;
}
.crumb {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 26px;
}
.crumb a { color: rgba(255, 255, 255, 0.6); text-decoration: none; }
.crumb a:hover { color: var(--cream); }

.topic-hero h1 {
  font-family: "Merriweather", Georgia, serif;
  font-weight: 900;
  font-size: clamp(30px, 5vw, 44px);
  margin: 0 0 12px;
}
.topic-hero p { max-width: 58ch; color: rgba(255, 255, 255, 0.85); margin: 0; }

/* the bookmark tab: signature element */
.month-tab {
  display: inline-block;
  background: var(--cream);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 14px 14px;
  margin-bottom: 22px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 8px), 0 100%);
}

/* ---------- book list ---------- */

.shelf { padding: 56px 0 8px; }

.shelf-note {
  font-size: 14px;
  color: var(--slate);
  border-bottom: 1px solid var(--line);
  padding-bottom: 22px;
  margin-bottom: 8px;
}

.book { padding: 40px 0; border-bottom: 1px solid var(--line); }
.book:last-of-type { border-bottom: none; }

.book h2 {
  font-family: "Merriweather", Georgia, serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.35;
  margin: 0 0 4px;
}
.book h2 a { text-decoration: none; }
.book h2 a:hover { text-decoration: underline; text-underline-offset: 4px; }

.byline {
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 16px;
}

.book .blurb {
  font-family: "Merriweather", Georgia, serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.75;
  margin: 0 0 18px;
  max-width: 62ch;
}

.for-line {
  background: var(--cream);
  display: inline-block;
  font-size: 15px;
  padding: 8px 14px;
  margin: 0 0 20px;
  max-width: 60ch;
}
.for-line strong { font-weight: 700; }

.kindle-link {
  display: inline-block;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border: 2px solid var(--ink);
  padding: 9px 18px;
  transition: background 150ms ease, color 150ms ease;
}
.kindle-link:hover { background: var(--ink); color: var(--white); }

/* ---------- topic tiles (landing) ---------- */

.shelves { padding: 64px 0; }
.shelves .wrap { max-width: 1000px; }
.shelves h2, .how h2 {
  font-family: "Merriweather", Georgia, serif;
  font-weight: 900;
  font-size: 28px;
  margin: 0 0 8px;
}
.shelves > .wrap > p { color: var(--slate); margin: 0 0 32px; max-width: 58ch; }

.tile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 640px) {
  .tile-grid { grid-template-columns: 1fr; }
}
.tile {
  display: block;
  text-decoration: none;
  border: 1px solid var(--line);
  background: var(--white);
  padding: 30px 26px 26px;
  transition: border-color 150ms ease, transform 150ms ease;
}
.tile:hover { border-color: var(--ink); transform: translateY(-2px); }
.tile h3 {
  font-family: "Merriweather", Georgia, serif;
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 8px;
}
.tile p { margin: 0; font-size: 16px; color: var(--slate); }
.tile .count {
  display: inline-block;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--cream);
  padding-bottom: 2px;
}
.tile:hover .count { border-bottom-color: var(--ink); }

/* ---------- how it works ---------- */

.how { padding: 8px 0 64px; }
.how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 28px;
  margin-top: 26px;
}
.how-item h3 {
  font-family: "Merriweather", Georgia, serif;
  font-size: 18px;
  margin: 0 0 8px;
}
.how-item p { margin: 0; font-size: 15px; color: var(--slate); }

html { scroll-behavior: smooth; }

/* ---------- signup band ---------- */

.signup {
  background: var(--ink);
  color: var(--white);
  padding: 56px 0 44px;
}
.signup h2 {
  font-family: "Merriweather", Georgia, serif;
  font-weight: 900;
  font-size: 26px;
  margin: 0 0 8px;
}
.signup p { color: rgba(255, 255, 255, 0.85); margin: 0 0 24px; max-width: 54ch; }
.signup .form-slot { max-width: 520px; }
.btn-scroll-signup {
  display: inline-block;
  background-color: var(--cream);
  color: var(--ink);
  font-weight: 700;
  font-family: "Merriweather Sans", Arial, sans-serif;
  font-size: 16px;
  padding: 14px 28px;
  text-decoration: none;
}
.btn-scroll-signup:hover { opacity: 0.9; }

/* restyle Kit form to brand */
.formkit-form[data-uid="a52f1639b9"] .formkit-submit {
  background-color: var(--cream) !important;
  color: var(--ink) !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
}
.formkit-form[data-uid="a52f1639b9"] .formkit-input {
  border-radius: 0 !important;
  border-color: var(--paper) !important;
}
.hero .form-slot { max-width: 520px; }

/* ---------- footer ---------- */

.site-foot {
  background: var(--ink-deep);
  color: rgba(255, 255, 255, 0.7);
  padding: 34px 0 44px;
  font-size: 14px;
}
.site-foot a { color: rgba(255, 255, 255, 0.85); }
.site-foot .wrap { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }

@media (max-width: 560px) {
  .book h2 { font-size: 21px; }
  .hero { padding: 48px 0 56px; }
}

/* ---------- covers ---------- */
.book { display: flex; gap: 28px; align-items: flex-start; }
.book .cover { flex: 0 0 128px; }
.book .cover img {
  width: 128px; height: auto; display: block;
  box-shadow: 0 2px 10px rgba(16, 36, 55, 0.22);
}
.book-body { flex: 1; min-width: 0; }
@media (max-width: 560px) {
  .book { flex-direction: column; gap: 18px; }
  .book .cover { flex-basis: auto; }
  .book .cover img { width: 110px; }
}

/* ---------- tile cover strips ---------- */
.tile-covers {
  display: flex;
  gap: 16px;
  margin-bottom: 22px;
  height: 240px;
  overflow: hidden;
  /* second cover peeks then fades: the rest lives behind the click */
  -webkit-mask-image: linear-gradient(to right, black 55%, transparent 92%);
  mask-image: linear-gradient(to right, black 55%, transparent 92%);
}
.tile-covers img {
  width: 160px;
  height: 240px;
  object-fit: cover;
  box-shadow: 0 3px 12px rgba(16, 36, 55, 0.28);
  flex: 0 0 auto;
}