/* Al-Risala Research — one design for every page: white paper, a serif for reading, a quiet sans for the interface, one blue. */
:root{--bg:#fff;--ink:#1a1a1a;--ink2:#444;--muted:#6f6f6f;--faint:#9a9a96;--rule:#e6e4df;--wash:#f6f5f1;--accent:#1f4e8c;--accent-ink:#fff;--mark:#fff1c2;--mark-ink:#1a1a1a;
--ok:#1d6b45;--warn:#9a6a00;--bad:#a33a2a;--serif:"Source Serif 4",Georgia,"Times New Roman",serif;--sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
--ur:"Jameel Noori Nastaleeq","Noto Nastaliq Urdu",serif;--ar:Amiri,"Noto Naskh Arabic",serif;--ease:cubic-bezier(.2,.7,.2,1);--wide:1080px}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]):not([data-theme=sepia]){--bg:#111315;--ink:#ecebe8;--ink2:#cbcac6;--muted:#9a9995;--faint:#77766f;--rule:#2b2e31;--wash:#181b1e;--accent:#93b6e8;--accent-ink:#0d1420;--mark:rgba(255,214,102,.2);--mark-ink:#f4f3ef;--ok:#7fd1a6;--warn:#e3b658;--bad:#f08a74}}
:root[data-theme=sepia]{--bg:#f5edda;--ink:#2e241a;--ink2:#4a3c2c;--muted:#64543e;--faint:#86745c;--rule:#e0d2b4;--wash:#ede2c8;--accent:#2b5486;--accent-ink:#fff;--mark:#f2d27e;--mark-ink:#2e241a;--ok:#2d6a3e;--warn:#7f5300;--bad:#9b3524}
:root[data-theme=dark]{--bg:#111315;--ink:#ecebe8;--ink2:#cbcac6;--muted:#9a9995;--faint:#77766f;--rule:#2b2e31;--wash:#181b1e;--accent:#93b6e8;--accent-ink:#0d1420;--mark:rgba(255,214,102,.2);--mark-ink:#f4f3ef;--ok:#7fd1a6;--warn:#e3b658;--bad:#f08a74}
*{box-sizing:border-box}html{overflow-x:hidden}body{overflow-x:clip}html,body{margin:0;max-width:100%}
body{background:var(--bg);color:var(--ink);font:17px/1.65 var(--serif);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:3px}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.ur{font-family:var(--ur);direction:rtl}
/* header */
.sh{border-bottom:1px solid var(--rule);background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);position:sticky;top:0;z-index:30}
.sh-in{max-width:var(--wide);margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.sh-wm{display:flex;align-items:center;gap:12px;color:var(--ink);flex:none}.sh-wm:hover{text-decoration:none}
.sh-logo{display:block;width:44px;height:30px;color:var(--ink)}.sh-logo svg{width:100%;height:100%;display:block;fill:currentColor;stroke:none}
.sh-wm b{font:600 1.08rem/1 var(--serif);letter-spacing:.005em}.sh-wm small{font:500 .62rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-left:12px;border-left:1px solid var(--rule)}
.sh-nav{display:flex;gap:28px;font:500 .84rem var(--sans);align-items:center}.sh-nav a{color:var(--ink2)}.sh-nav a:hover{color:var(--ink);text-decoration:none}
.sh-nav a.on{color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink);padding-bottom:3px}
.sh-acc{display:flex;gap:16px;align-items:center;font:500 .82rem var(--sans);flex:none}
.sh-acc .btn-s{border:1px solid var(--rule);color:var(--ink);padding:8px 14px;border-radius:999px}.sh-acc .btn-s:hover{border-color:var(--ink);text-decoration:none}
.sh-acc .who{color:var(--muted)}.sh-menu{display:none;font:500 .84rem var(--sans);color:var(--ink);border:1px solid var(--rule);border-radius:999px;padding:7px 14px}
@media (max-width:900px){.sh-nav,.sh-acc{display:none}.sh-menu{display:block}.sh-wm small{display:none}.sh-in{padding:0 18px}}
.mm{position:fixed;inset:0;background:var(--bg);z-index:40;display:none;flex-direction:column;padding:14px 24px 30px;overflow:auto}.mm.on{display:flex}
.mm .x{align-self:flex-end;font:500 .84rem var(--sans);color:var(--muted);padding:12px 0}
.mm a{font:400 1.75rem/1.2 var(--serif);color:var(--ink);padding:14px 0;border-bottom:1px solid var(--rule)}.mm a:hover{text-decoration:none}
.mm .sub{font:600 .7rem var(--sans);color:var(--muted);margin-top:28px;letter-spacing:.14em;text-transform:uppercase}
/* page */
.page{max-width:var(--wide);margin:0 auto;padding:0 24px 96px}@media (max-width:640px){.page{padding:0 18px 72px}}.narrow{max-width:720px}
.kick{font:600 .68rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:56px 0 12px}@media (max-width:640px){.kick{margin-top:36px}}
h1.t{font:400 2.6rem/1.12 var(--serif);letter-spacing:-.015em;margin:0 0 10px}@media (max-width:640px){h1.t{font-size:2.05rem}}
.lede{font-size:1.14rem;color:var(--ink2);max-width:36em;margin:8px 0 0}
h2.s{font:600 .68rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:72px 0 20px;padding-top:16px;border-top:1px solid var(--rule)}@media (max-width:640px){h2.s{margin-top:52px}}
.prose p{margin:0 0 1em}.muted{color:var(--muted)}.small{font:.82rem/1.5 var(--sans);color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:3px;font:500 .9rem var(--sans);background:var(--ink);color:var(--bg);border:1px solid var(--ink)}
.btn:hover{text-decoration:none;opacity:.9}.btn.o{background:none;color:var(--ink)}.btn.o:hover{background:var(--ink);color:var(--bg)}
.field{display:block;width:100%;font:1rem var(--sans);padding:12px 14px;border:1px solid var(--rule);border-radius:3px;background:var(--bg);color:var(--ink);outline:none}.field:focus{border-color:var(--ink2)}
label.l{display:block;font:500 .8rem var(--sans);color:var(--muted);margin:16px 0 6px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--rule)}
@media (max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}@media (max-width:560px){.cards{grid-template-columns:1fr}}
.card{padding:24px 28px 28px 0;border-bottom:1px solid var(--rule)}@media (max-width:560px){.card{padding:20px 0 22px}}.card h3{font:600 1.15rem var(--serif);margin:0 0 6px}.card h3 a{color:var(--ink)}
.card p{margin:0;color:var(--ink2);font-size:.96rem}.card .k{font:.78rem var(--sans);color:var(--muted);margin-top:10px}
.stats{display:flex;flex-wrap:wrap;gap:12px 34px;margin:22px 0 0;font:.84rem var(--sans);color:var(--muted)}.stats b{display:block;font:400 1.7rem/1.1 var(--serif);color:var(--ink)}
table.tb{width:100%;border-collapse:collapse;font-size:.98rem}table.tb th{font:600 .68rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:left;padding:10px 0;border-bottom:1px solid var(--ink)}
table.tb td{padding:11px 8px 11px 0;border-bottom:1px solid var(--rule);vertical-align:baseline}table.tb td.n{text-align:right;font:.84rem var(--sans);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
table.tb tr.go{cursor:pointer}table.tb tr.go:hover td{background:var(--wash)}
.note{background:var(--wash);border-radius:4px;padding:14px 16px;font:.9rem/1.6 var(--sans);color:var(--ink2)}
.pill{display:inline-block;font:600 .72rem var(--sans);padding:2px 9px;border-radius:999px;background:var(--wash);color:var(--ink2)}
/* footer */
.sf{border-top:1px solid var(--rule);margin-top:60px}.sf-in{max-width:var(--wide);margin:0 auto;padding:26px 20px 40px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font:.78rem/1.7 var(--sans);color:var(--muted)}
.sf a{color:var(--muted)}.sf button{color:var(--muted);font:.78rem var(--sans)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* lists that never break: a name and its number on one line */
.ix{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px}@media (max-width:900px){.ix{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}}
@media (max-width:420px){.ix{grid-template-columns:minmax(0,1fr)}}
.ix a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule);color:var(--ink);font-size:1rem;min-width:0}
.ix a:hover{text-decoration:none;color:var(--accent)}.ix a span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;unicode-bidi:isolate}
.ix a span:last-child{font:.76rem var(--sans);color:var(--muted);font-variant-numeric:tabular-nums;flex:none}
.more-l{display:flex;gap:22px;flex-wrap:wrap;margin-top:18px;font:500 .84rem var(--sans)}
.logo{color:var(--ink)}.logo svg{display:block;width:100%;height:auto;fill:currentColor;stroke:none}

