/* ==========================================================================
   Ebook landing page: /beyond-the-summit/ (added 23 Oct 2026, Adam-approved design)
   Loaded only on that page (pageCss in src/beyond-the-summit.njk). Everything shared
   comes from site.css; every colour here is a site token. Rationale and evidence:
   Project doc "Incrocio_Ebook_Page_Research_2026-10-23". DESIGN.md has the summary.
   ========================================================================== */
/* Section rhythm: green hero, cream recognition, cream gardens, green spiral, sand book, cream author,
   off-white FAQ, green close. */

/* Header: logo only. A landing page with one goal keeps the exits to a minimum. */
.site-header--focus .site-header__inner { justify-content: flex-start; }
/* Footer: only the legal bar, with the Privacy Policy and Cookie settings links added to it (footer.njk). */
.site-footer__legal-link { color: var(--green); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.site-footer__cookies--inline button { font: inherit; font-size: 14px; color: var(--green); background: none; border: 0; padding: 0 0 0 10px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.site-footer__legal-link:hover, .site-footer__cookies--inline button:hover { color: var(--link-gold); }

/* --- hero ---------------------------------------------------------------- */
/* Wide left column: the site's 62px H1 on two lines, a short lede, the form.
   Narrow right column: the book, then four one-line takeaways that share its left edge.
   Phones: title, small book, lede, form, takeaways (the aside dissolves with display: contents). */
.ebook-hero { padding: 100px 0 96px; overflow: hidden; }
.ebook-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  column-gap: var(--col-gap);
  align-items: start;
}
.ebook-hero__title, .ebook-hero__intro, .ebook-hero__form { grid-column: 1; }
.ebook-hero__aside { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-direction: column; align-items: flex-start; padding-top: 6px; }
/* The divider is a 23px block with its line at the top: 23 + 17 = 40px from the line to the lede.
   The form sits the same 40px below the lede. */
.ebook-hero .divider { margin: 18px 0 17px; }
.ebook-hero .lede { max-width: 640px; }
.ebook-hero__form { margin-top: 40px; }
.ebook-hero__points { display: grid; row-gap: 14px; margin: 44px 0 0; }
.ebook-hero__points .blurb--icon { align-items: center; }
.ebook-hero__points .blurb--icon p { color: var(--cream); font-size: 17px; line-height: 1.4; max-width: none; white-space: nowrap; }
.ebook-hero__points .blurb__icon svg { margin-top: 0; display: block; }

/* The book: the one bold element on the page */
.book-stage { position: relative; }
.book-stage::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(201,160,86,0.18), rgba(201,160,86,0.06) 62%, transparent 100%);
  pointer-events: none;
}
.book {
  position: relative; width: 300px; aspect-ratio: 420 / 595;
  transform: perspective(1600px) rotateY(-16deg) rotateX(3deg);
  transform-origin: 0 50%; /* hinge on the spine, so the cover's left edge stays on the column line */
  margin-left: 3px; /* lines the cover up with the drawn edge of the check icons below */
}
.book__pages {
  position: absolute; top: 1.4%; bottom: 1.4%; right: -13px; width: 14px;
  border-radius: 0 4px 4px 0;
  background: repeating-linear-gradient(to right, #fdfdf8 0 1px, #ddd5b8 1px 2px);
  box-shadow: inset 2px 0 4px rgba(0,0,0,0.18);
}
.book__cover {
  position: relative; width: 100%; height: 100%; border-radius: 3px 8px 8px 3px; overflow: hidden;
  box-shadow: 0 2px 0 rgba(201,160,86,0.35), 26px 40px 60px rgba(0,0,0,0.45), 6px 10px 18px rgba(0,0,0,0.3);
}
.book__cover img { width: 100%; height: 100%; object-fit: cover; }
.book__cover::after { /* spine crease */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.28) 0, rgba(255,255,255,0.18) 2.2%, rgba(0,0,0,0.12) 4%, transparent 9%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .js .book { animation: book-arrive 1.2s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes book-arrive {
    from { opacity: 0; transform: perspective(1600px) rotateY(-34deg) rotateX(3deg) translateY(18px); }
    to   { opacity: 1; transform: perspective(1600px) rotateY(-16deg) rotateX(3deg); }
  }
}

/* Form card: the site's field style on a cream card. Name and email side by side (as on the
   Book and Waitlist pages), labels visible above each field. */
.guide-card { background: var(--cream); border-radius: var(--r-panel); padding: 30px 32px 24px; max-width: 640px; }
.guide-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.guide-form__field { margin: 0 0 16px; }
.guide-form__field label { display: block; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--green); margin-bottom: 6px; }
.guide-form__field input {
  width: 100%; font-family: var(--font-sans); font-size: 16px; color: var(--ink);
  background: var(--off-white); border: 1px solid var(--gold); border-radius: var(--r-field);
  padding: 14px 16px; line-height: normal; outline: none;
}
.guide-form__field input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(0,35,20,0.12); }
.guide-form__field input[aria-invalid="true"] { border-color: #8a1f11; }
.guide-form__error { display: block; font-size: 14px; line-height: 1.45; color: #8a1f11; margin-top: 6px; }
.guide-form__error:empty { display: none; }
.guide-form .inc-cmp-consent { margin-top: 0; font-size: 15px; }
.guide-form .btn { display: block; width: 100%; margin-top: 20px; font-size: 17px; }
.guide-form .btn:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.guide-form__status { margin-top: 12px; font-size: 15px; line-height: 1.5; color: #8a1f11; text-align: center; }
.guide-form__status:empty { display: none; }
.guide-form__small { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--green); text-align: center; }
.guide-form__small a { text-decoration: underline; text-underline-offset: 2px; }
.guide-form__small a:hover { color: var(--link-gold); }

/* Success state, shown in place of the form */
/* The success panel replaces the form: ebook.js adds .is-done; without JavaScript the function
   redirects to #book-sent, and :target shows the same panel. */
.guide-done { display: none; }
.guide-card.is-done .guide-start, .guide-card:has(.guide-done:target) .guide-start { display: none; }
.guide-card.is-done .guide-done, .guide-done:target { display: block; }
.guide-done:focus { outline: none; }
.guide-done h2 { font-size: 28px; }
.guide-done p { font-size: 16px; color: var(--green); margin-top: 8px; }
.guide-done .btn { display: block; width: 100%; margin-top: 22px; }
.guide-done__next { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(0,35,20,0.15); }
.guide-done__next a { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.guide-done__next a:hover { color: var(--link-gold); }
.guide-done p.guide-done__note { font-size: 14px; opacity: 0.85; }

/* --- recognition panel (Home "problem" layout) ------------------------- */
.ebook-problem { padding-top: 80px; }
.ebook-problem .problem__list p { color: var(--green);  text-wrap: balance; }
.ebook-problem__close { grid-column: 1 / -1; margin-top: 26px; padding-top: 24px; border-top: 1px solid rgba(0,35,20,0.15); font-family: var(--font-serif); font-weight: 700; font-size: 22px; line-height: 1.35; color: var(--green); }

/* --- four gardens ------------------------------------------------------- */
.ebook-gardens { padding: 10px 0 100px; }
.ebook-gardens .container--copy { padding: 27px 0 34px; }
.ebook-gardens__intro { font-size: 20px; line-height: 1.5; text-align: center; color: var(--green); max-width: 640px; margin: 4px auto 0; }
.card__body h3 { padding-bottom: 4px; }
.card__body .card__sub { display: block; font-style: italic; font-size: 24px; line-height: 1.25; color: var(--nav-current); margin: 0 0 14px; }
.card__body p { color: var(--green); }

/* --- Sanctuary Spiral (its own green section) ---------------------------- */
/* Left: heading, intro and the five stages as a list. Right: Higgsfield line-art spiral with the
   numbers placed on the drawn line (HTML, so they stay crisp and match the list). */
.ebook-spiral { padding: 100px 0; overflow: hidden; }
.ebook-spiral__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 70px; align-items: center; }
.ebook-spiral__intro .lede { font-style: italic; }
.ebook-spiral__text { color: var(--cream); margin-top: 16px; max-width: 520px; }
.spiral-list { display: grid; row-gap: 18px; margin-top: 34px; }
.spiral-list li { display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; align-items: start; }
.spiral-list__num {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--gold);
  font-family: var(--font-serif); font-weight: 700; font-size: 16px; line-height: 1; color: var(--gold); margin-top: 1px;
}
.spiral-list h3 { font-size: 22px; line-height: 1.3; color: var(--cream); padding-bottom: 2px; }
.spiral-list p { font-size: 16px; line-height: 1.5; color: var(--off-white); opacity: 0.9; }
.spiral-art { margin: 0; width: 100%; max-width: 580px; justify-self: start; order: -1; }
.spiral-svg { display: block; width: 100%; height: auto; }

/* --- substance: copy left; on the right the book lies open at two real facing pages (one of
   running text, one with designed elements). The open-book image is rendered from the PDF's own
   pages, warped so the text follows the curve of each leaf; it swaps with the chosen design. */
.ebook-book { background: var(--sand); padding: 90px 0; }
.ebook-book__row { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); column-gap: 60px; align-items: center; }
.openbook { display: block; width: 100%; height: auto; }
.ebook-book__copy h2 { max-width: 560px; }
.ebook-book__copy p { color: var(--green); font-size: 20px; line-height: 1.5; max-width: 540px; }
.ebook-book__copy .btn { margin-top: 28px; }

