/* ==========================================================================
   BOOK  ·  The Provident Sales Playbook
   A dimensional cover built entirely in CSS: spine, page block and cast
   shadow. book.js eases its rotation as the section scrolls through, so it
   turns gently toward the reader. Beside it: the pitch, the ladder and the
   chapters, on the deepest forest ground before the footer.
   ========================================================================== */

.book {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--forest-deep);
  color: var(--on-forest-body);
}

.book__ground {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 70% at 20% 50%, rgba(var(--copper-rgb), 0.1), transparent 70%),
    radial-gradient(50% 60% at 90% 0%, rgba(var(--cream-rgb), 0.04), transparent 70%);
}

.book__grid {
  display: grid;
  gap: clamp(3rem, 2rem + 4vw, 5rem);
  align-items: center;
}

@media (min-width: 64rem) {
  .book__grid {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(3rem, 1rem + 5vw, 7rem);
  }
}

/* --- The cover -------------------------------------------------------------- */
.book__stage {
  position: relative;
  display: grid;
  justify-items: center;
  perspective: 1600px;
  padding-block: var(--space-md) var(--space-xl);
}

.cover {
  --tilt: -18deg;
  position: relative;
  inline-size: min(76vw, 18.5rem);
  aspect-ratio: 2 / 3;
  transform-style: preserve-3d;
  transform: rotateY(var(--tilt)) rotateX(2deg);
  transition: transform 0.9s var(--ease-out);
}

/* RTL: the book turns the other way so its spine stays on the reading
   edge. */
[dir="rtl"] .cover {
  transform: rotateY(calc(var(--tilt) * -1)) rotateX(2deg);
}

.cover__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 2.4rem 1.9rem 2rem 2.4rem;
  border-radius: 2px 6px 6px 2px;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.07) 0%, transparent 22%),
    linear-gradient(160deg, #0E3936 0%, #0A2B29 55%, #072321 100%);
  box-shadow:
    inset 0 0 0 1px rgba(var(--cream-rgb), 0.07),
    /* The page block: three cream edges stepping back behind the cover. */
    3px 3px 0 -1px #E9E3D4,
    6px 6px 0 -2px #DCD5C3,
    9px 9px 0 -3px #CFC7B3;
}

/* A darker hinge strip along the binding edge. */
.cover__spine {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 1;
  inline-size: 0.85rem;
  border-radius: 2px 0 0 2px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.08) 70%, rgba(255, 255, 255, 0.05));
}

.cover__kicker {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--copper-soft);
}

.cover__title {
  margin-block-start: auto;
  font-size: clamp(1.45rem, 1.2rem + 1vw, 1.85rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0.05em;
  color: var(--cream);
  max-inline-size: 10ch;
}

.cover__rule {
  display: block;
  inline-size: 2.6rem;
  block-size: 2px;
  margin-block: 1.1rem 1.6rem;
  background-color: var(--copper);
}

/* The one signature moment set in the primary script face. */
.cover__author {
  margin-block-end: auto;
  font-family: var(--font-script);
  font-size: clamp(2.3rem, 1.9rem + 1.6vw, 2.9rem);
  line-height: 1.05;
  color: var(--cream);
  max-inline-size: 7ch;
}

/* The copper full stop that closes the name, as in the logo. */
.cover__dot {
  display: inline-block;
  inline-size: 0.13em;
  block-size: 0.13em;
  margin-inline-start: 0.08em;
  border-radius: 50%;
  background-color: var(--copper);
  vertical-align: baseline;
}

.book__shadow {
  position: absolute;
  inset-block-end: 0.75rem;
  inline-size: min(70vw, 17rem);
  block-size: 2.2rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent);
  filter: blur(6px);
}

/* --- The copy ---------------------------------------------------------------- */
.book__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

@media (max-width: 47.99rem) {
  .book__copy {
    align-items: center;
    text-align: center;
  }
}

.book__title {
  font-size: var(--step-h2);
  color: var(--on-forest);
}

.book__lead {
  font-size: var(--step-lead);
  line-height: 1.7;
  color: var(--on-forest-body);
  max-inline-size: 54ch;
}

@media (max-width: 47.99rem) {
  .book__lead { text-align: start; }
}

/* --- The ladder ---------------------------------------------------------------- */
.ladder {
  margin-block: var(--space-sm);
  padding: var(--space-md) var(--space-md) var(--space-md) var(--space-lg);
  border-inline-start: 2px solid var(--copper);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background-color: rgba(var(--cream-rgb), 0.04);
  text-align: start;
}

[dir="rtl"] .ladder {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.ladder__label {
  font-size: var(--step-micro);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  color: var(--copper-soft);
}

.ladder__line {
  margin-block-start: var(--space-xs);
  font-size: var(--step-h4);
  line-height: 1.85;
  color: var(--on-forest);
  max-inline-size: none;
}

/* Each rung is a word of the supplied sentence; the arrows are its own
   characters. Nothing is added, only spaced and revealed in turn. */
.rung {
  display: inline-block;
  font-weight: 400;
}

.ladder__arrow {
  display: inline-block;
  color: var(--copper);
}

.ladder__close {
  display: inline-block;
  font-weight: 500;
  color: var(--cream);
}

/* --- Chapters ---------------------------------------------------------------- */
.chapters {
  display: grid;
  gap: 0 var(--space-md);
  inline-size: 100%;
  text-align: start;
}

@media (min-width: 40rem) {
  .chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 80rem) {
  .chapters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.chapter {
  position: relative;
  padding-block: 0.8rem;
  padding-inline-start: 1.15rem;
  font-size: var(--step-small);
  line-height: 1.5;
  color: var(--on-forest-body);
  border-block-start: 1px solid var(--line-on-forest);
}

/* The copper dot as a quiet bullet. */
.chapter::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc(0.8rem + 0.6em);
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background-color: var(--copper);
}

.book__action {
  margin-block-start: var(--space-md);
}