@import url('assets/fonts/fonts.css');

:root {
  --navy: #0b1526;
  --navy-2: #111d33;
  --navy-3: #1a2a45;
  --gold: #c9a84c;
  --gold-light: #e8d5a3;
  --gold-dim: rgba(201, 168, 76, 0.15);
  --gold-ink: #7a6428;
  --cream: #f7f4ef;
  --white: #ffffff;
  --text: #1a1a1a;
  --text-soft: #3d4654;
  --muted: #4a5568;
  --border: #e2e8f0;
  --card-shadow: none;
  --radius: 14px;
  --focus-ring: 0 0 0 3px rgba(201, 168, 76, 0.45);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Vazirmatn', system-ui, sans-serif;
  background: var(--cream);
  color: var(--text);
  line-height: 1.8;
  direction: rtl;
  font-size: 16px;
  min-height: 100vh;
}
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--gold); }
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  box-shadow: var(--focus-ring);
}
::selection {
  background: rgba(201, 168, 76, 0.35);
  color: var(--navy);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb {
  background: rgba(11, 21, 38, 0.28);
  border-radius: 999px;
  border: 2px solid var(--cream);
}
::-webkit-scrollbar-thumb:hover { background: rgba(11, 21, 38, 0.45); }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  top: -100px;
  z-index: 200;
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
  padding: 0.65rem 1rem;
  border-radius: 10px;
  transition: top 0.15s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 0.75rem;
  color: var(--navy);
}

/* Topbar */
.topbar {
  background: var(--navy);
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid rgba(201, 168, 76, 0.22);
}
.topbar-inner {
  max-width: 1100px; margin: 0 auto;
  padding: 0 1.25rem; height: 64px;
  display: flex; align-items: center; gap: 1rem;
}
.brand {
  display: flex; align-items: center; gap: 0.6rem;
  color: var(--gold-light); font-weight: 700; font-size: 1.05rem;
}
.brand-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--gold); color: var(--navy);
  display: grid; place-items: center;
  font-family: 'Amiri', serif; font-size: 1.2rem; font-weight: 700;
}
.nav-links {
  display: flex; gap: 0.15rem; margin-right: auto; margin-left: auto;
}
.nav-links a {
  color: rgba(255,255,255,0.75); padding: 0.45rem 0.85rem;
  border-radius: 8px; font-size: 0.9rem; font-weight: 500;
}
.nav-links a:hover, .nav-links a.active {
  color: var(--gold); background: rgba(201,168,76,0.12);
}
.lang-switch {
  display: flex; border: 1px solid rgba(201,168,76,0.35);
  border-radius: 999px; overflow: hidden; font-size: 0.75rem; font-weight: 600;
}
.lang-switch span, .lang-switch button {
  padding: 0.35rem 0.7rem; color: rgba(255,255,255,0.72); cursor: pointer;
  min-height: 32px;
}
.lang-switch span.on, .lang-switch button.on {
  background: var(--gold); color: var(--navy);
}
.lang-switch button:focus-visible {
  outline-offset: 1px;
  z-index: 1;
}
.menu-btn {
  display: none; color: var(--gold-light);
  width: 44px; height: 44px; border-radius: 10px;
  place-items: center;
}
.menu-btn-icon,
.menu-btn-icon::before,
.menu-btn-icon::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.menu-btn-icon { position: relative; }
.menu-btn-icon::before,
.menu-btn-icon::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
}
.menu-btn-icon::before { top: -6px; }
.menu-btn-icon::after { top: 6px; }
.menu-btn.is-open .menu-btn-icon { background: transparent; }
.menu-btn.is-open .menu-btn-icon::before { top: 0; transform: rotate(45deg); }
.menu-btn.is-open .menu-btn-icon::after { top: 0; transform: rotate(-45deg); }
@media (max-width: 800px) {
  .menu-btn { display: grid; }
  .nav-links {
    display: none; position: absolute; top: 64px; right: 0; left: 0;
    background: var(--navy-2); flex-direction: column; padding: 0.75rem;
    border-bottom: 1px solid rgba(201,168,76,0.2);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 0.75rem 1rem; }
}

