/* Ummah Atlas (ummah.howtomuslim.org). Loaded AFTER the shared site-chrome.css.
   Rules: --u-* variables only. Never redefine --gold or any chrome variable: the shared header and footer use them.
   Mood: ink, parchment, map lines, a quiet geometric pattern. Light scheme only, like the rest of How To Muslim. */

:root{
  --u-ink:#233D4D;          /* Charcoal Blue */
  --u-ink-deep:#182C38;
  --u-text:#1E2B33;
  --u-muted:#53616B;        /* Blue Slate, darkened for 4.5:1 on parchment */
  --u-paper:#FFFFF4;        /* Off White */
  --u-parchment:#F8F2DE;
  --u-parchment-2:#F1E8CC;
  --u-gold:#FFB900;
  --u-gold-soft:#EDD892;    /* Light Gold */
  --u-gold-ink:#7A5800;     /* gold that passes contrast as text */
  --u-olive:#A5AD7F;        /* Olive Tree */
  --u-olive-ink:#4D5231;
  --u-tea:#C9D2C0;          /* Green Tea */
  --u-line:rgba(35,61,77,.16);
  --u-line-soft:rgba(35,61,77,.08);
  --u-head:"Montserrat Alternates",system-ui,sans-serif;
  --u-body:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
  --u-ar:Amiri,"Noto Naskh Arabic","Geeza Pro",serif;
  --u-measure:42rem;
  --u-radius:14px;
  /* faint contour lines and a graticule, drawn once and reused */
  --u-map:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='360' viewBox='0 0 640 360'%3E%3Cg fill='none' stroke='%23233D4D' stroke-opacity='.07' stroke-width='1'%3E%3Cpath d='M0 60h640M0 180h640M0 300h640M110 0v360M330 0v360M550 0v360' stroke-dasharray='2 6'/%3E%3Cpath d='M-20 250c80-40 120 10 190-20s90-90 170-80 120 70 200 40 90-50 120-40'/%3E%3Cpath d='M-20 270c80-34 126 18 196-12s92-86 168-74 118 70 202 38 92-44 114-34'/%3E%3Cpath d='M-20 292c84-26 130 24 200-4s96-80 166-68 116 68 204 34 94-38 110-30'/%3E%3Cpath d='M380 40c40-20 90 0 100 30s-30 60-80 56-70-66-20-86z'/%3E%3Cpath d='M392 52c30-14 70 0 76 22s-24 44-60 42-52-50-16-64z'/%3E%3Cpath d='M404 64c20-8 46 2 50 16s-16 28-38 26-34-32-12-42z'/%3E%3C/g%3E%3C/svg%3E");
  /* an eight-point star lattice, very quiet */
  --u-geo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23233D4D' stroke-opacity='.10' stroke-width='1'%3E%3Cpath d='M28 10l5.3 12.7L46 28l-12.7 5.3L28 46l-5.3-12.7L10 28l12.7-5.3z'/%3E%3Crect x='15.3' y='15.3' width='25.4' height='25.4'/%3E%3Cpath d='M0 0l10 10M56 0L46 10M0 56l10-10M56 56L46 46'/%3E%3C/g%3E%3C/svg%3E");
}

/* the guide's pages reset the body margin in their own CSS; site-chrome.css does not */
html,body{margin:0;padding:0}
body{background:var(--u-paper)}