@media (max-width:560px){.cards .card:last-child{border-bottom:0}}
.card.go{display:block;color:inherit;text-decoration:none;cursor:pointer;transition:background .15s}.card.go:hover{text-decoration:none}
.card.go h3{display:flex;justify-content:space-between;align-items:baseline;gap:12px;color:var(--ink)}.card.go .ar{font:400 1rem var(--sans);color:var(--muted);transition:transform .2s var(--ease),color .2s}
.card.go:hover .ar,.card.go:focus-visible .ar{transform:translateX(4px);color:var(--accent)}.card.go:hover h3{color:var(--accent)}
@media (hover:none){.card.go:active{background:var(--wash)}}
.sh-tm{display:none;font:600 .7rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:999px;padding:5px 10px;margin-left:auto;margin-right:8px}@media (max-width:900px){.sh-tm{display:inline-block}}

/* Verse hub entrance (team preview): a banner on Home / Team / Workspace and a pill in the header */
.vh-ban{display:flex;gap:14px;align-items:center;border:1.5px solid var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--bg));border-radius:18px;padding:16px 18px;margin:18px 0;color:var(--ink)!important;text-decoration:none!important;box-shadow:0 8px 24px -16px color-mix(in srgb,var(--accent) 60%,transparent)}
.vh-ban:hover{border-color:var(--ink)}
.vh-ban .k{flex:none;font:700 .64rem var(--sans);letter-spacing:.14em;text-transform:uppercase;background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:4px 10px}
.vh-ban .t{flex:1;min-width:0}.vh-ban b{display:block;font:600 1.15rem/1.3 var(--serif)}.vh-ban small{display:block;font:.84rem/1.5 var(--sans);color:var(--muted);margin-top:3px}
.vh-ban .go{flex:none;font:600 .9rem var(--sans);color:var(--accent);white-space:nowrap}
@media (max-width:560px){.vh-ban{flex-wrap:wrap}.vh-ban .go{width:100%}}
.sh-new{display:inline-flex;align-items:center;gap:6px;font:600 .84rem var(--sans);color:var(--accent-ink)!important;background:var(--accent);border-radius:999px;padding:6px 14px;text-decoration:none!important}
.sh-new i{font:700 .56rem var(--sans);font-style:normal;letter-spacing:.1em;text-transform:uppercase;background:var(--accent-ink);color:var(--accent);border-radius:999px;padding:1px 6px}
.sh-new.m{display:none;padding:5px 11px;font-size:.74rem;margin-left:auto;margin-right:8px}
@media (max-width:900px){.sh-new.m{display:inline-flex}.sh-new.m+.sh-tm{display:none!important}}      /* on a phone the pill replaces the Team/Research pill (both are in the menu) */
.mm .mm-new{font-size:1.3rem;color:var(--accent);font-weight:600}

