/* AsrNaam redesign. Emerald, gold and cream. Loaded last so it wins
   over the baked-in template styles on every generated page. */

@font-face {
  font-family: 'Noto Nastaliq Urdu';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('/fonts/noto-nastaliq-urdu-400.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC, U+200C-200D;
}
/* The ﷺ ligature (U+FDFA) is a long calligraphic phrase in Amiri and blows
   the line box. This face is consulted first and drawn at half size. */
@font-face {
  font-family: 'Asr Saw';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/noto-naskh-arabic-400.woff2') format('woff2');
  unicode-range: U+FDFA, U+FDFB;
  size-adjust: 46%;
  ascent-override: 90%;
  descent-override: 20%;
  line-gap-override: 0%;
}

:root {
  --emerald: #0E4D45;
  --emerald-2: #0A3A34;
  --emerald-3: #13675C;
  --mint: #E3F0EA;
  --gold: #80601C; /* was #C29A4B: 2.3:1 on cream, below the 4.5:1 text minimum (13 Nov audit) */
  --gold-soft: #E7CF97;
  --gold-ink: #7A5412;
  --cream: #FBF6EC;
  --cream-2: #F4ECDC;
  --card: #FFFDF8;
  --line: #E9DFC9;
  --ink: #1D2A27;
  --muted: #4E5C58;
  --girl: #8A3058;
  --girl-bg: #F8E9EF;
  --boy: #1F6B5C;
  --boy-bg: #E2F1EC;
  --water: #2F6F9F;
  --fire: #B4532A;
  --earth: #7A5B2E;
  --air: #3E6574;
  --rd-shadow: 0 1px 2px rgba(20,40,35,.06), 0 8px 24px -8px rgba(20,40,35,.14);
  --rd-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23E7CF97' stroke-width='1'%3E%3Crect x='18' y='18' width='36' height='36'/%3E%3Crect x='18' y='18' width='36' height='36' transform='rotate(45 36 36)'/%3E%3Ccircle cx='36' cy='36' r='7'/%3E%3Cpath d='M0 0L10 10M72 0L62 10M0 72L10 62M72 72L62 62'/%3E%3C/g%3E%3C/svg%3E");
}

html { -webkit-text-size-adjust: 100%; }
html body {
  background: var(--cream) !important;
  color: var(--ink) !important;
  font-family: 'Asr Saw', 'Inter', system-ui, sans-serif;
}
html body :focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: 2px;
}
html body .saw, html body .pbuh {
  font-family: 'Asr Saw', 'Noto Naskh Arabic', serif;
  font-size: 1em;
  line-height: 1;
  font-weight: 400;
  display: inline;
  vertical-align: baseline;
}
.rd-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ---- header ---- */
html body .asr-site-header,
html body nav.asr-nav {
  background: rgba(251,246,236,.94) !important;
  border-bottom: 1px solid var(--line) !important;
  backdrop-filter: blur(10px);
  max-width: 100%;
  box-sizing: border-box;
}
html body .asr-site-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 22px !important;
  gap: 18px;
  min-height: 0 !important;
  flex-wrap: wrap;
}
html body .asr-site-header .nav-brand span[lang="ar"],
html body nav.asr-nav .nav-brand {
  font-family: 'Amiri', 'Noto Naskh Arabic', serif !important;
  color: var(--emerald) !important;
  font-size: 1.7rem !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
}
html body .asr-site-header .nav-brand-sub { display: none !important; }
html body .asr-site-header .nav-links {
  display: flex !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 8px 16px !important;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}
html body .asr-site-header .nav-links a {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 14.5px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--muted) !important;
  font-weight: 500;
}
html body .asr-site-header .nav-links a:hover,
html body .asr-site-header .nav-links a:focus-visible { color: var(--emerald) !important; }
html body .asr-site-header .nav-hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: transparent; border: 0; cursor: pointer; padding: 10px;
  min-width: 44px; min-height: 44px; align-items: center; justify-content: center;
}
html body .asr-site-header .nav-hamburger span {
  display: block; width: 22px; height: 2px; background: var(--emerald); border-radius: 2px;
}
html body .asr-site-header .nav-cta {
  background: var(--emerald) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-size: 14px !important;
}
html body .rd-nav-heart {
  width: 42px; height: 42px; border-radius: 50%;
  display: inline-grid; place-items: center;
  border: 1px solid var(--line); background: var(--card); color: var(--emerald);
  position: relative; flex: none; text-decoration: none;
}
html body .rd-nav-heart svg { width: 19px; height: 19px; }
html body .rd-nav-heart .rd-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--girl); color: #fff; font-size: 11px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 10px;
  display: grid; place-items: center; padding: 0 4px; border: 2px solid var(--cream);
}
html body .rd-badge[hidden] { display: none !important; }
html body .asr-site-header .nav-links { align-items: center; }