/* ---------- base inside <main> only: the chrome keeps its own styles ---------- */
.u-main{background:var(--u-paper);color:var(--u-text);font-family:var(--u-body);font-size:1.0625rem;line-height:1.72;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.u-main *,.u-main *::before,.u-main *::after{box-sizing:border-box}
.u-main a{color:var(--u-ink);text-decoration-color:var(--u-gold);text-decoration-thickness:2px;text-underline-offset:3px}
.u-main a:hover{text-decoration-color:var(--u-ink)}
.u-main a:focus-visible,.u-main button:focus-visible{outline:3px solid var(--u-gold);outline-offset:3px;border-radius:4px}
.u-wrap{max-width:1160px;margin:0 auto;padding:0 22px}

/* skip link: hidden until it gets keyboard focus */
.u-skip{position:absolute;left:12px;top:-60px;z-index:1000;background:var(--u-ink);color:var(--u-paper);padding:10px 16px;border-radius:8px;
  font:600 .95rem var(--u-body);text-decoration:none;transition:top .15s}
.u-skip:focus{top:12px;outline:3px solid var(--u-gold)}

/* the salawat glyph: Manrope has no U+FDFA, so it is always set in Amiri */
.sw{font-family:var(--u-ar);font-size:1.15em;line-height:0;white-space:nowrap;margin:0 .02em;font-weight:400}
.u-h1 .sw,.u-prose h2 .sw,.u-prose h3 .sw{font-size:.92em;margin:0}

/* ---------- page head: parchment, map lines ---------- */
.u-head{position:relative;background:var(--u-map) right -60px bottom -40px / 760px auto no-repeat,
  radial-gradient(900px 420px at 85% 0%,rgba(237,216,146,.55),rgba(237,216,146,0) 70%),
  linear-gradient(180deg,var(--u-parchment),var(--u-paper));
  border-bottom:1px solid var(--u-line);padding:22px 0 40px;overflow:hidden}
.u-crumbs{font-size:.84rem;color:var(--u-muted);display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 26px}
.u-crumbs a{color:var(--u-muted);text-decoration:none}
.u-crumbs a:hover{color:var(--u-ink);text-decoration:underline}
.u-crumbs [aria-current]{color:var(--u-text);font-weight:600}
.u-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--u-ink);margin:0 0 22px}
.u-brand .u-mark{width:38px;height:38px;color:var(--u-ink);flex:none}
.u-brand b{font-family:var(--u-head);font-weight:800;font-size:1.22rem;letter-spacing:-.01em;line-height:1}
.u-brand small{display:block;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--u-muted);margin-top:4px}
.u-main a.u-brand{text-decoration:none}
.u-eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--u-head);font-weight:700;font-size:.8rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--u-gold-ink);margin:0 0 12px}
.u-eyebrow::before{content:"";width:28px;height:2px;background:var(--u-gold);border-radius:2px}
.u-h1{font-family:var(--u-head);font-weight:800;color:var(--u-ink);font-size:clamp(2.05rem,4.6vw,3.25rem);line-height:1.08;
  letter-spacing:-.015em;margin:0 0 16px;max-width:20ch;text-wrap:balance}
.u-meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.88rem;color:var(--u-muted);margin:0}
.u-meta span+span::before{content:"\00B7";margin-right:16px;color:var(--u-olive)}

/* ---------- article layout ---------- */
.u-layout{display:grid;grid-template-columns:minmax(0,var(--u-measure));justify-content:center;gap:56px;padding:42px 0 30px}
@media (min-width:1100px){.u-layout{grid-template-columns:minmax(0,var(--u-measure)) 230px;justify-content:space-between}}
.u-toc{display:none}
@media (min-width:1100px){
  .u-toc{display:block;position:sticky;top:96px;align-self:start;font-size:.88rem;border-left:2px solid var(--u-line);padding:4px 0 4px 18px}
  .u-toc b{display:block;font-family:var(--u-head);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--u-muted);margin-bottom:10px}
  .u-toc ol{list-style:none;margin:0;padding:0}
  .u-toc li{margin:0 0 8px;line-height:1.35}
  .u-toc a{color:var(--u-muted);text-decoration:none}
  .u-toc a:hover,.u-toc a[aria-current="true"]{color:var(--u-ink);font-weight:600}
}

/* ---------- prose ---------- */
.u-prose>*{margin-top:0}
.u-prose p{margin:0 0 1.05em}
.u-prose h2{font-family:var(--u-head);font-weight:700;color:var(--u-ink);font-size:clamp(1.45rem,2.6vw,1.8rem);line-height:1.2;
  letter-spacing:-.01em;margin:2.1em 0 .6em;scroll-margin-top:90px;padding-left:24px;position:relative;text-wrap:balance}
.u-prose h2::before{content:"";position:absolute;left:2px;top:.42em;width:10px;height:10px;transform:rotate(45deg);background:var(--u-gold);
  box-shadow:0 0 0 3px var(--u-paper),0 0 0 4px var(--u-gold-soft)}
.u-prose h3{font-family:var(--u-head);font-weight:700;color:var(--u-ink);font-size:1.16rem;line-height:1.3;margin:1.6em 0 .45em;scroll-margin-top:90px}
.u-prose ul,.u-prose ol{margin:0 0 1.1em;padding-left:1.3em}
.u-prose li{margin:0 0 .45em}
.u-prose li::marker{color:var(--u-olive-ink)}
.u-prose strong{color:var(--u-ink);font-weight:700}
.u-prose blockquote{margin:0}
.u-prose hr{border:0;height:22px;background:var(--u-geo) center/22px repeat-x;margin:2.4em 0;opacity:.9}

/* the short answer under the H1 */
.u-answer{position:relative;background:var(--u-paper);border:1px solid var(--u-line);border-left:4px solid var(--u-gold);
  border-radius:var(--u-radius);padding:18px 22px;font-size:1.1rem;line-height:1.62;color:var(--u-text);margin:0 0 1.8em !important;
  box-shadow:0 1px 0 var(--u-line-soft),0 10px 30px -18px rgba(35,61,77,.35)}