/* team chat: header link, unread badge, banner variant */
.sh-chat{display:inline-flex;align-items:center;gap:6px}.cn{font:700 .62rem var(--sans);font-style:normal;background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:1px 7px;min-width:18px;text-align:center}.cn[hidden]{display:none}
.vh-ban.chat{margin-top:-6px;padding:12px 16px;border-width:1px;box-shadow:none}.vh-ban.chat b{font-size:1.02rem}
.sh-menu{position:relative}.sh-menu.dot::after{content:"";position:absolute;top:-2px;right:-2px;width:10px;height:10px;border-radius:50%;background:var(--accent);border:2px solid var(--bg)}
.mm .cn{margin-left:8px;vertical-align:middle}

/* header: Studio and the Hudaybiyyah study are the main items; Verse hub and Team chat are low profile (owner, 8 Oct 2026) */
.sh-ctl{display:flex;gap:8px;align-items:center;flex:none;margin-left:auto}
.sh-th{width:40px;height:40px;border:1px solid var(--rule);border-radius:999px;display:grid;place-items:center;font-size:1.1rem;color:var(--ink);line-height:1}
.sh-lg{display:inline-flex;border:1px solid var(--rule);border-radius:999px;overflow:hidden;font:600 .78rem var(--sans)}.sh-lg button{padding:0 11px;min-height:38px;color:var(--ink2)}.sh-lg button.on{background:var(--ink);color:var(--bg)}
.sh-acc .sh-pri{font:600 .84rem var(--sans);color:var(--accent-ink)!important;background:var(--accent);border-radius:999px;padding:7px 14px;text-decoration:none}
.sh-more{position:relative}.sh-more summary{cursor:pointer;list-style:none;color:var(--muted);font:500 .8rem var(--sans);display:inline-flex;gap:6px;align-items:center;min-height:36px}.sh-more summary::-webkit-details-marker{display:none}
.sh-more>div{position:absolute;right:0;top:38px;background:var(--bg);border:1px solid var(--rule);border-radius:12px;padding:6px;display:flex;flex-direction:column;min-width:210px;box-shadow:0 12px 30px -12px rgba(0,0,0,.35);z-index:60}
.sh-more>div a{padding:10px 12px;color:var(--ink2);font:500 .86rem var(--sans)}.sh-more>div .who{padding:8px 12px;color:var(--faint);font:.76rem var(--sans);border-top:1px solid var(--rule);margin-top:4px}
.mm .mm-low{font-size:1rem;color:var(--muted);padding:10px 0;border-bottom:0}
.vh-low{font:.84rem var(--sans);color:var(--muted);margin:2px 2px 14px}.vh-low a{color:var(--ink2)}
@media (max-width:900px){.sh-ctl{margin-left:auto}.sh-in{gap:10px}.sh-wm b{font-size:1rem}}
@media (max-width:420px){.sh-wm b{display:none}.sh-lg button{padding:0 9px}}