/* Language visibility — restore each element's natural display */
.fa-only, .en-only { display: none !important; }
body.lang-fa .fa-only { display: revert !important; }
body.lang-en .en-only { display: revert !important; }

/* Hero / page-hero — ink lectern, no stock photography */
.hero, .page-hero {
  background: var(--navy);
  color: #fff; text-align: center;
  padding: 4.5rem 1.25rem 3.5rem;
  position: relative;
  overflow: hidden;
}
.hero-lectern {
  padding: 5.5rem 1.25rem 4.25rem;
  min-height: min(78vh, 640px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.scroll-cue {
  position: absolute;
  bottom: 1.25rem;
  inset-inline: 0;
  margin-inline: auto;
  width: 1.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  opacity: 0.65;
  transition: opacity 0.2s ease;
}
.scroll-cue:hover { opacity: 1; }
.scroll-cue-line {
  width: 1px;
  height: 1.6rem;
  background: linear-gradient(180deg, transparent, var(--gold-light));
  animation: scroll-cue-pulse 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes scroll-cue-pulse {
  0% { transform: scaleY(0.35); opacity: 0.2; transform-origin: top; }
  45% { transform: scaleY(1); opacity: 1; transform-origin: top; }
  100% { transform: scaleY(0.35); opacity: 0.15; transform-origin: bottom; }
}

/* 21st.dev Reveal adaptation — fade + unblur + rise */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(8px);
  transition:
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),
    filter 0.65s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),
    color 0.15s ease,
    background-color 0.15s ease;
  will-change: opacity, transform, filter;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}
.reveal-saying.is-visible .saying blockquote {
  animation: saying-focus 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}
@keyframes saying-focus {
  from { letter-spacing: 0.02em; opacity: 0.55; filter: blur(3px); }
  to { letter-spacing: normal; opacity: 1; filter: none; }
}

