/*
Theme Name: Dakhane Noor
Theme URI: https://dakhane.com/
Author: Omar Dakhane
Description: Custom animated RTL theme for the site of Prof. Dr. Abdelaziz Dakhane. Midnight and gold, Islamic geometric ornament, self-drawing rosettes, golden dust, scroll reveals. Respects prefers-reduced-motion.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: dakhane-noor
Copyright: © Omar Dakhane
*/

:root {
	--ink: #080b10;
	--ink-2: #0e141c;
	--ink-3: #141c27;
	--emerald: #0d3b32;
	--emerald-2: #12594a;
	--gold: #d4a64a;
	--gold-2: #f3d58a;
	--gold-3: #9c7426;
	--parch: #f5ecd7;
	--parch-2: #ebdcb8;
	--sepia: #2b2116;
	--text: #e9e2d0;
	--muted: #a9a08b;
	--line: rgba(212, 166, 74, .28);
	--radius: 18px;
	--f-body: "Amiri", "Traditional Arabic", serif;
	--f-head: "Reem Kufi", "Amiri", sans-serif;
	--f-cal: "Scheherazade New", "Amiri", serif; /* 2026-10-13: was Aref Ruqaa (Omar chose Scheherazade New) */
	--ease: cubic-bezier(.22, .8, .2, 1);
	--pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23d4a64a' stroke-opacity='.16' stroke-width='1'%3E%3Cpath d='M60 20 72 48 100 60 72 72 60 100 48 72 20 60 48 48Z'/%3E%3Crect x='32' y='32' width='56' height='56' transform='rotate(45 60 60)'/%3E%3Ccircle cx='0' cy='0' r='18'/%3E%3Ccircle cx='120' cy='0' r='18'/%3E%3Ccircle cx='0' cy='120' r='18'/%3E%3Ccircle cx='120' cy='120' r='18'/%3E%3Cpath d='M0 60h20M100 60h20M60 0v20M60 100v20'/%3E%3C/g%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* 2026-10-11 sideways-scroll fix: nothing may widen the page (clip does not create a scroll container) */
/* both html and body must be clip: hidden on body + non-visible html would turn body into its own
   scroll container and break window scrolling. "html body" outranks the body rule below. */
@supports (overflow: clip) { html, html body { overflow-x: clip; } }
body {
	margin: 0;
	background: var(--ink);
	color: var(--text);
	font-family: var(--f-body);
	font-size: 19px;
	line-height: 1.95;
	direction: rtl;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}
body.is-loading { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-2); text-decoration: none; }
a:hover { color: #fff; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { font-family: var(--f-head); font-weight: 600; line-height: 1.4; margin: 0 0 .5em; color: #fff; }
.wrap { width: min(1200px, 100% - 40px); margin-inline: auto; }
.wrap--read { width: min(860px, 100% - 32px); }
.center { text-align: center; }
.skip { position: absolute; top: -100px; right: 12px; z-index: 999; background: var(--gold); color: var(--ink); padding: 8px 16px; border-radius: 8px; }
.skip:focus { top: 12px; }
#main { position: relative; z-index: 1; }

/* ---------- shared ornaments ---------- */
.kicker { font-family: var(--f-head); color: var(--gold); letter-spacing: .02em; font-size: .95rem; margin: 0 0 .6rem; display: inline-flex; align-items: center; gap: .6rem; }
.kicker::before, .kicker::after { content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.kicker::after { transform: scaleX(-1); }
.h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
.sec-head { text-align: center; margin-bottom: 3rem; }
.shimmer {
	background: linear-gradient(100deg, var(--gold-3) 0%, var(--gold) 20%, #fff6d8 38%, var(--gold-2) 50%, var(--gold) 64%, var(--gold-3) 100%);
	background-size: 250% 100%;
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
	animation: shimmer 6s linear infinite;
}
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -100% 0; } }

.divider { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 1rem auto 0; }
.divider--start { justify-content: flex-start; }
.divider::before, .divider::after { content: ""; height: 1px; width: min(140px, 22vw); background: linear-gradient(90deg, transparent, var(--gold)); }
.divider::after { transform: scaleX(-1); }
.divider .dkn-star { width: 26px; height: 26px; }

.dkn-star, .dkn-rosette { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; }
.dkn-star path, .dkn-star rect { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.2s var(--ease) forwards; }
.dkn-star rect:nth-of-type(1) { animation-delay: .2s; }
.dkn-star rect:nth-of-type(2) { animation-delay: .4s; }
.dkn-rosette { stroke-width: 1.1; }
.dkn-rosette path, .dkn-rosette circle { stroke-dasharray: 1; stroke-dashoffset: 1; }
.dkn-rosette.is-drawn path, .dkn-rosette.is-drawn circle, .is-in .dkn-rosette path, .is-in .dkn-rosette circle { animation: draw 3.2s var(--ease) forwards; animation-delay: calc(var(--i, 0) * .22s); }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spinr { to { transform: rotate(-360deg); } }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1.1s var(--ease), filter 1s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); filter: blur(6px); }
.reveal.is-in { opacity: 1; transform: none; filter: none; }
.reveal--zoom { transform: scale(.88); }