/* ---- shared bits ---- */
.rd-wrap { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
.rd-kicker {
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-ink);
}
.rd-h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600; font-size: clamp(30px, 4vw, 40px); line-height: 1.1; margin: 0;
}
.rd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 20px; border-radius: 999px;
  font-weight: 600; font-size: 15px; border: 0; cursor: pointer;
  text-decoration: none; font-family: inherit;
}
.rd-btn svg { width: 18px; height: 18px; }
.rd-btn-primary { background: var(--emerald); color: #fff; }
.rd-btn-gold { background: var(--gold-soft); color: #1D2A27; }
.rd-btn-ghost { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.rd-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
}
.rd-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rd-tag.girl, .rd-tag.f { background: var(--girl-bg); color: var(--girl); }
.rd-tag.boy, .rd-tag.m { background: var(--boy-bg); color: var(--boy); }

/* ---- homepage hero ---- */
.rd-hero {
  background: radial-gradient(1200px 500px at 50% -10%, #16695E 0%, var(--emerald) 45%, var(--emerald-2) 100%);
  color: #fff; position: relative; overflow: hidden;
}
.rd-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--rd-pattern); background-size: 72px; opacity: .22;
  -webkit-mask-image: radial-gradient(80% 90% at 50% 40%, #000 30%, transparent 85%);
  mask-image: radial-gradient(80% 90% at 50% 40%, #000 30%, transparent 85%);
}
.rd-hero .rd-wrap { position: relative; padding-top: 56px; padding-bottom: 78px; text-align: center; }
.rd-hero .rd-hk {
  display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center;
  font-size: 13px; color: var(--gold-soft);
  border: 1px solid rgba(231,207,151,.35); padding: 7px 16px; border-radius: 999px;
}
.rd-hero h1 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 500 !important; font-size: clamp(40px, 6vw, 64px) !important;
  line-height: 1.02 !important; letter-spacing: -.015em; color: #fff !important;
  margin: 18px auto 12px; max-width: 820px; text-wrap: balance;
}
.rd-hero h1 em { color: var(--gold-soft); font-style: italic; }
.rd-hero .rd-hk,
html body .rd-hero .rd-hk { color: #F3E6C4 !important; }
html body .rd-hero .rd-hk b { color: #fff !important; }
html body .rd-hero h1 em { color: #E7CF97 !important; }
.rd-hero .rd-sub,
html body .rd-hero .rd-sub { color: #E7F4EF !important; font-size: 18px; max-width: 640px; margin: 0 auto 28px; }
html body .rd-hero .rd-stats,
html body .rd-hero .rd-stats span { color: #D5EBE3 !important; }
html body .rd-hero .rd-stats b { color: #fff !important; }
html body .rd-hero .rd-gb a,
html body .rd-hero .rd-gb small { color: #fff !important; }
.rd-search { max-width: 680px; margin: 0 auto; position: relative; text-align: left; }
.rd-search-box {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border-radius: 22px; padding: 8px 8px 8px 18px;
  color: var(--ink); box-shadow: 0 20px 50px -12px rgba(0,0,0,.4);
}
.rd-search.is-open .rd-search-box { border-radius: 22px 22px 0 0; }
.rd-search-box svg { width: 22px; height: 22px; color: #4E5C58 !important; flex: none; }
.rd-search-box,
.rd-search-box input {
  background: #fff !important;
  color: #1D2A27 !important;
  color-scheme: light;
}
.rd-search-box input {
  flex: 1; border: 0; font: inherit;
  font-size: 18px; min-width: 0; outline: none; height: 46px;
}
.rd-search-box input::placeholder { color: #8a948f; }
.rd-ac {
  background: var(--card); color: var(--ink); border-radius: 0 0 22px 22px;
  box-shadow: 0 30px 50px -16px rgba(0,0,0,.4); padding: 8px;
  position: absolute; left: 0; right: 0; z-index: 5;
}
.rd-ac[hidden] { display: none; }
.rd-ac a, .rd-ac button.rd-opt {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  width: 100%; text-align: left; padding: 10px 12px; border-radius: 14px;
  background: transparent; border: 0; color: inherit; font: inherit; cursor: pointer;
}
.rd-ac a[aria-selected="true"], .rd-ac button.rd-opt[aria-selected="true"] { background: var(--mint); }
.rd-ac b { font-weight: 650; }
.rd-ac mark { background: rgba(194,154,75,.28); color: var(--emerald); border-radius: 3px; padding: 0 1px; }
.rd-ac small { display: block; color: var(--muted); font-weight: 400; }
.rd-ac .ar { font-family: 'Noto Naskh Arabic', 'Amiri', serif; font-size: 20px; color: var(--emerald); }
.rd-ac .rd-ac-foot {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 8px 12px 4px; font-size: 12.5px; color: var(--muted);
  border-top: 1px solid var(--line); margin-top: 4px;
}
.rd-gb { display: flex; justify-content: center; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.rd-gb a {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 22px 12px 14px; border-radius: 999px; font-weight: 600; font-size: 16px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff;
  text-decoration: none;
}
.rd-gb .ic {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font-family: 'Noto Naskh Arabic', serif; font-size: 18px;
}
.rd-gb .g .ic { background: var(--girl-bg); color: var(--girl); }
.rd-gb .b .ic { background: var(--boy-bg); color: var(--boy); }
.rd-gb small { font-weight: 500; color: #B9D4CB; }
.rd-stats { display: flex; justify-content: center; gap: 22px; margin-top: 26px; flex-wrap: wrap; font-size: 13.5px; color: #B9D4CB; }
.rd-stats b { color: #fff; font-weight: 600; }

/* filters */
.rd-filters { margin-top: -36px; position: relative; z-index: 2; }
.rd-filters .rd-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--rd-shadow); padding: 18px 22px; }
.rd-frow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rd-frow + .rd-frow { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.rd-flabel { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); width: 118px; flex: none; }
.rd-chip, .rd-lchip, .rd-num {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.rd-chip { height: 36px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 500; }
.rd-lchip { width: 34px; height: 34px; border-radius: 10px; font-size: 13.5px; }
.rd-num { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--emerald); color: var(--emerald) !important; font-size: 15px; font-weight: 700; background: var(--card); }
.rd-chip[aria-pressed="true"], .rd-lchip[aria-pressed="true"] { background: var(--emerald); color: #fff; border-color: var(--emerald); }
.rd-num[aria-pressed="true"] { background: var(--gold); color: #fff; }
.rd-letters { display: flex; gap: 6px; flex-wrap: wrap; }
.rd-results { margin-top: 16px; }
.rd-results[hidden] { display: none; }
.rd-results-meta { color: var(--muted); font-size: 14px; margin: 0 0 10px; }
.rd-results-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.rd-ncard {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  text-decoration: none; color: inherit; min-width: 0;
}
.rd-ncard:hover { border-color: var(--gold); }
.rd-ncard .ar { font-family: 'Noto Naskh Arabic', 'Amiri', serif; font-size: 28px; line-height: 1.4; color: var(--emerald); text-align: right; }
.rd-ncard .nm { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; font-weight: 600; line-height: 1; }
.rd-ncard .mn { font-size: 13.5px; color: var(--muted); line-height: 1.35; }

/* name of the day + popular */
.rd-duo { display: grid; grid-template-columns: 1.05fr .95fr; gap: 22px; padding: 48px 0 10px; }
.rd-notd {
  position: relative; overflow: hidden; border-radius: 26px;
  background: linear-gradient(160deg, #FFFDF8 0%, #F6EBD3 100%);
  border: 1px solid var(--line); box-shadow: var(--rd-shadow); padding: 26px 28px;
}
.rd-notd .rd-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.rd-notd .date { font-size: 13px; color: var(--muted); }
.rd-notd h2 {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600;
  font-size: clamp(36px, 4vw, 48px); line-height: 1.05; margin: 8px 0;
}
.rd-notd h2 a { color: inherit; text-decoration: none; }
.rd-notd .rd-ar {
  font-family: 'Noto Naskh Arabic', 'Amiri', serif; font-size: clamp(48px, 6vw, 72px);
  line-height: 1.35; color: var(--emerald); display: block;
}
.rd-notd .mean { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; font-style: italic; margin: 8px 0 16px; }
.rd-popular {
  background: var(--card); border: 1px solid var(--line); border-radius: 26px;
  box-shadow: var(--rd-shadow); padding: 22px 22px 8px;
}
.rd-popular h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 30px; font-weight: 600; margin: 0; }
.rd-popular .note { color: var(--muted); font-size: 13px; margin: 4px 0 8px; }
.rd-pop {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center;
  padding: 8px 4px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none;
}
.rd-pop:last-child { border-bottom: 0; }
.rd-pop .ar { font-family: 'Noto Naskh Arabic', 'Amiri', serif; font-size: 24px; color: var(--emerald); text-align: center; }
.rd-pop b { display: block; font-size: 15.5px; }
.rd-pop small { color: var(--muted); }

/* collections */
.rd-section { padding: 28px 0; }
.rd-ramadan {
  border-radius: 28px; position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(115deg, #0A2F3A 0%, #103F4A 45%, #1A4E4A 100%);
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: center;
  padding: 36px 40px;
}
.rd-ramadan::before {
  content: ""; position: absolute; inset: 0; background-image: var(--rd-pattern);
  background-size: 60px; opacity: .12;
}
.rd-ramadan > * { position: relative; }
.rd-ramadan h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: clamp(32px, 4vw, 42px); line-height: 1.05; margin: 8px 0 10px; text-wrap: balance; }
.rd-ramadan p { color: #C6DAD6; max-width: 460px; }
.rd-rnames { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rd-rn {
  background: rgba(255,255,255,.07); border: 1px solid rgba(231,207,151,.25);
  border-radius: 16px; padding: 12px 14px; display: flex; justify-content: space-between;
  align-items: center; gap: 8px; color: #fff; text-decoration: none;
}
.rd-rn b { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; font-weight: 600; display: block; }
.rd-rn small { color: #BFD4CF; }
.rd-rn .ar { font-family: 'Noto Naskh Arabic', 'Amiri', serif; font-size: 26px; color: var(--gold-soft); }
.rd-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.rd-list { border-radius: 24px; padding: 26px; text-decoration: none; color: inherit; display: block; min-height: 220px; }
.rd-list.q { background: var(--emerald); color: #fff; position: relative; overflow: hidden; }
.rd-list.q::before { content: ""; position: absolute; inset: 0; background-image: var(--rd-pattern); background-size: 60px; opacity: .15; }
.rd-list.m { background: var(--cream-2); border: 1px solid var(--line); }
.rd-list > * { position: relative; }
.rd-list h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 34px; font-weight: 600; margin: 6px 0; line-height: 1.05; }
.rd-list p { opacity: .85; max-width: 420px; }
.rd-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.rd-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: 14px; }
.rd-list.q .rd-pill { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); }
.rd-list.m .rd-pill { background: #fff; border: 1px solid var(--line); }
.rd-pill .ar { font-family: 'Noto Naskh Arabic', 'Amiri', serif; }
.rd-list .go { font-weight: 650; }
.rd-list.q .go { color: var(--gold-soft); }
.rd-list.m .go { color: var(--emerald); }
.rd-ilm {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px 28px; background: var(--card); border: 1px solid var(--line);
  border-radius: 20px; box-shadow: var(--rd-shadow);
}
.rd-ilm h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 30px; font-weight: 600; margin: 4px 0; }
.rd-ilm p { color: var(--muted); max-width: 460px; margin: 0; }
.rd-lts { display: flex; gap: 8px; direction: rtl; }
.rd-lt {
  width: 58px; height: 68px; border-radius: 14px; background: var(--cream);
  border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.rd-lt .ar { font-family: 'Noto Naskh Arabic', 'Amiri', serif; font-size: 26px; color: var(--emerald); line-height: 1.2; }
.rd-lt small { font-size: 10.5px; color: var(--muted); direction: ltr; }

/* editorial sections below the redesign keep the cream page */
html body .how, html body .voices, html body .explore, html body .faq-wrap, html body main { background: transparent; }

/* ---- name pages ---- */
html body .asr-name-hero,
html body article > .hero,
html body main > .hero {
  max-width: 1160px;
  margin: 16px auto 8px !important;
  border-radius: 28px;
  background: radial-gradient(900px 420px at 80% 0%, #16695E, var(--emerald) 50%, var(--emerald-2)) !important;
  color: #fff !important;
  position: relative;
  overflow: hidden;
  text-align: start !important;
  padding: 36px 40px 32px !important;
  box-sizing: border-box;
}
html body .asr-name-hero::before,
html body article > .hero::before,
html body main > .hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--rd-pattern); background-size: 72px; opacity: .16;
  pointer-events: none;
}
html body .asr-name-hero > *,
html body .hero > * { position: relative; }
html body .asr-name-hero {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  column-gap: 24px;
  align-items: center;
}
html body nav.asr-breadcrumb,
html body .breadcrumb {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  flex-wrap: wrap;
  gap: 0.2rem 0.35rem !important;
  width: min(1160px, calc(100% - 48px));
  max-width: 1160px;
  margin: 12px auto 0 !important;
  padding: 0 !important;
  text-align: start;
}
html body nav.asr-breadcrumb > *,
html body .breadcrumb > * {
  flex: 0 0 auto !important;
  width: auto !important;
}
html body .asr-name-hero .asr-name-hero-kicker {
  color: var(--gold-soft) !important;
  letter-spacing: .12em !important;
  grid-column: 1;
  text-align: start !important;
  margin: 0 0 8px !important;
}
html body .asr-name-hero .asr-name-hero-arabic,
html body .hero .arabic-name {
  font-family: 'Noto Naskh Arabic', 'Amiri', serif !important;
  color: #fff !important;
  font-size: clamp(72px, 10vw, 132px) !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  text-shadow: 0 10px 30px rgba(0,0,0,.2);
}
html body .asr-name-hero .asr-name-hero-arabic { grid-column: 2; grid-row: 1 / span 6; text-align: center; }
html body .asr-name-hero .asr-name-hero-roman,
html body .hero h1 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 500 !important;
  font-size: clamp(34px, 3.4vw, 52px) !important;
  color: #fff !important;
  line-height: 1.05 !important;
  margin: 4px 0 8px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: start !important;
  max-width: 16ch;
}
html body .asr-name-hero .asr-name-hero-sub,
html body .hero .hero-subtitle {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important;
  font-size: clamp(22px, 2.2vw, 30px) !important;
  color: var(--gold-soft) !important;
  max-width: 28ch !important;
  margin: 0 !important;
  text-align: start !important;
}
html body .asr-name-hero .asr-name-hero-langs {
  justify-content: flex-start !important;
  margin: 14px 0 0 !important;
  text-align: start !important;
}
html body .asr-name-hero .asr-name-hero-langs,
html body .asr-name-hero .asr-name-hero-langs a { color: #DCEAE5 !important; }
html body .asr-name-hero > .asr-name-hero-kicker,
html body .asr-name-hero > h1,
html body .asr-name-hero > .asr-name-hero-sub,
html body .asr-name-hero > .asr-name-hero-langs,
html body .asr-name-hero > .rd-play,
html body .asr-name-hero > .asr-action-bar {
  justify-self: start;
  width: auto;
  max-width: 100%;
}
html body .asr-name-hero .asr-action-bar,
html body .hero .asr-action-bar {
  justify-content: flex-start !important;
  margin: 16px 0 0 !important;
  max-width: none !important;
}
html body .asr-name-hero .asr-fav,
html body .hero .asr-fav,
html body .asr-name-hero .rd-btn.asr-fav {
  background: #fff !important;
  color: #8A3058 !important;
  border: 0 !important;
  border-radius: 999px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 15px !important;
  padding: 0 18px !important;
  height: 46px;
}
html body .asr-name-hero .asr-share,
html body .hero .asr-share,
html body .asr-name-hero .rd-share {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  border-radius: 999px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 15px !important;
  padding: 0 18px !important;
  height: 46px;
}
html body .asr-name-hero .asr-fav svg,
html body .hero .asr-fav svg { color: #8A3058 !important; }
html body .asr-name-hero .asr-share svg,
html body .hero .asr-share svg { color: #fff !important; }
html body .hero .name-badge { color: #D7E7E2 !important; }

html body .asr-answer {
  max-width: 1160px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 8px 28px 0 !important;
}
html body .asr-answer-script { display: none; }
html body .asr-answer-rows {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
html body .asr-answer-rows .r {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  background: var(--card);
  border: 1px solid var(--line) !important;
  border-radius: 16px;
  padding: 12px 14px !important;
  min-width: 0;
  height: auto;
  min-height: 0;
}
html body .asr-answer-rows .r:has([data-asr-field="meaning-dict"]),
html body .asr-answer-rows .r:has([data-asr-field="urdu-meaning"]) { grid-column: span 1; }
html body .rd-hide,
html body .asr-answer-rows .r.rd-hide,
html body .quick-facts .qf-row.rd-hide { display: none !important; }
html body .asr-answer-rows dt {
  flex: none !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  letter-spacing: .08em !important;
  color: var(--gold-ink) !important;
}
html body .asr-answer-rows dd {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem !important;
  color: var(--ink) !important;
  min-width: 0;
  overflow-wrap: anywhere;
}
html body .asr-answer-rows dd[dir="rtl"] {
  font-family: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', serif !important;
  font-size: 1.25rem !important;
  line-height: 2.15 !important;
  padding-top: .2em;
  overflow: visible;
}
html body .asr-answer-islamic {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
  margin-top: 12px;
}
html body .rd-lucky {
  grid-column: auto;
  background: linear-gradient(160deg, #FFFDF8, #F6EBD3);
  border: 1px solid var(--line);
  border-radius: 16px;
  text-align: center;
  padding: 16px 12px;
}
html body .rd-lucky .n {
  width: 92px; height: 92px; margin: 8px auto;
  border-radius: 50%; display: grid; place-items: center;
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 56px; font-weight: 600;
  color: var(--gold-ink); background: #fff;
  box-shadow: 0 0 0 2px var(--gold), 0 0 0 8px #fff, 0 0 0 9px var(--gold-soft);
}
html body .rd-lucky .work { font-size: 13px; color: var(--muted); line-height: 1.45; }
html body .rd-lucky .work b { color: var(--ink); }
html body .rd-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 6px 0; }
html body .rd-chips span {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 2px 6px; font-weight: 600; color: var(--ink);
}
html body .rd-chips i { font-style: normal; font-family: 'Noto Naskh Arabic', serif; color: var(--emerald); margin-inline-end: 3px; }

html body .rd-play {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 16px; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2); color: #fff;
  border-radius: 999px; padding: 6px 16px 6px 6px; cursor: pointer; font: inherit;
}
html body .rd-play .play {
  width: 42px; height: 42px; border-radius: 50%; background: var(--gold-soft); color: #1D2A27;
  display: grid; place-items: center; flex: none;
}
html body .rd-play[hidden] { display: none; }
html body .rd-play small { display: block; color: #D5E6E1; font-size: 12.5px; }

html body .rd-raised {
  max-width: 1160px;
  margin: 18px auto;
  padding: 0 28px;
  box-sizing: border-box;
}
html body .rd-raised .asr-v2,
html body .rd-raised.asr-v2-letters,
html body .rd-raised.related-section,
html body .rd-raised.asr-v2-bearers {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 22px 22px 18px;
  margin: 0;
}
html body .asr-v2-letter-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px !important;
  direction: rtl;
}
html body .asr-v2-letter {
  direction: ltr;
  border-radius: 16px !important;
  border: 1px solid var(--line) !important;
  border-top: 4px solid var(--gold) !important;
  background: var(--card) !important;
  position: relative;
  text-align: center;
}
html[dir="rtl"] body .asr-v2-letter { direction: rtl; }
html body .asr-v2-letter[data-element="water"] { border-top-color: var(--water) !important; }
html body .asr-v2-letter[data-element="fire"] { border-top-color: var(--fire) !important; }
html body .asr-v2-letter[data-element="earth"] { border-top-color: var(--earth) !important; }
html body .asr-v2-letter[data-element="air"] { border-top-color: var(--air) !important; }
html body .asr-v2-letter-arabic {
  font-family: 'Noto Naskh Arabic', 'Amiri', serif !important;
  font-size: 2.6rem !important;
  color: var(--emerald) !important;
}
html body .asr-v2-letter-pill.pill-water { color: var(--water) !important; }
html body .asr-v2-letter-pill.pill-fire { color: var(--fire) !important; }
html body .asr-v2-letter-pill.pill-earth { color: var(--earth) !important; }
html body .asr-v2-letter-pill.pill-air { color: var(--air) !important; }
html body .related-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
html body .related-card {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  min-width: 0 !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  padding: 14px !important;
}
html body [lang="ur"], html body .ur {
  font-family: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', 'Amiri', serif;
}

/* quick facts on language templates */
html body .quick-facts {
  max-width: 1160px;
  margin-left: auto; margin-right: auto;
  background: transparent !important;
  border: 0 !important;
  padding: 8px 28px !important;
}
html body .quick-facts .qf-row {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
}
html body .content, html body .asr-layout-v2 { max-width: 1100px; }
html body .asr-layout-v2 { padding-left: 8px; padding-right: 8px; box-sizing: border-box; }

/* ads stay inside the column and cannot widen the page */
html body .asr-ad, html body .asr-ad ins.adsbygoogle {
  max-width: min(760px, 100%) !important;
  box-sizing: border-box;
  overflow: hidden;
}
html body ins.adsbygoogle { max-width: 100%; }

/* sticky mobile bar */
.rd-mbar {
  display: none;
}
html body > footer, html body footer.site-footer {
  background: var(--emerald-2);
  color: #d5e6e0;
}
html body > footer a, html body footer a { color: #fff; }

/* favourites */
.rd-fav-top { padding: 36px 0 18px; display: flex; justify-content: space-between; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.rd-fav-top h1 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(40px, 6vw, 56px); font-weight: 600; line-height: 1; margin: 6px 0 0; }
.rd-fav-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.rd-wa { background: #1F8F55; color: #fff; }
.rd-fav-list { display: flex; flex-direction: column; gap: 12px; padding-bottom: 48px; }
.rd-fav {
  display: grid; grid-template-columns: 110px 1fr auto; gap: 16px; align-items: center;
  padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 18px;
}
.rd-fav .sc { text-align: center; background: var(--cream); border-radius: 14px; padding: 6px; }
.rd-fav .sc .ar { font-family: 'Noto Naskh Arabic', serif; font-size: 28px; color: var(--emerald); display: block; line-height: 1.4; }
.rd-fav .sc .ur { font-family: 'Noto Nastaliq Urdu', serif; color: var(--gold-ink); display: block; line-height: 1.8; }
.rd-fav h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 28px; margin: 0; font-weight: 600; }
.rd-fav h2 a { color: inherit; text-decoration: none; }
.rd-fav p { margin: 4px 0 0; color: var(--muted); }
.rd-empty { padding: 28px; background: var(--card); border: 1px dashed var(--line); border-radius: 18px; }

@media (max-width: 900px) {
  html body .asr-site-header { position: sticky; }
  html body .asr-site-header .nav-hamburger { display: inline-flex !important; }
  html body .asr-site-header .nav-links {
    display: none !important;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: rgba(251,246,236,.98);
    border-bottom: 1px solid var(--line);
    padding: 6px 0 10px;
    z-index: 30;
  }
  html body .asr-site-header .nav-links.open { display: flex !important; }
  html body .asr-site-header .nav-links a { padding: 12px 18px !important; }
  .rd-wrap { padding: 0 16px; }
  .rd-hero .rd-wrap { padding-top: 32px; padding-bottom: 64px; }
  .rd-hero h1 { font-size: 40px !important; }
  .rd-search-box .rd-btn { width: 46px; padding: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='white' stroke-width='2'%3E%3Ccircle cx='9' cy='9' r='6'/%3E%3Cpath d='M14 14l4 4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; }
  .rd-search-box .rd-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .rd-gb small { display: none; }
  .rd-frow { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .rd-flabel { width: auto; }
  .rd-letters { flex-wrap: nowrap; }
  .rd-results-grid, .rd-duo, .rd-ramadan, .rd-lists { grid-template-columns: 1fr; }
  .rd-ramadan { padding: 26px 18px; }
  .rd-ilm { flex-direction: column; align-items: flex-start; }
  html body .asr-name-hero { grid-template-columns: 1fr; padding: 24px 18px !important; margin-left: 12px !important; margin-right: 12px !important; }
  html body .asr-name-hero .asr-name-hero-arabic { grid-column: 1; grid-row: auto; font-size: 92px !important; order: -1; }
  html body .asr-name-hero .asr-name-hero-roman { max-width: none; }
  html body .asr-v2-letter-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; }
  html body .rd-raised { padding: 0 12px; }
  html body nav.asr-breadcrumb, html body .breadcrumb { width: calc(100% - 24px); }
  html body .hero .arabic-name { font-size: 84px !important; }
  html body .asr-answer { padding-left: 16px !important; padding-right: 16px !important; }
  html body .asr-answer-rows { grid-template-columns: 1fr !important; }
  html body article > .hero, html body main > .hero { margin-left: 12px !important; margin-right: 12px !important; padding: 24px 18px !important; }
  .rd-mbar {
    display: flex; position: fixed; left: 12px; right: 12px; bottom: 10px; z-index: 40;
    margin: 0; gap: 8px; align-items: center;
    background: rgba(255,253,248,.96); border: 1px solid var(--line);
    border-radius: 999px; padding: 6px; box-shadow: var(--rd-shadow);
  }
  html body.rd-hasbar { padding-bottom: 84px !important; }
  .rd-mbar .in {
    flex: 1; display: flex; align-items: center; gap: 8px; padding: 0 8px;
    color: var(--muted); text-decoration: none; min-width: 0;
  }
  .rd-mbar .in input {
    border: 0; background: transparent; font: inherit; width: 100%; color: var(--ink); min-width: 0;
  }
  .rd-mbar button, .rd-mbar a.h, .rd-mbar a.s {
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none;
    border: 0; text-decoration: none;
  }
  .rd-mbar .h { background: var(--girl-bg); color: var(--girl); }
  .rd-mbar .s { background: var(--emerald); color: #fff; }
  .rd-fav { grid-template-columns: 84px 1fr; }
  html body .asr-site-header .nav-links a { font-size: 15px !important; }
}

/* Dark theme. The media query paints before JavaScript when the system is
   dark. html[data-theme=dark] covers a saved dark choice while the system is
   light. A saved light choice sets data-theme=light, which opts out of the
   media query, and the theme script turns that query off. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) { color-scheme: dark; }
}
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --cream: #0C1C19;
    --cream-2: #132824;
    --card: #17312C;
    --line: #2E514A;
    --ink: #E7F3EF;
    --muted: #C5D8D2;
    --gold: #E0C27A;
    --gold-soft: #E7CF97;
    --gold-ink: #E7CF97;
    --girl: #F0B4C8;
    --girl-bg: #3A2430;
    --boy: #9FD9C8;
    --boy-bg: #16362F;
    --rd-shadow: 0 8px 28px -10px rgba(0,0,0,.55);
  }
}
html[data-theme="dark"] {
  --cream: #0C1C19;
  --cream-2: #132824;
  --card: #17312C;
  --line: #2E514A;
  --ink: #E7F3EF;
  --muted: #C5D8D2;
  --gold: #E0C27A;
  --gold-soft: #E7CF97;
  --gold-ink: #E7CF97;
  --girl: #F0B4C8;
  --girl-bg: #3A2430;
  --boy: #9FD9C8;
  --boy-bg: #16362F;
  --rd-shadow: 0 8px 28px -10px rgba(0,0,0,.55);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body .asr-site-header,
  html:not([data-theme="light"]) body nav.asr-nav,
  html:not([data-theme="light"]) body .asr-site-header .nav-links {
    background: rgba(12,28,25,.94) !important;
    border-color: #2E514A !important;
    color: #E7F3EF !important;
  }
  html:not([data-theme="light"]) body .asr-site-header .nav-links a { color: #C5D8D2 !important; }
  html:not([data-theme="light"]) body .asr-site-header .nav-links a:hover { color: #E7CF97 !important; }
  html:not([data-theme="light"]) body nav.asr-nav .nav-brand,
  html:not([data-theme="light"]) body nav.asr-nav .nav-links a { color: #E7CF97 !important; }
  html:not([data-theme="light"]) body .asr-breadcrumb,
  html:not([data-theme="light"]) body .asr-breadcrumb a,
  html:not([data-theme="light"]) body .breadcrumb,
  html:not([data-theme="light"]) body .breadcrumb a { color: #C5D8D2 !important; }
  html:not([data-theme="light"]) body .asr-breadcrumb .current { color: #E7F3EF !important; }
  html:not([data-theme="light"]) body .rd-notd,
  html:not([data-theme="light"]) body .rd-lucky {
    background: linear-gradient(160deg, #17312C, #1E3A30) !important;
    color: #E7F3EF !important;
  }
  html:not([data-theme="light"]) body .rd-lucky .n {
    background: #0C1C19;
    color: #E7CF97;
  }
  html:not([data-theme="light"]) body .rd-mbar {
    background: rgba(12,28,25,.96) !important;
    color: #E7F3EF;
  }
  html:not([data-theme="light"]) body .rd-mbar .in,
  html:not([data-theme="light"]) body .rd-mbar .in input { color: #C5D8D2 !important; }
  html:not([data-theme="light"]) body .rd-list.m .rd-pill,
  html:not([data-theme="light"]) body .rd-ac a { color: #E7F3EF; }
  html:not([data-theme="light"]) body .asr-v2-letter,
  html:not([data-theme="light"]) body .related-card,
  html:not([data-theme="light"]) body .asr-answer-islamic,
  html:not([data-theme="light"]) body .quick-facts .qf-row,
  html:not([data-theme="light"]) body .asr-answer-rows .r,
  html:not([data-theme="light"]) body .rd-raised {
    background: #17312C !important;
    background-color: #17312C !important;
    color: #E7F3EF !important;
    border-color: #2E514A !important;
  }
  html:not([data-theme="light"]) body .asr-answer-rows dd,
  html:not([data-theme="light"]) body .asr-v2-title,
  html:not([data-theme="light"]) body h2.asr-v2-title,
  html:not([data-theme="light"]) body .rd-notd h2,
  html:not([data-theme="light"]) body .rd-notd .mean,
  html:not([data-theme="light"]) body .rd-popular,
  html:not([data-theme="light"]) body .rd-popular b,
  html:not([data-theme="light"]) body .rd-list.m,
  html:not([data-theme="light"]) body .rd-list.m h2,
  html:not([data-theme="light"]) body .rd-ilm,
  html:not([data-theme="light"]) body .rd-ilm h2 { color: #E7F3EF !important; }
  html:not([data-theme="light"]) body .rd-hero::before,
  html:not([data-theme="light"]) body .asr-name-hero::before { opacity: .1; }
}
html[data-theme="dark"] body .asr-site-header,
html[data-theme="dark"] body nav.asr-nav,
html[data-theme="dark"] body .asr-site-header .nav-links {
  background: rgba(12,28,25,.94) !important;
  border-color: #2E514A !important;
  color: #E7F3EF !important;
}
html[data-theme="dark"] body .asr-site-header .nav-links a { color: #C5D8D2 !important; }
html[data-theme="dark"] body .asr-site-header .nav-links a:hover { color: #E7CF97 !important; }
html[data-theme="dark"] body nav.asr-nav .nav-brand,
html[data-theme="dark"] body nav.asr-nav .nav-links a { color: #E7CF97 !important; }
html[data-theme="dark"] body .asr-breadcrumb,
html[data-theme="dark"] body .asr-breadcrumb a,
html[data-theme="dark"] body .breadcrumb,
html[data-theme="dark"] body .breadcrumb a { color: #C5D8D2 !important; }
html[data-theme="dark"] body .asr-breadcrumb .current { color: #E7F3EF !important; }
html[data-theme="dark"] body .rd-notd,
html[data-theme="dark"] body .rd-lucky {
  background: linear-gradient(160deg, #17312C, #1E3A30) !important;
  color: #E7F3EF !important;
}
html[data-theme="dark"] body .rd-lucky .n { background: #0C1C19; color: #E7CF97; }
html[data-theme="dark"] body .rd-mbar { background: rgba(12,28,25,.96) !important; }
html[data-theme="dark"] body .rd-mbar .in,
html[data-theme="dark"] body .rd-mbar .in input { color: #C5D8D2 !important; }
html[data-theme="dark"] body .asr-v2-letter,
html[data-theme="dark"] body .related-card,
html[data-theme="dark"] body .asr-answer-islamic,
html[data-theme="dark"] body .quick-facts .qf-row,
html[data-theme="dark"] body .asr-answer-rows .r,
html[data-theme="dark"] body .rd-raised {
  background: #17312C !important;
  background-color: #17312C !important;
  color: #E7F3EF !important;
  border-color: #2E514A !important;
}
html[data-theme="dark"] body .asr-answer-rows dd { color: #E7F3EF !important; background: transparent !important; }
html[data-theme="dark"] body .qf-value { color: #E7F3EF !important; }
html[data-theme="dark"] body .qf-label,
html[data-theme="dark"] body .asr-answer-rows dt { color: #E7CF97 !important; }
html body .rd-hero .rd-search-box input[type="search"] {
  background: #fff !important;
  background-color: #fff !important;
  color: #1D2A27 !important;
  -webkit-text-fill-color: #1D2A27 !important;
  color-scheme: light;
}
html body .rd-hero .rd-search-box input[type="search"]::placeholder {
  color: #5F6B67 !important;
  -webkit-text-fill-color: #5F6B67 !important;
}
html[data-theme="dark"] body .asr-v2-title,
html[data-theme="dark"] body .rd-notd,
html[data-theme="dark"] body .rd-notd h2,
html[data-theme="dark"] body .rd-notd .mean,
html[data-theme="dark"] body .rd-popular,
html[data-theme="dark"] body .rd-popular b,
html[data-theme="dark"] body .rd-list.m,
html[data-theme="dark"] body .rd-list.m h2,
html[data-theme="dark"] body .rd-ilm,
html[data-theme="dark"] body .rd-ilm h2,
html[data-theme="dark"] body .rd-filters { color: #E7F3EF !important; }

/* Emerald (#0E4D45) disappears on the dark green surfaces. Use cream and gold. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body .asr-site-header .nav-brand span[lang="ar"],
  html:not([data-theme="light"]) body nav.asr-nav .nav-brand,
  html:not([data-theme="light"]) body .rd-notd .rd-ar,
  html:not([data-theme="light"]) body .rd-pop .ar,
  html:not([data-theme="light"]) body .rd-ncard .ar,
  html:not([data-theme="light"]) body .rd-ac .ar,
  html:not([data-theme="light"]) body .rd-fav .sc .ar,
  html:not([data-theme="light"]) body .rd-lt .ar,
  html:not([data-theme="light"]) body .asr-v2-letter-arabic,
  html:not([data-theme="light"]) body .rd-num,
  html:not([data-theme="light"]) body .rd-nav-heart { color: #F3E6C4 !important; }
  html:not([data-theme="light"]) body .rd-num { border-color: #E7CF97 !important; background: #17312C !important; }
  html:not([data-theme="light"]) body .asr-site-header .nav-links a.nav-cta,
  html:not([data-theme="light"]) body .asr-site-header .nav-cta {
    background: #E7CF97 !important;
    color: #0C1C19 !important;
    border-color: #E7CF97 !important;
  }
  html:not([data-theme="light"]) body .asr-site-header .nav-hamburger span { background: #E7CF97 !important; }
  html:not([data-theme="light"]) body .rd-list.m .rd-pill {
    background: #17312C !important;
    color: #E7F3EF !important;
    border-color: #2E514A !important;
  }
  html:not([data-theme="light"]) body .rd-list.m .go,
  html:not([data-theme="light"]) body .rd-chips i { color: #E7CF97 !important; }
  html:not([data-theme="light"]) body .pill-water { color: #B7D9F5 !important; border-color: #B7D9F5 !important; }
  html:not([data-theme="light"]) body .pill-fire { color: #F6C2A8 !important; border-color: #F6C2A8 !important; }
  html:not([data-theme="light"]) body .pill-earth { color: #E8D0A0 !important; border-color: #E8D0A0 !important; }
  html:not([data-theme="light"]) body .pill-air { color: #C5E0E4 !important; border-color: #C5E0E4 !important; }
  html:not([data-theme="light"]) body .qf-value,
  html:not([data-theme="light"]) body .asr-answer-rows dd { color: #E7F3EF !important; }
  html:not([data-theme="light"]) body .qf-label,
  html:not([data-theme="light"]) body .asr-answer-rows dt { color: #E7CF97 !important; }
}
html[data-theme="dark"] body .asr-site-header .nav-brand span[lang="ar"],
html[data-theme="dark"] body nav.asr-nav .nav-brand,
html[data-theme="dark"] body .rd-notd .rd-ar,
html[data-theme="dark"] body .rd-pop .ar,
html[data-theme="dark"] body .rd-ncard .ar,
html[data-theme="dark"] body .rd-ac .ar,
html[data-theme="dark"] body .rd-fav .sc .ar,
html[data-theme="dark"] body .rd-lt .ar,
html[data-theme="dark"] body .asr-v2-letter-arabic,
html[data-theme="dark"] body .rd-num,
html[data-theme="dark"] body .rd-nav-heart { color: #F3E6C4 !important; }
html[data-theme="dark"] body .rd-num { border-color: #E7CF97 !important; background: #17312C !important; }
html[data-theme="dark"] body .asr-site-header .nav-links a.nav-cta,
html[data-theme="dark"] body .asr-site-header .nav-cta {
  background: #E7CF97 !important;
  color: #0C1C19 !important;
  border-color: #E7CF97 !important;
}
html[data-theme="dark"] body .asr-site-header .nav-hamburger span { background: #E7CF97 !important; }
html[data-theme="dark"] body .rd-list.m .rd-pill {
  background: #17312C !important;
  color: #E7F3EF !important;
  border-color: #2E514A !important;
}
html[data-theme="dark"] body .rd-list.m .go,
html[data-theme="dark"] body .rd-chips i { color: #E7CF97 !important; }
html[data-theme="dark"] body .pill-water,
html[data-theme="dark"] body .asr-v2-letter[data-element="water"] .asr-v2-letter-pill { color: #B7D9F5 !important; border-color: #B7D9F5 !important; }
html[data-theme="dark"] body .pill-fire,
html[data-theme="dark"] body .asr-v2-letter[data-element="fire"] .asr-v2-letter-pill { color: #F6C2A8 !important; border-color: #F6C2A8 !important; }
html[data-theme="dark"] body .pill-earth,
html[data-theme="dark"] body .asr-v2-letter[data-element="earth"] .asr-v2-letter-pill { color: #E8D0A0 !important; border-color: #E8D0A0 !important; }
html[data-theme="dark"] body .pill-air,
html[data-theme="dark"] body .asr-v2-letter[data-element="air"] .asr-v2-letter-pill { color: #C5E0E4 !important; border-color: #C5E0E4 !important; }
/* Page styles paint html[data-theme=dark] body as #1a1a1a. Match the dark green page. */
html[data-theme="dark"],
html[data-theme="dark"] body {
  background: #0C1C19 !important;
  color: #E7F3EF !important;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]),
  html:not([data-theme="light"]) body {
    background: #0C1C19 !important;
    color: #E7F3EF !important;
  }
}

/* An unfilled defined slot collapses instead of leaving an empty box. */
html body .asr-ad.is-unfilled {
  background: transparent !important;
  min-height: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
}
/* Auto ads and anchor ads are left to AdSense settings; never hidden in CSS (12 Nov fix). */

/* ---- 13 Nov GUI audit fixes ----
   1. Heroes that sit directly in <body> (359 older English name pages, the 34
      letter pages, the A-Z index) got white headings from the rules above but
      no green background, so the name and title were white on cream. They now
      get the same green card as every other hero. */
html body > .hero {
  max-width: 1160px;
  margin: 16px auto 8px !important;
  border-radius: 28px;
  background: radial-gradient(900px 420px at 80% 0%, #16695E, var(--emerald) 50%, var(--emerald-2)) !important;
  color: #fff !important;
  position: relative;
  overflow: hidden;
  text-align: start !important;
  padding: 36px 40px 32px !important;
  box-sizing: border-box;
  box-shadow: none !important;
}
html body > .hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--rd-pattern); background-size: 72px; opacity: .16;
  pointer-events: none;
}
/* 2. Text inside any green hero that the page's own styles painted dark
      (hub ledes, counts, kickers, letter subtitles) was dark green on dark
      green. Low specificity on purpose: the named rules above still win. */
html:root :where(main, article, body) > .hero :where(p, span, small, li, div, dt, dd, .lede, .count, .kicker, .eyebrow, .hero-sub, .hero-kicker, .letter-meta):where(:not(.asr-pa *, .asr-pa, .asr-ad *, .asr-ad, .rd-play *, .asr-action-bar *)) {
  color: #DCEAE5 !important;
}
html:root :where(main, article, body) > .hero :where(a):where(:not(.asr-fav, .asr-share, .rd-btn, .hero-cta, .asr-pa *, .asr-ad *)) {
  color: var(--gold-soft) !important;
}
html:root :where(main, article, body) > .hero :where(.kicker, .eyebrow, .hero-kicker, .hero-eyebrow, .hero-arabic, .letter-meta, .count) {
  color: var(--gold-soft) !important;
}
@media (max-width: 900px) {
  html body > .hero { margin-left: 12px !important; margin-right: 12px !important; padding: 24px 18px !important; }
}
/* 3. Arabic, Urdu, Hindi and Turkish headers wrapped onto two rows on phones,
      leaving the favourites heart alone on the second row. One row, links
      scroll sideways if a very narrow phone needs it. */
@media (max-width: 600px) {
  html body nav.asr-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 8px 14px !important;
  }
  html body nav.asr-nav .nav-brand { flex: none; font-size: 1.45rem !important; }
  html body nav.asr-nav .nav-links {
    flex-wrap: nowrap !important;
    gap: 12px !important;
    overflow-x: auto;
    scrollbar-width: none;
    min-width: 0;
  }
  html body nav.asr-nav .nav-links::-webkit-scrollbar { display: none; }
  html body nav.asr-nav .nav-links a { white-space: nowrap; flex: none; }
  html body nav.asr-nav .rd-nav-heart { width: 36px; height: 36px; }
  html body nav.asr-nav .asr-theme-toggle { margin-left: 0 !important; flex: none; }
}
/* 4. Letter and Ilm ul Huroof heroes faded their title in after a 0.6 s delay,
      so the main heading (the page's largest paint) stayed invisible for up
      to 1.8 s. Show it at once. */
html body .hero :where(.hero-arabic, .hero-eyebrow, .hero-title, .hero-sub, .hero-cta) {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}
/* 5. Letter pages style every <nav> as position:fixed, so the breadcrumb sat
      on top of the site header and hid the logo and menu. */
html body nav.asr-breadcrumb,
html body nav.breadcrumb,
html body nav.asr-crosslang,
html body nav.asr-azjump,
html body nav.letter-pager { position: static !important; }
html:root :where(main, article, body) > .hero :where(em, .hero-title em, h1 em) { color: var(--gold-soft) !important; }
/* 6. The lucky-number buttons were squeezed to 12px wide on phones (tap target). */
.rd-num, .rd-lchip, .rd-chip { flex: none; }
/* 7. Contrast. Older styles used --gold-soft as a faint tint; the redesign made it
      solid #E7CF97, so the "What this reading says about you" box on every name
      page turned light gold under light text in dark mode (1.2:1). */
html body .asr-v2-synthesis { background: rgba(194,154,75,.12) !important; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body .article-name-links { background: #132824 !important; }
}
html[data-theme="dark"] body .article-name-links { background: #132824 !important; }
html body nav.asr-breadcrumb, html body nav.asr-breadcrumb a, html body .breadcrumb, html body .breadcrumb a { color: #555c69 !important; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body nav.asr-breadcrumb, html:not([data-theme="light"]) body nav.asr-breadcrumb a,
  html:not([data-theme="light"]) body .breadcrumb, html:not([data-theme="light"]) body .breadcrumb a { color: #C5D8D2 !important; }
}
html[data-theme="dark"] body nav.asr-breadcrumb, html[data-theme="dark"] body nav.asr-breadcrumb a,
html[data-theme="dark"] body .breadcrumb, html[data-theme="dark"] body .breadcrumb a { color: #C5D8D2 !important; }
/* 8. Links inside running text are underlined so they do not rely on colour alone. */
html body :is(p, li, .note):not(nav *):not(nav) > a:not([class*="btn"]):not(.rd-btn):not(.related-card):not(.asr-pill) { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
/* 9. Locale headers: reserve the height the injected heart and theme buttons need
      (the Urdu hub shifted 0.23 on load), and give the brand link a full tap target. */
html body nav.asr-nav { display: flex !important; align-items: center !important; min-height: 58px; box-sizing: border-box; }
html body nav.asr-nav .nav-brand { display: inline-flex; align-items: center; min-height: 44px; }
html body nav.asr-nav .nav-links a, html body nav.asr-nav .nav-brand { text-decoration: none !important; }
html body nav.asr-nav .nav-links a { color: var(--emerald); }
@media (max-width: 600px) {
  html body nav.asr-nav .nav-links { gap: 10px !important; }
  html body nav.asr-nav .nav-links a { font-size: 14px !important; }
  html body nav.asr-nav .nav-brand { font-size: 1.3rem !important; }
}
@media (max-width: 420px) {
  html body nav.asr-nav .asr-theme-toggle { display: none !important; }
  html body nav.asr-nav .nav-links { gap: 6px !important; }
  html body nav.asr-nav .nav-links a { padding-left: 5px !important; padding-right: 5px !important; }
  html body nav.asr-nav .nav-brand { font-size: 1.15rem !important; }
  html body nav.asr-nav { gap: 6px !important; padding-left: 10px !important; padding-right: 10px !important; }
  html body nav.asr-nav .nav-links a { font-size: 13.5px !important; }
}
/* 10. Older page styles underline every link, including the 551 swapped-in headers. */
html body .asr-site-header a:not(.nav-cta) { text-decoration: none !important; border-bottom: 0 !important; }