/* ==========================================================================
   The new look after the film (Ben, 2026-09-29, of the white and sage: "לא אהבתי אותה אבל זה גם לא
   אמור להישאר כמו שזה עכשיו… תגרום לי להגיד וואו"). The page dressed in the book's own materials,
   in the order the book has them: the endpapers under "how it works" (charcoal, a pattern of plates
   in gold, as the 3D book draws them); the gold cloth of the cover for the offer, with the cover's
   window and its living photo, and the charcoal title plate holding the price; the cream paper of
   the pages for the questions. The film, the coach, the close and the footer stay the dark stage.
   Ben saw it on a preview link with the new film and said yes to both ("מושלם, להעלות לאתר").
   ========================================================================== */


/* ---------- the endpapers: how it works ---------- */
.story {
  background-color: #1C1916;
  background-image:
    radial-gradient(60% 70% at 22% 45%, rgba(230, 165, 59, .15), transparent 70%),
    linear-gradient(180deg, rgba(22, 20, 18, .9), rgba(22, 20, 18, 0) 22%, rgba(22, 20, 18, 0) 78%, rgba(22, 20, 18, .9)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='128'%3E%3Cg fill='none' stroke='%23E6A53B' stroke-opacity='.17' stroke-width='1.5'%3E%3Ccircle cx='20' cy='30' r='14'/%3E%3Ccircle cx='52' cy='94' r='14'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, auto, 64px 128px;
}
.story::before { display: none; }
/* each principle a card tipped in on the endpaper: charcoal, a hairline of the cloth's gold */
.story__how { gap: 16px; }
.story__how li {
  padding: clamp(18px, 2vw, 26px) clamp(18px, 2.2vw, 30px); background: rgba(22, 20, 18, .88);
  box-shadow: inset 0 0 0 1px rgba(230, 165, 59, .22), 0 24px 40px -28px rgba(0, 0, 0, .8);
}

/* ---------- the cover: the offer ---------- */
.offer {
  isolation: isolate; overflow: hidden; color: var(--cream);
  background:
    radial-gradient(120% 90% at 40% 30%, rgba(255, 240, 200, .16), rgba(60, 30, 0, .28)),
    repeating-linear-gradient(90deg, rgba(90, 50, 0, .07) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(90, 50, 0, .05) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, #EFB452, #E3A23B 50%, #C8882A);
  box-shadow: inset 0 30px 40px -30px rgba(0, 0, 0, .55), inset 0 -30px 40px -30px rgba(0, 0, 0, .5);
}
/* the hinge groove near the spine, which is on the right of a Hebrew book */
.offer::before {
  inset: 0 clamp(14px, 4.5vw, 64px) 0 auto; inline-size: 6px; background: rgba(70, 40, 5, .3);
  box-shadow: 3px 0 0 rgba(255, 235, 190, .3); z-index: -1;
}
/* a glint travels over the cloth once, as the cover comes into view (main.js, offerCover, adds .is-lit) */
.offer::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 248, 226, .5) 50%, transparent 62%) no-repeat;
  background-size: 260% 100%; background-position: 140% 0; mix-blend-mode: soft-light;
}
.offer.is-lit::after { animation: glint 2.4s cubic-bezier(.45, .05, .25, 1) .3s both; }
@keyframes glint { to { background-position: -40% 0; } }
.offer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: clamp(24px, 4vw, 56px); }
/* the window, with the cover's own living photo, framed as the cover frames it */
.offer__win {
  display: block; position: relative; min-block-size: 320px; margin: 5px; overflow: hidden; background: #2A2019;
  box-shadow: 0 0 0 5px rgba(26, 22, 18, .92), 0 30px 50px -30px rgba(40, 20, 0, .7);
}
.offer__win video, .offer__win img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; } /* img: html.no-inline, main.js */
.offer__win::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .18), transparent 8% 90%, rgba(0, 0, 0, .22)); }
/* the title plate: charcoal, printed on the cloth, the offer on it */
.offer__card {
  max-inline-size: none; padding: clamp(28px, 4vw, 60px); background: #161412;
  box-shadow: 0 30px 50px -30px rgba(40, 20, 0, .7);
}
/* under the plate, as on the cover: what kind of book it is, printed on the cloth */
.offer__card::after {
  content: "ספר מתכונים דיגיטלי"; position: absolute; inset-inline-start: 0; top: calc(100% + 14px);
  font-weight: 500; font-size: 15px; color: rgba(26, 22, 18, .78);
}
.offer__grid { padding-bottom: 28px; }
@media (max-width: 900px) {
  .offer__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  /* as on the cover: the window above, the plate under it */
  .offer__win { order: -1; min-block-size: 0; aspect-ratio: 4 / 3; justify-self: stretch; }
}