.hero-mark {
  font-family: 'Amiri', serif;
  font-size: clamp(3.5rem, 12vw, 6.5rem);
  line-height: 1;
  color: rgba(201, 168, 76, 0.12);
  margin: 0 0 0.25rem;
  user-select: none;
  animation: lectern-fade 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero h1, .page-hero h1 {
  font-family: 'Amiri', serif;
  font-size: clamp(2.35rem, 6vw, 3.4rem);
  color: var(--gold-light);
  margin-bottom: 0;
  line-height: 1.2;
  font-weight: 700;
  animation: lectern-fade 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.06s both;
}
.hero-rule {
  width: 3.5rem; height: 1px;
  background: var(--gold);
  margin: 1.15rem auto 1.25rem;
  transform-origin: center;
  animation: lectern-rule 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both;
}
.hero .sub, .page-hero .sub, .hero p:not(.hero-mark), .page-hero p {
  color: rgba(232, 213, 163, 0.78);
  font-size: 1.05rem;
  max-width: 28rem;
  margin-inline: auto;
  line-height: 1.75;
  animation: lectern-fade 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.14s both;
}
.hero-cta {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin-top: 1.75rem;
  background: var(--gold); color: var(--navy); font-weight: 700;
  padding: 0.8rem 1.55rem; border-radius: 10px;
  min-height: 44px;
  transition: background 0.2s ease;
  animation: lectern-fade 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both;
}
.hero-cta:hover { background: var(--gold-light); color: var(--navy); }
.hero-cta:focus-visible { color: var(--navy); }
.cta-arrow {
  width: 0.55rem; height: 0.55rem;
  border-inline-end: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  margin-top: -1px;
}
[dir="ltr"] .cta-arrow { transform: rotate(135deg); }

@keyframes lectern-fade {
  from { opacity: 0; transform: translateY(10px); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes lectern-rule {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-mark, .hero h1, .hero .sub, .hero-cta, .hero-rule { animation: none; }
  .scroll-cue-line { animation: none; opacity: 0.5; }
  .reveal {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  .reveal-saying.is-visible .saying blockquote { animation: none; }
}

/* Distilled home entry rows — not a card grid */
.entry-list {
  max-width: 40rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 1rem;
}
.entry-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 0.75rem 1.25rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
  position: relative;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.entry-row::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.entry-row:first-child { border-top: 1px solid var(--border); }
.entry-row:hover,
.entry-row:focus-visible {
  color: var(--navy);
  background: rgba(201, 168, 76, 0.06);
}
.entry-row:hover::after,
.entry-row:focus-visible::after {
  transform: scaleX(1);
}
.entry-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--navy);
}
.entry-meta {
  font-size: 0.88rem;
  color: var(--muted);
  text-align: end;
}
.entry-go {
  width: 0.45rem; height: 0.45rem;
  border-inline-end: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
  opacity: 0.7;
}
[dir="ltr"] .entry-go { transform: rotate(135deg); }
@media (max-width: 520px) {
  .entry-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }
  .entry-meta { grid-column: 1; text-align: start; }
  .entry-go { grid-row: 1 / span 2; align-self: center; }
}

/* One featured saying */
.featured-saying {
  max-width: 40rem;
  margin: 1rem auto 4rem;
  padding: 0 1.25rem;
  text-align: center;
}
.saying {
  margin: 0;
  padding: 2rem 0 1.25rem;
  border: none;
  background: transparent;
}
.saying blockquote {
  font-family: 'Amiri', serif;
  font-size: clamp(1.35rem, 3.5vw, 1.85rem);
  line-height: 2;
  color: var(--navy);
  margin: 0;
}
.saying figcaption {
  margin-top: 1rem;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--muted);
}
.saying-more {
  margin-top: 0.5rem;
}
.saying-more a {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--navy);
  border-bottom: 1px solid rgba(201, 168, 76, 0.55);
  padding-bottom: 0.1rem;
}
.saying-more a:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* Legacy quote boxes (inner pages if any) */
.quote-box {
  margin: 0;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.35rem 1.3rem;
  color: var(--navy);
}
.quote-box blockquote {
  font-family: 'Amiri', serif; font-size: 1.15rem; line-height: 1.95;
  color: var(--navy);
}
.quote-box figcaption,
.quote-box small {
  font-family: 'Vazirmatn', sans-serif;
  display: block; margin-top: 0.75rem;
  font-size: 0.9rem; line-height: 1.75;
  color: var(--muted);
}

/* Main */
.main { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }

/* Toolbar */
.toolbar {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 1.25rem;
}
.toolbar input {
  flex: 1; min-width: 180px; padding: 0.75rem 1rem;
  border: 1px solid var(--border); border-radius: 10px;
  font-family: inherit; font-size: 0.95rem; background: var(--white);
}
.toolbar input:focus { outline: none; border-color: var(--gold); }

/* Hikam */
.hikam-grid {
  display: grid; gap: 16px; grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .hikam-grid { grid-template-columns: 1fr 1fr; }
}
.hikam-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.25rem 1.35rem;
  box-shadow: var(--card-shadow);
  display: flex; flex-direction: column; height: 100%;
  transition: border-color .2s;
}
.hikam-card:hover { border-color: rgba(201,168,76,0.45); }
.hikam-card .num {
  font-size: 0.8rem; font-weight: 600; color: var(--gold-ink);
  margin-bottom: 0.5rem;
}
.hikam-card .ar {
  font-family: 'Amiri', serif; font-size: 1.2rem; line-height: 2;
  color: var(--navy); margin-bottom: 12px;
}
.hikam-card .tr {
  font-size: 0.95rem; color: var(--text-soft); line-height: 1.95;
  flex: 1; border-top: 1px dashed var(--border); padding-top: 12px;
}
.hikam-card .tr.en {
  direction: ltr; text-align: left; font-family: system-ui, sans-serif;
}

