@charset "UTF-8";
/* =============================================================
   ilmbee · One page per book (/book/<slug>)
   Loaded after styles.css, which supplies the tokens, header,
   footer, buttons, the FAQ (.qa) and the phone bar (.mbar).
   Phone first: the base rules are the phone, like a book's page
   in the app; wider screens add columns.
   Pages are built by tools/seo_books.py.
   ============================================================= */

.bp-skip{position:absolute;left:12px;top:-60px;z-index:200;padding:10px 16px;border-radius:var(--r-sm);background:var(--navy-700);color:#fff;font-weight:700}
.bp-skip:focus{top:12px}

/* ﷺ in Amiri (already loaded for the footer dua), so it looks the same everywhere */
.bp-saw{font-family:var(--font-ar);font-weight:700;font-size:1.3em;line-height:0;white-space:nowrap}
.bp-narrow{max-width:880px}

/* ── Hero: crumbs, the cover, what the book is ── */
.bp-hero{
  position:relative;isolation:isolate;
  padding-block:16px 34px;
  background:var(--cream-50);
}
.bp-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(192,150,64,.24) 1px,transparent 1.3px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(60% 55% at 50% 26%,#000 0,rgba(0,0,0,.35) 55%,transparent 100%);
          mask-image:radial-gradient(60% 55% at 50% 26%,#000 0,rgba(0,0,0,.35) 55%,transparent 100%);
}

.bp-crumbs ol{display:flex;flex-wrap:nowrap;gap:4px 0;font-size:.8125rem;font-weight:600;color:var(--navy-200);min-width:0}
.bp-crumbs li{display:inline-flex;align-items:center;min-width:0;flex:none}
.bp-crumbs li:last-child{flex:1 1 auto}
.bp-crumbs li + li::before{content:"›";margin-inline:8px;color:var(--gold-600);font-weight:700}
.bp-crumbs a{color:var(--navy-300);border-bottom:1px solid transparent}
.bp-crumbs a:hover{color:var(--gold-700);border-color:var(--gold-400)}
.bp-crumbs [aria-current]{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--navy-200)}

.bp-hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin-top:18px}

/* the cover, held like a real book: square spine, rounded fore-edge */
.bp-cover{position:relative;width:min(58vw,236px);margin-inline:auto}
.bp-cover::after{
  content:"";position:absolute;left:8%;right:8%;bottom:-14px;height:24px;z-index:-1;
  background:radial-gradient(closest-side,rgba(11,18,41,.28),rgba(11,18,41,0));
}
.bp-cover img{
  width:100%;height:auto;aspect-ratio:312/442;object-fit:cover;
  border-radius:3px 12px 12px 3px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04),0 2px 4px rgba(20,28,61,.12),0 22px 40px rgba(20,28,61,.24);
  background:var(--cream-100);
}
.bp-cover__spine{
  position:absolute;left:0;top:0;bottom:0;width:7%;border-radius:3px 0 0 3px;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.2),rgba(255,255,255,.18) 55%,rgba(0,0,0,0));
}
.bp-cover__free{
  position:absolute;right:-10px;top:14px;
  padding:5px 12px;border-radius:var(--r-pill);
  background:var(--gold-500);color:var(--navy-700);
  font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 3px 0 var(--gold-700),var(--shadow-1);
}

.bp-hero__text{min-width:0;text-align:center}
.bp-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.bp-meta li{
  display:inline-flex;align-items:center;
  padding:5px 11px;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--cream-200);
  font-size:.75rem;font-weight:700;color:var(--navy-300);white-space:nowrap;
}
.bp-meta li:first-child{background:var(--navy-700);border-color:var(--navy-700);color:var(--gold-400)}
.bp-meta a{color:inherit}
.bp-meta a:hover{color:var(--gold-700)}

.bp-title{
  margin-top:14px;
  font-size:clamp(1.875rem,1.3rem + 2.8vw,3.25rem);
  line-height:1.06;
  overflow-wrap:break-word;
}
.bp-lead{
  margin-top:14px;
  font-size:1.0625rem;line-height:1.65;
  text-align:left;text-wrap:pretty;
}
.bp-cta{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.bp-cta .btn{width:100%;height:54px}
.bp-cta .btn--ghost{background:#fff}
.bp-ticks{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin-top:16px;font-size:.8125rem;font-weight:600;color:var(--navy-300)}
.bp-ticks li{display:inline-flex;align-items:center;gap:7px}
.bp-ticks li::before{
  content:"";flex:none;width:16px;height:16px;border-radius:50%;
  background:var(--gold-200) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.5L12 5.4' fill='none' stroke='%23A8842F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat;
}
.bp-owned{margin-top:12px;font-size:.8125rem;color:var(--navy-200)}
.bp-owned a{color:var(--gold-700);font-weight:700;border-bottom:1.5px solid rgba(214,175,87,.5)}

/* ── Sections ── */
.bp-sec{padding-block:34px}
.bp-sec--tint{background:var(--cream-100)}
.bp-sec__head{max-width:640px}
.bp-sec__title{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.25rem);line-height:1.1}
.bp-sec__lead{margin-top:8px;font-size:.9375rem;color:var(--navy-300)}

/* What your child learns */
.bp-learn{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:18px}
.bp-learn li{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 16px;border-radius:var(--r-md);
  background:#fff;border:1px solid var(--cream-200);box-shadow:var(--shadow-1);
  font-weight:600;color:var(--navy-700);line-height:1.45;
}
.bp-learn__n{
  flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--gold-100);border:1.5px solid var(--gold-400);
  font-family:var(--font-display);font-size:.9375rem;font-weight:800;color:var(--gold-700);
}