/* buttons */
.btn {
	position: relative; display: inline-flex; align-items: center; gap: .55rem;
	font-family: var(--f-head); font-size: 1.05rem; padding: .85rem 2rem; border-radius: 999px;
	overflow: hidden; isolation: isolate; transition: transform .4s var(--ease), box-shadow .4s var(--ease), color .3s;
	border: 1px solid var(--gold); cursor: pointer;
}
.btn .dkn-ico { width: 20px; height: 20px; }
.btn--gold { background: linear-gradient(135deg, var(--gold-2), var(--gold) 45%, var(--gold-3)); color: #1b1307; box-shadow: 0 10px 34px -10px rgba(212, 166, 74, .7); }
.btn--gold::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .65) 50%, transparent 70%); transform: translateX(120%); transition: transform .9s var(--ease); }
.btn--gold:hover { color: #1b1307; transform: translateY(-3px); box-shadow: 0 18px 44px -12px rgba(243, 213, 138, .85); }
.btn--gold:hover::after { transform: translateX(-120%); }
.btn--ghost { background: rgba(8, 11, 16, .35); color: var(--gold-2); backdrop-filter: blur(6px); }
.btn--ghost::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.btn--ghost:hover { color: var(--ink); transform: translateY(-3px); }
.btn--ghost:hover::before { transform: scaleX(1); transform-origin: left; }

.dkn-ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- loader ---------- */
#dkn-loader { position: fixed; inset: 0; z-index: 1000; background: radial-gradient(circle at 50% 45%, #121a24, var(--ink) 70%); display: grid; place-items: center; transition: opacity .9s var(--ease), visibility .9s; }
#dkn-loader.is-done { opacity: 0; visibility: hidden; }
.dkn-loader__in { text-align: center; }
.dkn-loader__star { width: 96px; height: 96px; margin: 0 auto 1rem; animation: spin 9s linear infinite; filter: drop-shadow(0 0 12px rgba(212, 166, 74, .6)); }
.dkn-loader__star path, .dkn-loader__star rect { animation-duration: 1.4s; }
.dkn-loader__name { font-family: var(--f-head); font-weight: 600; font-size: 1.5rem; color: var(--gold-2); opacity: 0; animation: fadeup 1s .5s var(--ease) forwards; }
@keyframes fadeup { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- ambient layers ---------- */
#dkn-dust { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; mix-blend-mode: screen; }
.dkn-glow { position: fixed; z-index: 0; width: 520px; height: 520px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(212, 166, 74, .13), transparent 62%); transform: translate(-50%, -50%); left: -600px; top: -600px; transition: opacity .6s; }
.dkn-progress { position: fixed; top: 0; inset-inline: 0; height: 3px; z-index: 60; pointer-events: none; }
.dkn-progress span { display: block; height: 100%; width: 100%; transform-origin: right; transform: scaleX(0); background: linear-gradient(90deg, var(--gold-3), var(--gold-2), var(--gold)); box-shadow: 0 0 12px var(--gold); }

/* ---------- header ---------- */
.site-head { position: fixed; top: 0; inset-inline: 0; z-index: 50; transition: background .5s, padding .5s, box-shadow .5s, transform .5s var(--ease); padding: 18px 0; }
.admin-bar .site-head { top: 32px; }
.site-head.is-scrolled { background: rgba(8, 11, 16, .78); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px); padding: 10px 0; box-shadow: 0 1px 0 var(--line), 0 18px 40px -20px rgba(0, 0, 0, .8); }
.site-head.is-hidden { transform: translateY(-110%); }
.site-head__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; color: #fff; min-width: 0; }
.brand__star { width: 38px; height: 38px; flex: none; animation: spin 24s linear infinite; }
/* 2026-10-11: header name uses the banner font (Reem Kufi 600) instead of Aref Ruqaa (Omar) */
.brand__name { font-family: var(--f-head); font-weight: 600; line-height: 1.5; font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: linear-gradient(90deg, var(--gold-2), #fff, var(--gold-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.nav__list { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav__list a { position: relative; display: block; padding: 8px 13px; font-family: var(--f-head); font-size: .98rem; color: var(--text); transition: color .3s; }
.nav__list a::after { content: ""; position: absolute; inset-inline: 13px; bottom: 2px; height: 1px; background: var(--gold); transform: scaleX(0); transition: transform .45s var(--ease); }
.nav__list a:hover, .nav__list .current-menu-item > a { color: var(--gold-2); }
.nav__list a:hover::after, .nav__list .current-menu-item > a::after { transform: scaleX(1); }
.burger { display: none; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 12px; background: rgba(8, 11, 16, .5); position: relative; cursor: pointer; z-index: 70; }
.burger span { position: absolute; right: 12px; left: 12px; height: 1.5px; background: var(--gold-2); transition: transform .45s var(--ease), opacity .3s; }
.burger span:nth-child(1) { top: 16px; } .burger span:nth-child(2) { top: 22px; } .burger span:nth-child(3) { top: 28px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* 2026-10-11 menu flicker fix: fully opaque, own compositing layer, isolated paint, no scroll chaining.
   Circle now opens from the burger (left in RTL). Design unchanged. */
.mnav { position: fixed; inset: 0; z-index: 45; background: #080b10; display: grid; place-items: center; clip-path: circle(0 at 44px 40px); -webkit-clip-path: circle(0 at 44px 40px); transition: clip-path .8s var(--ease), -webkit-clip-path .8s var(--ease); overflow: hidden; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: clip-path; contain: layout paint; isolation: isolate; overscroll-behavior: contain; touch-action: pan-y; }
.mnav.is-open { clip-path: circle(150% at 44px 40px); -webkit-clip-path: circle(150% at 44px 40px); }
/* while the menu is open: the page behind is locked and its animations pause (they resume on close) */
html.nav-lock { overflow: hidden; }
.nav-open #dkn-dust, .nav-open .dkn-glow { visibility: hidden; }
.nav-open #main *, .nav-open .site-foot *, .nav-open .brand__star, .nav-open .to-top { animation-play-state: paused !important; }
.nav-open .site-head { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; transform: none !important; }
.mnav[hidden] { display: grid; visibility: hidden; }
.mnav.is-open[hidden], .mnav.is-open { visibility: visible; }
.mnav__pattern { position: absolute; inset: 0; background: var(--pattern); opacity: .6; }
.mnav__rosette { position: absolute; width: 140vw; max-width: 760px; opacity: .2; animation: spin 80s linear infinite; }
.mnav__list { position: relative; list-style: none; margin: 0; padding: 0; text-align: center; }
.mnav__list li { opacity: 0; transform: translateY(20px); transition: opacity .5s, transform .6s var(--ease); }
.mnav.is-open .mnav__list li { opacity: 1; transform: none; }
.mnav.is-open .mnav__list li:nth-child(2) { transition-delay: .06s; } .mnav.is-open .mnav__list li:nth-child(3) { transition-delay: .12s; }
.mnav.is-open .mnav__list li:nth-child(4) { transition-delay: .18s; } .mnav.is-open .mnav__list li:nth-child(5) { transition-delay: .24s; }
.mnav.is-open .mnav__list li:nth-child(6) { transition-delay: .3s; } .mnav.is-open .mnav__list li:nth-child(7) { transition-delay: .36s; }
.mnav__list a { display: block; padding: 10px 20px; font-family: var(--f-head); font-size: 1.45rem; color: var(--text); }
.mnav__list .current-menu-item a, .mnav__list a:hover { color: var(--gold-2); }

/* ---------- hero ---------- */
.hero { position: relative; min-height: max(100vh, 820px); min-height: max(100svh, 820px); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; background: #050608; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; animation: kenburns 26s ease-in-out infinite alternate; transform-origin: 50% 30%; }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.12) translateY(-1.5%); } }
.hero__media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 38%, transparent 30%, rgba(5, 6, 8, .55) 70%, rgba(5, 6, 8, .95) 100%), linear-gradient(0deg, var(--ink) 2%, transparent 42%); }
.hero__sweep { position: absolute; inset: -20%; background: linear-gradient(105deg, transparent 38%, rgba(255, 214, 130, .22) 48%, rgba(255, 240, 200, .32) 50%, rgba(255, 214, 130, .22) 52%, transparent 62%); mix-blend-mode: soft-light; animation: sweep 7s 2.2s ease-in-out infinite; transform: translateX(-70%); }
@keyframes sweep { 0% { transform: translateX(70%); } 55%, 100% { transform: translateX(-70%); } }
.hero__frame { position: absolute; inset: 18px; width: calc(100% - 36px); height: calc(100% - 36px); z-index: -1; fill: none; stroke: var(--gold); stroke-opacity: .55; stroke-width: 1; pointer-events: none; }
.hero__frame rect { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 3.4s 1.2s var(--ease) forwards; }
.hero__copy { text-align: center; padding: 0 20px 110px; max-width: 980px; }
.hero__copy > * { opacity: 0; animation: fadeup 1.2s var(--ease) forwards; }
.hero__kicker { animation-delay: 1.6s !important; }
.hero__title { font-family: var(--f-head); font-weight: 600; font-size: clamp(1.5rem, 2.8vw, 2.3rem); line-height: 1.5; margin: 0 0 .4rem; animation-delay: 1.9s !important; }
.hero__title .shimmer { filter: drop-shadow(0 0 18px rgba(212, 166, 74, .35)); }
.hero__sub { font-family: var(--f-head); color: var(--text); font-size: clamp(1rem, 2vw, 1.3rem); min-height: 2em; margin: 0 0 1.8rem; animation-delay: 2.2s !important; }
.hero__sub::after { content: "|"; color: var(--gold); margin-inline-start: 2px; animation: blink 1s steps(1) infinite; }
.hero__sub.is-typed::after { content: ""; }
@keyframes blink { 50% { opacity: 0; } }
.hero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; animation-delay: 2.5s !important; }
.hero__scroll { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); width: 26px; height: 42px; border: 1.5px solid var(--gold); border-radius: 20px; opacity: .8; }
.hero__scroll span { position: absolute; top: 8px; left: 50%; width: 4px; height: 8px; margin-left: -2px; border-radius: 4px; background: var(--gold-2); animation: wheel 1.8s infinite; }
@keyframes wheel { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* ---------- verse ---------- */
.verse { position: relative; padding: 120px 0; text-align: center; overflow: hidden; background: radial-gradient(ellipse at center, var(--emerald) 0%, #08201b 45%, var(--ink) 80%); }
.verse__pattern, .page-hero__pattern, .ijaz__pattern, .fb-cta__pattern { position: absolute; inset: 0; background: var(--pattern); animation: drift 60s linear infinite; mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%); }
@keyframes drift { to { background-position: 240px 120px; } }
.verse__rosette { position: absolute; top: 50%; left: 50%; width: min(620px, 120vw); margin: calc(min(620px, 120vw) / -2) 0 0 calc(min(620px, 120vw) / -2); opacity: .35; animation: spin 120s linear infinite; }
.verse__in { position: relative; }
.verse__text { font-family: var(--f-body); font-size: clamp(2.2rem, 6vw, 4.2rem); color: var(--gold-2); margin: 0; text-shadow: 0 0 30px rgba(243, 213, 138, .35); }
.verse__ref { font-family: var(--f-head); color: var(--muted); margin: .6rem 0 0; font-size: 1rem; }

/* ---------- stats ---------- */
.stats { position: relative; padding: 0; margin-top: -1px; background: linear-gradient(180deg, var(--ink), var(--ink-2)); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--radius); background: rgba(14, 20, 28, .7); backdrop-filter: blur(8px); transform: translateY(-50%); box-shadow: 0 30px 60px -30px #000; }
.stat { text-align: center; padding: 30px 12px; position: relative; }
.stat + .stat::before { content: ""; position: absolute; right: 0; top: 22%; bottom: 22%; width: 1px; background: linear-gradient(transparent, var(--gold), transparent); }
.stat b { display: block; font-family: var(--f-head); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: var(--gold-2); line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-family: var(--f-head); font-size: .95rem; }

/* ---------- intro ---------- */
/* overflow hidden: the rotating portrait rosette's corners reached ~90px past the screen on phones */
.intro { padding: 30px 0 70px; background: var(--ink-2); overflow: hidden; }
.intro__grid, .bio-hero__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 70px; align-items: center; }
.intro__portrait { position: relative; margin: 0; aspect-ratio: 4/5; transform-style: preserve-3d; }
.intro__arch { position: absolute; inset: 0; border-radius: 999px 999px 18px 18px; overflow: hidden; border: 1px solid var(--gold); box-shadow: 0 0 0 10px rgba(212, 166, 74, .06), 0 40px 80px -30px #000; z-index: 1; }
.intro__arch::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 11, 16, .55), transparent 40%); }
.intro__arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: transform 1.2s var(--ease); }
.intro__portrait:hover .intro__arch img { transform: scale(1.05); }
.intro__rosette { position: absolute; width: 135%; top: 50%; left: 50%; margin: -67.5% 0 0 -67.5%; opacity: .35; animation: spin 90s linear infinite; z-index: 0; }
.mini-tl { list-style: none; margin: 1.6rem 0 2.2rem; padding: 0; border-right: 1px solid var(--line); }
.mini-tl li { position: relative; display: flex; gap: 18px; align-items: baseline; padding: 8px 22px 8px 0; }
.mini-tl li::before { content: ""; position: absolute; right: -5px; top: 22px; width: 9px; height: 9px; background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 10px var(--gold); }
.mini-tl__y { font-family: var(--f-head); color: var(--gold-2); font-weight: 700; min-width: 3.2em; }
.mini-tl__t { color: var(--text); font-size: 1.1rem; }

