/* ═══════════════════════════════════════════════════════════
   تراث الشيخ أبي يحيى محمد بن عبده
   Emerald & Gold — a reverent, timeless luxury system
   ═══════════════════════════════════════════════════════════ */

:root{
  /* palette */
  --emerald-900:#082B20;
  --emerald-800:#0B3D2E;
  --emerald-700:#114A38;
  --emerald-600:#175A44;
  --emerald-050:#EAF0EA;

  --cream:#F5EFE0;
  --cream-soft:#FBF8F0;
  --paper:#FCFAF3;

  --gold:#C6A15B;
  --gold-light:#E4C88C;
  --gold-deep:#A07E3E;
  --gold-glow:rgba(198,161,91,.35);

  --ink:#16211B;
  --ink-soft:#3A4A41;
  --line:rgba(198,161,91,.28);
  --line-soft:rgba(22,33,27,.10);

  /* semantic surface tokens (flip in dark mode) */
  --bg:var(--cream);
  --header-bg:rgba(245,239,224,.82);
  --header-bg-2:rgba(245,239,224,.95);

  /* type */
  /* Amiri (classical Naskh) is the site's main voice — titles, body, and verses.
     Reem Kufi is kept ONLY for small letter-spaced UI labels (nav, tags,
     buttons), where a cursive Naskh with tracking would break letter joins. */
  --f-display:'Amiri', serif;
  --f-body:'Amiri', serif;
  --f-kufi:'Reem Kufi', sans-serif;
  --f-quran:'Amiri', serif;
  --f-latin:'Cormorant Garamond', serif;

  --shadow-1:0 2px 10px rgba(8,43,32,.06);
  --shadow-2:0 18px 50px -18px rgba(8,43,32,.30);
  --shadow-gold:0 14px 40px -14px rgba(160,126,62,.5);

  --wrap:1200px;
  --radius:4px;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ── LTR overrides (English) ── */
html[dir="ltr"]{
  --f-display:'Cormorant Garamond', serif;
  --f-body:'Cormorant Garamond', serif;
}
html[dir="ltr"] body{ letter-spacing:.1px; }

/* ══════════════ DARK THEME ══════════════
   Only the light surfaces flip; the always-dark sections (hero, verse band,
   footer, gate-feature) keep their emerald literals and stay dark. */
html[data-theme="dark"]{
  --bg:#06140E;
  --paper:#0E241A;
  --cream-soft:#10281E;
  --ink:#E9E2D1;
  --ink-soft:#A9B6AC;
  --line:rgba(198,161,91,.20);
  --line-soft:rgba(245,239,224,.08);
  --header-bg:rgba(7,20,14,.82);
  --header-bg-2:rgba(7,20,14,.95);
  --shadow-1:0 2px 10px rgba(0,0,0,.4);
  --shadow-2:0 20px 55px -18px rgba(0,0,0,.7);
}
/* emerald-coloured TEXT elements → luminous gold/cream on dark */
html[data-theme="dark"] .main-nav a,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .gate-name,
html[data-theme="dark"] .item-title,
html[data-theme="dark"] .feed-title,
html[data-theme="dark"] .player-title,
html[data-theme="dark"] .sr-title,
html[data-theme="dark"] .sr-quick,
html[data-theme="dark"] .bio-head h2,
html[data-theme="dark"] .bio-list li b,
html[data-theme="dark"] .pn-link,
html[data-theme="dark"] .item-cta,
html[data-theme="dark"] .feed-cta,
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .lang-toggle,
html[data-theme="dark"] .search-trigger,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .ask-btn{ color:var(--gold-light); }
html[data-theme="dark"] .nav-burger span{ background:var(--gold-light); }
html[data-theme="dark"] .grain{ mix-blend-mode:screen; opacity:.03; }
html[data-theme="dark"] .sr-glyph{ background:var(--cream-soft); }

/* ══════════════ Header utility buttons (theme / ask) ══════════════ */
.icon-btn{
  display:grid; place-items:center; width:38px; height:38px; border-radius:999px;
  background:transparent; color:var(--emerald-800); border:1px solid var(--line);
  cursor:pointer; transition:all .3s var(--ease); flex-shrink:0;
}
.icon-btn:hover{ background:var(--emerald-800); color:var(--gold-light); border-color:var(--emerald-800); transform:translateY(-1px); }
.theme-toggle svg{ transition:transform .5s var(--ease); }
.theme-toggle:hover svg{ transform:rotate(35deg); }

.ask-btn{
  display:grid; place-items:center; width:38px; height:38px; cursor:pointer;
  color:var(--emerald-800); background:transparent; border:1px solid var(--line);
  border-radius:999px; transition:all .3s var(--ease); flex-shrink:0;
}
.ask-btn:hover{ background:var(--gold); color:var(--emerald-900); border-color:var(--gold); transform:translateY(-1px); }
.ask-btn svg{ width:18px; height:18px; }
.ask-btn span{ display:none; }   /* icon-only in the header */

/* ══════════════ Floating social rail (left edge) ══════════════ */
.social-rail{
  position:fixed; left:0; top:50%; transform:translateY(-50%); z-index:120;
  display:flex; flex-direction:column; gap:.5rem; padding:.6rem .5rem;
  background:var(--header-bg); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line); border-inline-start:none;
  border-radius:0 12px 12px 0; box-shadow:var(--shadow-1);
}
.social-rail a{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center;
  color:#fff; background:var(--emerald-800); position:relative;
  transition:transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.social-rail a svg{ width:20px; height:20px; }
.social-rail a:hover{ transform:translateX(4px) scale(1.06); box-shadow:var(--shadow-gold); }
.social-rail a[data-net="telegram"]:hover{ background:#229ED9; }
.social-rail a[data-net="email"]:hover{ background:var(--gold-deep); }
/* small tooltip */
.social-rail a::after{
  content:attr(data-label); position:absolute; inset-inline-start:calc(100% + 10px);
  white-space:nowrap; background:var(--emerald-900); color:var(--cream);
  font-family:var(--f-kufi); font-size:.78rem; padding:.3rem .7rem; border-radius:6px;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease); border:1px solid var(--line);
}
.social-rail a:hover::after{ opacity:1; }

/* ══════════════ Ask-the-Sheikh modal ══════════════ */
.ask-overlay{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:1.4rem; }
.ask-overlay[hidden]{ display:none !important; }
.ask-backdrop{ position:absolute; inset:0; background:rgba(8,43,32,.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0; transition:opacity .3s var(--ease); }
.ask-overlay.show .ask-backdrop{ opacity:1; }
.ask-panel{ position:relative; width:min(540px,100%); background:var(--paper);
  border:1px solid var(--gold); border-radius:10px; box-shadow:0 40px 90px -30px rgba(8,43,32,.7);
  padding:2.4rem; transform:translateY(-16px) scale(.97); opacity:0;
  transition:transform .35s var(--ease), opacity .35s var(--ease); }
.ask-overlay.show .ask-panel{ transform:none; opacity:1; }
.ask-panel::before{ content:''; position:absolute; inset-inline:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--gold-light),var(--gold),var(--gold-deep)); border-radius:10px 10px 0 0; }
.ask-close{ position:absolute; top:1rem; inset-inline-end:1rem; width:34px; height:34px; border-radius:50%;
  background:var(--cream-soft); border:1px solid var(--line); color:var(--ink-soft); cursor:pointer;
  font-size:1.2rem; line-height:1; transition:all .3s var(--ease); }
