/* -------------------------
   Basic Reset
------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* -------------------------
   Body
------------------------- */
body {
  margin: 0;
  padding: 0;
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.3rem;
  line-height: 1.5;
  color: #000000;
  background: #fef5fe; /* cooler background to let pink plume pop #f3f6fa*/
}

/* -------------------------
   Page container
------------------------- */
.page {
  max-width: 64rem; /* allows hero section room */
  margin: 0 auto;
  padding: 1.5rem;
}

/* -------------------------
   Header
------------------------- */
.header {
  text-align: center;
  margin-bottom: 0; /* spacing controlled by header-title */
}

.header-title {
  margin: 0 0 1.5rem 0;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em; /* slightly tighter for harmony with cover */
  font-weight: 500;        /* medium-bold */
  text-align: center;
  color: #3a3a3a;          /* or rgba(0,0,0,0.85) for softer contrast */
}

/* -------------------------
   Book section
------------------------- */
.book {
  margin: 0 auto 0 auto;  /* bottom margin only, tighter top */
  padding: 2rem 2rem;        /* internal breathing room */
  background: rgba(0, 0, 0, 0.02);
  border-radius: 6px;
}

.book-inner {
  display: flex;
  gap: 4rem;
  align-items: flex-start;
}

.book-cover img {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* subtle lift */
}

.book-text {
  flex: 1;
  font-size: 1.1rem;
  line-height: 1.7;
  padding-top: 0rem;
}

.book-text p {
  margin: 0 0 1.4rem 0;
}

/* Buy area */
.buy-label {
  font-size: 0.9rem;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.06em;
  margin: 2rem 0 0.8rem 0;
  opacity: 0.7;
}

.buy-group {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 16rem; /* constrained width to reduce vertical bulk */
  margin: 0 auto; /*centers the whole block */
}

.buy-button {
  display: block;
  padding: 0.55rem 0.9rem;
  border: 1.5px solid #CE0072;
  color: #CE0072;
  text-decoration: none;
  font-weight: 500;
  text-align: center;
  transition: background 0.2s ease, color 0.2s ease;
}

.buy-button:hover {
  background: #CE0072;
  color: #ffffff;
  text-decoration: none;
}

/* -------------------------
   Content section
------------------------- */
.content {
  max-width: 42rem; /* readable line length */
  margin: 0 auto 4rem auto;
  font-size: 1.1rem;
  line-height: 1.6;
  padding-top: 3rem; /* spacing from book section */
}

.content p {
  margin: 0 0 1.2rem 0;
}

/* -------------------------
   Links
------------------------- */
a:link,
a:active,
a:visited {
  text-decoration: none;
  color: #CE0072;
}

a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* -------------------------
   Divider
------------------------- */
.divider {
  border: none;
  border-top: 1px solid rgba(0,0,0,0.15);
  width: 60%;
  margin: 5rem auto 3rem;
}

/* -------------------------
   Footer
------------------------- */
.footer {
  margin-top: 3rem;
  text-align: center;
  font-size: 0.8rem;
}

/* -------------------------
   Mobile adjustments
------------------------- */
@media (max-width: 768px) {
  .book-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .book {
    padding: 1.5rem;
  }

  .book-cover img {
    max-width: 100%;
  }
}