/* List items khutbah */
.list-grid { display: grid; gap: 0.75rem; }
.list-item, .khutbah-card, .rasail-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.15rem 1.35rem;
  display: flex; gap: 0.85rem; align-items: flex-start;
}
.list-item > div { min-width: 0; flex: 1; }
.list-item h3, .khutbah-card h3, .rasail-card h3 {
  color: var(--navy); font-size: 1.05rem; margin-bottom: 0.25rem;
}
.list-item p, .khutbah-card p, .rasail-card p { color: var(--muted); font-size: 0.9rem; }
.num-badge {
  display: inline-block; font-size: 0.75rem; font-weight: 700;
  color: var(--navy); background: var(--gold-dim);
  padding: 0.25rem 0.55rem; border-radius: 6px; margin-bottom: 0.4rem;
}

/* Pagination */
.pagination {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px; margin: 32px 0 16px; padding: 16px 12px;
}
.page-btn, .page-num {
  background: rgba(201,168,76,0.12);
  border: 1px solid rgba(201,168,76,0.35);
  color: var(--gold); padding: 8px 14px; border-radius: 8px;
  cursor: pointer; font-family: inherit; font-size: 0.9rem;
  text-decoration: none; display: inline-flex; align-items: center;
  min-height: 40px;
}
.page-btn:hover:not(:disabled), .page-num:hover {
  background: rgba(201,168,76,0.25); border-color: var(--gold);
}
.page-btn:disabled, .page-btn.disabled, span.page-btn {
  opacity: 0.4; cursor: not-allowed; pointer-events: none;
}
.page-num.on {
  background: var(--gold); color: var(--navy);
  border-color: var(--gold); font-weight: 700;
}
.page-numbers { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.page-info {
  width: 100%; text-align: center; color: var(--muted);
  font-size: 0.85rem; margin-top: 4px;
}
a.page-btn { text-decoration: none; }

/* Breadcrumb */
.breadcrumb {
  max-width: 1100px; margin: 0 auto; padding: 12px 20px 0;
  font-size: 0.85rem; color: var(--muted);
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.breadcrumb li:not(:last-child)::after {
  content: "‹"; margin-right: 6px; opacity: 0.5;
}
.breadcrumb a { color: var(--gold); }
.breadcrumb [aria-current="page"] { color: var(--text-soft); }

/* About / prose */
.prose {
  max-width: 40rem; margin: 0 auto; padding: 2rem 1.25rem 4rem;
}
.prose h2 {
  font-size: 1.25rem; margin: 1.75rem 0 0.75rem; color: var(--navy);
  padding-bottom: 0.35rem; border-bottom: 1px solid var(--border);
}
.prose p { margin-bottom: 1rem; color: var(--text-soft); line-height: 1.9; }
.prose ul { margin: 0.75rem 0 1.25rem; padding-right: 1.25rem; list-style: disc; }
.prose li { margin-bottom: 0.4rem; color: var(--text-soft); }

/* Footer */
footer, .site-footer {
  background: var(--navy); color: rgba(255,255,255,0.82);
  text-align: center; padding: 2rem 1rem; font-size: 0.9rem;
  margin-top: 2rem;
  line-height: 1.7;
}
footer strong, .site-footer strong { color: var(--gold-light); }
.footer-sep { margin: 0 0.35rem; opacity: 0.55; }

.page-hero-compact { padding: 2.75rem 1.25rem 2.25rem; }
.related-heading {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  color: var(--navy);
  font-size: 1.1rem;
}
.list-note {
  margin: 1.25rem 0 0;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.7;
}
.redirect-note {
  text-align: center;
  margin-top: 3rem;
  color: var(--text-soft);
  font-family: 'Vazirmatn', system-ui, sans-serif;
}
.search-form {
  margin-bottom: 1.25rem;
}
.search-form input {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 1rem;
  background: var(--white);
  color: var(--text);
}
.search-form input:focus {
  outline: none;
  border-color: var(--gold);
}
.search-form input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  box-shadow: var(--focus-ring);
}

/* Filters row on khutbah */
.filters {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem;
}
.filters button, .filters a {
  padding: 0.4rem 0.9rem; border-radius: 999px; font-size: 0.85rem;
  border: 1px solid var(--border); background: var(--white); color: var(--text-soft);
}
.filters .on, .filters button.on, .filters .active, .filters button.active {
  background: var(--navy); color: var(--gold-light); border-color: var(--navy);
}

/* Card action buttons */
.card-actions {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
  margin-top: 0.75rem; padding-top: 0.65rem;
  border-top: 1px solid var(--border);
}
.card-actions button {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.35rem 0.7rem; border-radius: 8px;
  font-size: 0.78rem; font-weight: 600;
  border: 1px solid var(--border); background: var(--white);
  color: var(--text-soft); min-height: 34px;
}
.card-actions button:hover {
  border-color: var(--gold); color: var(--navy);
  background: var(--gold-dim);
}
.card-actions button.playing {
  border-color: var(--gold); background: var(--gold-dim); color: var(--navy);
}

/* Letters list */
.letter-list { display: grid; gap: 0.65rem; }
.letter-item {
  display: block; background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.1rem 1.25rem;
  box-shadow: var(--card-shadow); transition: border-color .15s;
}
.letter-item:hover { border-color: rgba(201,168,76,0.45); }
.letter-item .badge {
  display: inline-block; font-size: 0.75rem; font-weight: 700;
  color: var(--navy); background: var(--gold-dim);
  padding: 0.2rem 0.55rem; border-radius: 6px; margin-bottom: 0.35rem;
}
.letter-item h3 { font-size: 1.02rem; color: var(--navy); margin-bottom: 0.25rem; }
.letter-item p { font-size: 0.88rem; color: var(--muted); }


/* ===== Modern letter reader ===== */
.letter-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
}
.letter-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.letter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--navy);
  color: var(--gold-light);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
}
.letter-tools {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.letter-tools button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.9rem;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-soft);
  min-height: 40px;
}
.letter-tools button:hover {
  border-color: var(--gold);
  color: var(--navy);
  background: var(--gold-dim);
}
.letter-title {
  font-size: clamp(1.25rem, 3vw, 1.65rem);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.45;
  margin-bottom: 0.65rem;
}
.letter-context {
  background: var(--gold-dim);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  font-size: 0.9rem;
  color: var(--text-soft);
  line-height: 1.75;
  margin-bottom: 1.5rem;
}
.letter-block {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.35rem 1.4rem;
  margin-bottom: 1rem;
}
.letter-block .label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: var(--gold-ink);
  margin-bottom: 0.75rem;
}
.letter-block .ar-body {
  font-family: 'Amiri', serif;
  font-size: clamp(1.2rem, 2.5vw, 1.4rem);
  line-height: 2.2;
  color: var(--navy);
  white-space: pre-line;
}
.letter-block .tr-body {
  font-size: 1.02rem;
  line-height: 2;
  color: var(--text-soft);
  white-space: pre-line;
}
.letter-block .tr-body.en {
  direction: ltr;
  text-align: left;
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.85;
}
.letter-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.letter-nav a, .letter-nav span {
  min-width: 100px;
  text-align: center;
  padding: 0.65rem 1rem;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--navy);
  text-decoration: none;
}
.letter-nav a:hover {
  border-color: var(--gold);
  background: var(--gold-dim);
}
.letter-nav .primary {
  background: var(--navy);
  color: var(--gold-light);
  border-color: var(--navy);
}
.letter-nav .primary:hover {
  background: var(--navy-2);
  color: var(--gold);
}
.letter-nav .disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* modernize list page a bit */
.letter-item {
  border-radius: var(--radius);
  padding: 1.15rem 1.3rem;
  transition: border-color .15s;
}
.letter-item:hover {
  border-color: rgba(201,168,76,0.45);
}