/* --- author --------------------------------------------------------------- */
.ebook-author { padding: 90px 0 90px; }
.ebook-author .split__row { align-items: stretch; }
.ebook-author .split__image { background-position: 50% 15%; min-height: 560px; }
.ebook-author .split__copy h2 { font-size: 36px; }
.ebook-author .split__copy > p { padding-bottom: 1em; }
.creds { margin-top: 8px; background: var(--off-white); border: 1px solid var(--gold-tint-30); border-left: 4px solid var(--gold); border-radius: 0 var(--r-panel) var(--r-panel) 0; padding: 24px 28px; display: grid; row-gap: 12px; }
.creds li { font-size: 17px; line-height: 1.45; color: var(--green); }
.creds strong { font-family: var(--font-serif); font-weight: 700; font-size: 19px; }

/* --- FAQ (off-white section, cream-filled cards) ------------------------------ */
.ebook-faq { background: var(--off-white); padding: 90px 0; }
.ebook-faq .faq__head { padding-top: 0; }
.ebook-faq .faq__item { background: var(--cream); border-color: rgba(0,35,20,0.35); }
.ebook-faq .faq__q { font-size: 22px; line-height: 1.2; color: var(--green); padding-bottom: 0; margin-bottom: 10px; } /* styled as the site's FAQ h4, kept an h3 for heading order */
.faq__item a { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.faq__item a:hover { color: var(--link-gold); }

/* --- closing CTA ------------------------------------------------------- */
.ebook-cta { padding: 90px 0 70px; }
.ebook-cta .cta__card p { color: var(--green); font-size: 18px; margin-top: 8px; }
.ebook-support { max-width: 640px; margin: 40px auto 0; padding: 0 20px; text-align: center; font-size: 14px; line-height: 1.5; color: var(--cream); opacity: 0.9; }

/* --- responsive --------------------------------------------------------- */
@media (max-width: 1200px) and (min-width: 981px) {
  .ebook-hero__points .blurb--icon p { white-space: normal; }
  .book { width: 260px; }
}
@media (max-width: 980px) {
  .ebook-hero { padding: 60px 0 70px; }
  /* Tablets and phones: a small cover beside the lede keeps the book visible without pushing the form down */
  .ebook-hero__grid { grid-template-columns: minmax(0, 1fr) auto; column-gap: 22px; }
  .ebook-hero__aside { display: contents; }
  .ebook-hero__title { grid-column: 1 / -1; grid-row: 1; }
  .ebook-hero__intro { grid-column: 1; grid-row: 2; align-self: center; }
  .book-stage { grid-column: 2; grid-row: 2; align-self: center; margin-right: 24px; }
  .ebook-hero__form { grid-column: 1 / -1; grid-row: 3; }
  .ebook-hero__points { grid-column: 1 / -1; grid-row: 4; margin-top: 36px; }
  .ebook-hero__points .blurb--icon p { white-space: normal; }
  .book { width: 150px; transform-origin: 40% 50%; }
  .book-stage::before { width: 180%; }
  .guide-card { max-width: none; }
  .ebook-spiral { padding: 70px 0; }
  .ebook-spiral__row { grid-template-columns: 1fr; row-gap: 40px; }
  .spiral-art { justify-self: center; max-width: 520px; order: 0; } /* phones: heading first, then the spiral */
  .ebook-book { padding: 60px 0 70px; }
  .ebook-book__row { grid-template-columns: minmax(0, 1fr); row-gap: 34px; justify-items: center; text-align: center; }
  .ebook-book__visual { order: -1; width: min(560px, 100%); }
  .ebook-book__copy h2, .ebook-book__copy p { margin-left: auto; margin-right: auto; }
  .ebook-book__copy .divider { max-width: 140px; margin-left: auto; margin-right: auto; }
  .ebook-author .split__image { min-height: 420px; }
  .ebook-faq { padding: 70px 0; }
}
@media (max-width: 767px) {
  .ebook-hero { padding-top: 50px; }
  .book { width: 96px; }
  .ebook-hero .lede { font-size: 18px; }
  .guide-card { padding: 26px 22px 22px; }
  .guide-form__row { grid-template-columns: 1fr; }
  .ebook-problem { padding-top: 50px; }
  .ebook-problem__close { font-size: 20px; }
  .ebook-book__copy p { font-size: 18px; }
  .ebook-author .split__copy h2 { font-size: 30px; }
  .ebook-author .split__image { min-height: 340px; }
  .creds { padding: 20px 22px; }
}