/* A look inside: swipe on a phone, a row on wider screens */
.bp-peek{
  display:grid;grid-auto-flow:column;grid-auto-columns:74%;gap:14px;
  margin-top:18px;margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) 14px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);overscroll-behavior-x:contain;
  scrollbar-width:none;
}
.bp-peek::-webkit-scrollbar{display:none}
.bp-peek figure{scroll-snap-align:center;min-width:0}
.bp-peek img{
  width:100%;height:auto;aspect-ratio:520/738;object-fit:cover;
  border-radius:12px;background:var(--cream-100);
  box-shadow:0 2px 4px rgba(20,28,61,.08),0 14px 30px rgba(20,28,61,.14);
}
.bp-peek figcaption{margin-top:10px;font-size:.875rem;line-height:1.45;color:var(--navy-300)}
.bp-peek figcaption b{display:block;font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-700);margin-bottom:2px}

/* Read to me */
.bp-listen{
  position:relative;overflow:hidden;isolation:isolate;
  margin-top:6px;padding:22px 20px;border-radius:var(--r-lg);
  background:var(--navy-800);color:rgba(255,255,255,.74);
}
.bp-listen::before{
  content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(214,175,87,.32),rgba(214,175,87,0));
}
.bp-listen__title{color:#fff;font-size:clamp(1.375rem,1.15rem + 1vw,1.875rem);line-height:1.12}
.bp-listen__title span{color:var(--gold-400)}
.bp-listen p{margin-top:10px;font-size:.9375rem;line-height:1.6}
.bp-modes{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:16px}
.bp-mode{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:var(--r-md);background:rgba(255,255,255,.06);border:1px solid rgba(214,175,87,.22)}
.bp-mode svg{flex:none;width:30px;height:30px;color:var(--gold-400)}
.bp-mode b{display:block;font-family:var(--font-display);font-size:1.0625rem;font-weight:800;color:#fff;line-height:1.2}
.bp-mode span{display:block;margin-top:2px;font-size:.875rem;line-height:1.45}
.bp-listen__karaoke{margin-top:14px;font-family:var(--font-display);font-size:1.125rem;font-weight:700;line-height:1.4;color:rgba(255,255,255,.5)}
.bp-listen__karaoke mark{background:none;color:var(--gold-400)}

/* Where it sits in the series */
.bp-track{margin-top:16px}
.bp-track__bar{position:relative;height:10px;border-radius:var(--r-pill);background:var(--cream-200);overflow:hidden}
.bp-track__bar i{position:absolute;left:0;top:0;bottom:0;border-radius:inherit;background:linear-gradient(90deg,var(--gold-400),var(--gold-600))}
.bp-track__labels{display:flex;justify-content:space-between;margin-top:6px;font-size:.75rem;font-weight:700;color:var(--navy-200)}
.bp-track__labels b{color:var(--gold-700)}

.bp-nav{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:18px}
.bp-nav a{
  display:flex;align-items:center;gap:10px;min-width:0;
  padding:10px;border-radius:var(--r-md);
  background:#fff;border:1px solid var(--cream-200);box-shadow:var(--shadow-1);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);
}
.bp-nav a:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:var(--gold-400)}
.bp-nav a.bp-nav__next{flex-direction:row-reverse;text-align:right}
.bp-nav img{flex:none;width:44px;height:auto;aspect-ratio:312/442;border-radius:2px 6px 6px 2px;box-shadow:0 2px 6px rgba(20,28,61,.2)}
.bp-nav span{min-width:0}
.bp-nav small{display:block;font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-700)}
.bp-nav strong{display:block;font-size:.875rem;font-weight:700;line-height:1.3;color:var(--navy-700);overflow-wrap:break-word}
.bp-nav__gap{visibility:hidden}