/* ---------- section cards ---------- */
.sections { padding: 110px 0; position: relative; background: linear-gradient(180deg, var(--ink-2), var(--ink)); }
.cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; perspective: 1000px; }
.card, .post-card, .ijaz__card {
	position: relative; display: flex; flex-direction: column; overflow: hidden; isolation: isolate;
	background: linear-gradient(160deg, rgba(20, 28, 39, .95), rgba(10, 14, 20, .95));
	border: 1px solid var(--line); border-radius: var(--radius); color: var(--text);
	transition: border-color .4s, box-shadow .5s var(--ease), transform .5s var(--ease);
	transform-style: preserve-3d;
}
.card { padding: 30px 22px 26px; min-height: 250px; }
.card::before, .post-card::before, .ijaz__card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--pattern); opacity: 0; transition: opacity .6s; }
.card:hover, .post-card:hover, .ijaz__card:hover { border-color: var(--gold); box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .9), 0 0 0 1px rgba(212, 166, 74, .35), 0 0 50px -10px rgba(212, 166, 74, .35); color: var(--text); }
.card:hover::before, .post-card:hover::before, .ijaz__card:hover::before { opacity: 1; }
.card__shine { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(243, 213, 138, .22), transparent 45%); opacity: 0; transition: opacity .4s; }
.card:hover .card__shine, .post-card:hover .card__shine, .ijaz__card:hover .card__shine { opacity: 1; }
.card__ico, .post-card__ico { position: relative; width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: 22px; color: var(--gold-2); transform: translateZ(30px); }
.card__star { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 1.2s var(--ease); }
.card:hover .card__star, .post-card:hover .card__star { transform: rotate(90deg) scale(1.08); }
.card__ico .dkn-ico, .post-card__ico .dkn-ico { width: 24px; height: 24px; }
.card__t { font-family: var(--f-head); font-size: 1.25rem; color: #fff; font-weight: 600; transform: translateZ(24px); }
.card__s { color: var(--muted); font-size: 1rem; margin-top: 4px; transform: translateZ(14px); }
.card__go { margin-top: auto; padding-top: 18px; color: var(--gold); transition: transform .4s var(--ease); }
.card:hover .card__go { transform: translateX(-8px); }

/* ---------- shelf marquee ---------- */
.shelf { padding: 110px 0; background: radial-gradient(ellipse at 50% 0%, rgba(13, 59, 50, .55), transparent 60%), var(--ink); overflow: hidden; }
.shelf__track { position: relative; padding: 30px 0 50px; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.shelf__track::after { content: ""; position: absolute; inset-inline: 0; bottom: 34px; height: 14px; background: linear-gradient(180deg, #3a2a14, #1b130a); box-shadow: 0 18px 30px -6px #000, inset 0 1px 0 rgba(243, 213, 138, .35); }
.shelf__row { display: flex; gap: 28px; width: max-content; animation: marquee 60s linear infinite; padding-inline: 14px; }
.shelf__track:hover .shelf__row { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(50%); } }
.shelf__book { position: relative; z-index: 1; width: 150px; flex: none; border-radius: 3px 8px 8px 3px; overflow: hidden; box-shadow: -8px 12px 20px -6px rgba(0, 0, 0, .8), inset 4px 0 0 rgba(255, 255, 255, .1); transition: transform .5s var(--ease), box-shadow .5s; transform-origin: bottom center; }
.shelf__book img { width: 100%; aspect-ratio: 2/3; object-fit: cover; }
.shelf__book:hover { transform: translateY(-18px) rotate(-2deg) scale(1.06); box-shadow: 0 30px 40px -10px #000, 0 0 30px rgba(212, 166, 74, .35); }

/* ---------- posts ---------- */
.latest { padding: 110px 0; background: var(--ink-2); }
.latest--page { padding-top: 70px; }
.posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 420px)); justify-content: center; gap: 22px; perspective: 1000px; }
.post-card { padding: 30px 28px; }
.post-card__cat { font-family: var(--f-head); font-size: .85rem; color: var(--gold); margin-bottom: 6px; }
.post-card__t { font-size: 1.3rem; line-height: 1.6; }
.post-card__x { color: var(--muted); margin: 0 0 18px; font-size: 1.02rem; }
.post-card__more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--gold-2); font-family: var(--f-head); }
.post-card__more .dkn-ico { width: 18px; height: 18px; transition: transform .4s var(--ease); }
.post-card:hover .post-card__more .dkn-ico { transform: translateX(-6px); }
.pager { text-align: center; margin-top: 40px; font-family: var(--f-head); }
.pager .page-numbers { display: inline-block; min-width: 42px; padding: 6px 12px; margin: 3px; border: 1px solid var(--line); border-radius: 10px; }
.pager .current { background: var(--gold); color: var(--ink); }
.empty { text-align: center; color: var(--muted); }