.ask-close:hover{ background:var(--emerald-800); color:var(--cream); border-color:var(--emerald-800); }
.ask-icon{ width:60px; height:60px; margin:0 auto 1rem; display:grid; place-items:center; border-radius:50%;
  color:var(--gold-deep); background:var(--cream-soft); border:1px solid var(--line); }
.ask-title{ font-family:var(--f-display); font-weight:700; font-size:1.8rem; color:var(--emerald-800);
  text-align:center; margin-bottom:.4rem; }
html[data-theme="dark"] .ask-title{ color:var(--gold-light); }
.ask-lede{ text-align:center; color:var(--ink-soft); font-size:1rem; margin-bottom:1.6rem; }
.ask-form{ display:flex; flex-direction:column; gap:.9rem; }
.ask-field{ display:flex; flex-direction:column; gap:.35rem; }
.ask-field label{ font-family:var(--f-kufi); font-size:.85rem; color:var(--gold-deep); }
.ask-field input,.ask-field textarea{ font-family:var(--f-body); font-size:1rem; color:var(--ink);
  background:var(--cream-soft); border:1px solid var(--line); border-radius:6px; padding:.7rem .9rem;
  outline:none; transition:border-color .3s var(--ease), box-shadow .3s var(--ease); resize:vertical; }
.ask-field input:focus,.ask-field textarea:focus{ border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-glow); }
.ask-form .btn{ justify-content:center; margin-top:.4rem; }
.ask-note{ text-align:center; font-family:var(--f-kufi); font-size:.78rem; color:var(--ink-soft); margin-top:.9rem; }

/* ══════════════ Mobile drawer backdrop ══════════════ */
.nav-backdrop{ position:fixed; inset:0; z-index:85; background:rgba(6,20,14,.55);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease); }
.nav-backdrop.show{ opacity:1; pointer-events:auto; }

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }

/* ── Arabic is cursive: letter-spacing breaks letter-joins. Remove it entirely
   in RTL (Arabic); the tracked/uppercase look is re-applied only for LTR. ── */
html[dir="rtl"] .kicker, html[dir="rtl"] .hero-eyebrow, html[dir="rtl"] .about-eyebrow,
html[dir="rtl"] .sec-tag, html[dir="rtl"] .gate-tag, html[dir="rtl"] .footer-nav-head,
html[dir="rtl"] .verse-src, html[dir="rtl"] .feed-gate, html[dir="rtl"] .player-kind,
html[dir="rtl"] .sec-count, html[dir="rtl"] .btn, html[dir="rtl"] .brand-line-1,
html[dir="rtl"] .search-foot, html[dir="rtl"] .footer-bar, html[dir="rtl"] .crumbs,
html[dir="rtl"] .pn-link, html[dir="rtl"] .item-cta, html[dir="rtl"] .feed-cta,
html[dir="rtl"] .sr-gate, html[dir="rtl"] .gate-name, html[dir="rtl"] .audio-note,
html[dir="rtl"] .stat-label{ letter-spacing:0 !important; }

body{
  font-family:var(--f-body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.85;
  font-size:18px;
  overflow-x:clip;
  position:relative;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
::selection{ background:var(--gold); color:var(--emerald-900); }

/* accessibility: clear keyboard-focus ring (mouse clicks unaffected) */
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }
/* respect reduced-motion for everything, not just reveals */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important; }
}