/* Sermon list cards — text only, no stock thumbs */
.card-grid {
  display: grid;
  gap: 0.65rem;
}
.content-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.15rem 1.3rem;
  color: inherit;
  transition: border-color 0.15s ease;
}
.content-card:hover {
  border-color: rgba(201,168,76,0.45);
  color: inherit;
}
.content-card .thumb { display: none; }
.content-card .badge,
.content-card .num-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--navy);
  background: var(--gold-dim);
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  margin-bottom: 0.4rem;
}
.content-card h3 {
  font-size: 1.05rem;
  color: var(--navy);
  margin-bottom: 0.25rem;
}
.content-card p {
  font-size: 0.9rem;
  color: var(--muted);
}

.btn-audio {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 34px;
  padding: 0.35rem 0.7rem;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-soft);
}
.btn-audio:hover {
  border-color: var(--gold);
  color: var(--navy);
  background: var(--gold-dim);
}

/* Shared responsive/accessibility refinements. */
body.lang-en { direction:ltr; }
[hidden] { display:none !important; }
[id^="wisdom-"] { scroll-margin-top:90px; }
.hikam-card:target { border-color:var(--gold-ink); box-shadow:0 0 0 2px var(--gold-dim); }
.nav-links a { min-height:44px; }
@media(max-width:800px) {
  .topbar-inner { justify-content:space-between; }
  .nav-links a { display:block; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
}

/* ---------------------------------------------------------------- library
   Multi-book chrome: shelves, book cards, book switcher and chapter cards.
   Shared by the homepage (home.css) and every inner page (site.css). */
.library-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.book-card { display:flex; flex-direction:column; gap:16px; background:#fffefa; border:1px solid #dedfdc; border-radius:12px; padding:26px 26px 18px; position:relative; overflow:hidden; }
.book-card:before { content:''; position:absolute; inset-inline:0; top:0; height:3px; background:var(--book-accent); }
.book-nahj { --book-accent:#c9a84c; --book-accent-ink:#7a6428; }
.book-ghurar { --book-accent:#2f6f62; --book-accent-ink:#2f5f54; }
.book-card-top { display:flex; gap:16px; align-items:flex-start; }
.book-emblem { flex:none; display:grid; place-items:center; width:52px; height:58px; border:1px solid var(--book-accent); border-radius:26px 26px 6px 6px; color:var(--book-accent-ink); font:400 30px/1.5 Amiri,serif; }
.book-ar { font:400 20px/1.7 Amiri,serif; color:#6f5c33; }
.book-card h2, .book-card h3 { font-size:24px; font-weight:500; line-height:1.4; margin:2px 0 4px; }
.book-meta { font-size:11px; color:#71767d; }
.book-summary { font-size:13px; line-height:2; color:#4d535c; }
.book-parts-list { list-style:none; display:grid; gap:2px; border-top:1px solid #eceae4; padding-top:12px; }
.book-parts-list a { display:flex; align-items:center; gap:12px; padding:9px 2px; font-size:13px; border-radius:6px; min-height:44px; }
.book-parts-list a:hover { background:#f7f5ef; color:var(--navy); }
.book-parts-list .part-name { font-weight:500; }
.book-parts-list .part-count { margin-inline-start:auto; font-size:11px; color:#71767d; }
.book-parts-list .icon { width:15px; height:15px; color:#a9adaf; }
.book-card-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid #eceae4; margin-top:auto; padding-top:14px; font-size:11px; color:#71767d; }
.book-card-bottom .text-link { padding:0; }
.library-note { margin-top:26px; font-size:12px; line-height:2; color:#5b6169; border-inline-start:2px solid #d9d6cc; padding-inline-start:16px; }

/* Book switcher + part tabs, shown under the top bar on every book page. */
.book-bar { position:sticky; top:88px; z-index:60; background:#f7f6f2f2; backdrop-filter:blur(12px); border-bottom:1px solid #e3e3dc; }
.book-bar-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:10px; flex-wrap:wrap; }
.book-switch, .book-parts { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.book-chip { display:flex; align-items:center; gap:10px; border:1px solid #dedfdc; border-radius:8px; padding:6px 14px 6px 10px; min-height:44px; background:#fffefa; }
.book-chip:hover { border-color:var(--book-accent); }
.book-chip .chip-emblem { display:grid; place-items:center; width:30px; height:34px; border:1px solid var(--book-accent); border-radius:16px 16px 4px 4px; color:var(--book-accent-ink); font:400 19px/1.4 Amiri,serif; }
.book-chip .chip-text { display:grid; font-size:13px; line-height:1.5; }
.book-chip .chip-text small { font-size:9.5px; color:#7c8189; }
.book-chip.on { border-color:var(--book-accent); background:#fff; box-shadow:inset 0 0 0 1px var(--book-accent); }
.part-tab { border:1px solid transparent; border-radius:999px; padding:7px 15px; min-height:40px; font-size:12.5px; color:#4d535c; }
.part-tab:hover { background:#eeece3; color:var(--navy); }
.part-tab.on { background:var(--navy); color:#e8d5a3; }

/* Shelves on a book home page. */
.shelf-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }
.shelf-card { display:flex; flex-direction:column; gap:10px; background:#fffefa; border:1px solid #dedfdc; border-radius:12px; padding:22px 22px 16px; color:var(--navy); }
.shelf-card:hover { border-color:#bfa672; transform:translateY(-3px); box-shadow:0 14px 30px #0b15260a; }
.shelf-top { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#897446; }
.shelf-top .icon { width:22px; height:22px; }
.part-ar { font:400 18px/1.6 Amiri,serif; color:#7c7148; }
.shelf-card h3 { font-size:19px; font-weight:500; }
.shelf-card p { font-size:12px; line-height:2; color:#5b6169; }
.shelf-bottom { display:flex; align-items:baseline; justify-content:space-between; gap:12px; border-top:1px solid #eceae4; margin-top:auto; padding-top:12px; }
.shelf-bottom span:first-child { font:400 22px/1.3 Amiri,serif; color:var(--navy); }
.shelf-state { font-size:10.5px; color:#71767d; }

/* Small shared bits */
.page-ar { font:400 22px/1.7 Amiri,serif; color:#d5bb7b; margin-top:10px; }
.source-note { display:flex; gap:10px; align-items:flex-start; margin-top:24px; font-size:11.5px; line-height:2; color:#5b6169; border:1px dashed #d7d4cb; border-radius:10px; padding:14px 18px; }
.source-note .icon { width:16px; height:16px; flex:none; margin-top:6px; color:var(--gold); }
.footer-links { display:flex; flex-wrap:wrap; gap:10px 26px; padding-bottom:22px; font-size:12px; }
.footer-links a { display:flex; align-items:center; gap:9px; color:#c5c9d0; min-height:36px; }
.footer-links a:hover { color:var(--gold-light); }
.footer-links .icon { width:16px; height:16px; }
.card-actions .btn-save { margin-inline-start:auto; }
.card-actions .btn-save.saved { border-color:#c9a84c80; background:#c9a84c1a; color:#7a6428; }
.card-actions .btn-save.saved svg { fill:#c9a84c40; }
.redirect-note { font-size:14px; line-height:2; color:#3d4654; padding:80px 24px; text-align:center; }

@media (max-width:900px) {
  .library-grid { grid-template-columns:1fr; }
  .book-card { padding:22px 20px 16px; }
  .book-bar { position:static; }
  .book-bar-inner { padding-block:12px; }
  .book-chip .chip-text small { display:none; }
  .book-parts { overflow-x:auto; max-width:100%; flex-wrap:nowrap; padding-bottom:2px; }
  .part-tab { white-space:nowrap; }
}