@font-face {
  font-family: "IRANSans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/divan/assets/fonts/IRANSansX-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IRANSans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/divan/assets/fonts/IRANSansX-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Amiri";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/kotob/assets/fonts/amiri-400.woff2") format("woff2");
}
@font-face {
  font-family: "Amiri";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/kotob/assets/fonts/amiri-700.woff2") format("woff2");
}

:root {
  --ink: #1c1916;
  --muted: #5c564e;
  --paper: #f7f3ea;
  --card: #fffdf8;
  --line: #d8d0c0;
  --accent: #6b4f2a;
  --font: "IRANSans", sans-serif;
  --font-ar: "Amiri", "IRANSans", serif;
}
* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.85;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 880px; margin: 0 auto; padding: 0 18px; }
.bar {
  border-bottom: 1px solid var(--line);
  background: #fffaf1;
  position: sticky; top: 0;
}
.bar .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 52px; }
.brand { font-weight: 700; color: var(--ink); }
.bar nav { display: flex; gap: 16px; }
h1 { font-size: 1.6rem; margin: 1.2rem 0 0.4rem; font-weight: 700; }
.lead, .crumb, .note { color: var(--muted); }
.crumb { margin-top: 1rem; font-size: 0.92rem; }
.search { display: flex; gap: 8px; margin: 1.2rem 0; align-items: end; }
.search label { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.search input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  font-family: var(--font); font-size: 1rem;
}
.search button, .pager a {
  border: 0; background: var(--accent); color: #fff; padding: 10px 16px; border-radius: 10px;
  cursor: pointer; font-family: var(--font);
}
.pager { display: flex; gap: 10px; flex-wrap: wrap; }
.pager a { text-decoration: none; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 1.4rem 0 2rem; }
.card, .row {
  display: block; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px;
}
.card strong, .row strong { display: block; }
.card em, .row em, .list em { display: block; color: var(--muted); font-style: normal; font-size: 0.92rem; }
.surahs, .list { list-style: none; padding: 0; margin: 0 0 2rem; }
.surahs a, .list a { display: block; padding: 8px 0; border-bottom: 1px solid var(--line); }
.surahs span { display: inline-block; width: 2.2rem; color: var(--muted); }
.ayah { padding: 16px 0; border-bottom: 1px solid var(--line); }
.ayah .num { float: left; color: var(--muted); font-family: var(--font); }
.ar, .prose.ar, article.ayah .ar {
  font-family: var(--font-ar);
  font-size: 1.5rem;
  line-height: 2.25;
  letter-spacing: 0;
  word-spacing: 0.06em;
}
.ayah.solo { border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: var(--card); }
.fa { color: #2b2925; font-family: var(--font); font-size: 1.02rem; line-height: 1.9; }
.prose p { margin: 0 0 1rem; }
.hits { margin: 1rem 0 1.6rem; display: grid; gap: 8px; }
main.wrap { padding-bottom: 2.4rem; }
@media (max-width: 640px) {
  body { font-size: 16px; }
  .ar, .prose.ar, article.ayah .ar { font-size: 1.32rem; line-height: 2.2; }
}