@media (max-width:1320px){.sh-wm small{display:none}.sh-nav{gap:16px}.sh-in{gap:14px;padding:0 16px}.sh-acc{gap:10px}}

/* header buttons: outlines strong enough to see (3:1) in light and dark (owner, 11 Oct 2026: "fix the header contrast") */
.sh-th,.sh-lg,.sh-menu,.sh-acc .btn-s{border-color:color-mix(in srgb,var(--ink) 55%,var(--bg))}
/* Edited articles: the team's main work, first and green (owner, 12 Oct 2026) */
.sh-acc .sh-pri.sh-ea{background:#0b6b4f!important;color:#fff!important}
.mm .mm-ea{color:#0b6b4f!important;font-weight:700}
.vh-ban.vh-ea{border-color:#0b6b4f!important;box-shadow:inset 4px 0 0 #0b6b4f}
:root[data-theme=dark] .mm .mm-ea{color:#7fd39a!important}

/* ===== 15 Oct 2026, owner's choice: look A (paper & green, like the Hudaybiyyah page) with a dark top band ===== */
/* Look A "Paper & green" (preview, 15 Oct 2026): the Hudaybiyyah page's warm paper, deep green, rounded tinted cards */
:root:not([data-theme=dark]){--bg:#f6f2ea;--surf:#fffdf8;--wash:#efe9dd;--ink:#1f1b16;--ink2:#4a4239;--muted:#776e61;--faint:#a59c8e;--rule:#e4dccd;
 --accent:#1f6b5a;--accent-ink:#fff;--gold:#b27a1c;--mark:#f5df9b;--mark-ink:#1f1b16;--sh:0 1px 2px rgba(60,45,20,.05),0 14px 30px -18px rgba(60,45,20,.28)}
body{background:var(--bg)}
.sh{background:color-mix(in srgb,var(--bg) 92%,transparent)!important;border-bottom-color:var(--rule)!important}
h1.t,.page h1{font-family:var(--serif);font-weight:500;letter-spacing:-.012em}
.kick{color:var(--accent)!important;letter-spacing:.14em}
/* cards: anything that is a panel of content */
.hero,.ask,.saying,.shcard,.res>li,.sp,.fbox,.cont,.hs ol,.rail .iss,.facts{background:var(--surf);border:1px solid var(--rule);border-radius:22px;box-shadow:var(--sh)}
.hero,.shcard,.cont{background:linear-gradient(155deg,color-mix(in srgb,var(--accent) 12%,var(--surf)) 0%,var(--surf) 62%)!important;border-color:color-mix(in srgb,var(--accent) 16%,var(--rule))!important}
.res{display:flex;flex-direction:column;gap:14px}.res>li{padding:18px 18px 14px!important;border-top:1px solid var(--rule)!important}
.sp{background:var(--surf)!important}
/* buttons */
button.pri,.sp-main button.pri,.fbox button,.ask button[type=submit],.srcs button.on,.uroffer button{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important;box-shadow:0 8px 18px -10px color-mix(in srgb,var(--accent) 80%,transparent)}
.srcs button,.tb-b,.sp-main button,.sha button,.pbar a,.chip,.tries a{background:var(--surf);border-color:var(--rule)!important;border-radius:999px}
.srcs button b{color:inherit}
.sp-more summary,a{color:var(--accent)}
mark,.s.on,.sn mark{background:var(--mark)!important;color:var(--mark-ink)!important}
.hardnote{border-left-color:var(--gold)!important}

/* the dark band at the top (from look B, in the green's own darkness) */
:root{--band:#17302a;--band-ink:#f3ecdd}
.sh{background:var(--band)!important;border-bottom:0!important}
.sh,.sh a,.sh .sh-wm,.sh .sh-logo,.sh button{color:var(--band-ink)!important}
.sh .sh-menu,.sh button,.sh .seg,.sh [aria-pressed]{border-color:rgba(243,236,221,.35)!important;background:transparent!important}
.sh [aria-pressed=true],.sh .on{background:var(--band-ink)!important;color:var(--band)!important}
.rbar{background:var(--surf)!important;border-bottom:1px solid var(--rule)}
.ask button{background:var(--accent)!important;color:#fff!important}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]):not([data-theme=sepia]){--bg:#111513;--surf:#18201c;--wash:#1d2621;--ink:#ece8df;--ink2:#cfc9bd;--muted:#9c978d;--faint:#77736b;--rule:#2b3530;--accent:#5fbf9f;--accent-ink:#0d1714;--mark:rgba(245,214,120,.28);--mark-ink:#f4f0e6;--band:#0c1916}}
:root[data-theme=dark]{--bg:#111513;--surf:#18201c;--wash:#1d2621;--ink:#ece8df;--ink2:#cfc9bd;--muted:#9c978d;--faint:#77736b;--rule:#2b3530;--accent:#5fbf9f;--accent-ink:#0d1714;--mark:rgba(245,214,120,.28);--mark-ink:#f4f0e6;--band:#0c1916}

/* ===== 15 Oct 2026, desktop bar (owner: "the desktop version is too unprofessional") ===== */
.sh-nav{gap:26px!important;flex-wrap:nowrap}.sh-nav a,.sh-nav summary{white-space:nowrap;font:500 .88rem var(--sans)!important;color:color-mix(in srgb,var(--band-ink) 82%,transparent)!important;background:none!important;padding:6px 0!important}
.sh .sh-nav a.on,.sh .sh-nav summary.on{background:none!important;color:var(--band-ink)!important;box-shadow:inset 0 -2px 0 #f5d678!important;border-radius:0!important}
.sh-nav a:hover,.sh-nav summary:hover{color:var(--band-ink)!important}
.sh-navmore summary,.sh-team summary{min-height:auto!important;gap:6px}.sh-navmore summary:after,.sh-team summary:after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.75}
.sh-navmore>div{left:-12px;right:auto;top:34px}.sh-navmore>div a,.sh-team>div a{color:var(--ink)!important;white-space:nowrap}.sh-navmore>div a:hover,.sh-team>div a:hover{background:var(--wash);border-radius:8px;text-decoration:none}
.sh-team summary{font:600 .86rem var(--sans)!important;padding:8px 16px!important;border-radius:999px;background:var(--accent)!important;color:#fff!important}
.sh-team>div{top:44px}
@media (max-width:1240px){.sh-wm small{display:none}.sh-nav{gap:20px!important}}

@media (min-width:900px){.page>#vh-slot:not(:empty),.page>.hero:first-child,main.page>section:first-child{margin-top:28px}
 #vh-slot:not(:empty){display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0 8px}
 #vh-slot .vh-ban{margin:0;flex-direction:column;align-items:flex-start;gap:6px;padding:16px 18px;border-width:1px;box-shadow:none}
 #vh-slot .vh-ban .k{display:none}#vh-slot .vh-ban small{font-size:.8rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 #vh-slot .vh-ban .go{width:auto;margin-top:auto;font-size:.85rem}#vh-slot .vh-low{grid-column:1/-1;margin:0}}
@media (min-width:900px){#vh-slot:empty+.hero{margin-top:32px}}

.nw{font-style:normal;font-size:.62rem;font-weight:600;letter-spacing:.04em;background:#0b6b4f;color:#fff;border-radius:999px;padding:.1rem .45rem;vertical-align:middle;margin-left:4px}