/* Ebook landing (/ebook/suami-isteri-sepasukan/, /en/ebook/same-team/). Loads after site.css,
   seasons.css, answers.css and printables.css and reuses their tiles (s-hero, s-feature, s-split,
   p-dots, p-parts, p-when, p-sheet). Adds the cover in a CSS page frame. Tokens only. */

/* cover: the generated art inside a page frame, title set in HTML over a cream veil -------------- */
.e-stage { margin: 0; justify-self: center; width: min(100%, 440px); padding: var(--s10) var(--s8); background: var(--tile); border-radius: var(--radius-card); }
.e-cover { position: relative; display: block; margin: 0 auto; width: min(100%, 300px); aspect-ratio: 148 / 210; border-radius: 4px 10px 10px 4px; overflow: hidden; box-shadow: 0 1px 3px rgba(29, 29, 31, .1), 0 30px 50px -24px rgba(29, 29, 31, .45); transform: rotate(-2deg); transition: transform .5s var(--ease); }
.e-stage:hover .e-cover { transform: rotate(0deg) translateY(-6px); }
.e-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.e-cover::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(250, 246, 240, .94) 0%, rgba(250, 246, 240, .86) 30%, rgba(250, 246, 240, 0) 54%); }
.e-cover::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 6px; z-index: 2; background: linear-gradient(90deg, rgba(29, 29, 31, .18), rgba(29, 29, 31, 0)); }
.e-cover-copy { position: absolute; z-index: 2; left: 0; right: 0; top: 0; padding: 9% 9% 0; }
.e-cover-copy small { display: inline-block; padding: 3px 9px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .9); font-size: .625rem; font-weight: var(--wt-strong); }
.e-cover-copy b { display: block; margin-top: 10px; font-size: 1.375rem; line-height: 1.08; letter-spacing: -.02em; font-weight: var(--wt-strong); color: var(--text); }
.e-cover-copy span { display: block; margin-top: 6px; font-size: .6875rem; line-height: 1.35; color: #3a3a3c; }

.e-inside { margin: var(--s6) 0 0; }
.e-inside li { color: var(--text); font-size: var(--t-body); }
.e-get { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s6); margin-top: var(--s8); }
.e-get .note { margin: 0; color: var(--muted); font-size: var(--t-small); }
.e-get .note a { font-weight: var(--wt-medium); }

.e-safe { margin-top: var(--s8); padding: var(--s6); border-radius: var(--radius-card); background: var(--warn-soft); }
.e-safe h3 { font-size: var(--t-body); margin: 0 0 var(--s2); }
.e-safe p { margin: 0; color: var(--text); font-size: var(--t-small); }

/* phones and narrow tablets: the cover leads, smaller, so it sits above the fold with the promise */
@media (max-width: 59.99rem) {
  .e-stage { order: -1; width: 100%; padding: var(--s6); }
  .e-cover { width: min(56%, 220px); }
  .e-cover-copy b { font-size: 1rem; }
  .e-cover-copy span { font-size: .5625rem; }
  .e-cover-copy small { font-size: .5rem; }
}
@media (prefers-reduced-motion: reduce) { .e-cover { transition: none; } }