/* =========================================================
   בן שאנן · "הספר" - book landing page
   A warm-paper accent layered over the site's monochrome system.
   Reuses .hero.hero--banner, .about-after-eyebrow, .about-lead,
   .ph-list/.ph-row, .field and .btn-submit from styles.css.
   ========================================================= */
:root {
  --bk-sand:  #f2ebdd;   /* warm paper */
  --bk-cream: #faf6ef;   /* lighter cream */
  --bk-line:  #e4dac7;   /* warm hairline */
}

body.book { background: var(--bk-cream); }

/* =========================================================
   HERO - full-bleed banner, dark copy on the bright left side
   ========================================================= */
.book-hero .hero-banner-img { object-position: 50% 52%; }
.book-hero.hero--banner .hero-overlay {
  background:
    linear-gradient(to right, rgba(247,242,233,.92) 0%, rgba(247,242,233,.46) 42%, rgba(247,242,233,0) 72%),
    linear-gradient(to bottom, rgba(247,242,233,.55) 0%, rgba(247,242,233,0) 26%);
}
.book-hero .hero-eyebrow { color: var(--sketch-mid); }
.book-hero .hero-copy-art {
  background:
    radial-gradient(116% 96% at 32% 42%, rgba(255,250,242,.86) 0%, rgba(250,244,234,.50) 42%, rgba(250,244,234,0) 76%);
}
/* the bold title line ("במחשבה תחילה") is wider than the home hero copy box;
   give the book hero room so it never clips under .line{overflow:hidden} */
@media (min-width: 761px) {
  .book-hero .hero-copy { max-width: min(92vw, 600px); }
}
@media (max-width: 760px) {
  /* portrait hero image: the subject sits low and the empty wall is up top,
     so anchor the copy to the TOP over a light-from-top scrim */
  .book-hero.hero--banner { align-items: flex-start; }
  .book-hero.hero--banner .hero-content { padding-top: clamp(104px, 17vh, 162px); padding-bottom: 0; }
  .book-hero .hero-banner-img { object-position: 50% 50%; }
  .book-hero.hero--banner .hero-overlay {
    background: linear-gradient(to bottom,
      rgba(247,242,233,.96) 0%, rgba(247,242,233,.80) 22%,
      rgba(247,242,233,.34) 42%, rgba(247,242,233,0) 60%);
  }
}

/* =========================================================
   WHY - origin story + the book product shot
   ========================================================= */
.book-why { background: var(--bk-sand); padding-block: clamp(72px, 10vw, 156px); }
.book-why-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(36px, 6vw, 100px);
  align-items: center;
}
.book-why-copy .about-lead { margin: clamp(18px, 2.4vw, 28px) 0 clamp(20px, 2.6vw, 30px); max-width: 20ch; }
.book-why-text {
  max-width: 46ch;
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  font-weight: 300; line-height: 1.78; color: var(--text);
}
.book-why-sign {
  margin-top: clamp(26px, 3vw, 38px);
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sketch-mid);
}
.book-why-media {
  position: relative;
  justify-self: center;
  width: min(100%, 460px);
}
.book-why-media img {
  width: 100%; height: auto; display: block; border-radius: 3px;
  box-shadow: 0 44px 90px -44px rgba(42,36,28,.5), 0 8px 22px -16px rgba(42,36,28,.4);
}
@media (max-width: 860px) {
  .book-why-inner { grid-template-columns: 1fr; gap: clamp(34px, 8vw, 56px); }
  .book-why-media { order: -1; width: min(78%, 360px); }
  .book-why-copy .about-lead { max-width: none; }
  .book-why-text { max-width: none; }
}

/* =========================================================
   INSIDE - chapters as an editorial table of contents
   ========================================================= */
.book-inside { background: var(--bk-cream); padding-block: clamp(72px, 10vw, 156px); }
.book-inside .about-after-head { margin-bottom: clamp(40px, 5vw, 72px); }

.book-inside .ph-list { display: block; border-top: 1px solid var(--bk-line); }
.book-inside .ph-row {
  display: grid;
  grid-template-columns: clamp(2.8rem, 6vw, 5.4rem) 1fr;
  align-items: center;
  column-gap: clamp(20px, 3.4vw, 56px);
  padding-block: clamp(26px, 3.2vw, 46px);
  border-inline-start: none;
  border-bottom: 1px solid var(--bk-line);
}
.book-inside .ph-row::after { inset-block-start: auto; inset-block-end: -1px; height: 1px; }
.book-inside .ph-row-index { font-size: clamp(2.1rem, 3.6vw, 3.3rem); }
.book-inside .ph-row-text { margin-top: 0; }
.book-inside .ph-row-tag { text-align: right; margin-bottom: 11px; }
.book-inside .ph-row-name { margin-bottom: 9px; }
.book-inside .ph-row-desc { max-width: 64ch; }

@media (max-width: 600px) {
  .book-inside .ph-row { grid-template-columns: clamp(2.4rem, 14vw, 3.4rem) 1fr; column-gap: 20px; }
  .book-inside .ph-row-desc { max-width: none; }
}

/* =========================================================
   CTA - leave details to get the book
   ========================================================= */
.book-cta { background: var(--bk-sand); padding-block: clamp(72px, 10vw, 150px); }
.book-cta-inner { max-width: 720px; margin-inline: auto; text-align: center; }
.book-cta-title {
  margin: clamp(18px, 2.2vw, 26px) 0 14px;
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  font-weight: 300; line-height: 1.12; letter-spacing: -.02em; color: var(--ink);
}
.book-cta-text {
  max-width: 48ch; margin-inline: auto;
  font-size: clamp(1rem, 1.1vw, 1.1rem); font-weight: 300; line-height: 1.7; color: var(--text);
}

.book-form { margin-top: clamp(36px, 4.5vw, 56px); text-align: center; }
.book-fields {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 44px);
  text-align: start; margin-bottom: clamp(30px, 3.4vw, 44px);
}
.book-form .btn-submit { margin-inline: auto; }
.book-form-note { margin-top: 22px; font-size: .96rem; font-weight: 500; color: var(--sketch-ink); }
.book-form.is-sent .book-fields,
.book-form.is-sent .btn-submit { display: none; }

@media (max-width: 680px) {
  .book-fields { grid-template-columns: 1fr; gap: 8px; }
}