.bp-related__title{margin-top:28px;font-family:var(--font-display);font-size:1.25rem;font-weight:800;color:var(--navy-700)}
/* a shelf you swipe on a phone, four in a row on wider screens */
.bp-related{
  display:grid;grid-auto-flow:column;grid-auto-columns:38%;gap:14px;
  margin-top:12px;margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) 12px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);overscroll-behavior-x:contain;scrollbar-width:none;
}
.bp-related::-webkit-scrollbar{display:none}
.bp-related li{scroll-snap-align:start;min-width:0}
.bp-related a{display:flex;flex-direction:column;gap:8px}
.bp-related img{
  width:100%;height:auto;aspect-ratio:312/442;object-fit:cover;border-radius:3px 10px 10px 3px;background:var(--cream-200);
  box-shadow:var(--shadow-book);transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.bp-related a:hover img{transform:translateY(-6px) rotate(-1deg);box-shadow:var(--shadow-3)}
.bp-related span{font-size:.875rem;font-weight:600;line-height:1.35;color:var(--navy-700)}
.bp-related b{color:var(--gold-700);font-weight:800;margin-right:3px}
.bp-all{margin-top:20px}

/* The offer */
.bp-offer{
  position:relative;overflow:hidden;isolation:isolate;text-align:center;
  padding:30px 20px;border-radius:var(--r-xl);
  background:var(--navy-900);color:rgba(255,255,255,.72);
}
.bp-offer::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(214,175,87,.22) 1px,transparent 1.3px);background-size:20px 20px;
  -webkit-mask-image:radial-gradient(70% 80% at 50% 0,#000,transparent);mask-image:radial-gradient(70% 80% at 50% 0,#000,transparent);
}
.bp-series + .bp-offer{margin-top:36px}
.bp-offer .eyebrow{color:var(--gold-400)}
.bp-offer__title{margin-top:10px;color:#fff;font-size:clamp(1.625rem,1.25rem + 1.8vw,2.5rem);line-height:1.08}
.bp-offer__title span{color:var(--gold-400)}
.bp-offer__lead{margin:12px auto 0;max-width:46ch;font-size:.9375rem}
.bp-offer .bp-cta{flex-direction:column;align-items:stretch;justify-content:center;max-width:380px;margin-inline:auto}
.bp-offer .bp-cta .btn{width:100%;height:54px;flex:none}
.bp-offer__note{margin-top:14px;font-size:.8125rem;color:rgba(255,255,255,.5)}

/* FAQ: the .qa rows come from styles.css */
.bp-faq{margin-top:12px}
.bp-faq .qa__body p + p{margin-top:8px}
.bp-faq .qa__body{padding-right:8px}

/* the phone bar (.mbar in styles.css) is always on here: leave room for it */
@media (max-width:760px){
  .bp-page .site-footer{padding-bottom:calc(104px + env(safe-area-inset-bottom))}
}

/* ── 560px and up: buttons side by side ── */
@media (min-width:560px){
  .bp-cta{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .bp-cta .btn{width:auto;flex:1 1 auto}
  .bp-modes{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bp-mode{flex-direction:column}
  .bp-related{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-columns:auto;gap:16px;margin-inline:0;padding:4px 0 0;overflow:visible}
  .bp-peek{grid-auto-columns:46%}
}

/* ── 768px and up: the cover beside the words ── */
@media (min-width:768px){
  .bp-hero{padding-block:22px 56px}
  .bp-hero::before{
    -webkit-mask-image:radial-gradient(48% 70% at 22% 46%,#000 0,rgba(0,0,0,.35) 55%,transparent 100%);
            mask-image:radial-gradient(48% 70% at 22% 46%,#000 0,rgba(0,0,0,.35) 55%,transparent 100%);
  }
  .bp-hero__grid{grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center;margin-top:28px}
  .bp-cover{width:100%;max-width:330px}
  .bp-hero__text{text-align:left}
  .bp-meta,.bp-ticks{justify-content:flex-start}
  .bp-cta{justify-content:flex-start}
  .bp-cta .btn{flex:0 1 auto}
  .bp-sec{padding-block:clamp(48px,6vw,80px)}
  .bp-learn{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .bp-peek{
    grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-columns:auto;gap:22px;
    margin-inline:0;padding:4px 0 0;overflow:visible;
  }
  .bp-listen{padding:34px 36px}
  .bp-offer{padding:52px 40px}
  .bp-nav{gap:16px}
  .bp-nav a{padding:12px 14px}
  .bp-nav img{width:52px}
  .bp-nav strong{font-size:.9375rem}
}

/* ── 1100px and up: the series block beside the offer ── */
@media (min-width:1100px){
  .bp-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:start}
  .bp-split .bp-offer{position:sticky;top:calc(var(--header-h) + 24px);margin-top:0}
  .bp-listen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 48px;align-items:center}
  .bp-listen .bp-modes{grid-template-columns:minmax(0,1fr);margin-top:0}
  .bp-listen .bp-mode{flex-direction:row}
}

@media (prefers-reduced-motion:reduce){
  .bp-nav a,.bp-related img{transition:none}
}