/* film grain / atmosphere */
.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ═══════════ Header ═══════════ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--header-bg);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line);
  transition:box-shadow .4s var(--ease);
}
.site-header.scrolled{ box-shadow:var(--shadow-1); background:var(--header-bg-2); }
.header-inner{
  max-width:var(--wrap); margin-inline:auto; padding:.85rem 1.6rem;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.brand{ display:flex; align-items:center; gap:.95rem; color:var(--emerald-800); }
.brand-mark{
  width:64px; height:64px; flex-shrink:0; display:grid; place-items:center;
  transition:transform .5s var(--ease), filter .5s var(--ease);
}
.brand:hover .brand-mark{ transform:scale(1.07); }
.brand-mark img,.brand-logo{ width:100%; height:100%; object-fit:contain; display:block; }
.brand-text{ display:flex; flex-direction:column; line-height:1.2; gap:.05rem; }
.brand-line-1{ font-family:var(--f-body); font-size:1rem; color:var(--gold-deep); line-height:1; }
.brand-line-2{ font-family:var(--f-display); font-size:1.42rem; color:var(--emerald-800); font-weight:700; line-height:1.15; }
html[dir="ltr"] .brand-line-1{ font-family:var(--f-kufi); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; }
html[dir="ltr"] .brand-line-2{ font-size:1.3rem; }

.main-nav{ display:flex; gap:.35rem; align-items:center; }
.main-nav a{
  font-family:var(--f-body); font-size:1.14rem; color:var(--emerald-800);
  padding:.5rem .95rem; border-radius:var(--radius); position:relative;
  transition:color .3s var(--ease);
}
html[dir="ltr"] .main-nav a{ font-size:1rem; }
.main-nav a::after{
  content:''; position:absolute; inset-inline:.95rem; bottom:.28rem; height:1.5px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform:scaleX(0); transform-origin:center; transition:transform .35s var(--ease);
}
.main-nav a:hover{ color:var(--gold-deep); }
.main-nav a:hover::after{ transform:scaleX(1); }

.header-actions{ display:flex; align-items:center; gap:.6rem; }
.lang-toggle{
  font-family:var(--f-kufi); font-size:.82rem; letter-spacing:.08em; font-weight:600;
  background:transparent; color:var(--emerald-800); cursor:pointer;
  border:1px solid var(--line); border-radius:999px; padding:.42rem .95rem;
  transition:all .3s var(--ease);
}
.lang-toggle:hover{ background:var(--emerald-800); color:var(--cream); border-color:var(--emerald-800); }

.nav-burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:.4rem; }
.nav-burger span{ width:24px; height:2px; background:var(--emerald-800); border-radius:2px; transition:.35s var(--ease); }
.nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ═══════════ Hero ═══════════ */
.hero{
  position:relative; min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:7rem 1.6rem 7rem;
  background:
    radial-gradient(72% 48% at 50% 8%, rgba(228,200,140,.16), transparent 60%),
    linear-gradient(176deg, var(--emerald-700) 0%, var(--emerald-800) 46%, #072319 78%, #05130E 100%);
  background-color:var(--emerald-900);
  color:var(--cream); overflow:hidden;
}
/* soft vignette for depth — darkens the edges around the centred content */
.hero::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(115% 80% at 50% 38%, transparent 50%, rgba(0,0,0,.42) 100%);
}
.hero-pattern{
  position:absolute; inset:0; opacity:.08; pointer-events:none; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='104' viewBox='0 0 104 104'%3E%3Cg fill='none' stroke='%23C6A15B' stroke-width='.9'%3E%3Cpath d='M52 6l10 26 26 10-26 10-10 26-10-26-26-10 26-10z'/%3E%3Ccircle cx='52' cy='52' r='30'/%3E%3Cpath d='M52 22l6 18 18 6-18 6-6 18-6-18-18-6 18-6z' opacity='.6'/%3E%3C/g%3E%3C/svg%3E");
  background-size:104px 104px;
  /* clear the pattern away from the title, keep a faint texture toward the edges */
  mask-image:radial-gradient(circle at 50% 42%, transparent 18%, #000 66%);
  -webkit-mask-image:radial-gradient(circle at 50% 42%, transparent 18%, #000 66%);
}
.hero-glow{
  position:absolute; width:72vw; height:72vw; max-width:840px; max-height:840px;
  top:-14%; left:50%; transform:translateX(-50%); z-index:0;
  background:radial-gradient(circle, rgba(228,200,140,.30), rgba(198,161,91,.10) 42%, transparent 68%);
  filter:blur(24px); pointer-events:none;
}
/* elegant inset gold frame with corner accents */
.hero-frame{
  position:absolute; inset:clamp(14px,2.4vw,34px); z-index:1; pointer-events:none;
  border:1px solid rgba(228,200,140,.22); border-radius:6px;
}
.hero-frame::before{ content:''; position:absolute; inset:6px; border:1px solid rgba(228,200,140,.12); border-radius:3px; }
.hero-frame::after{
  content:''; position:absolute; inset:-4px; pointer-events:none;
  background-image:
    radial-gradient(circle at 0 0, var(--gold-light) 0 3px, transparent 4px),
    radial-gradient(circle at 100% 0, var(--gold-light) 0 3px, transparent 4px),
    radial-gradient(circle at 0 100%, var(--gold-light) 0 3px, transparent 4px),
    radial-gradient(circle at 100% 100%, var(--gold-light) 0 3px, transparent 4px);
  background-size:14px 14px; background-repeat:no-repeat;
  background-position:0 0,100% 0,0 100%,100% 100%;
}
.hero-content{ position:relative; z-index:2; width:100%; max-width:900px; }
.hero-eyebrow{
  font-family:var(--f-kufi); letter-spacing:.34em; text-transform:uppercase;
  font-size:.8rem; color:var(--gold-light); margin-bottom:1.4rem;
}
html[dir="ltr"] .hero-eyebrow{ letter-spacing:.24em; }
.hero-ornament{ color:var(--gold); margin-bottom:1.6rem; display:flex; justify-content:center; }
.hero-title{ line-height:1.05; margin-bottom:1.8rem; }
.hero-title-sm{
  display:block; font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.4rem,4vw,2.4rem); color:var(--gold-light); margin-bottom:.4rem;
}
.hero-title-lg{
  display:block; font-family:var(--f-display); font-weight:500;
  font-size:clamp(2.6rem,8vw,5.4rem);
  background:linear-gradient(180deg,#FBEFCF 0%,var(--gold) 60%,var(--gold-deep) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 2px 30px rgba(198,161,91,.15);
}
.hero-sub{
  max-width:660px; margin:0 auto 2.4rem; font-size:1.22rem;
  color:rgba(245,239,224,.86); line-height:2;
}
.hero-cta{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

.btn{
  font-family:var(--f-kufi); font-size:1rem; letter-spacing:.02em;
  padding:.85rem 2rem; border-radius:999px; cursor:pointer; border:1px solid transparent;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
  display:inline-flex; align-items:center; gap:.5rem;
}
.btn-gold{
  background:linear-gradient(135deg,var(--gold-light),var(--gold) 55%,var(--gold-deep));
  color:var(--emerald-900); box-shadow:var(--shadow-gold); font-weight:600;
}
.btn-gold:hover{ transform:translateY(-3px); box-shadow:0 20px 46px -14px rgba(160,126,62,.7); }
.btn-ghost{ border-color:rgba(228,200,140,.5); color:var(--gold-light); }
.btn-ghost:hover{ background:rgba(228,200,140,.12); transform:translateY(-3px); border-color:var(--gold-light); }

.hero-scroll{
  position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  color:var(--gold-light); font-family:var(--f-kufi); font-size:.72rem; letter-spacing:.2em;
  pointer-events:none; opacity:.85; z-index:2;
}
/* on shorter screens the pinned indicator would crowd the search bar — hide it */
@media (max-height:760px){ .hero-scroll{ display:none; } }
.hero-scroll svg{ animation:bob 2.4s var(--ease) infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }

/* ═══════════ Sections wrapper ═══════════ */
.sections{ max-width:var(--wrap); margin-inline:auto; padding:6rem 1.6rem 4rem; }
.section-head{ text-align:center; max-width:720px; margin:0 auto 3.6rem; }
.kicker{
  font-family:var(--f-kufi); letter-spacing:.28em; text-transform:uppercase;
  font-size:.82rem; color:var(--gold-deep);
  display:inline-flex; align-items:center; gap:1.1rem;
}
.kicker::before,.kicker::after{ content:''; width:40px; height:1px; background:var(--gold); opacity:.6; }
/* Arabic label is larger & needs no tracking; give it a touch more size/room */
html[dir="rtl"] .kicker{ font-size:1rem; }
.section-title{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(2rem,5vw,3.2rem); color:var(--emerald-800); margin:1rem 0 .8rem; line-height:1.15;
}
.section-lede{ color:var(--ink-soft); font-size:1.14rem; }

/* ═══════════ Gate grid ═══════════ */
.gate-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem;
}
.gate{
  position:relative; display:flex; align-items:flex-start; gap:1.3rem;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:2rem 2rem 2.1rem; overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.gate::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(120% 100% at 100% 0%, rgba(198,161,91,.10), transparent 55%);
  transition:opacity .5s var(--ease);
}
.gate::after{ /* corner flourish */
  content:''; position:absolute; top:10px; inset-inline-end:10px; width:26px; height:26px;
  border-top:1.5px solid var(--gold); border-inline-end:1.5px solid var(--gold);
  opacity:.35; transition:opacity .5s var(--ease), inset .5s var(--ease);
}
.gate:hover{ transform:translateY(-6px); box-shadow:var(--shadow-2); border-color:var(--gold); }
.gate:hover::before{ opacity:1; }
.gate:hover::after{ opacity:.8; }
.gate-feature{ grid-column:1 / -1; align-items:center;
  background:linear-gradient(120deg,var(--emerald-800),var(--emerald-700)); color:var(--cream); border-color:transparent; }
.gate-feature::after{ border-color:var(--gold-light); }
.gate-feature .gate-name{ color:var(--gold-light); }
.gate-feature .gate-desc{ color:rgba(245,239,224,.82); }
.gate-feature .gate-tag{ color:var(--cream); border-color:rgba(228,200,140,.4); }
.gate-feature .gate-num{ color:rgba(228,200,140,.22); }
.gate-feature .gate-icon{ color:var(--gold-light); border-color:rgba(228,200,140,.35); }

.gate-num{
  position:absolute; inset-inline-start:auto; inset-inline-end:1.4rem; bottom:.4rem;
  font-family:var(--f-display); font-size:5.5rem; line-height:1;
  color:rgba(160,126,62,.12); pointer-events:none; user-select:none;
}
.gate-icon{
  flex-shrink:0; width:74px; height:74px; display:grid; place-items:center;
  color:var(--gold-deep); border:1px solid var(--line); border-radius:50%;
  background:var(--cream-soft); transition:transform .5s var(--ease);
}
.gate-feature .gate-icon{ background:rgba(255,255,255,.06); }
.gate:hover .gate-icon{ transform:scale(1.08) rotate(-4deg); }
.gate-body{ display:flex; flex-direction:column; gap:.55rem; z-index:1; }
.gate-name{ font-family:var(--f-display); font-weight:700; font-size:1.7rem; color:var(--emerald-800); line-height:1.2; }
.gate-tag{
  align-self:flex-start; font-family:var(--f-kufi); font-size:.76rem; letter-spacing:.06em;
  color:var(--gold-deep); border:1px solid var(--line); border-radius:999px; padding:.2rem .8rem;
}
.gate-desc{ color:var(--ink-soft); font-size:1.05rem; line-height:1.75; }
.gate-feature .gate-desc{ max-width:56ch; }
.gate-arrow{
  position:absolute; bottom:1.4rem; inset-inline-start:1.6rem; color:var(--gold-deep);
  opacity:0; transform:translateX(8px); transition:opacity .5s var(--ease), transform .5s var(--ease);
}
html[dir="ltr"] .gate-arrow svg{ transform:scaleX(-1); }
.gate-feature .gate-arrow{ color:var(--gold-light); opacity:.7; position:static; margin-inline-start:auto; }
.gate:hover .gate-arrow{ opacity:1; transform:translateX(0); }

/* ═══════════ Header search trigger ═══════════ */
.search-trigger{
  display:grid; place-items:center; width:38px; height:38px; border-radius:999px;
  background:transparent; color:var(--emerald-800); border:1px solid var(--line); cursor:pointer;
  transition:all .3s var(--ease);
}
.search-trigger:hover{ background:var(--emerald-800); color:var(--gold-light); border-color:var(--emerald-800); transform:translateY(-1px); }

/* ═══════════ Hero search bar ═══════════ */
.hero-search{
  margin:2.4rem auto 0; display:flex; align-items:center; gap:.9rem; width:min(560px,100%);
  background:rgba(245,239,224,.07); border:1px solid rgba(228,200,140,.35); border-radius:999px;
  padding:.85rem 1.4rem; cursor:pointer; color:var(--gold-light); text-align:start;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:all .4s var(--ease);
}
.hero-search:hover{ border-color:var(--gold-light); background:rgba(245,239,224,.12); transform:translateY(-2px); box-shadow:0 14px 40px -18px rgba(0,0,0,.5); }
.hero-search span{ flex:1; font-family:var(--f-body); font-size:1.02rem; color:rgba(245,239,224,.72);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hero-search-kbd{ flex-shrink:0; font-family:var(--f-kufi); font-size:.7rem; letter-spacing:.05em;
  color:var(--gold-light); border:1px solid rgba(228,200,140,.4); border-radius:6px; padding:.2rem .5rem; }

/* ═══════════ Search overlay (command palette) ═══════════ */
.search-overlay{ position:fixed; inset:0; z-index:1000; display:flex; justify-content:center;
  align-items:flex-start; padding:12vh 1.2rem 2rem; }
/* CRITICAL: the `hidden` attribute must win over display:flex, otherwise the
   invisible overlay stays stretched over the page and swallows every click. */
.search-overlay[hidden]{ display:none !important; }
.search-backdrop{ position:absolute; inset:0; background:rgba(8,43,32,.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0; transition:opacity .26s var(--ease); }
.search-overlay.show .search-backdrop{ opacity:1; }
.search-panel{ position:relative; width:min(680px,100%); background:var(--cream-soft);
  border:1px solid var(--gold); border-radius:10px; box-shadow:0 40px 90px -30px rgba(8,43,32,.7);
  overflow:hidden; transform:translateY(-14px) scale(.98); opacity:0;
  transition:transform .3s var(--ease), opacity .3s var(--ease); }
.search-overlay.show .search-panel{ transform:none; opacity:1; }
.search-panel::before{ content:''; position:absolute; inset-inline:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--gold-light),var(--gold),var(--gold-deep)); }

.search-field{ display:flex; align-items:center; gap:.9rem; padding:1.2rem 1.4rem;
  border-bottom:1px solid var(--line); color:var(--gold-deep); }
.search-field input{ flex:1; border:none; background:none; outline:none;
  font-family:var(--f-body); font-size:1.2rem; color:var(--ink); min-width:0; }
.search-field input::placeholder{ color:var(--ink-soft); opacity:.7; }
.search-esc{ flex-shrink:0; font-family:var(--f-kufi); font-size:.74rem; color:var(--gold-deep);
  border:1px solid var(--line); border-radius:6px; padding:.28rem .6rem; background:var(--paper); cursor:pointer;
  transition:all .3s var(--ease); }
.search-esc:hover{ background:var(--emerald-800); color:var(--cream); border-color:var(--emerald-800); }

.search-results{ max-height:min(56vh,460px); overflow-y:auto; padding:.6rem; }
.search-results.is-quick{ display:flex; flex-wrap:wrap; gap:.5rem; padding:1rem 1.2rem 1.2rem; }
.sr-quick{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--f-kufi); font-size:.92rem;
  color:var(--emerald-800); background:var(--paper); border:1px solid var(--line); border-radius:999px;
  padding:.5rem 1rem; transition:all .3s var(--ease); }
.sr-quick:hover{ border-color:var(--gold); background:var(--cream); color:var(--gold-deep); transform:translateY(-2px); }
.sr-quick .sr-glyph{ width:auto; height:auto; border:none; background:none; color:var(--gold-deep); }

.sr-row{ display:flex; align-items:center; gap:1rem; padding:.85rem 1rem; border-radius:6px;
  transition:background .2s var(--ease); }
.sr-row.active{ background:linear-gradient(120deg,var(--emerald-800),var(--emerald-700)); }
.sr-row.active .sr-title{ color:var(--gold-light); }
.sr-row.active .sr-meta,.sr-row.active .sr-gate{ color:rgba(245,239,224,.75); }
.sr-row.active .sr-glyph{ color:var(--gold-light); border-color:rgba(228,200,140,.4); background:rgba(255,255,255,.06); }
.sr-row.active .sr-go{ color:var(--gold-light); opacity:1; transform:none; }
.sr-glyph{ flex-shrink:0; width:44px; height:44px; display:grid; place-items:center; color:var(--gold-deep);
  background:var(--cream); border:1px solid var(--line); border-radius:50%; }
.sr-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.25rem; }
.sr-title{ font-family:var(--f-display); font-weight:700; font-size:1.24rem; color:var(--emerald-800);
  line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sr-title mark{ background:var(--gold-light); color:var(--emerald-900); border-radius:3px; padding:0 .1em; }
.sr-meta{ display:flex; flex-wrap:wrap; gap:.35rem .9rem; font-family:var(--f-kufi); font-size:.8rem; color:var(--ink-soft); }
.sr-gate{ color:var(--gold-deep); }
.sr-go{ flex-shrink:0; color:var(--gold-deep); opacity:0; transform:translateX(6px);
  transition:opacity .3s var(--ease), transform .3s var(--ease); }
html[dir="ltr"] .sr-go svg{ transform:scaleX(-1); }
.sr-row:hover .sr-go{ opacity:.7; transform:none; }

.search-empty{ padding:2.4rem 1rem; text-align:center; color:var(--ink-soft); font-size:1.05rem; }
.search-foot{ padding:.8rem 1.4rem; border-top:1px solid var(--line); font-family:var(--f-kufi);
  font-size:.76rem; color:var(--ink-soft); text-align:center; letter-spacing:.02em; }

/* ═══════════ Latest additions feed ═══════════ */
.latest{ max-width:var(--wrap); margin-inline:auto; padding:2rem 1.6rem 4rem; }
.feed-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; }
.feed-card{
  position:relative; display:flex; flex-direction:column; gap:.9rem;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.6rem 1.6rem 1.4rem; overflow:hidden;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.feed-card::before{ content:''; position:absolute; inset-inline:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--gold-light),var(--gold),var(--gold-deep));
  transform:scaleX(0); transform-origin:center; transition:transform .45s var(--ease); }
