/* Arabicwala final pass. Tokens, type, contrast, book, closing band. */

:root {
  --aw-ivory: #FAF6EC;
  --aw-forest: #1B3B2C;
  --aw-forest-dark: #0D2116;
  --aw-charcoal: #2A2723;
  --aw-muted: #6E7A70;
  --aw-gold: #C9A227;
  --aw-gold-soft: #E0C583;
  --aw-border: rgba(27, 59, 44, 0.14);
  --aw-shadow: 0 22px 50px -32px rgba(13, 33, 22, 0.55);
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: Inter, "Segoe UI", sans-serif;
  --font-ar: Amiri, "Noto Naskh Arabic", serif;
  --font-ur: "Noto Nastaliq Urdu", serif;
}

body {
  font-family: var(--font-sans);
  background: var(--aw-ivory);
  color: var(--aw-charcoal);
}

h1, h2, h3, .hero__title, .featured__title, .modal__title {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.02em;
}

html[lang="ur"] body,
html[lang="ur"] h1,
html[lang="ur"] h2,
html[lang="ur"] h3,
html[lang="ur"] .hero__title,
html[lang="ur"] button,
html[lang="ur"] input,
html[lang="ur"] select,
html[lang="ur"] textarea {
  font-family: var(--font-ur);
  letter-spacing: 0;
}

html[lang="ur"] body { line-height: 2; }
html[lang="ur"] .eyebrow,
html[lang="ur"] .btn,
html[lang="ur"] .nav__center a,
html[lang="ur"] .promise__label { letter-spacing: 0; text-transform: none; }

.hero__title em,
.featured__ar,
.promo__ar,
.step__ar,
.promise__ar,
.tome__ar,
.tome__lesson-ar,
.spread__ar {
  font-family: var(--font-ar);
  letter-spacing: 0;
}

.bg-dust,
.hero__glow,
.hero__ring,
.eyebrow__dot { animation: none !important; }

.section,
.how,
#books,
#reviews,
#about,
#faq,
.promises-band {
  background: var(--aw-ivory);
  color: var(--aw-charcoal);
}

.hero { padding-bottom: clamp(3.2rem, 6vw, 5rem); overflow: visible; }
.hero.has-photo {
  background-image:
    linear-gradient(165deg, rgba(13, 33, 22, 0.88), rgba(13, 33, 22, 0.78)),
    var(--hero-photo);
  background-size: cover;
  background-position: center;
}

.nav {
  transition: background .28s ease, box-shadow .28s ease;
}
.nav.is-stuck {
  background: rgba(13, 33, 22, 0.96);
  box-shadow: 0 10px 30px -24px rgba(0, 0, 0, 0.8);
}
.nav__center a { position: relative; }
.nav__center a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.35rem;
  height: 1px;
  background: var(--aw-gold-soft);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s ease;
}
html[dir="rtl"] .nav__center a::after { transform-origin: right center; }
.nav__center a:hover::after,
.nav__center a.is-active::after,
.nav__center a:focus-visible::after { transform: scaleX(1); }