/* ---------- facebook cta ---------- */
.fb-cta { position: relative; padding: 110px 0; text-align: center; overflow: hidden; background: linear-gradient(135deg, var(--emerald), #07201a 60%, var(--ink)); }
.fb-cta__in { position: relative; }

/* ---------- page hero ---------- */
.page-hero, .bio-hero { position: relative; padding: 190px 0 90px; text-align: center; overflow: hidden; background: radial-gradient(ellipse at 50% 30%, var(--emerald) 0%, #07201a 40%, var(--ink) 78%); }
.bio-hero { text-align: right; padding-bottom: 110px; }
.page-hero__rosette { position: absolute; top: 50%; left: 50%; width: 560px; margin: -230px 0 0 -280px; opacity: .3; animation: spin 140s linear infinite; }
.page-hero__in { position: relative; }
.page-hero__title { font-family: var(--f-cal); font-weight: 700; font-size: clamp(2.2rem, 6vw, 4rem); margin: 0; }

/* ---------- timeline ---------- */
.tl-sec { padding: 110px 0; background: var(--ink); }
.tl { position: relative; max-width: 1000px; margin: 0 auto; }
.tl__list { list-style: none; margin: 0; padding: 0; }
.tl__line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: rgba(212, 166, 74, .15); }
.tl__line span { position: absolute; inset: 0; transform-origin: top; transform: scaleY(var(--p, 0)); background: linear-gradient(180deg, var(--gold-2), var(--gold), var(--gold-3)); box-shadow: 0 0 14px var(--gold); }
.tl__item { position: relative; width: 50%; padding: 0 52px 46px; }
/* RTL: --a sits in the right half (line on its left edge), --b in the left half */
.tl__item--b { margin-right: 50%; }
.tl__node { position: absolute; top: 10px; width: 40px; height: 40px; background: var(--ink); border-radius: 50%; display: grid; place-items: center; z-index: 1; }
.tl__node .dkn-star { width: 34px; height: 34px; filter: drop-shadow(0 0 8px var(--gold)); }
.tl__item--a .tl__node { left: -20px; }
.tl__item--b .tl__node { right: -20px; }
.tl__card { position: relative; padding: 26px 28px; background: linear-gradient(160deg, var(--ink-3), var(--ink-2)); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .4s, box-shadow .4s; }
.tl__card:hover { border-color: var(--gold); box-shadow: 0 0 40px -12px rgba(212, 166, 74, .45); }
.tl__year { font-family: var(--f-head); font-size: 2.4rem; font-weight: 700; line-height: 1; display: block; margin-bottom: 10px; background: linear-gradient(90deg, var(--gold-2), var(--gold-3)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.tl__card h3 { font-size: 1.3rem; }
.tl__card p { margin: 0; color: var(--text); font-size: 1.05rem; }

/* ---------- ijazat ---------- */
.ijaz { position: relative; padding: 110px 0 130px; overflow: hidden; background: radial-gradient(ellipse at 50% 50%, rgba(13, 59, 50, .7), var(--ink) 70%); }
.ijaz__chain { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; perspective: 1000px; }
.ijaz__links { position: absolute; top: 46px; left: 6%; right: 6%; width: 88%; height: 30px; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; z-index: 0; opacity: .8; }
.ijaz__chain.is-in .ijaz__links, .ijaz__links.is-in { animation: draw 3s .4s var(--ease) forwards; }
.ijaz__card { padding: 30px 24px; text-align: center; align-items: center; z-index: 1; }
.ijaz__seal { position: relative; width: 74px; height: 74px; display: grid; place-items: center; margin-bottom: 18px; background: var(--ink); border-radius: 50%; }
.ijaz__seal .dkn-star { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 30s linear infinite; }
.ijaz__seal b { font-family: var(--f-head); font-size: 1.5rem; color: var(--gold-2); }
.ijaz__card h3 { font-size: 1.15rem; color: var(--gold-2); }
.ijaz__card p { margin: 0; font-size: 1.02rem; color: var(--text); }

/* ---------- books ---------- */
.books { padding: 70px 0 110px; background: var(--ink); }
.books__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 46px 30px; }
.book { background: none; border: 0; padding: 0; cursor: pointer; text-align: center; display: flex; flex-direction: column; align-items: center; perspective: 900px; }
.book__3d { position: relative; display: block; width: 78%; aspect-ratio: 2/3; transform-style: preserve-3d; transform: rotateY(-14deg); transition: transform .7s var(--ease); border-radius: 3px 8px 8px 3px; box-shadow: -18px 22px 30px -10px rgba(0, 0, 0, .85); }
.book:hover .book__3d, .book:focus-visible .book__3d { transform: rotateY(0) translateY(-10px) scale(1.04); }
.book__cover { width: 100%; height: 100%; object-fit: cover; border-radius: 3px 8px 8px 3px; }
.book__spine { position: absolute; top: 0; bottom: 0; right: 100%; width: 22px; transform-origin: right; transform: rotateY(-90deg); background: linear-gradient(90deg, #3d2b12, #6d4f1f, #3d2b12); }
.book__glare { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .3) 50%, transparent 60%) no-repeat; background-size: 300% 100%; background-position: 100% 0; transition: background-position 1.1s var(--ease); pointer-events: none; }
.book:hover .book__glare { background-position: 0 0; }
.book__t { margin-top: 22px; font-family: var(--f-head); font-size: 1.05rem; color: #fff; line-height: 1.6; }
.book__m { color: var(--muted); font-size: .95rem; }
.books__note { text-align: center; margin: 70px auto 0; max-width: 760px; color: var(--gold-2); font-size: 1.2rem; padding: 26px 30px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(13, 59, 50, .25); }

/* modal */
.book-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.book-modal[hidden] { display: none; }
.book-modal__back { position: absolute; inset: 0; background: rgba(4, 6, 9, .82); backdrop-filter: blur(8px); animation: fade .4s; }
@keyframes fade { from { opacity: 0; } }
.book-modal__box { position: relative; display: grid; grid-template-columns: 320px 1fr; gap: 36px; align-items: center; width: min(900px, 100%); max-height: 92vh; overflow: auto; padding: 36px; background: linear-gradient(160deg, var(--ink-3), var(--ink)); border: 1px solid var(--gold); border-radius: 22px; box-shadow: 0 0 80px -20px rgba(212, 166, 74, .5); animation: pop .6s var(--ease); }
@keyframes pop { from { opacity: 0; transform: scale(.9) translateY(20px); } }
.book-modal__box { scrollbar-width: thin; scrollbar-color: var(--gold-3) transparent; }
.book-modal__cover img { width: auto; max-width: 100%; max-height: 72vh; margin: 0 auto; border-radius: 4px 10px 10px 4px; box-shadow: -14px 20px 30px -10px #000; }
.book-modal__info h3 { font-size: 1.6rem; color: var(--gold-2); }
.book-modal__info dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 18px 0 0; }
.book-modal__info dt { color: var(--muted); font-family: var(--f-head); }
.book-modal__info dd { margin: 0; }
.book-modal__x { position: absolute; top: 12px; left: 14px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--gold-2); font-size: 1.6rem; line-height: 1; cursor: pointer; }

/* ---------- reading / manuscript ---------- */
.reading { padding: 70px 0 110px; background: var(--ink); }
.manuscript { position: relative; padding: 70px clamp(22px, 6vw, 80px) 50px; margin-bottom: 50px; background: radial-gradient(ellipse at 50% 0%, #fbf4e2, var(--parch) 50%, var(--parch-2)); color: var(--sepia); border-radius: 6px; box-shadow: 0 0 0 10px #0f1620, 0 0 0 11px var(--gold-3), 0 50px 90px -40px #000; }
.manuscript::before { content: ""; position: absolute; inset: 16px; border: 1px solid rgba(156, 116, 38, .45); border-radius: 3px; pointer-events: none; }
.manuscript__corner { position: absolute; width: 44px; height: 44px; background: var(--parch); }
.manuscript__corner .dkn-star { width: 100%; height: 100%; stroke: var(--gold-3); }
.manuscript__corner--a { top: -6px; right: -6px; } .manuscript__corner--b { bottom: -6px; left: -6px; }
.manuscript__basmala { text-align: center; font-family: var(--f-cal); font-size: 1.9rem; color: var(--gold-3); margin: 0 0 30px; }
.manuscript .prose { font-size: 1.2rem; line-height: 2.15; }
.manuscript .prose p { margin: 0 0 1.1em; text-align: justify; }
.manuscript .prose strong { color: #6b4d12; font-family: var(--f-head); font-weight: 600; font-size: 1.3rem; display: inline-block; }
.manuscript__foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(156, 116, 38, .35); font-family: var(--f-head); color: #7a6440; font-size: .95rem; }
.prose { color: inherit; }
.reading > .wrap > .prose { color: var(--text); }

/* ---------- soon ---------- */
.soon { padding: 60px 0 120px; background: var(--ink); text-align: center; }
.soon__in { max-width: 720px; }
.soon__lamp { position: relative; width: 240px; height: 240px; margin: 0 auto 30px; display: grid; place-items: center; }
.soon__rosette { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 40s linear infinite; }
.soon__flame { width: 22px; height: 34px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 50% 70%, #fff6d8, var(--gold-2) 35%, var(--gold) 60%, transparent 72%); box-shadow: 0 0 40px 12px rgba(243, 213, 138, .45); animation: flicker 2.4s ease-in-out infinite; }
@keyframes flicker { 0%, 100% { transform: scale(1) rotate(-2deg); opacity: 1; } 30% { transform: scale(1.08, .94) rotate(2deg); } 60% { transform: scale(.95, 1.06) rotate(-1deg); opacity: .85; } }
.soon__msg { color: var(--muted); font-size: 1.2rem; margin: 0 0 30px; }

/* ---------- footer ---------- */
.site-foot { position: relative; z-index: 1; background: #05070a; padding: 0 0 40px; text-align: center; overflow: hidden; }
.site-foot__band { height: 70px; background: var(--pattern) center / 70px 70px; opacity: .9; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); animation: drift 50s linear infinite; }
.site-foot__in { padding-top: 50px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.site-foot__star { width: 56px; height: 56px; margin: 0 auto 8px; animation: spin 30s linear infinite; }
.site-foot__name { font-family: var(--f-head); font-weight: 600; font-size: 1.6rem; color: var(--gold-2); margin: 0; }
.site-foot__nav { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin: 0; padding: 0; }
.site-foot__nav a { color: var(--muted); font-family: var(--f-head); font-size: .95rem; }
.site-foot__nav a:hover { color: var(--gold-2); }
.fb-btn { display: inline-flex; align-items: center; gap: 10px; padding: 10px 22px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); font-family: var(--f-head); transition: border-color .3s, background .3s; }
.fb-btn:hover { border-color: var(--gold); background: rgba(212, 166, 74, .08); color: var(--gold-2); }
.site-foot__copy { margin: 10px 0 0; color: #7d7564; font-size: .95rem; }
.to-top { position: fixed; bottom: 22px; left: 22px; z-index: 40; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(8, 11, 16, .8); border: 1px solid var(--gold); color: var(--gold-2); opacity: 0; transform: translateY(20px); transition: opacity .4s, transform .4s var(--ease); }
.to-top .dkn-ico { transform: rotate(90deg); }
.to-top.is-on { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
	.cards { grid-template-columns: repeat(3, 1fr); }
	.ijaz__chain { grid-template-columns: repeat(2, 1fr); }
	.ijaz__links { display: none; }
	.books__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
	.nav { display: none; }
	.burger { display: block; }
	.intro__grid, .bio-hero__grid { grid-template-columns: 1fr; gap: 50px; }
	.intro__portrait { max-width: 380px; width: 82%; margin: 0 auto; }
	.bio-hero { text-align: center; }
	.divider--start { justify-content: center; }
	.stats__grid { grid-template-columns: repeat(2, 1fr); transform: translateY(-30%); }
	.stat:nth-child(3)::before { display: none; }
	.tl__line { left: auto; right: 20px; }
	.tl__item, .tl__item--a, .tl__item--b { width: 100%; margin: 0; padding: 0 64px 34px 0; }
	.tl__item--a .tl__node, .tl__item--b .tl__node { right: 0; left: auto; }
	.book-modal__box { grid-template-columns: 1fr; text-align: center; }
	.book-modal__cover { max-width: 240px; margin: 0 auto; }
	.book-modal__info dl { justify-content: center; }
}
@media (max-width: 700px) {
	body { font-size: 18px; }
	/* 2026-10-11 mobile fix: whole calligraphy visible (170vw, was 210vw and clipped), image fades out
	   instead of ending in a hard line, no gold frame running through the text, hero sized to the screen */
	.hero { align-items: flex-end; min-height: 100vh; min-height: 100svh; }
	.hero__media img { position: absolute; left: 50%; top: 70px; width: 170vw; max-width: none; height: auto; object-fit: initial; transform-origin: 50% 45%; animation: kenburns-m 26s ease-in-out infinite alternate; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 98%); mask-image: linear-gradient(180deg, #000 62%, transparent 98%); }
	@keyframes kenburns-m { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.05); } }
	.hero__media::after { background: radial-gradient(ellipse at 50% 30%, transparent 35%, rgba(5, 6, 8, .6) 75%), linear-gradient(0deg, var(--ink) 30%, transparent 60%); }
	.hero__frame { display: none; }
	.hero__copy { padding: 0 18px 84px; }
	.hero__kicker { font-size: .78rem; }
	.hero__title { font-size: 1.45rem; }
	.hero__sub { font-size: .98rem; min-height: 3em; margin-bottom: 1.4rem; }
	.hero__cta .btn { padding: .75rem 1.5rem; font-size: .98rem; }
	.hero__scroll { bottom: 22px; }
	.page-hero__rosette { width: min(560px, 125vw); margin: 0; transform: translate(-50%, -50%); opacity: .14; animation: none; }
	.verse__rosette { opacity: .18; }
	.verse { padding: 80px 0 120px; }
	.verse__text { font-size: 2.1rem; }
	.stats__grid { transform: translateY(-25%); }
	.stat { padding: 22px 8px; }
	.stat span { font-size: .85rem; }
	.intro { padding-top: 0; }
	.to-top { width: 42px; height: 42px; bottom: 16px; left: 16px; }
	.brand__name { font-size: .95rem; }
	.brand__star { width: 32px; height: 32px; }
	.cards { grid-template-columns: 1fr 1fr; gap: 12px; }
	.card { padding: 22px 16px; min-height: 200px; }
	.card:last-child { grid-column: 1 / -1; }
	.card__t { font-size: 1.08rem; }
	.ijaz__chain { grid-template-columns: 1fr; }
	.books__grid { grid-template-columns: 1fr 1fr; gap: 34px 16px; }
	.book__t { font-size: .95rem; }
	.shelf__book { width: 112px; }
	.posts { grid-template-columns: 1fr; }
	.verse { padding: 90px 0; }
	.sections, .shelf, .latest, .fb-cta, .tl-sec, .ijaz { padding: 80px 0; }
	.page-hero, .bio-hero { padding: 140px 0 70px; }
	.manuscript .prose p { text-align: right; }
	.dkn-glow { display: none; }
}
@media (hover: none) { .dkn-glow { display: none; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
	.reveal { opacity: 1; transform: none; filter: none; }
	.shelf__row { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
	#dkn-dust, .dkn-glow { display: none; }
}

/* ---------- 2026-10-13 resume update: records, drawn covers, ranks, award, teaching, folds ---------- */
.wrap--rec { width: min(1040px, 100% - 40px); }
.recs { position: relative; padding: 90px 0; background: var(--ink); }
.recs--alt { background: radial-gradient(ellipse at 50% 0%, rgba(13, 59, 50, .55), var(--ink) 70%); }
.recs + .recs { border-top: 1px solid rgba(212, 166, 74, .12); }
.recs__lead { text-align: center; color: var(--muted); font-size: 1.15rem; margin: 10px 0 18px; }
.h2__n { display: inline-grid; place-items: center; min-width: 1.7em; height: 1.7em; padding: 0 .35em; margin-inline-start: .3em; vertical-align: .25em; font-size: .5em; color: var(--ink); background: linear-gradient(135deg, var(--gold-2), var(--gold)); border-radius: 99px; font-variant-numeric: tabular-nums; }

/* mini statistics strip */
.mstats { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 auto 48px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(160deg, rgba(20, 28, 39, .9), rgba(10, 14, 20, .9)); width: fit-content; max-width: 100%; }
.mstat { position: relative; padding: 22px 34px; text-align: center; }
.mstat + .mstat::before { content: ""; position: absolute; right: 0; top: 24%; bottom: 24%; width: 1px; background: linear-gradient(transparent, var(--gold), transparent); }
.mstat b { display: block; font-family: var(--f-head); font-size: clamp(1.8rem, 3.4vw, 2.5rem); color: var(--gold-2); line-height: 1.2; font-variant-numeric: tabular-nums; }
.mstat span { color: var(--muted); font-family: var(--f-head); font-size: .92rem; }

/* live filter */
.rec-filter { position: relative; max-width: 560px; margin: 0 auto 30px; }
.rec-filter input { width: 100%; padding: 15px 22px 15px 70px; font: inherit; font-size: 1.05rem; color: var(--text); background: rgba(8, 11, 16, .7); border: 1px solid var(--line); border-radius: 99px; outline: none; transition: border-color .3s, box-shadow .3s; }
.rec-filter input:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(212, 166, 74, .15); }
.rec-filter__n { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--gold); font-family: var(--f-head); font-size: .9rem; font-variant-numeric: tabular-nums; }

/* numbered record list */
.rec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: none; }
.rec { position: relative; display: grid; grid-template-columns: 54px 1fr auto; gap: 18px; align-items: start; padding: 20px 22px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(160deg, rgba(20, 28, 39, .92), rgba(10, 14, 20, .92)); overflow: hidden; transition: border-color .4s, transform .5s var(--ease), box-shadow .5s var(--ease); }
.rec::after { content: ""; position: absolute; inset-block: 0; right: 0; width: 3px; background: linear-gradient(180deg, var(--gold-2), var(--gold-3)); transform: scaleY(0); transform-origin: top; transition: transform .6s var(--ease); }
.rec:hover { border-color: var(--gold); transform: translateX(-4px); box-shadow: 0 20px 40px -24px #000, 0 0 40px -16px rgba(212, 166, 74, .35); }
.rec:hover::after { transform: scaleY(1); }
.rec[hidden] { display: none; }
.rec__n { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--gold-3); font-family: var(--f-head); color: var(--gold-2); font-size: 1rem; background: radial-gradient(circle, rgba(212, 166, 74, .14), transparent 70%); font-variant-numeric: tabular-nums; }
.rec__t { margin: 0; font-family: var(--f-body); font-weight: 700; font-size: 1.18rem; line-height: 1.7; color: #fff; }
.rec__m { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.rec__m span + span::before { content: "◆"; margin-inline-end: 10px; color: var(--gold-3); font-size: .6em; vertical-align: .25em; }
.rec__y { align-self: center; padding: 4px 12px; border: 1px solid var(--line); border-radius: 99px; color: var(--gold-2); font-family: var(--f-head); font-size: .88rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* collapsible blocks */
.fold { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(8, 11, 16, .55); }
.fold summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 20px 24px; font-family: var(--f-head); font-size: 1.15rem; color: var(--gold-2); }
.fold summary::-webkit-details-marker { display: none; }
.fold__t { flex: 1; }
.fold__n { padding: 2px 12px; border-radius: 99px; background: rgba(212, 166, 74, .14); color: var(--gold-2); font-size: .9rem; font-variant-numeric: tabular-nums; }
.fold__i { width: 12px; height: 12px; border-inline-start: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg); transition: transform .4s var(--ease); }
.fold[open] .fold__i { transform: rotate(135deg); }
.fold__b { padding: 0 18px 20px; }
.fold__b .rec { padding: 16px 18px; }
.fold__b .reveal { opacity: 1; transform: none; filter: none; }

/* drawn book cover (titles that have no cover photo yet) */
.tcover { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 100%; padding: 18% 12%; text-align: center; border-radius: 3px 8px 8px 3px; overflow: hidden; background: radial-gradient(ellipse at 50% 30%, var(--emerald-2), var(--emerald) 45%, #06221c 100%); }
.tcover::before { content: ""; position: absolute; inset: 0; background: var(--pattern); background-size: 70px; opacity: .55; }
.tcover__frame { position: absolute; inset: 7%; border: 1.5px solid var(--gold); border-radius: 4px; box-shadow: inset 0 0 0 4px rgba(6, 34, 28, .9), inset 0 0 0 5px rgba(212, 166, 74, .55); }
.tcover__star { position: relative; width: 26%; height: auto; aspect-ratio: 1; color: var(--gold); }
.tcover__t { position: relative; font-family: var(--f-cal); font-size: clamp(.95rem, 1.6vw, 1.35rem); line-height: 1.6; color: var(--gold-2); text-shadow: 0 2px 8px rgba(0, 0, 0, .6); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.tcover__a { position: relative; font-family: var(--f-head); font-size: .78rem; color: var(--parch-2); opacity: .85; }
.tcover__y { position: relative; font-family: var(--f-head); font-size: .75rem; color: var(--gold); letter-spacing: .1em; }
.shelf__book .tcover { padding: 16% 10%; gap: 6px; }
.shelf__book .tcover__t { font-size: .82rem; -webkit-line-clamp: 4; }
.shelf__book .tcover__a, .shelf__book .tcover__y { font-size: .6rem; }
.book-modal__cover .tcover { width: min(300px, 100%); aspect-ratio: 2/3; height: auto; margin: 0 auto; box-shadow: -14px 20px 30px -10px #000; }
.book-modal__cover .tcover__t { font-size: 1.4rem; -webkit-line-clamp: 7; }
.book-modal__cover img[hidden] { display: none; } /* the general img rule was beating [hidden]: broken icon beside a drawn cover */
.book-modal__info .bm-note { grid-column: 1 / -1; margin-top: 6px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: .98rem; }
.books__prep { max-width: 760px; margin: 60px auto 0; padding: 24px 30px; text-align: center; border: 1px solid var(--gold-3); border-radius: var(--radius); background: linear-gradient(160deg, rgba(212, 166, 74, .1), rgba(8, 11, 16, .6)); }
.books__prep p:last-child { margin: 0; font-size: 1.2rem; color: #fff; }
.books .mstats { margin-bottom: 60px; }

/* about: title line */
.bio-hero__line { margin: 14px 0 0; font-family: var(--f-head); font-size: clamp(1rem, 1.8vw, 1.2rem); color: var(--gold-2); line-height: 1.8; }
.bio-hero__spec { margin: 6px 0 0; color: var(--muted); font-size: 1.1rem; }

/* ranks: a rising staircase */
.ranks { position: relative; padding: 110px 0; overflow: hidden; background: radial-gradient(ellipse at 50% 100%, rgba(13, 59, 50, .65), var(--ink) 70%); }
.ranks__pattern { position: absolute; inset: 0; background: var(--pattern); opacity: .35; -webkit-mask-image: radial-gradient(ellipse at 50% 60%, #000, transparent 70%); mask-image: radial-gradient(ellipse at 50% 60%, #000, transparent 70%); }
.ranks__steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; align-items: end; }
.rank { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 24px 16px 22px; min-height: calc(170px + var(--s) * 34px); text-align: center; justify-content: flex-end; border: 1px solid var(--line); border-radius: 16px 16px 6px 6px; background: linear-gradient(180deg, rgba(212, 166, 74, calc(.05 + var(--s) * .035)), rgba(10, 14, 20, .95) 70%); transition: border-color .4s, transform .5s var(--ease); }
.rank::before { content: ""; position: absolute; top: -1px; inset-inline: 22%; height: 2px; background: linear-gradient(90deg, transparent, var(--gold-2), transparent); }
.rank:hover { border-color: var(--gold); transform: translateY(-6px); }
.rank__y { font-family: var(--f-head); font-size: .85rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.rank__t { font-family: var(--f-cal); font-size: 1.6rem; color: var(--gold-2); font-weight: 700; line-height: 1.4; }
.rank__u { font-size: .95rem; color: var(--muted); line-height: 1.6; }
.award { position: relative; display: flex; align-items: center; gap: 26px; max-width: 820px; margin: 60px auto 0; padding: 26px 32px; border: 1px solid var(--gold); border-radius: var(--radius); background: linear-gradient(135deg, rgba(212, 166, 74, .16), rgba(8, 11, 16, .85) 60%); box-shadow: 0 0 60px -20px rgba(212, 166, 74, .5); }
.award__seal { flex: none; position: relative; width: 84px; height: 84px; display: grid; place-items: center; }
.award__seal .dkn-star { width: 100%; height: 100%; color: var(--gold-2); animation: spin 26s linear infinite; }
.award h3 { margin: 0; font-size: 1.25rem; color: #fff; line-height: 1.7; }
.award__by { margin: 4px 0 0; color: var(--gold-2); }
.award .kicker { margin-bottom: .3rem; }

/* teaching chips */
.teach { display: grid; grid-template-columns: 3fr 2fr; gap: 26px; }
.teach__col { padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(14, 20, 28, .7); }
.teach__col h3 { margin: 0 0 18px; font-size: 1.15rem; color: var(--gold-2); display: flex; align-items: center; gap: 10px; }
.teach__col h3 span { padding: 1px 10px; border-radius: 99px; background: rgba(212, 166, 74, .14); font-size: .85rem; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 6px 14px; border: 1px solid rgba(212, 166, 74, .22); border-radius: 99px; font-size: .98rem; color: var(--text); background: rgba(8, 11, 16, .5); transition: border-color .3s, color .3s; }
.chips li:hover { border-color: var(--gold); color: var(--gold-2); }
.chips--gold li { border-color: var(--gold-3); color: var(--gold-2); background: rgba(212, 166, 74, .07); }
.chips--center { justify-content: center; max-width: 900px; margin: 0 auto; }
.now { max-width: 820px; margin: 46px auto 0; padding: 24px 28px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(13, 59, 50, .3); text-align: center; }
.now ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 12px; }
.now li { display: flex; flex-direction: column; }
.now b { color: #fff; font-weight: 700; }
.now span { color: var(--gold-2); font-size: .95rem; }

/* six ijazat: 3 + 3 */
.ijaz__chain--6 { grid-template-columns: repeat(3, 1fr); }
.ijaz__chain--6 .ijaz__links { display: none; }
.ijaz__meta { margin-top: 14px; padding: 3px 12px; border-radius: 99px; border: 1px solid var(--line); color: var(--gold); font-family: var(--f-head); font-size: .85rem; }

/* media cards */
.mcards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; perspective: 1000px; }
.mcard { padding: 30px 28px; min-height: 0; }
.mcard__y { color: var(--gold); font-family: var(--f-head); font-size: .9rem; margin-bottom: 6px; }
.mcard .card__s { font-size: 1.08rem; line-height: 1.8; }

@media (max-width: 1100px) {
	.ranks__steps { grid-template-columns: repeat(3, 1fr); }
	.ijaz__chain--6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
	.teach { grid-template-columns: 1fr; }
	.mcards { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
	.recs, .ranks { padding: 70px 0; }
	.rec { grid-template-columns: 38px 1fr; gap: 12px; padding: 16px 14px; }
	.rec__n { width: 36px; height: 36px; font-size: .88rem; }
	.rec__t { font-size: 1.05rem; }
	.rec__m { font-size: .92rem; }
	.rec__y { grid-column: 2; justify-self: start; }
	.mstat { padding: 16px 18px; }
	.mstat span { font-size: .8rem; }
	.ranks__steps { grid-template-columns: 1fr; }
	.rank { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; text-align: right; gap: 4px 12px; padding: 16px 18px; margin-inline-start: calc(var(--s) * 10px); border-radius: 12px; }
	.rank__u { flex-basis: 100%; }
	.award { flex-direction: column; text-align: center; padding: 22px 18px; }
	.ijaz__chain--6 { grid-template-columns: 1fr; }
	.fold summary { padding: 16px 16px; font-size: 1.02rem; }
	.fold__b { padding: 0 10px 14px; }
	.tcover__t { font-size: .9rem; }
}

.page-hero__title, .rank__t { letter-spacing: 0; line-height: 1.5; } /* Scheherazade New needs more line height than Ruqaa */

/* ---------- 2026-10-13 languages, loader, mobile counters ---------- */
/* loader: the star only, centred (Omar: "No need for the name on intro, just the loading symbol centered") */
.dkn-loader__in { display: grid; place-items: center; }
.dkn-loader__star { margin: 0; }

/* fonts per script. Arabic lists inside other languages keep the Arabic fonts ([lang="ar"]). */
html:is([lang="en"], [lang="fr"], [lang="es"], [lang="tr"], [lang="id"], [lang="ru"], [lang="ha"], [lang="sw"]) { --f-body: "EB Garamond", "Noto Serif", Georgia, serif; --f-head: "Cormorant Garamond", "EB Garamond", Georgia, serif; --f-cal: "Cormorant Garamond", "EB Garamond", Georgia, serif; }
html[lang="hi"] { --f-body: "Noto Serif Devanagari", serif; --f-head: "Noto Serif Devanagari", serif; --f-cal: "Noto Serif Devanagari", serif; }
html[lang="bn"] { --f-body: "Noto Serif Bengali", serif; --f-head: "Noto Serif Bengali", serif; --f-cal: "Noto Serif Bengali", serif; }
html[lang="zh-Hans"] { --f-body: "Noto Serif SC", serif; --f-head: "Noto Serif SC", serif; --f-cal: "Noto Serif SC", serif; }
html[lang="ur"] { --f-body: "Noto Nastaliq Urdu", "Amiri", serif; }
html[lang="ur"] body { line-height: 2.25; }
html[lang="ur"] :is(.nav__list a, .mnav__list a, .btn, .kicker, .card__s, .mstat span, .stat span) { font-family: "Scheherazade New", "Amiri", serif; }
[lang="ar"] { font-family: "Amiri", "Traditional Arabic", serif; }
[lang="ar"] :is(h3, .rec__t) { font-family: "Amiri", serif; }
html:not([lang="ar"]) .tcover__t { font-family: "Scheherazade New", "Amiri", serif; }
html:is([lang="en"], [lang="fr"], [lang="es"], [lang="tr"], [lang="id"], [lang="ru"], [lang="ha"], [lang="sw"]) :is(h1, h2, .page-hero__title, .hero__title, .rank__t, .brand__name, .site-foot__name) { font-weight: 700; letter-spacing: .01em; }
html:is([lang="en"], [lang="fr"], [lang="es"], [lang="tr"], [lang="id"], [lang="ru"], [lang="ha"], [lang="sw"]) body { font-size: 20px; line-height: 1.7; }
html:is([lang="hi"], [lang="bn"], [lang="zh-Hans"]) body { line-height: 1.85; }

/* left-to-right languages: mirror what was written for RTL */
[dir="ltr"] body { direction: ltr; }
[dir="ltr"] .skip { right: auto; left: 12px; }
[dir="ltr"] .btn--ghost::before { transform-origin: left; }
[dir="ltr"] .btn--ghost:hover::before { transform-origin: right; }
[dir="ltr"] .dkn-progress span { transform-origin: left; }
[dir="ltr"] .dkn-ico { transform: scaleX(-1); }
[dir="ltr"] .to-top .dkn-ico { transform: rotate(90deg); }
[dir="ltr"] .card:hover .card__go { transform: translateX(8px); }
[dir="ltr"] .post-card:hover .post-card__more .dkn-ico { transform: scaleX(-1) translateX(-6px); }
[dir="ltr"] .stat + .stat::before, [dir="ltr"] .mstat + .mstat::before { right: auto; left: 0; }
[dir="ltr"] .mini-tl { border-right: 0; border-left: 1px solid var(--line); }
[dir="ltr"] .mini-tl li { padding: 8px 0 8px 22px; }
[dir="ltr"] .mini-tl li::before { right: auto; left: -5px; }
[dir="ltr"] .shelf__row { animation-name: marquee-ltr; }
@keyframes marquee-ltr { to { transform: translateX(-50%); } }
[dir="ltr"] .bio-hero { text-align: left; }
[dir="ltr"] .tl__item--b { margin-right: 0; margin-left: 50%; }
[dir="ltr"] .tl__item--a .tl__node { left: auto; right: -20px; }
[dir="ltr"] .tl__item--b .tl__node { right: auto; left: -20px; }
[dir="ltr"] .book-modal__x { left: auto; right: 14px; }
[dir="ltr"] .rec::after { right: auto; left: 0; }
[dir="ltr"] .rec:hover { transform: translateX(4px); }
[dir="ltr"] .rec-filter input { padding: 15px 70px 15px 22px; }
[dir="ltr"] .rec-filter__n { left: auto; right: 20px; }
[dir="ltr"] .mnav { clip-path: circle(0 at calc(100% - 44px) 40px); -webkit-clip-path: circle(0 at calc(100% - 44px) 40px); }
[dir="ltr"] .mnav.is-open { clip-path: circle(150% at calc(100% - 44px) 40px); -webkit-clip-path: circle(150% at calc(100% - 44px) 40px); }
[dir="ltr"] .to-top { left: auto; right: 22px; }
/* Arabic rows inside an LTR page read right-to-left, aligned to their own start */
[dir="ltr"] .rec__b[dir="rtl"] { text-align: right; }

/* note above Arabic-only lists on other languages */
.ar-note { display: flex; align-items: center; justify-content: center; gap: 10px; margin: -8px auto 26px; color: var(--muted); font-size: .98rem; text-align: center; }
.ar-note > span { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--gold-3); color: var(--gold-2); font-size: .95rem; line-height: 1; flex: none; }
.verse__mean { margin: -.4rem auto 1rem; max-width: 640px; color: var(--parch-2); font-style: italic; font-size: 1.15rem; }
.ijaz__from { color: var(--muted); }

/* ---------- language switcher ---------- */
.site-head__end { display: flex; align-items: center; gap: 12px; flex: none; }
.lsw { display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 99px; background: rgba(8, 11, 16, .45); }
.lsw__b, .lsw__g { display: grid; place-items: center; min-width: 34px; height: 30px; padding: 0 9px; border-radius: 99px; font: 600 .78rem/1 system-ui, sans-serif; letter-spacing: .04em; color: var(--muted); border: 0; background: none; cursor: pointer; transition: color .3s, background .3s; }
.lsw__b[lang="ar"] { font: 700 1rem/1 "Amiri", serif; }
.lsw__b:hover, .lsw__g:hover { color: var(--gold-2); }
.lsw__b.is-on, .lsw__g.is-on { background: var(--gold); color: var(--ink); }
.lsw__more { position: relative; }
.lsw__g { display: flex; gap: 5px; }
.lsw__g svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.lsw__g b { font-weight: 600; font-size: .72rem; }
.lsw__list { position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 80; min-width: 200px; max-height: min(70vh, 520px); overflow: auto; margin: 0; padding: 8px; list-style: none; background: #0b1017; border: 1px solid var(--gold-3); border-radius: 14px; box-shadow: 0 24px 50px -16px #000; display: grid; gap: 2px; }
.lsw__list[hidden] { display: none; }
.lsw__list a { display: block; padding: 8px 14px; border-radius: 9px; color: var(--text); font-family: system-ui, "Noto Sans", sans-serif; font-size: .98rem; line-height: 1.5; white-space: nowrap; }
.lsw__list a[dir="rtl"] { text-align: right; font-family: "Amiri", serif; font-size: 1.1rem; }
.lsw__list a:hover { background: rgba(212, 166, 74, .12); color: var(--gold-2); }
.lsw__list a.is-on { background: var(--gold); color: var(--ink); }
/* footer copy of the switcher: open upwards, centred */
.lsw--foot .lsw__list { top: auto; bottom: calc(100% + 10px); }

/* long menus in other languages: switch to the burger earlier */
@media (max-width: 1280px) { html:not([lang="ar"]) .nav { display: none; } html:not([lang="ar"]) .burger { display: block; } }

/* ---------- counters on phones: equal columns, label wraps under its number (no dangling separators) ---------- */
@media (max-width: 700px) {
	.mstats { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); width: 100%; }
	.mstat { padding: 16px 8px; }
	.mstat b { font-size: 1.9rem; }
	.mstat span { display: block; font-size: .8rem; line-height: 1.5; text-wrap: balance; }
	.mstats--4 .mstat:nth-child(3)::before { display: none; }
	.mstats--4 .mstat:nth-child(n+3) { border-top: 1px solid rgba(212, 166, 74, .18); }
	.lsw--head .lsw__b { display: none; }
	.lsw--head .lsw__g b { display: none; } /* globe icon only: leaves room for the full name */
	.lsw--head .lsw__g { min-width: 38px; padding: 0 10px; }
	.brand { gap: 9px; } .brand__star { width: 30px; height: 30px; }
	.brand__name { white-space: normal; overflow: visible; text-overflow: clip; font-size: .9rem; line-height: 1.3; text-wrap: balance; } /* full name on two lines instead of "Dak..." */
	.lsw--head { padding: 2px; }
	.site-head__end { gap: 8px; }
	[dir="ltr"] .rank { text-align: left; }
	[dir="ltr"] .manuscript .prose p { text-align: left; }
	[dir="ltr"] .to-top { left: auto; right: 16px; }
}
@media (max-width: 900px) {
	[dir="ltr"] .tl__line { right: auto; left: 20px; }
	[dir="ltr"] .tl__item, [dir="ltr"] .tl__item--a, [dir="ltr"] .tl__item--b { margin: 0; padding: 0 0 34px 64px; }
	[dir="ltr"] .tl__item--a .tl__node, [dir="ltr"] .tl__item--b .tl__node { left: 0; right: auto; }
}
/* globe list on phones also lists Arabic, English and French (their buttons are hidden there) */
.lsw__list .is-main { display: none; }
@media (max-width: 700px) { .lsw--head .lsw__list .is-main { display: block; } }

/* 2026-10-13 desktop menu on one line. Measured before: in Arabic 4 items (السيرة الذاتية, البحوث المحكمة, الندوات و الملتقيات,
   المشاركات الإعلامية) wrapped at every width 1100-1920 px and the header name was cut with "...". Items never wrap, slightly tighter
   padding, the nav takes the free space between name and switcher. Arabic switches to the burger at 1180 px (others already at 1280). */
.nav__list a { white-space: nowrap; padding: 8px 10px; }
.nav__list a::after { inset-inline: 10px; }
.nav__list { gap: 2px; }
.site-head__in { gap: 18px; }
.nav { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
.brand { flex: 0 1 auto; }
.lsw__b, .lsw__g { min-width: 30px; padding: 0 7px; }
.lsw__g b { direction: ltr; unicode-bidi: isolate; } /* "+11", not "11+" in RTL */
@media (max-width: 1180px) { html[lang="ar"] .nav { display: none; } html[lang="ar"] .burger { display: block; } }

/* ---------- 2026-10-13 Tilawa app band (home, before the Facebook band) ---------- */
.app { position: relative; padding: 110px 0; overflow: hidden; background: radial-gradient(ellipse at 30% 50%, rgba(13, 59, 50, .85), var(--ink) 70%); border-top: 1px solid var(--line); }
.app__pattern { position: absolute; inset: 0; background: var(--pattern); opacity: .4; -webkit-mask-image: linear-gradient(90deg, #000, transparent 75%); mask-image: linear-gradient(90deg, #000, transparent 75%); }
[dir="rtl"] .app__pattern { -webkit-mask-image: linear-gradient(270deg, #000, transparent 75%); mask-image: linear-gradient(270deg, #000, transparent 75%); }
.app__in { position: relative; display: grid; grid-template-columns: 340px 1fr; gap: 70px; align-items: center; }
.app__icon { position: relative; margin: 0; width: 300px; aspect-ratio: 1; display: grid; place-items: center; justify-self: center; }
.app__rosette { position: absolute; inset: -18%; width: 136%; height: 136%; opacity: .5; animation: spin 90s linear infinite; }
.app__icon img { position: relative; width: 76%; height: auto; border-radius: 50%; box-shadow: 0 0 0 8px rgba(212, 166, 74, .12), 0 0 0 1px var(--gold), 0 30px 70px -20px #000, 0 0 80px -10px rgba(212, 166, 74, .45); transition: transform 1s var(--ease); }
.app__icon:hover img { transform: scale(1.04) rotate(-3deg); }
.app__desc { color: var(--text); font-size: 1.12rem; margin: 0 0 20px; max-width: 640px; }
.app__chips { margin-bottom: 22px; }
.app__note { display: flex; align-items: flex-start; gap: 12px; max-width: 640px; margin: 0 0 28px; padding: 14px 18px; border: 1px dashed var(--gold-3); border-radius: 14px; background: rgba(8, 11, 16, .45); color: var(--gold-2); font-size: 1.02rem; line-height: 1.8; }
.app__note-star { flex: none; width: 22px; height: 22px; margin-top: 5px; }
.app__btn .app__play { width: 18px; height: 18px; fill: currentColor; stroke: none; }
[dir="rtl"] .app__btn .app__play { transform: scaleX(-1); }
.fb-btn .dkn-ico path[d^="M5 3.5"] { fill: currentColor; stroke: none; }
@media (max-width: 900px) {
	.app__in { grid-template-columns: 1fr; gap: 40px; text-align: center; }
	.app__icon { width: 230px; }
	.app__desc, .app__note { margin-inline: auto; }
	.app__chips { justify-content: center; }
	.app__note { text-align: start; }
}
@media (max-width: 700px) { .app { padding: 80px 0; } .app__icon { width: 190px; } }
/* the LTR mirror flips arrows; logos and the play triangle inside buttons must not flip (the Facebook "f" was mirrored in LTR) */
[dir="ltr"] .btn .dkn-ico, [dir="ltr"] .fb-btn .dkn-ico { transform: none; }

/* 2026-10-13 Tilawa band centred (Omar: "put the app in the middle"): one centred column, icon on top, 3 features as gold-star items, not pills */
.app { text-align: center; background: radial-gradient(ellipse at 50% 35%, rgba(13, 59, 50, .85), var(--ink) 70%); }
.app__pattern, [dir="rtl"] .app__pattern { -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000, transparent 70%); mask-image: radial-gradient(ellipse at 50% 40%, #000, transparent 70%); }
.app__in { grid-template-columns: 1fr; gap: 34px; justify-items: center; max-width: 760px; }
.app__icon { width: 260px; }
.app__desc { margin-inline: auto; }
.app__feats { list-style: none; margin: 4px 0 30px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 34px; }
.app__feats li { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-head); font-size: 1.05rem; color: var(--gold-2); }
.app__feat-star { width: 18px; height: 18px; flex: none; }
@media (max-width: 700px) { .app__icon { width: 200px; } .app__feats { flex-direction: column; align-items: center; gap: 12px; } }

/* 2026-10-13 footer Tilawa link: small, quiet, straight to Google Play */
.foot-app { display: inline-flex; align-items: center; gap: 8px; margin-top: -8px; padding: 5px 12px 5px 6px; border-radius: 99px; color: var(--muted); font-family: var(--f-head); font-size: .85rem; line-height: 1; transition: color .3s, background .3s; }
[dir="rtl"] .foot-app { padding: 5px 6px 5px 12px; }
.foot-app img { width: 22px; height: 22px; border-radius: 50%; }
.foot-app__play { width: 10px; height: 10px; fill: currentColor; opacity: .7; }
[dir="rtl"] .foot-app__play { transform: scaleX(-1); }
.foot-app:hover { color: var(--gold-2); background: rgba(212, 166, 74, .08); }