.feed-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-2); border-color:var(--gold); }
.feed-card:hover::before{ transform:scaleX(1); }
.feed-top{ display:flex; align-items:center; gap:.7rem; }
.feed-glyph{ width:44px; height:44px; flex-shrink:0; display:grid; place-items:center;
  color:var(--gold-deep); background:var(--cream-soft); border:1px solid var(--line); border-radius:50%;
  transition:transform .45s var(--ease); }
.feed-card:hover .feed-glyph{ transform:rotate(-6deg) scale(1.06); }
.feed-gate{ font-family:var(--f-kufi); font-size:.78rem; letter-spacing:.06em; color:var(--gold-deep); }
.feed-title{ font-family:var(--f-display); font-weight:700; font-size:1.32rem; color:var(--emerald-800);
  line-height:1.35; flex:1; }
.feed-meta{ display:flex; flex-wrap:wrap; gap:.4rem .9rem; font-family:var(--f-kufi); font-size:.8rem; color:var(--ink-soft); }
.feed-date{ color:var(--gold-deep); }
.feed-foot{ display:flex; align-items:center; justify-content:space-between;
  margin-top:.3rem; padding-top:.9rem; border-top:1px solid var(--line-soft); }
.feed-cta{ font-family:var(--f-kufi); font-size:.88rem; color:var(--emerald-700); }
.feed-card:hover .feed-cta{ color:var(--gold-deep); }
.feed-sub{ font-family:var(--f-kufi); font-size:.8rem; color:var(--ink-soft); }

