:root {
  --brown: #3B2314; --gold: #C9A227; --ink: #1A1A1A;
  --paper: #FCFBF8; --muted: #6B6257; --line: #E6E0D5;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 17px; line-height: 1.65;
}
body[dir="rtl"] {
  font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif;
  font-size: 19px; line-height: 2.5;
}
.wrap { max-width: 760px; margin: 0 auto; padding: 0 1.4rem; }

/* header */
header { border-bottom: 1px solid var(--line); background: #fff; }
.bar { display: flex; align-items: center; gap: 1.2rem; padding: 1.1rem 0; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--brown); }
.brand img { height: 42px; width: auto; }
.brand b { font-size: 1.05rem; letter-spacing: .01em; }
nav { display: flex; gap: 1.1rem; margin-inline-start: auto; flex-wrap: wrap; }
nav a { color: var(--muted); text-decoration: none; font-size: .95rem; }
nav a:hover, nav a[aria-current] { color: var(--brown); }
.lang {
  border: 1px solid var(--line); border-radius: 999px;
  padding: .18rem .8rem; font-size: .85rem; color: var(--brown);
  text-decoration: none; white-space: nowrap;
}
.lang:hover { border-color: var(--gold); }

/* hero */
.hero { padding: 3.4rem 0 2.2rem; text-align: center; }
.hero img { width: 108px; height: auto; margin-bottom: 1.2rem; }
.hero h1 { margin: 0 0 .5rem; color: var(--brown); font-size: 2.4rem; font-weight: 700; }
.hero p { margin: 0 auto; max-width: 34em; color: var(--muted); }
.rule { height: 1px; background: var(--gold); opacity: .55; margin: 2.2rem 0; }

/* text */
main { padding-bottom: 4rem; }
h2 { color: var(--brown); font-size: 1.5rem; margin: 2.6rem 0 .8rem; }
h3 { color: var(--brown); font-size: 1.15rem; margin: 2rem 0 .5rem; }
p { margin: 0 0 1rem; }
ul { margin: 0 0 1.2rem; padding-inline-start: 1.3rem; }
li { margin-bottom: .5rem; }
strong { color: var(--brown); }
q { quotes: "\00AB" "\00BB"; }

blockquote.mission {
  margin: 2rem 0; padding: 1.4rem 1.6rem; background: #fff;
  border: 1px solid var(--line); border-inline-start: 3px solid var(--gold);
  border-radius: 10px;
}
blockquote.mission p { margin: 0; font-size: 1.05em; }
blockquote.mission cite {
  display: block; margin-top: .9rem; font-style: normal;
  color: var(--muted); font-size: .86rem;
}
ul.steps { list-style: none; padding: 0; }
ul.steps li {
  padding-inline-start: 1rem; border-inline-start: 2px solid var(--line);
  margin-bottom: 1rem;
}
ul.steps b { color: var(--brown); display: block; }

/* cards */
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); }
.card {
  display: block; border: 1px solid var(--line); border-radius: 12px;
  padding: 1.2rem 1.3rem; background: #fff; text-decoration: none; color: inherit;
  transition: border-color .15s, transform .15s;
}
.card:hover { border-color: var(--gold); transform: translateY(-2px); }
.card .n { color: var(--gold); font-size: .82rem; letter-spacing: .12em; }
.card h3 { margin: .25rem 0 .45rem; font-size: 1.18rem; }
.card .who { color: var(--muted); font-size: .9rem; margin: 0; }

/* layer table */
table { width: 100%; border-collapse: collapse; margin: 0 0 1.6rem; font-size: .97rem; }
th, td { text-align: start; padding: .6rem .7rem; border-bottom: 1px solid var(--line); }
th { background: #F5F1E8; color: var(--brown); font-weight: 600; }

[dir="ltr"] { text-align: left; }
body[dir="rtl"] [dir="ltr"] {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: .92em; line-height: 1.65;
}
ol { margin: 0 0 1.2rem; padding-inline-start: 1.5rem; }
body[dir="rtl"] ol[dir="ltr"], body[dir="rtl"] ul[dir="ltr"] {
  padding-inline-start: 0; padding-left: 1.5rem;
}

.scroll { overflow-x: auto; margin: 0 0 1.6rem; }
.scroll table { margin: 0; min-width: 100%; }
.scroll td:first-child, .scroll th:first-child { white-space: nowrap; }

/* halqa page */
.meta { display: flex; gap: 1.6rem; flex-wrap: wrap; color: var(--muted);
        font-size: .95rem; margin: 0 0 1.6rem; }
.meta b { color: var(--brown); font-weight: 600; }
.lead { font-size: 1.08rem; border-inline-start: 3px solid var(--gold);
         padding-inline-start: 1rem; margin: 0 0 2rem; }
.back { display: inline-block; margin-top: 2.6rem; color: var(--muted);
         text-decoration: none; font-size: .93rem; }
.back:hover { color: var(--brown); }

footer { border-top: 1px solid var(--line); padding: 1.6rem 0; text-align: center;
          color: var(--muted); font-size: .88rem; }

@media (max-width: 560px) {
  .hero { padding: 2.2rem 0 1.4rem; }
  .hero h1 { font-size: 1.85rem; }
  body[dir="rtl"] { line-height: 2.3; }
}