.nav-search {
  display: flex;
  align-items: center;
}
.nav-search input {
  width: 9.5rem;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  padding: 0 0.9rem;
  font: inherit;
  font-size: 0.82rem;
  transition: width .28s ease, background .28s ease;
}
.nav-search input:focus {
  width: 13rem;
  outline: none;
  background: rgba(255, 255, 255, 0.12);
}
.nav-search input::placeholder { color: rgba(255, 255, 255, 0.55); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.logo__img { height: 34px; width: auto; display: block; }
html:not([lang="ur"]) .logo__img--ur { display: none; }
html[lang="ur"] .logo:has(.logo__img--ur) .logo__img--en,
html[lang="ur"] .logo:has(.logo__img--ur) .logo__mark,
html[lang="ur"] .logo:has(.logo__img--ur) .logo__text { display: none; }
html[lang="ur"] .logo__img--ur { display: block; }

.btn:focus-visible,
.lang__btn:focus-visible,
.faq__q:focus-visible,
.icon-btn:focus-visible,
.nav__center a:focus-visible,
.footer a:focus-visible {
  outline: 2px solid var(--aw-gold-soft);
  outline-offset: 3px;
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--arrow .aw-go {
  display: inline-block;
  transition: transform .28s ease;
}
.btn--arrow:hover .aw-go,
.btn--arrow:focus-visible .aw-go { transform: translateX(4px); }
html[dir="rtl"] .btn--arrow .aw-go { transform: scaleX(-1); }
html[dir="rtl"] .btn--arrow:hover .aw-go,
html[dir="rtl"] .btn--arrow:focus-visible .aw-go { transform: scaleX(-1) translateX(4px); }
html[dir="rtl"] .preview__nav svg,
html[dir="rtl"] .aw-dir { transform: scaleX(-1); }

.hero__visual { position: relative; }
.hero-arch {
  position: absolute;
  z-index: 1;
  width: min(78%, 420px);
  height: 86%;
  top: 4%;
  border-radius: 180px 180px 16px 16px;
  overflow: hidden;
  opacity: 0.42;
  box-shadow: 0 0 0 1px rgba(224, 197, 131, 0.35);
  pointer-events: none;
}
.hero-arch__img { width: 100%; height: 100%; object-fit: cover; }
html:not([lang="ur"]) .hero-arch__img--ur { display: none; }
html[lang="ur"] .hero-arch__img--en { display: none; }
.hero-arch__img--mobile { display: none; }
@media (max-width: 700px) {
  .hero-arch:has(.hero-arch__img--mobile) .hero-arch__img--en,
  .hero-arch:has(.hero-arch__img--mobile) .hero-arch__img--ur { display: none; }
  .hero-arch__img--mobile { display: block; }
}

.promises { margin-top: 0; }
.promises-band { padding-top: clamp(2.6rem, 5vw, 4rem); }
.promises__card,
.promise,
.promise__label,
.promise__d { color: var(--aw-charcoal); }
.promises__card {
  background: #fff;
  border-color: var(--aw-border);
  box-shadow: var(--aw-shadow);
  border-radius: 4px;
}
.promise { transition: transform .28s ease, box-shadow .28s ease, background .28s ease; }
.promise:hover { background: #fff; transform: translateY(-3px); }
.promise__label {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aw-forest);
}
.promise__ar {
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  line-height: 1.45;
  color: var(--aw-forest);
}
.promise__d { color: var(--aw-charcoal); font-size: 0.98rem; line-height: 1.7; }
html[lang="ur"] .promise__label {
  font-family: var(--font-ur);
  font-size: 1.15rem;
  line-height: 2;
}
html[lang="ur"] .promise__d { line-height: 2.15; }

.tome {
  position: relative;
  z-index: 3;
  width: min(300px, 78%);
  aspect-ratio: 3 / 4.05;
  perspective: 1600px;
  cursor: pointer;
}
.tome--feat { width: min(280px, 86%); }
.tome__shadow {
  position: absolute;
  left: 12%;
  right: 8%;
  bottom: -16px;
  height: 24px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35), transparent 70%);
  pointer-events: none;
}
.tome__stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.tome__leaf {
  position: absolute;
  inset: 12px 8px 12px 18px;
  overflow: hidden;
  padding: 1.1rem 0.7rem 1.1rem 38%;
  border-radius: 2px 7px 7px 2px;
  background:
    linear-gradient(90deg, rgba(90, 60, 20, 0.12), transparent 14%),
    #fbf8f1;
  box-shadow:
    7px 0 0 #efe4cc,
    10px 0 0 #e4d4b4,
    13px 0 0 #c9a44a,
    16px 18px 28px rgba(0, 0, 0, 0.22);
}
.tome__pageimg { width: 100%; height: 100%; object-fit: cover; display: block; }
.tome__lesson-en {
  margin: 0;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: #8a6a22;
}
html[lang="ur"] .tome__lesson-en { letter-spacing: 0; text-transform: none; font-family: var(--font-ur); }
.tome__lesson-ar {
  margin: 0.2rem 0 0.55rem;
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--aw-forest);
  direction: rtl;
}
.tome__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.tome__lines li { display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.35rem; align-items: baseline; }
.tome__lines b { font-family: var(--font-ar); font-size: 1.15rem; color: var(--aw-forest); direction: rtl; }
.tome__lines span { font-size: 0.72rem; color: #3d5148; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tome__cover {
  position: absolute;
  inset: 0 10px 0 14px;
  transform-origin: left center;
  transform: rotateY(-7deg);
  transition: transform 700ms cubic-bezier(.22, .61, .2, 1), box-shadow 700ms ease;
  border-radius: 3px 8px 8px 3px;
  overflow: hidden;
  background: linear-gradient(165deg, #245c42 0%, #0d2116 70%);
  box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(224, 197, 131, 0.45);
  backface-visibility: hidden;
}
.tome__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tome__photo--mobile { display: none; }
@media (max-width: 700px) {
  .tome__cover:has(.tome__photo--mobile) .tome__photo--desk { display: none; }
  .tome__photo--mobile { display: block; }
}
.tome__plate {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  text-align: center;
  padding: 1.2rem;
  color: #f7edd6;
}
.tome__plate::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(224, 197, 131, 0.4);
  pointer-events: none;
}
.tome__corner { position: absolute; width: 16px; height: 16px; border: 1px solid var(--aw-gold-soft); }
.tome__corner--tl { top: 18px; left: 18px; border-right: 0; border-bottom: 0; }
.tome__corner--br { bottom: 18px; right: 18px; border-left: 0; border-top: 0; }
.tome__kicker, .tome__ar, .tome__rule, .tome__en { position: relative; z-index: 1; }
.tome__kicker { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--aw-gold-soft); font-weight: 650; }
.tome__ar { font-size: 1.7rem; line-height: 1.35; max-width: 10ch; direction: rtl; }
.tome__rule { width: 48px; height: 1px; background: linear-gradient(90deg, transparent, var(--aw-gold-soft), transparent); }
.tome__en { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; }
.tome__spine {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 16px;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(90deg, #071910, #1b6b4c 60%, #0c3b2b);
  box-shadow: inset -1px 0 0 rgba(224, 197, 131, 0.35);
  z-index: 4;
}
@media (hover: hover) and (pointer: fine) {
  .tome:hover .tome__cover,
  .tome:focus-within .tome__cover { transform: rotateY(-48deg); }
}
.tome.is-open .tome__cover { transform: rotateY(-48deg); }
@media (max-width: 760px) {
  .tome:hover .tome__cover,
  .tome.is-open .tome__cover { transform: rotateY(-40deg); }
}
@media (prefers-reduced-motion: reduce) {
  .tome__cover { transition: none; transform: rotateY(-14deg); }
  .reveal { transition: none !important; }
  .btn, .btn--arrow .aw-go, .nav-search input { transition: none; }
}

.featured__card { overflow: visible; border-radius: 4px; }
.featured__visual { overflow: visible; }

.promo {
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(201, 162, 39, 0.16), transparent 60%),
    repeating-linear-gradient(90deg, rgba(224, 197, 131, 0.045) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgba(224, 197, 131, 0.035) 0 1px, transparent 1px 72px),
    var(--aw-forest-dark);
  color: var(--aw-ivory);
}
.promo::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: min(520px, 80%);
  height: 90px;
  transform: translateX(-50%);
  border: 1px solid rgba(224, 197, 131, 0.28);
  border-bottom: 0;
  border-radius: 260px 260px 0 0;
  pointer-events: none;
}
.promo h2 { color: var(--aw-ivory); }
.promo p, .promo__note { color: rgba(250, 246, 236, 0.78); }
.promo .promo__ar { color: var(--aw-gold-soft); }
.promo__note svg { stroke: var(--aw-gold-soft); }

.footer { background: var(--aw-forest-dark); }
.footer a { transition: color .24s ease; }
.footer a:hover { color: var(--aw-gold-soft); }
.footer__social { display: flex; flex-wrap: wrap; gap: 0.8rem 1rem; margin-top: 1rem; }
.footer__social a { font-size: 0.82rem; letter-spacing: 0.04em; }
html[lang="ur"] .footer__social a { letter-spacing: 0; }

.sheet--image { padding: 0.6rem; background: #f7f1e4; }
.sheet--image img { width: 100%; height: auto; max-height: min(62vh, 640px); object-fit: contain; display: block; }
.sheet__caption { margin: 0.6rem 0 0; text-align: center; color: var(--aw-forest); }
@media (max-width: 700px) {
  .modal.is-open .modal__panel { width: 100%; max-width: none; min-height: 100%; border-radius: 0; }
  .nav-search { display: none; }
  .nav-buy { display: none; }
}

.icon-badge svg { display: block; }
.review { border-radius: 4px; }
.faq__item, .step, .featured__card { border-radius: 4px; }