/* ---------- Qur'an and hadith blocks ---------- */
.u-text{margin:1.5em 0 1.7em;padding:22px 24px 16px;border-radius:var(--u-radius);position:relative;
  background:linear-gradient(180deg,rgba(248,242,222,.9),rgba(248,242,222,.55));border:1px solid var(--u-line)}
.u-text::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--u-geo) right -10px top -10px/56px;opacity:.6;pointer-events:none;
  -webkit-mask:linear-gradient(225deg,#000,transparent 40%);mask:linear-gradient(225deg,#000,transparent 40%)}
.u-text.u-hadith{background:var(--u-paper);border-left:4px solid var(--u-ink)}
.u-ar{font-family:var(--u-ar);direction:rtl;unicode-bidi:isolate;text-align:right;display:block;font-size:1.6rem;line-height:2.05;
  color:var(--u-ink);margin:0 0 10px;font-weight:400}
.u-en{margin:0;font-size:1.06rem;line-height:1.66;color:var(--u-text)}
.u-en::before{content:"\201C"}.u-en::after{content:"\201D"}
.u-text figcaption{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-top:12px;padding-top:10px;border-top:1px dashed var(--u-line);
  font-size:.84rem;color:var(--u-muted);line-height:1.45}
.u-text figcaption a{color:var(--u-ink);font-weight:600}
.u-grade{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:999px;
  background:var(--u-tea);color:var(--u-olive-ink)}
.u-grade--hasan{background:var(--u-gold-soft);color:#5C4A00}
.u-grade--daif{background:#F3D6CC;color:#7A2E17}
.u-tr{font-style:italic}
/* Arabic inside an English line or an LTR column: isolate it so punctuation does not jump */
.u-ar-in{font-family:var(--u-ar);unicode-bidi:isolate;font-size:1.2em;line-height:1}
.u-ar-col{font-family:var(--u-ar);direction:rtl;unicode-bidi:isolate;text-align:left}

/* ---------- asides ---------- */
.u-note{margin:1.6em 0;padding:16px 20px;border-radius:var(--u-radius);background:rgba(201,210,192,.38);border:1px solid rgba(77,82,49,.18)}
.u-note h3{margin:0 0 6px !important;font-size:1rem !important;color:var(--u-olive-ink) !important}
.u-note p:last-child{margin-bottom:0}

/* the one action at the end */
.u-action{margin:2.4em 0 1.2em;padding:24px 24px 18px;border-radius:calc(var(--u-radius) + 4px);color:var(--u-paper);
  background:var(--u-geo) right -8px top -8px/56px,linear-gradient(140deg,var(--u-ink),var(--u-ink-deep))}
.u-action h2{color:var(--u-gold) !important;margin-top:0 !important}
.u-action h2::before{background:var(--u-gold) !important;box-shadow:0 0 0 3px var(--u-ink),0 0 0 4px rgba(237,216,146,.6) !important}
.u-action p{color:#F2EEDC}
.u-action a{color:var(--u-paper);text-decoration-color:var(--u-gold)}
.u-action strong{color:var(--u-paper)}
.u-next{font-weight:600;margin:1.4em 0 0;padding-top:14px;border-top:1px solid var(--u-line)}
.u-next a{font-weight:700}

/* sources and the auto-built list of texts */
.u-sources,.u-refs{font-size:.9rem;color:var(--u-muted);line-height:1.55}
.u-sources li,.u-refs li{margin-bottom:.5em;overflow-wrap:anywhere}
.u-refs{columns:2 16rem;column-gap:28px;padding-left:1.2em}
.u-updated{font-size:.86rem;color:var(--u-muted)}

/* ---------- the initiative band, last thing before the shared footer ---------- */
.u-initiative{background:var(--u-geo) center/56px,var(--u-parchment);border-top:1px solid var(--u-line);padding:34px 0;text-align:center}
.u-initiative .u-brand{margin:0 auto 6px;justify-content:center}
.u-initiative p{margin:0;font-size:.9rem;color:var(--u-muted)}

/* ---------- 404 ---------- */
.u-404{padding:30px 0 60px}
.u-404 ul{columns:2 15rem}

@media (max-width:640px){
  .u-main{font-size:1.02rem}
  .u-meta{flex-direction:column;gap:2px}
  .u-meta span+span::before{display:none}
  .u-text{padding:18px 16px 12px}
  .u-ar{font-size:1.38rem;line-height:2}
  .u-head{padding:16px 0 30px;background-size:560px auto,auto,auto}
  .u-answer{padding:16px 16px}
  .u-action{padding:20px 18px 14px}
}
@media print{
  .htm-header,.htm-footer,.u-toc,.u-initiative{display:none !important}
  .u-head{background:none}
  .u-action{background:none;color:#000;border:2px solid #000}
}