/* ═══════════ About / biography page ═══════════ */
.about-hero{ position:relative; overflow:hidden; color:var(--cream); text-align:center;
  padding:5.5rem 1.6rem 4.5rem;
  background:radial-gradient(120% 120% at 50% -20%, var(--emerald-700), var(--emerald-900) 72%); }
.about-hero .sec-banner-pattern{ position:absolute; inset:0; }
.about-hero-inner{ position:relative; max-width:820px; margin-inline:auto; }
.about-portrait{ width:210px; height:210px; margin:0 auto 1.6rem; display:grid; place-items:center; position:relative; }
.about-portrait img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 10px 26px rgba(0,0,0,.4)); }
.about-portrait::after{ content:''; position:absolute; inset:-8px; border-radius:50%;
  border:1px dashed rgba(228,200,140,.3); }
.about-eyebrow{ font-family:var(--f-kufi); letter-spacing:.28em; text-transform:uppercase;
  font-size:.78rem; color:var(--gold-light); margin-bottom:1rem; }
.about-name{ font-family:var(--f-display); font-weight:700; font-size:clamp(2.2rem,6vw,3.8rem); line-height:1.1;
  background:linear-gradient(180deg,#FBEFCF,var(--gold) 70%,var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:1rem; }
.about-tagline{ color:rgba(245,239,224,.85); font-size:1.16rem; line-height:1.9; max-width:600px; margin-inline:auto; }

.about-body{ max-width:860px; margin-inline:auto; padding:4rem 1.6rem 2rem; }
.bio-block{ margin-bottom:3rem; }
.bio-head{ display:flex; align-items:center; gap:1rem; margin-bottom:1.3rem; }
.bio-head .bh-num{ font-family:var(--f-display); font-size:2.4rem; line-height:1; color:var(--gold);
  opacity:.5; min-width:1.6ch; }
.bio-head h2{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.5rem,3.5vw,2.1rem); color:var(--emerald-800); }
.bio-head::after{ content:''; flex:1; height:1px; background:linear-gradient(90deg,var(--gold),transparent); opacity:.5; }
.bio-block p{ font-size:1.14rem; line-height:2.05; color:var(--ink); margin-bottom:1.1rem; }
.bio-list{ list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; margin-top:.6rem; }
.bio-list li{ position:relative; padding:1rem 1.2rem; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); font-size:1.05rem; color:var(--ink-soft);
  padding-inline-start:2.4rem; }
.bio-list li::before{ content:''; position:absolute; inset-inline-start:1.1rem; top:50%; transform:translateY(-50%);
  width:7px; height:7px; background:var(--gold); border-radius:50%; box-shadow:0 0 0 3px rgba(198,161,91,.18); }
.bio-list li b{ color:var(--emerald-800); font-weight:700; }

.about-quote{ position:relative; margin:2rem 0; padding:2rem 2.4rem; text-align:center;
  background:linear-gradient(120deg,var(--emerald-800),var(--emerald-700)); color:var(--cream);
  border-radius:6px; overflow:hidden; }
.about-quote p{ font-family:var(--f-quran); font-size:1.5rem; line-height:1.9; color:var(--gold-light); margin:0; }
html[dir="ltr"] .about-quote p{ font-family:var(--f-latin); font-style:italic; }
.about-quote span{ display:block; margin-top:.8rem; font-family:var(--f-kufi); font-size:.82rem; letter-spacing:.1em; color:rgba(245,239,224,.7); }

.about-cta-band{ text-align:center; padding:2rem 1.6rem 5rem; max-width:860px; margin-inline:auto; }
.about-cta-band .btn{ margin-top:1.4rem; }

/* ═══════════ Verse band ═══════════ */
.verse-band{
  position:relative; background:var(--emerald-900); color:var(--cream);
  padding:5rem 1.6rem; text-align:center; overflow:hidden;
}
.verse-band::before,.verse-band::after{
  content:''; position:absolute; inset-inline:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:.5;
}
.verse-band::before{ top:0; } .verse-band::after{ bottom:0; }
.verse-inner{ max-width:860px; margin-inline:auto; }
.verse-orn{ color:var(--gold); display:inline-flex; margin-bottom:1.4rem; }
.verse-text{
  font-family:var(--f-quran); font-size:clamp(1.5rem,4vw,2.5rem); line-height:1.9;
  color:var(--gold-light);
}
html[dir="ltr"] .verse-text{ font-family:var(--f-latin); font-style:italic; }
.verse-src{ display:block; margin-top:1.2rem; font-family:var(--f-kufi); font-size:.85rem; letter-spacing:.12em; color:rgba(245,239,224,.7); }

/* ═══════════ Stats ═══════════ */
.stats{
  max-width:var(--wrap); margin-inline:auto; padding:4.5rem 1.6rem 6rem;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;
}
.stat{ text-align:center; padding:1.5rem 1rem; border-inline-start:1px solid var(--line); }
.stat:first-child{ border-inline-start:none; }
.stat-num{
  display:block; font-family:var(--f-display); font-weight:700;
  font-size:clamp(2.6rem,6vw,3.6rem); line-height:1;
  background:linear-gradient(180deg,var(--gold),var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat-label{ display:block; margin-top:.7rem; font-family:var(--f-kufi); font-size:.92rem; color:var(--ink-soft); }

/* ═══════════ Footer ═══════════ */
.site-footer{ position:relative; background:var(--emerald-900); color:var(--cream); overflow:hidden; }
.footer-pattern{
  position:absolute; inset:0; opacity:.06; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%23C6A15B' stroke-width='1'%3E%3Cpath d='M30 0l30 30-30 30L0 30z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:60px 60px;
}
.footer-inner{
  position:relative; max-width:var(--wrap); margin-inline:auto;
  padding:4.5rem 1.6rem 2.5rem; display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:3rem;
}
.footer-brand .brand-mark{ width:96px; height:96px; margin:0 0 1.1rem; }
.footer-title{ font-family:var(--f-display); font-weight:700; font-size:1.5rem; color:var(--gold-light); margin-bottom:.9rem; line-height:1.3; }
.footer-note{ font-family:var(--f-quran); color:rgba(245,239,224,.72); font-size:1.15rem; }
html[dir="ltr"] .footer-note{ font-family:var(--f-latin); font-style:italic; }
.footer-nav,.footer-meta{ display:flex; flex-direction:column; gap:.7rem; }
.footer-nav-head{ font-family:var(--f-kufi); letter-spacing:.16em; text-transform:uppercase; font-size:.76rem; color:var(--gold); margin-bottom:.5rem; }
.footer-nav a{ color:rgba(245,239,224,.82); transition:color .3s var(--ease), padding .3s var(--ease); font-size:1.02rem; }
.footer-nav a:hover{ color:var(--gold-light); padding-inline-start:.4rem; }
.footer-meta p{ color:rgba(245,239,224,.72); font-size:1rem; line-height:1.8; }
.footer-bar{
  position:relative; border-top:1px solid rgba(198,161,91,.2); text-align:center;
  padding:1.4rem 1.6rem; font-family:var(--f-kufi); font-size:.82rem; color:rgba(245,239,224,.6); letter-spacing:.03em;
}

/* ═══════════ Reveal animation ═══════════ */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero-scroll svg{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ═══════════════════════════════════════════════════════════
   SECTION PAGE
   ═══════════════════════════════════════════════════════════ */
.sec-banner{
  position:relative; overflow:hidden; color:var(--cream); text-align:center;
  padding:5rem 1.6rem 4rem;
  background:radial-gradient(120% 120% at 50% -20%, var(--emerald-700), var(--emerald-900) 72%);
}
.sec-banner-pattern{
  position:absolute; inset:0; opacity:.12; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23C6A15B' stroke-width='1'%3E%3Cpath d='M40 0l40 40-40 40L0 40z'/%3E%3Cpath d='M40 14l26 26-26 26-26-26z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:80px 80px;
  mask-image:radial-gradient(circle at 50% 40%, #000 20%, transparent 75%);
  -webkit-mask-image:radial-gradient(circle at 50% 40%, #000 20%, transparent 75%);
}
.sec-banner-inner{ position:relative; max-width:820px; margin-inline:auto; }
.crumbs{ display:flex; gap:.6rem; justify-content:center; align-items:center;
  font-family:var(--f-kufi); font-size:.82rem; color:rgba(228,200,140,.75); margin-bottom:1.8rem; }
.crumbs a{ transition:color .3s var(--ease); }
.crumbs a:hover{ color:var(--gold-light); }
.crumbs span[aria-hidden]{ opacity:.5; }
.sec-icon{ display:inline-grid; place-items:center; width:88px; height:88px; margin:0 auto 1.4rem;
  color:var(--gold-light); border:1px solid rgba(228,200,140,.4); border-radius:50%;
  background:rgba(255,255,255,.05); }
.sec-tag{ display:inline-block; font-family:var(--f-kufi); font-size:.78rem; letter-spacing:.14em;
  color:var(--gold-light); border:1px solid rgba(228,200,140,.4); border-radius:999px; padding:.3rem 1rem; margin-bottom:1.1rem; }
.sec-title{ font-family:var(--f-display); font-weight:700; font-size:clamp(2.2rem,6vw,3.8rem);
  line-height:1.1; margin-bottom:1.2rem;
  background:linear-gradient(180deg,#FBEFCF,var(--gold) 70%,var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.sec-intro{ color:rgba(245,239,224,.85); font-size:1.16rem; line-height:2; max-width:640px; margin-inline:auto; }

.sec-main{ max-width:920px; margin-inline:auto; padding:3rem 1.6rem 5rem; }
.sec-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
  flex-wrap:wrap; margin-bottom:1.8rem; padding-bottom:1.4rem; border-bottom:1px solid var(--line); }
.sec-count{ font-family:var(--f-kufi); font-size:.92rem; color:var(--gold-deep); letter-spacing:.03em; }
.sec-search{ display:flex; align-items:center; gap:.6rem; background:var(--paper);
  border:1px solid var(--line); border-radius:999px; padding:.5rem 1.1rem; min-width:240px;
  color:var(--gold-deep); transition:border-color .3s var(--ease), box-shadow .3s var(--ease); }
.sec-search:focus-within{ border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-glow); }
.sec-search input{ border:none; background:none; outline:none; font-family:var(--f-body);
  font-size:1rem; color:var(--ink); width:100%; }

.item-list{ list-style:none; display:flex; flex-direction:column; gap:.9rem; }
.item-link{ position:relative; display:flex; align-items:center; gap:1.2rem;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.25rem 1.6rem; overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.item-link::before{ content:''; position:absolute; inset-inline-start:0; top:0; bottom:0; width:3px;
  background:linear-gradient(var(--gold-light),var(--gold-deep)); transform:scaleY(0);
  transform-origin:center; transition:transform .4s var(--ease); }
.item-link:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); border-color:var(--gold); }
.item-link:hover::before{ transform:scaleY(1); }
.item-index{ font-family:var(--f-display); font-size:1.5rem; color:var(--gold-deep); opacity:.6;
  min-width:2.4ch; text-align:center; }
.item-glyph{ flex-shrink:0; width:52px; height:52px; display:grid; place-items:center;
  color:var(--gold-deep); background:var(--cream-soft); border:1px solid var(--line); border-radius:50%;
  transition:transform .4s var(--ease); }
.item-link:hover .item-glyph{ transform:scale(1.08); background:var(--emerald-800); color:var(--gold-light); border-color:var(--emerald-800); }
.item-body{ flex:1; display:flex; flex-direction:column; gap:.35rem; min-width:0; }
.item-title{ font-family:var(--f-display); font-weight:700; font-size:1.35rem; color:var(--emerald-800); line-height:1.3; }
.item-meta{ display:flex; flex-wrap:wrap; gap:.5rem 1rem; font-family:var(--f-kufi); font-size:.82rem; color:var(--ink-soft); }
.im-tag{ color:var(--gold-deep); }
.im-dot{ position:relative; padding-inline-start:1rem; }
.im-dot::before{ content:'•'; position:absolute; inset-inline-start:.25rem; color:var(--gold); }
.item-cta{ flex-shrink:0; display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--f-kufi); font-size:.9rem; color:var(--emerald-800);
  border:1px solid var(--line); border-radius:999px; padding:.5rem 1.1rem;
  transition:all .35s var(--ease); }
.item-link:hover .item-cta{ background:var(--gold); color:var(--emerald-900); border-color:var(--gold); }
html[dir="ltr"] .item-cta svg,[dir="ltr"] .gate-arrow svg{ }
.empty-state{ text-align:center; color:var(--ink-soft); font-size:1.1rem; padding:3rem 0; }
.main-nav a.active{ color:var(--gold-deep); }
.main-nav a.active::after{ transform:scaleX(1); }

/* ═══════════════════════════════════════════════════════════
   PLAYER PAGE
   ═══════════════════════════════════════════════════════════ */
.player-wrap{ max-width:820px; margin-inline:auto; padding:3rem 1.6rem 5rem; }
.player-card{ position:relative; background:var(--paper); border:1px solid var(--line);
  border-radius:6px; padding:2.6rem 2.4rem; box-shadow:var(--shadow-2); overflow:hidden; }
.player-card::after{ content:''; position:absolute; top:14px; inset-inline-end:14px; width:30px; height:30px;
  border-top:1.5px solid var(--gold); border-inline-end:1.5px solid var(--gold); opacity:.4; }
.player-kind{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--f-kufi);
  font-size:.78rem; letter-spacing:.1em; color:var(--gold-deep); border:1px solid var(--line);
  border-radius:999px; padding:.3rem .9rem; margin-bottom:1.2rem; }
.player-title{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.8rem,4vw,2.6rem);
  color:var(--emerald-800); line-height:1.25; margin-bottom:.8rem; }
.player-meta{ display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; font-family:var(--f-kufi);
  font-size:.9rem; color:var(--ink-soft); margin-bottom:2rem; }

/* custom audio player */
.audio-shell{ background:linear-gradient(120deg,var(--emerald-800),var(--emerald-700));
  border-radius:6px; padding:1.8rem; color:var(--cream); }
.audio-controls{ display:flex; align-items:center; gap:1.2rem; }
.play-btn{ flex-shrink:0; width:64px; height:64px; border-radius:50%; border:none; cursor:pointer;
  display:grid; place-items:center; color:var(--emerald-900);
  background:linear-gradient(135deg,var(--gold-light),var(--gold-deep)); box-shadow:var(--shadow-gold);
  transition:transform .3s var(--ease); }
.play-btn:hover{ transform:scale(1.06); }
.play-btn svg{ width:26px; height:26px; }
.audio-progress{ flex:1; }
.audio-time{ display:flex; justify-content:space-between; font-family:var(--f-kufi); font-size:.82rem;
  color:var(--gold-light); margin-bottom:.5rem; }
.track{ position:relative; height:6px; background:rgba(228,200,140,.2); border-radius:99px; cursor:pointer; }
.track-fill{ position:absolute; inset-block:0; inset-inline-start:0; width:0%;
  background:linear-gradient(90deg,var(--gold),var(--gold-light)); border-radius:99px; }
.track-knob{ position:absolute; top:50%; transform:translate(50%,-50%); inset-inline-start:0;
  width:14px; height:14px; border-radius:50%; background:var(--gold-light); box-shadow:0 0 0 4px rgba(228,200,140,.25); }
.audio-note{ margin-top:1.2rem; font-family:var(--f-kufi); font-size:.8rem; color:rgba(245,239,224,.65); text-align:center; }

.player-actions{ display:flex; gap:.9rem; flex-wrap:wrap; margin-top:2rem; }
.player-actions .btn{ font-size:.95rem; padding:.75rem 1.6rem; }
.btn-emerald{ background:var(--emerald-800); color:var(--gold-light); }
.btn-emerald:hover{ background:var(--emerald-700); transform:translateY(-3px); }
.btn-outline{ border-color:var(--line); color:var(--emerald-800); }
.btn-outline:hover{ border-color:var(--gold); background:var(--cream-soft); transform:translateY(-3px); }

/* reading view for books/fatwas */
.reading{ margin-top:2.2rem; padding-top:2rem; border-top:1px solid var(--line); }
.reading p{ font-size:1.18rem; line-height:2.1; color:var(--ink); margin-bottom:1.3rem; }
.reading .bism{ font-family:var(--f-quran); text-align:center; color:var(--gold-deep); font-size:1.5rem; margin-bottom:1.6rem; }
html[dir="ltr"] .reading .bism{ font-family:var(--f-latin); font-style:italic; }

/* ── In-page PDF viewer (books & fatwas) ── */
.pdf-viewer{ margin-top:1.8rem; border:1px solid var(--line); border-radius:8px; overflow:hidden;
  background:var(--cream-soft); box-shadow:var(--shadow-1); }
.pdf-viewer iframe{ display:block; width:100%; height:min(78vh,900px); border:0; background:#525659; }

/* ── YouTube / video embed ── */
.video-embed{ margin-top:1.8rem; position:relative; aspect-ratio:16/9; background:#000;
  border:1px solid var(--line); border-radius:8px; overflow:hidden; box-shadow:var(--shadow-1); }
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ── Course playlist ── */
.now-playing{ margin-top:1rem; font-family:var(--f-kufi); font-size:.85rem; color:var(--gold-light); text-align:center; min-height:1em; }
.lesson-list{ list-style:none; margin-top:1.6rem; display:flex; flex-direction:column; gap:.6rem; }
.lesson{ width:100%; display:flex; align-items:center; gap:1rem; cursor:pointer; text-align:start;
  background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:.9rem 1.1rem;
  color:var(--ink); font-family:var(--f-body); transition:all .3s var(--ease); position:relative; }
.lesson:hover{ border-color:var(--gold); transform:translateY(-2px); box-shadow:var(--shadow-1); }
.lesson.active{ background:linear-gradient(120deg,var(--emerald-800),var(--emerald-700)); border-color:transparent; }
.lesson.active .lesson-title{ color:var(--gold-light); }
.lesson.active .lesson-num{ background:var(--gold); color:var(--emerald-900); border-color:var(--gold); }
.lesson.active .lesson-dur{ color:rgba(245,239,224,.75); }
.lesson.active .lesson-play{ color:var(--gold-light); }
.lesson-num{ flex-shrink:0; width:34px; height:34px; display:grid; place-items:center; border-radius:50%;
  font-family:var(--f-kufi); font-size:.9rem; color:var(--gold-deep); background:var(--cream-soft); border:1px solid var(--line); }
.lesson-title{ flex:1; font-size:1.2rem; font-weight:700; color:var(--emerald-800); line-height:1.35; }
html[data-theme="dark"] .lesson-title{ color:var(--gold-light); }
.lesson-dur{ flex-shrink:0; font-family:var(--f-kufi); font-size:.82rem; color:var(--ink-soft); }
.lesson-play{ flex-shrink:0; color:var(--gold-deep); opacity:0; transition:opacity .3s var(--ease); }
.lesson:hover .lesson-play{ opacity:1; }

.player-nav{ display:flex; justify-content:space-between; gap:1rem; margin-top:2.5rem; }
.pn-link{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--f-kufi); font-size:.95rem;
  color:var(--emerald-800); padding:.7rem 1.2rem; border:1px solid var(--line); border-radius:999px;
  transition:all .35s var(--ease); max-width:46%; }
.pn-link:hover{ border-color:var(--gold); background:var(--cream-soft); }
.pn-link.disabled{ opacity:.35; pointer-events:none; }
.pn-link span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[dir="ltr"] .pn-prev svg,html[dir="rtl"] .pn-next svg{ transform:scaleX(-1); }

/* ═══════════ Responsive ═══════════ */
@media (max-width:900px){
  .footer-inner{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
  .feed-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .feed-grid{ grid-template-columns:1fr; }
  .bio-list{ grid-template-columns:1fr; }
  .player-nav{ flex-direction:column; }
  .pn-link{ max-width:100%; }
}
@media (max-width:760px){
  body{ font-size:17px; }
  .nav-burger{ display:flex; }
  /* ── Left-sliding drawer ── */
  .main-nav{
    position:fixed; top:0; bottom:0; left:0; width:min(82vw,330px);
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    background:var(--paper); border-inline-end:1px solid var(--line);
    padding:5.5rem 1.3rem 2rem; gap:.15rem; box-shadow:14px 0 55px -18px rgba(0,0,0,.55);
    transform:translateX(-105%); pointer-events:none; overflow-y:auto; z-index:90;
    transition:transform .5s cubic-bezier(.16,1,.3,1);
  }
  .main-nav.open{ transform:translateX(0); pointer-events:auto; }
  .main-nav a{ padding:1rem .8rem; border-bottom:1px solid var(--line-soft); font-size:1.24rem;
    opacity:0; transform:translateX(-16px);
    transition:opacity .4s var(--ease), transform .45s var(--ease), color .3s var(--ease); }
  .main-nav.open a{ opacity:1; transform:none; }
  .main-nav.open a:nth-child(1){ transition-delay:.10s } .main-nav.open a:nth-child(2){ transition-delay:.15s }
  .main-nav.open a:nth-child(3){ transition-delay:.20s } .main-nav.open a:nth-child(4){ transition-delay:.25s }
  .main-nav.open a:nth-child(5){ transition-delay:.30s } .main-nav.open a:nth-child(6){ transition-delay:.35s }
  .main-nav a::after{ display:none; }
  /* keep the vertical social rail out of the way of the drawer on mobile */
  .social-rail{ display:none; }
  .gate-grid{ grid-template-columns:1fr; }
  .gate-feature{ align-items:flex-start; }
  .stats{ grid-template-columns:repeat(2,1fr); gap:0; }
  .stat:nth-child(3){ border-inline-start:none; }
  .stat{ border-top:1px solid var(--line); }
  .stat:nth-child(1),.stat:nth-child(2){ border-top:none; }
}
@media (max-width:420px){
  .brand-line-2{ font-size:1.05rem; }
  .hero{ min-height:88vh; }
}

/* ═══════════════════ MOBILE UI/UX POLISH ═══════════════════ */
@media (max-width:760px){
  /* header: compact, touch-friendly, no overflow */
  .header-inner{ padding:.55rem .9rem; gap:.5rem; }
  .brand-mark{ width:46px; height:46px; }
  .header-actions{ gap:.4rem; }
  .icon-btn,.search-trigger,.ask-btn{ width:38px; height:38px; }
  .lang-toggle{ padding:.4rem .7rem; }
  /* backdrop-filter makes the header a containing block, trapping the fixed
     drawer inside it — drop the blur on mobile so the drawer spans the viewport */
  .site-header{ backdrop-filter:none; -webkit-backdrop-filter:none; }
  .site-header, .site-header.scrolled{ background:var(--bg); }

  /* hero */
  .hero{ padding:5.5rem 1.1rem 4.5rem; }
  .hero-eyebrow{ font-size:.68rem; letter-spacing:.22em; }
  .hero-sub{ font-size:1.05rem; }
  .hero-search{ width:100%; padding:.8rem 1.1rem; }
  .hero-search span{ font-size:.92rem; }
  .hero-cta{ width:100%; gap:.7rem; }
  .hero-cta .btn{ flex:1 1 40%; justify-content:center; padding:.8rem 1rem; }

  /* section headers / spacing */
  .sections{ padding:3.5rem 1.1rem 2.5rem; }
  .latest{ padding:1rem 1.1rem 3rem; }
  .verse-band{ padding:3.5rem 1.2rem; }
  .stats{ padding:2.8rem 1.1rem 3.8rem; }
  .sec-banner{ padding:4rem 1.1rem 3rem; }
  .sec-intro{ font-size:1.02rem; }
  .sec-main{ padding:2rem 1.1rem 4rem; }
  .sec-toolbar{ gap:.7rem; }
  .sec-search{ min-width:0; width:100%; }

  /* gate cards */
  .gate{ padding:1.5rem 1.4rem 1.7rem; gap:1rem; }
  .gate-icon{ width:58px; height:58px; }
  .gate-icon svg{ width:34px; height:34px; }
  .gate-num{ font-size:3.8rem; inset-inline-end:1rem; }
  .gate-name{ font-size:1.5rem; }
  .gate-desc{ font-size:1rem; }

  /* feed cards */
  .feed-title{ font-size:1.2rem; }

  /* section list items */
  .item-link{ padding:1rem 1.05rem; gap:.8rem; }
  .item-index{ display:none; }
  .item-glyph{ width:44px; height:44px; }
  .item-title{ font-size:1.12rem; }
  .item-cta{ padding:.45rem .8rem; font-size:.82rem; }

  /* player */
  .player-wrap{ padding:2rem 1.05rem 4rem; }
  .player-card{ padding:1.5rem 1.2rem; }
  .player-title{ font-size:clamp(1.5rem,6vw,2rem); }
  .audio-shell{ padding:1.3rem; }
  .play-btn{ width:56px; height:56px; }
  .pdf-viewer iframe{ height:min(72vh,560px); }
  .lesson{ padding:.8rem .9rem; gap:.7rem; }
  .lesson-num{ width:30px; height:30px; font-size:.82rem; }
  .lesson-title{ font-size:1.05rem; }
  .lesson-play{ display:none; }

  /* about */
  .about-hero{ padding:4.5rem 1.2rem 3.5rem; }
  .about-portrait{ width:150px; height:150px; }
  .about-body{ padding:3rem 1.15rem 1.5rem; }
  .bio-block p{ font-size:1.05rem; line-height:1.95; }

  /* search overlay */
  .search-overlay{ padding:7vh .8rem 1rem; }
  .search-panel{ border-radius:12px; }
  .search-field input{ font-size:1.05rem; }
  .sr-title{ font-size:1.1rem; }

  /* footer stacks */
  .footer-inner{ grid-template-columns:1fr; gap:2rem; padding:3rem 1.2rem 2rem; }
  .footer-brand .brand-mark{ width:80px; height:80px; }
}
@media (max-width:360px){
  .brand-mark{ width:42px; height:42px; }
  .icon-btn,.search-trigger,.ask-btn{ width:34px; height:34px; }
  .header-actions{ gap:.3rem; }
}