@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Noto+Kufi+Arabic:wght@400;500;600;700&display=swap');
:root{--navy:#102b46;--ink:#152c45;--gold:#bd8a2c;--cream:#f7f1e5;--paper:#fffdf8;--muted:#6e6a61;--line:#e7ddcc}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--cream);color:var(--ink);font-family:"Noto Kufi Arabic",Arial,sans-serif;line-height:1.9}
a{color:inherit;text-decoration:none}.container{width:min(1180px,92%);margin:auto}
header{height:76px;background:rgba(255,253,248,.96);border-bottom:1px solid #ddd4c4;position:relative;top:auto;z-index:20;backdrop-filter:blur(10px)}
.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:25px}
.logo{font-family:Amiri,serif;font-size:30px;font-weight:700;white-space:nowrap}.logo small{display:block;font-family:"Noto Kufi Arabic";font-size:10px;letter-spacing:2px;text-align:center;margin-top:-9px}
nav{display:flex;gap:30px;align-items:center;font-size:14px}nav a{padding:22px 0;position:relative}nav a:hover,nav a.active{color:var(--gold)}nav a.active:after{content:"";position:absolute;bottom:11px;right:0;left:0;height:2px;background:var(--gold)}
.search{background:#eee9df;border:0;border-radius:25px;padding:11px 16px;width:205px;font-family:inherit;outline:none}
.hero{min-height:390px;position:relative;overflow:hidden;background:var(--navy);color:#fff;isolation:isolate}
.hero:before{content:"";position:absolute;z-index:-2;inset:0;background:linear-gradient(90deg,rgba(16,43,70,.08) 0%,rgba(16,43,70,.10) 30%,rgba(16,43,70,.86) 62%,rgba(16,43,70,.98) 100%)}

.hero .container{min-height:390px;display:flex;align-items:center;justify-content:flex-end}.hero-copy{width:58%;padding:35px 20px 35px 0;text-align:right}

.kicker{color:#e5bd68;font-size:18px}.hero h1{font-family:Amiri,serif;font-size:54px;line-height:1.2;margin:8px 0 0}.hero h2{font-size:21px;font-weight:500;margin:8px 0 18px;color:#e9c06a}.hero p{font-size:16px;line-height:2;max-width:590px}.btn{display:inline-block;background:var(--gold);color:#fff;padding:10px 30px;border-radius:6px;margin-top:14px;box-shadow:0 4px 10px rgba(0,0,0,.12)}.btn:hover{filter:brightness(1.07)}
.section{padding:55px 0}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.section-title{display:flex;align-items:center;gap:24px;font-family:Amiri,serif;font-size:34px}.section-title:before,.section-title:after{content:"";height:2px;width:55px;background:var(--gold)}.view-all{color:var(--gold);font-size:14px}
.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.cat{min-height:116px;border-radius:7px;overflow:hidden;position:relative;background:var(--navy);color:#fff;padding:23px 24px;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate}.cat:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,18,31,.18),rgba(4,18,31,.9));z-index:-1}.cat h3,.cat p,.cat .arrow{position:relative;z-index:1}.cat:nth-child(1){background:linear-gradient(135deg,#173a58,#102b46)}.cat:nth-child(2){background:linear-gradient(135deg,#234967,#102b46)}.cat:nth-child(3){background:linear-gradient(135deg,#36556b,#102b46)}.cat:nth-child(4){background:linear-gradient(135deg,#4b3829,#1f2e3c)}.cat:nth-child(5){background:linear-gradient(135deg,#274c54,#102b46)}.cat:nth-child(6){background:linear-gradient(135deg,#315c63,#102b46)}.cat:nth-child(7){background:linear-gradient(135deg,#4c5d48,#263746)}.cat:nth-child(8){background:linear-gradient(135deg,#5b4736,#253746)}.cat:nth-child(9){background:linear-gradient(135deg,#263d50,#102b46)}.cat h3{font-family:Amiri,serif;font-size:25px;margin:0}.cat-count{position:absolute;top:10px;right:12px;font-family:"Noto Kufi Arabic",sans-serif;font-size:10px;line-height:1.5;color:rgba(255,255,255,.78);font-weight:400;z-index:2}.cat p{font-size:12px;margin:2px 0 0;line-height:1.7;color:#eee}.arrow{position:absolute;bottom:13px;left:18px;color:#e8bd69}
.posts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.post-card{background:var(--paper);border:1px solid #eee4d4;border-radius:7px;overflow:hidden;box-shadow:0 2px 8px rgba(80,60,30,.04)}.post-card img{width:100%;height:145px;object-fit:cover}.post-body{padding:15px 16px}.post-body h3{font-family:Amiri,serif;font-size:21px;margin:0 0 5px}.post-body p{font-family:Amiri,serif;font-size:16px;line-height:1.8;margin:0 0 12px;color:#4c4a45;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;min-height:7.2em}.meta{font-size:11px;color:#8b8478;display:flex;gap:8px;justify-content:flex-start}.meta b{color:var(--gold)}
.books{display:grid;grid-template-columns:1fr 1fr;gap:22px}.book{background:var(--paper);border-radius:8px;padding:25px;display:grid;grid-template-columns:150px 1fr;gap:24px;align-items:center;border:1px solid #eee4d4}.book img{width:150px;max-height:225px;object-fit:cover;box-shadow:0 8px 18px rgba(0,0,0,.14)}.book h3{font-family:Amiri,serif;font-size:28px;margin:0}.book p{font-family:Amiri,serif;font-size:17px}.tag{display:inline-block;background:#e8d8b9;color:#6f501b;padding:3px 10px;border-radius:15px;font-size:11px}
footer{background:var(--navy);color:#eee;padding:38px 0;margin-top:30px}.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center}.footer-brand{text-align:center;font-family:Amiri,serif;font-size:29px}.footer-brand small{display:block;font-family:"Noto Kufi Arabic";font-size:10px}.footer-links{display:flex;gap:22px;font-size:13px}.social{display:flex;gap:12px;justify-content:flex-start}.social a{width:36px;height:36px;border:1px solid #aeb8c3;border-radius:50%;display:grid;place-items:center}.copy{text-align:center;font-size:11px;color:#b7c0c8;margin-top:25px}
.page-hero{background:var(--navy);color:#fff;height:207px;box-sizing:border-box;display:flex;align-items:center;padding:0}.page-hero .container{width:min(1180px,92%);margin:auto}.page-hero h1{font-family:Amiri,serif;font-size:50px;line-height:1.25;margin:0}.page-hero p{font-family:"Noto Kufi Arabic",Arial,sans-serif;font-size:16px;line-height:1.9;margin:4px 0 0;color:#d9dee3}.content{background:var(--paper);padding:35px;border-radius:10px;border:1px solid #eee4d4}.bio{font-family:Amiri,serif;font-size:21px;line-height:2.15}.about-grid{display:grid;grid-template-columns:330px 1fr;gap:40px;align-items:start}.about-photo{width:100%;border-radius:8px}
.archive-tools{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:25px}.archive-tools input,.archive-tools select{font:inherit;background:#fff;border:1px solid #d8cdbb;border-radius:6px;padding:10px 13px}.archive-list{display:grid;gap:12px}.archive-item{background:#fff;border:1px solid #eee4d4;border-radius:8px;padding:18px 20px;display:flex;justify-content:space-between;gap:20px}.archive-item h3{font-family:Amiri,serif;font-size:24px;margin:0}.archive-item p{margin:3px 0;color:#6c685f;font-family:Amiri,serif}.archive-item .meta{white-space:nowrap;align-items:center}
.article{max-width:850px;margin:auto}.article h1{font-family:Amiri,serif;font-size:48px;line-height:1.4}.article .lead{font-family:Amiri,serif;font-size:23px;color:#5b574f}.article-body{font-family:Amiri,serif;font-size:21px;line-height:2.25}.article-body p{margin:0 0 25px}
.form{display:grid;gap:15px;max-width:720px}.form label{font-size:13px}.form input,.form textarea{width:100%;font:inherit;background:#fff;border:1px solid #d8cdbb;border-radius:6px;padding:12px}.form textarea{min-height:180px;resize:vertical}
@media(max-width:900px){nav{display:none}.hero:before{background:linear-gradient(90deg,rgba(10,29,46,.76),rgba(10,29,46,.94))}.hero:after{width:100%;opacity:.42;background-position:center top}.hero-copy{width:100%;padding:30px;text-align:center}.hero h1{font-size:47px}.category-grid{grid-template-columns:1fr 1fr}.posts{grid-template-columns:1fr 1fr}.books{grid-template-columns:1fr}.about-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr;gap:20px;text-align:center}.footer-links,.social{justify-content:center}}
@media(max-width:560px){.page-hero{height:207px;padding:0;box-sizing:border-box}.category-grid,.posts{grid-template-columns:1fr}.hero{min-height:450px}.hero .container{min-height:450px}.hero-copy{padding:25px 12px}.hero h1{font-size:42px}.hero h2{font-size:17px}.hero p{font-size:15px;line-height:1.9}.search{display:none}.book{grid-template-columns:1fr}.book img{width:130px}.page-hero h1{font-size:40px}}
/* V3: literary hero scene */
.hero{min-height:370px;height:370px;position:relative;overflow:hidden;background:#11293d;color:#fff;isolation:isolate}
.hero-scene{position:absolute;inset:0;background:url("assets/images/hero-library.svg") center/cover no-repeat;z-index:-3}
.hero-scene:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,25,39,.18) 0%,rgba(9,25,39,.30) 38%,rgba(9,25,39,.80) 66%,rgba(9,25,39,.96) 100%)}
.hero-person{position:absolute;z-index:0;left:5%;bottom:-8px;width:min(34vw,410px);max-height:390px;display:flex;align-items:flex-end;pointer-events:none;filter:drop-shadow(0 16px 18px rgba(0,0,0,.28))}
.hero-person img{display:block;width:100%;height:auto}
.hero-container{position:relative;z-index:2;height:100%;display:flex;align-items:center;justify-content:flex-end}
.hero-copy{width:54%;max-width:650px;padding:18px 20px 18px 0;text-align:right;text-shadow:0 2px 16px rgba(0,0,0,.28)}
.hero h1{font-size:53px;margin:5px 0 0}.hero h2{font-size:20px;margin:5px 0 15px}.hero p{font-size:15px;line-height:2;max-width:600px;margin-right:0;margin-left:auto}.hero .btn{margin-top:10px}
@media(max-width:900px){.menu-toggle{display:block}.site-nav{display:none;position:absolute;top:76px;right:4%;left:4%;background:var(--paper);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(20,35,50,.12);padding:8px 16px;flex-direction:column;gap:0;z-index:50}.site-nav.open{display:flex}.site-nav a{padding:10px 4px;border-bottom:1px solid #eee4d4}.site-nav a:last-child{border-bottom:0}.site-nav a.active:after{display:none}.hero{height:420px;min-height:420px}.hero-scene:after{background:linear-gradient(90deg,rgba(9,25,39,.48),rgba(9,25,39,.84))}.hero-person{left:2%;width:43vw;bottom:-5px;opacity:.95}.hero-copy{width:62%;padding-right:10px}.hero h1{font-size:46px}.hero h2{font-size:18px}.hero p{font-size:14px}}
@media(max-width:560px){header{height:68px}.header-inner{gap:10px}.logo{font-size:26px}.logo small{font-size:9px}.site-nav{top:68px}.hero{height:500px;min-height:500px}.hero-scene{background-position:58% center}.hero-scene:after{background:linear-gradient(180deg,rgba(9,25,39,.72) 0%,rgba(9,25,39,.84) 48%,rgba(9,25,39,.55) 100%)}.hero-container{align-items:flex-start}.hero-copy{width:100%;padding:38px 14px 0;text-align:center}.hero-copy p{margin-right:auto;margin-left:auto}.hero-person{left:50%;transform:translateX(-50%);width:250px;bottom:-2px;opacity:.98}.hero h1{font-size:42px}.hero h2{font-size:17px}.hero p{font-size:14px;line-height:1.9}.hero .btn{margin-top:6px}}

.menu-toggle{display:none;border:0;background:transparent;color:var(--ink);font-size:25px;cursor:pointer;padding:5px 8px;font-family:inherit}.menu-toggle:focus{outline:2px solid var(--gold);outline-offset:2px}
@media(max-width:900px){.menu-toggle{display:block}}

/* V5: exact literary hero composition from the approved reference */
.hero-reference{height:auto;min-height:0;background:#102b46;overflow:hidden;padding:0;position:relative}
.hero-reference-image{position:relative;width:100%;line-height:0}
.hero-reference-image img{display:block;width:100%;height:auto;max-height:none;object-fit:contain}
.hero-reference-link{position:absolute;right:32.5%;bottom:7%;width:16%;height:13%;opacity:0;overflow:hidden;text-indent:-9999px}
@media(max-width:900px){.hero-reference-link{right:31%;width:18%;bottom:7%}}
@media(max-width:560px){.hero-reference-link{right:29%;width:22%;bottom:6%}}

/* V6 — refined reading page */
.article-header{background:var(--navy);color:#fff;padding:54px 0 48px;position:relative;overflow:hidden}
.article-header:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 20%,rgba(198,145,43,.14),transparent 32%),linear-gradient(90deg,rgba(8,27,43,.15),rgba(8,27,43,.5));pointer-events:none}
.article-head-inner{position:relative;z-index:1;max-width:950px}
.article-kicker{color:#d9a63c;font-size:14px;margin-bottom:9px}
.article-header h1{font-family:Amiri,serif;font-size:50px;line-height:1.35;margin:0 0 9px;font-weight:700}
.article-meta{display:flex;gap:10px;flex-wrap:wrap;color:#d8dee3;font-size:12px}
.article-section{padding-top:44px}
.article.content{padding:50px 62px 42px;background:#fffdf8;box-shadow:0 7px 25px rgba(60,45,20,.05)}
.article-intro{font-family:Amiri,serif;font-size:24px;line-height:2;color:#4d4941;margin:0 0 34px;padding-bottom:28px;border-bottom:1px solid #e8dfd1}
.article-body{font-family:Amiri,serif;font-size:22px;line-height:2.25;color:#2e2d2a}
.article-body p{margin:0 0 28px}
.article-footer{display:flex;justify-content:space-between;gap:20px;margin-top:44px;padding-top:22px;border-top:1px solid #e8dfd1;font-size:13px}
.article-footer a{color:#9c6d16}
@media(max-width:700px){.article-header{padding:38px 0 34px}.article-header h1{font-size:38px}.article-meta{font-size:11px}.article.content{padding:30px 22px 28px}.article-intro{font-size:20px}.article-body{font-size:20px;line-height:2.05}.article-footer{flex-direction:column}.article-section{padding-top:28px}}

/* Experimental article page — literary reading layout */
.article-hero{background:linear-gradient(120deg,#0d253d,#173c5c);color:#fff;position:relative;overflow:hidden;border-bottom:4px solid rgba(189,138,44,.75)}
.article-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 50%,rgba(189,138,44,.16),transparent 32%),linear-gradient(90deg,transparent,rgba(255,255,255,.025));pointer-events:none}
.article-hero-inner{padding:72px 0 66px;position:relative;text-align:right}
.article-kicker{color:#d6a64b;font-size:16px;margin-bottom:4px}
.article-hero h1{font-family:Amiri,serif;font-size:clamp(48px,6vw,76px);line-height:1.15;margin:0;color:#fff;font-weight:700}
.article-rule{height:2px;width:92px;background:#c69436;margin:18px 0 12px 0}
.article-hero p{margin:0;color:#dbe2e8;font-family:Amiri,serif;font-size:21px}
.article-section{padding-top:58px;padding-bottom:70px}
.article-layout{display:grid;grid-template-columns:230px minmax(0,850px);gap:38px;align-items:start;justify-content:center}
.article-side{display:grid;gap:18px;position:sticky;top:100px}
.side-card{background:rgba(255,253,248,.78);border:1px solid #e8dece;border-radius:9px;padding:20px 18px;box-shadow:0 5px 18px rgba(71,55,30,.04)}
.side-label{display:block;color:#a07a35;font-size:11px;margin-bottom:5px}
.side-card strong{display:block;font-family:Amiri,serif;font-size:29px;color:var(--ink);line-height:1.25}
.side-card p{font-family:Amiri,serif;font-size:16px;line-height:1.8;color:#6b665d;margin:5px 0 13px}
.side-card a{font-size:12px;color:var(--gold)}
.side-meta div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid #eee5d8;font-size:11px;align-items:flex-start}
.side-meta div:first-of-type{margin-top:10px}
.side-meta b{font-weight:600;color:#5e594f}.side-meta span{text-align:left;color:#777066}
.back-link{font-size:12px;color:#7b6845;padding:2px 4px}
.article-reading{padding:48px clamp(26px,4vw,62px) 52px;background:var(--paper);box-shadow:0 8px 30px rgba(65,50,28,.055)}
.reading-head{display:flex;justify-content:space-between;gap:15px;align-items:center;border-bottom:1px solid #ebe1d1;padding-bottom:15px;margin-bottom:28px;font-size:11px;color:#847d71}
.article-category{color:var(--gold);font-weight:600}.reading-date{color:#8b8478}
.article-reading h2{font-family:Amiri,serif;font-size:clamp(38px,4vw,53px);line-height:1.35;color:var(--ink);margin:0 0 32px}
.article-body{font-family:Amiri,serif;font-size:22px;line-height:2.28;color:#2d2d2a;text-align:justify}.article-symbol-image{float:left;width:25%;aspect-ratio:1/1;object-fit:contain;display:block;margin:0 18px 18px 0;border-radius:8px;shape-outside:margin-box}
.article-body p{margin:0 0 29px}
.article-body .opening{font-size:24px;line-height:2.22;color:#34322e}
.article-body blockquote{margin:40px 0;padding:22px 26px;border-right:4px solid var(--gold);background:#f8f1e4;color:#25415c;font-size:26px;line-height:1.95;font-weight:700}
.article-end{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:46px;color:#9b742c;font-family:Amiri,serif;font-size:18px}
.article-end span{height:1px;width:55px;background:#d2b47a}.article-end i{font-style:normal}
@media(max-width:900px){.article-layout{grid-template-columns:1fr;gap:22px}.article-side{position:static;grid-template-columns:1fr 1fr}.back-link{grid-column:1/-1}.article-hero-inner{padding:58px 0}.article-body{font-size:21px}.article-body .opening{font-size:23px}}
@media(max-width:560px){.article-symbol-image{width:34%;margin-right:16px;margin-left:0}.article-hero-inner{padding:48px 0 44px}.article-hero h1{font-size:45px}.article-hero p{font-size:18px}.article-side{grid-template-columns:1fr}.article-reading{padding:30px 20px 38px}.reading-head{display:block;line-height:2}.reading-date{display:block;margin-top:4px}.article-reading h2{font-size:38px;margin-bottom:25px}.article-body,.article-body .opening{font-size:20px;line-height:2.12;text-align:right}.article-body blockquote{font-size:23px;padding:18px 18px;margin:32px 0}.article-end{margin-top:34px}}

.key-inline{display:inline;background:#f8f1e4;color:#25415c;padding:2px 8px 3px;border-right:3px solid var(--gold);font-weight:700;box-decoration-break:clone;-webkit-box-decoration-break:clone;transition:background .2s}
.key-inline:hover{background:#f3e7cd}
/* V9 — article navigation and manually curated key phrase */
.reading-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.reading-head .reading-date{justify-self:start}
.reading-number{color:#9a896f;white-space:nowrap}
.article-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch;margin-top:50px;padding-top:26px;border-top:1px solid #e8dfd1}
.article-nav-link{display:flex;flex-direction:column;gap:7px;padding:14px 16px;background:#fbf7ef;border:1px solid #e8dece;border-radius:8px;text-decoration:none;transition:.2s}
.article-nav-link:hover{border-color:#caa35a;transform:translateY(-1px)}
.article-nav-link span{font-size:10px;color:#a07a35}
.article-nav-link strong{font-family:Amiri,serif;font-size:17px;line-height:1.5;color:var(--ink);font-weight:700}
.article-nav-link.prev{text-align:right}.article-nav-link.next{text-align:left}
.article-nav-center{display:flex;align-items:center;justify-content:center;padding:0 10px;color:#9b742c;font-size:12px;text-decoration:none;white-space:nowrap}
.article-nav-link.disabled{opacity:.42;pointer-events:none}
@media(max-width:560px){.reading-head{display:grid;grid-template-columns:1fr auto;gap:4px}.reading-head .reading-date{grid-column:1/-1;justify-self:start}.key-phrase blockquote{font-size:23px;padding:16px 18px}.article-nav{grid-template-columns:1fr;gap:10px}.article-nav-center{order:-1;padding:6px}.article-nav-link.next,.article-nav-link.prev{text-align:right}}

/* V10 — editor selection interface */
.editor-page .btn{font-family:inherit;text-decoration:none}

/* V12 — ترويسة الصفحة الرئيسية عالية الجودة: الخلفية والكتابة والصورة عناصر مستقلة */
.hero-home{height:clamp(470px,38vw,620px);min-height:470px;position:relative;overflow:hidden;background:#102b46;color:#fff;isolation:isolate}
.hero-home .hero-scene{position:absolute;inset:0;z-index:-3;background:url("assets/images/hero-library.svg") center center/cover no-repeat}
.hero-home .hero-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(7,22,35,.16) 0%,rgba(7,22,35,.24) 32%,rgba(7,22,35,.76) 60%,rgba(7,22,35,.96) 100%)}
.hero-home .hero-container{height:100%;min-height:0;position:relative;z-index:2;display:flex;align-items:center;justify-content:flex-end}
.hero-home .hero-copy{width:min(54%,650px);padding:25px 25px 25px 0;text-align:right;text-shadow:0 2px 18px rgba(0,0,0,.38)}
.hero-home .hero-copy .kicker{color:#e8c16d;font-size:18px}
.hero-home h1{font-family:Amiri,serif;font-size:clamp(52px,5.2vw,78px);line-height:1.08;margin:4px 0 2px}
.hero-home h2{font-size:clamp(19px,2vw,25px);font-weight:500;margin:5px 0 17px;color:#f0c976}
.hero-home .hero-copy p{font-size:16px;line-height:2;max-width:610px;margin:0 0 5px auto;color:#f5f2eb}
.hero-home .hero-read{margin-top:15px;background:#bd8a2c;border:1px solid rgba(255,255,255,.18);padding:11px 28px;font-size:14px;text-shadow:none;box-shadow:0 7px 18px rgba(0,0,0,.22)}
.hero-home .hero-read span{display:inline-block;margin-right:8px;transition:transform .2s ease}
.hero-home .hero-read:hover span{transform:translateX(-4px)}
.hero-home .hero-person{position:absolute;z-index:1;left:max(3%,calc((100vw - 1180px)/2 - 15px));bottom:-1px;width:min(34vw,435px);max-height:96%;display:flex;align-items:flex-end;pointer-events:none;filter:drop-shadow(0 18px 22px rgba(0,0,0,.34))}
.hero-home .hero-person img{display:block;width:100%;height:auto;max-height:620px;object-fit:contain;object-position:center bottom}
@media(max-width:900px){
  .hero-home{height:500px;min-height:500px}
  .hero-home .hero-shade{background:linear-gradient(90deg,rgba(7,22,35,.56),rgba(7,22,35,.88))}
  .hero-home .hero-copy{width:62%;padding-right:12px}
  .hero-home h1{font-size:48px}.hero-home h2{font-size:19px}.hero-home .hero-copy p{font-size:14px}
  .hero-home .hero-person{left:0;width:39vw;bottom:-2px}
}
@media(max-width:560px){
  .hero-home{height:600px;min-height:600px}
  .hero-home .hero-scene{background-position:60% center}
  .hero-home .hero-shade{background:linear-gradient(180deg,rgba(7,22,35,.78) 0%,rgba(7,22,35,.76) 46%,rgba(7,22,35,.42) 100%)}
  .hero-home .hero-container{align-items:flex-start}
  .hero-home .hero-copy{width:100%;padding:38px 14px 0;text-align:center}
  .hero-home .hero-copy p{margin-left:auto;margin-right:auto;max-width:520px}
  .hero-home h1{font-size:45px}.hero-home h2{font-size:18px}
  .hero-home .hero-person{left:50%;transform:translateX(-50%);width:275px;bottom:-5px;max-height:none}
}

/* V13 — ترويسة رئيسية فوتوغرافية عالية الجودة: مكتبة حقيقية بصريًا + كتب وريشة يمينًا */
.hero-home{
  height:clamp(430px,36vw,600px);
  min-height:430px;
  background:#12283b;
}
.hero-home .hero-scene{
  background-position:center center;
  background-size:cover;
  filter:none;
}
.hero-home .hero-shade{
  background:
    linear-gradient(90deg,
      rgba(8,22,34,.04) 0%,
      rgba(8,22,34,.08) 28%,
      rgba(8,22,34,.40) 48%,
      rgba(8,22,34,.82) 70%,
      rgba(8,22,34,.62) 86%,
      rgba(8,22,34,.22) 100%);
}
.hero-home .hero-container{
  max-width:1320px;
}
.hero-home .hero-copy{
  position:relative;
  z-index:5;
  width:min(49%,650px);
  max-width:650px;
  padding:24px 34px 24px 0;
  margin-left:8%;
  text-align:right;
  text-shadow:0 2px 18px rgba(0,0,0,.52);
}
.hero-home .hero-copy .kicker{font-size:18px;color:#e8c16d}
.hero-home h1{font-size:clamp(50px,4.9vw,76px)}
.hero-home h2{font-size:clamp(19px,1.9vw,25px)}
.hero-home .hero-copy p{font-size:16px;line-height:2.05;max-width:590px}
.hero-home .hero-read{background:#c3943d;padding:11px 30px;border:1px solid rgba(255,255,255,.28)}
.hero-home .hero-person{
  left:max(2%,calc((100vw - 1320px)/2 - 8px));
  bottom:-1px;
  width:min(37vw,510px);
  max-height:100%;
  z-index:3;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.34));
}
.hero-home .hero-person img{
  width:100%;
  height:auto;
  max-height:100%;
  object-fit:contain;
  object-position:center bottom;
}
@media(max-width:900px){
  .hero-home{height:520px;min-height:520px}
  .hero-home .hero-shade{
    background:linear-gradient(90deg,rgba(7,22,35,.48),rgba(7,22,35,.88));
  }
  .hero-home .hero-copy{width:62%;margin-left:0;padding-right:15px;transform:none}
  .hero-home .hero-person{left:0;width:42vw;bottom:-2px}
}
@media(max-width:560px){
  .hero-home{height:610px;min-height:610px}
  .hero-home .hero-scene{background-position:62% center}
  .hero-home .hero-shade{background:linear-gradient(180deg,rgba(7,22,35,.78) 0%,rgba(7,22,35,.80) 50%,rgba(7,22,35,.46) 100%)}
  .hero-home .hero-container{align-items:flex-start}
  .hero-home .hero-copy{width:100%;margin-left:0;padding:38px 14px 0;text-align:center}
  .hero-home .hero-copy p{margin-left:auto;margin-right:auto}
  .hero-home .hero-person{left:50%;transform:translateX(-50%);width:290px;bottom:-4px}
}

/* V14 — التسجيل في الإشعارات */
.subscribe-section{padding-top:18px;padding-bottom:28px}.subscribe-box{background:#f8f4eb;color:var(--ink);border-radius:10px;padding:18px 22px;display:grid;grid-template-columns:.85fr 1.45fr;gap:22px;align-items:center;border:1px solid #e8decd;box-shadow:0 5px 16px rgba(20,35,50,.05)}.subscribe-copy .section-title{color:var(--navy);font-family:Amiri,serif;font-size:25px}.subscribe-copy .section-title:before,.subscribe-copy .section-title:after{width:30px;height:1px}.subscribe-copy p{color:#68727a;line-height:1.75;margin:5px 0;font-size:13px}.subscriber-count{color:#9a762b;font-size:11px;margin-top:6px}.subscribe-form{background:#fffdf9;padding:12px 14px;border:1px solid #ece3d5;border-radius:8px}.subscribe-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.subscribe-grid input{width:100%;box-sizing:border-box;border:1px solid #ddd4c6;background:#fff;color:#263746;border-radius:6px;padding:8px 9px;font-family:inherit;font-size:12px}.subscribe-grid input:first-child{grid-column:1/-1}.channel-options{display:flex;gap:18px;margin:9px 0;color:#5f6870;font-size:11px}.channel-options label{display:flex;align-items:center;gap:5px}.subscribe-form .btn{border:0;cursor:pointer;font-family:inherit;padding:8px 14px;font-size:12px}.subscribe-form small{display:block;color:#899198;font-size:9px;line-height:1.55;margin-top:7px}.subscribe-status{min-height:16px;margin-top:5px;font-size:11px;color:#9a762b}.subscribe-status.error{color:#a85b52}@media(max-width:800px){.subscribe-box{grid-template-columns:1fr;padding:16px}.subscribe-grid{grid-template-columns:1fr}.subscribe-grid input:first-child{grid-column:auto}}


/* V16 — إعادة بناء الترويسة وفق التكوين المعتمد: مكتبة دافئة، الكاتب ممتد إلى سطح المكتب، والنص في الطبقة الأمامية */
.hero-home{
  height:clamp(420px,35.1vw,620px);
  min-height:420px;
  max-height:620px;
  background:#111f2b;
}
.hero-home .hero-scene{
  z-index:-3;
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
}
.hero-home .hero-shade{
  z-index:-2;
  background:
    linear-gradient(90deg,
      rgba(9,21,31,.02) 0%,
      rgba(9,21,31,.03) 34%,
      rgba(9,21,31,.34) 49%,
      rgba(9,21,31,.62) 63%,
      rgba(9,21,31,.72) 79%,
      rgba(9,21,31,.40) 100%);
}
.hero-home .hero-container{
  width:min(1380px,94%);
  height:100%;
  min-height:0;
  max-width:none;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  position:relative;
  z-index:10;
}
.hero-home .hero-copy{
  position:relative;
  z-index:20;
  width:min(48%,680px);
  max-width:680px;
  margin:0 1.5% 0 0;
  padding:34px 26px 30px 12px;
  text-align:right;
  text-shadow:0 2px 14px rgba(0,0,0,.48);
}
.hero-home .hero-copy .kicker{
  color:#e4bc68;
  font-size:18px;
  margin-bottom:2px;
}
.hero-home h1{
  font-family:Amiri,serif;
  font-size:clamp(48px,4.7vw,78px);
  line-height:1.08;
  margin:0;
  color:#fff;
  letter-spacing:-.5px;
}
.hero-home h2{
  font-size:clamp(19px,1.8vw,27px);
  line-height:1.45;
  font-weight:500;
  color:#e6b95d;
  margin:5px 0 14px;
}
.hero-home .hero-copy p{
  color:#f8f5ed;
  font-size:clamp(14px,1.15vw,18px);
  line-height:1.95;
  max-width:610px;
  margin:0 0 4px auto;
}
.hero-home .hero-read{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-width:210px;
  background:linear-gradient(180deg,#d2a54d,#b98025);
  color:#fff;
  border:1px solid rgba(255,255,255,.28);
  border-radius:7px;
  padding:10px 27px;
  margin-top:15px;
  box-shadow:0 8px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.2);
  text-shadow:none;
  font-size:14px;
}
.hero-home .hero-read .book-icon{
  font-size:22px;
  line-height:1;
  width:22px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:2px solid rgba(255,255,255,.92);
  border-radius:2px;
  position:relative;
}
.hero-home .hero-read .book-icon:after{
  content:"";
  position:absolute;
  top:-2px;
  bottom:-2px;
  left:50%;
  width:1px;
  background:rgba(255,255,255,.92);
}
.hero-home .hero-person{
  position:absolute;
  z-index:6;
  left:max(1.5%,calc((100vw - 1380px)/2 - 6px));
  bottom:-1px;
  width:min(39vw,590px);
  max-height:100%;
  display:flex;
  align-items:flex-end;
  pointer-events:none;
  filter:drop-shadow(0 16px 18px rgba(0,0,0,.34));
}
.hero-home .hero-person img{
  display:block;
  width:100%;
  height:auto;
  max-height:100%;
  object-fit:contain;
  object-position:center bottom;
}
/* A small dark veil keeps the live HTML typography legible without turning it into an image. */
.hero-home .hero-copy:before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:7% -3% 4% -4%;
  background:radial-gradient(ellipse at center,rgba(5,17,27,.27),rgba(5,17,27,0) 72%);
  pointer-events:none;
}
@media(max-width:1100px){
  .hero-home{height:500px;min-height:500px}
  .hero-home .hero-copy{width:52%;margin-right:0;padding-right:16px}
  .hero-home .hero-person{width:min(42vw,510px);left:0}
}
@media(max-width:800px){
  .hero-home{height:620px;min-height:620px;max-height:none}
  .hero-home .hero-scene{background-position:center center}
  .hero-home .hero-shade{background:linear-gradient(180deg,rgba(7,20,31,.76) 0%,rgba(7,20,31,.67) 43%,rgba(7,20,31,.18) 100%)}
  .hero-home .hero-container{width:94%;align-items:flex-start;justify-content:center}
  .hero-home .hero-copy{width:100%;max-width:620px;margin:0;padding:34px 12px 0;text-align:center}
  .hero-home .hero-copy p{margin-left:auto;margin-right:auto}
  .hero-home .hero-person{left:50%;transform:translateX(-50%);width:min(390px,72vw);bottom:-4px}
}
@media(max-width:520px){
  .hero-home{height:610px;min-height:610px}
  .hero-home h1{font-size:45px}
  .hero-home h2{font-size:18px}
  .hero-home .hero-copy p{font-size:14px;line-height:1.9}
  .hero-home .hero-person{width:300px}
  .hero-home .hero-read{min-width:190px}
}


/* V17 — الترويسة النهائية: الصورة الجديدة مدمجة في مشهد المكتبة، واليدان مستندتان بأناقة على سطح المكتب. */
.hero-home .hero-person{display:none !important;}
.hero-home .hero-copy{z-index:50;}
.hero-home .hero-container{z-index:50;}

.editor-home-link{font-weight:700;color:#b98a36!important}

/* V24 — تثبيت نص الترويسة داخل المساحة الداكنة اليمنى وعدم السماح له بالتداخل مع صورة الكاتب. */
@media(min-width:1101px){
  .hero-home .hero-container{
    display:block;
    position:relative;
    width:94%;
    max-width:1380px;
    margin:0 auto;
  }
  .hero-home .hero-copy{
    position:absolute;
    top:50%;
    right:1%;
    transform:translate(-100px,-50%);
    direction:rtl;
    width:min(40%,650px);
    max-width:650px;
    margin:0;
    padding:24px 0 24px 12px;
    text-align:right;
    box-sizing:border-box;
  }
}
@media(min-width:801px) and (max-width:1100px){
  .hero-home .hero-container{
    display:block;
    position:relative;
    width:94%;
    margin:0 auto;
  }
  .hero-home .hero-copy{
    position:absolute;
    top:50%;
    right:0;
    transform:translateY(-50%);
    direction:rtl;
    width:43%;
    max-width:500px;
    margin:0;
    padding:20px 0 20px 10px;
    text-align:right;
    box-sizing:border-box;
  }
}

/* V25 — approved final hero artwork: exact composition requested by the author */
.hero-reference{height:auto;min-height:0;background:#102b46;overflow:hidden;padding:0;position:relative;line-height:0}
.hero-reference-image{position:relative;width:100%;line-height:0}
.hero-reference-image img{display:block;width:100%;height:auto;max-width:none;object-fit:contain}
.hero-reference-link{position:absolute;right:27.7%;bottom:12.3%;width:13.2%;height:10.5%;opacity:0;overflow:hidden;text-indent:-9999px;display:block;z-index:5}
@media(max-width:900px){
  .hero-reference-link{right:27.5%;bottom:12%;width:14%;height:11%}
}
@media(max-width:560px){
  .hero-reference-link{right:25%;bottom:11%;width:18%;height:12%}
}

/* V27 — live HTML hero text over the approved library artwork.
   The artwork is background-only; all title, copy and CTA remain real HTML. */
.hero-live{
  position:relative;
  width:100%;
  min-height:clamp(500px,33.9vw,730px);
  height:clamp(500px,33.9vw,730px);
  overflow:hidden;
  background:#171b1d;
  color:#fff;
  isolation:isolate;
}
.hero-live-bg{
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:url("assets/images/hero-background.webp");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}
.hero-live-content{
  position:relative;
  z-index:3;
  width:100%;
  height:100%;
}
.hero-live-copy{
  position:absolute;
  top:22%;
  right:7.5%;
  width:min(40%,650px);
  text-align:right;
  direction:rtl;
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.72),0 1px 3px rgba(0,0,0,.9);
}
/* V126 — إزاحة الترويسات الأربعة في الشريط الرئيسي إلى اليسار 200px لتجنب أوراق النبات. */
@media(min-width:901px){
  .hero-live-kicker,
  .hero-live-copy h1,
  .hero-live-copy h2,
  .hero-live-copy p{
    transform:translateX(-200px);
  }
}
.hero-live-kicker{
  color:#e8bd63;
  font-size:18px;
  line-height:1;
  margin-bottom:6px;
  font-weight:500;
}
.hero-live-copy h1{
  font-family:Amiri,serif;
  font-size:clamp(48px,4.7vw,76px);
  line-height:1.05;
  margin:0;
  color:#fff;
  font-weight:700;
}
.hero-live-copy h2{
  font-size:clamp(19px,1.8vw,25px);
  line-height:1.35;
  color:#efc56f;
  margin:7px 0 18px;
  font-weight:500;
}
.hero-live-copy p{
  max-width:610px;
  margin:0 0 18px auto;
  font-size:clamp(14px,1.2vw,17px);
  line-height:2;
  color:#fff;
}
.hero-live-read{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:190px;
  padding:12px 30px;
  border-radius:7px;
  background:#c89435;
  border:1px solid rgba(255,255,255,.3);
  color:#fff;
  text-decoration:none;
  font-size:15px;
  font-weight:600;
  text-shadow:none;
  box-shadow:0 7px 18px rgba(0,0,0,.28);
  transition:transform .18s ease,filter .18s ease;
}
.hero-live-read:hover{filter:brightness(1.08);transform:translateY(-1px)}
.book-icon{font-size:18px;line-height:1}

@media(max-width:900px){
  .hero-live{height:560px;min-height:560px}
  .hero-live-bg{background-position:44% center}
  .hero-live-copy{
    top:9%;
    right:5%;
    width:54%;
  }
  .hero-live-copy h1{font-size:clamp(40px,6vw,58px)}
  .hero-live-copy h2{font-size:18px;margin-bottom:12px}
  .hero-live-copy p{font-size:14px;line-height:1.85}
}
@media(max-width:560px){
  .hero-live{height:620px;min-height:620px}
  .hero-live-bg{background-position:34% center}
  .hero-live-copy{
    top:6%;
    right:5%;
    width:90%;
    text-align:center;
  }
  .hero-live-copy h1{font-size:44px}
  .hero-live-copy h2{font-size:18px}
  .hero-live-copy p{max-width:500px;margin-left:auto;margin-right:auto;font-size:14px}
  .hero-live-read{min-width:185px}
}

/* V29 — author-supplied portrait. This is the only foreground portrait used by the site. */
.hero-live-person{
  position:absolute;
  z-index:2;
  left:3.5%;
  bottom:0;
  width:min(51vw,1080px);
  max-height:100%;
  display:flex;
  align-items:flex-end;
  pointer-events:none;
}
.hero-live-person img{
  display:block;
  width:100%;
  height:auto;
  max-height:100%;
  object-fit:contain;
  object-position:left bottom;
}
.hero-live-copy{z-index:4;}
@media(max-width:900px){
  .hero-live-person{left:1%;width:min(55vw,720px);}
  .hero-live-copy{z-index:4;}
}
@media(max-width:560px){
  .hero-live-person{
    left:50%;
    transform:translateX(-50%);
    width:min(88vw,560px);
    bottom:-2px;
    opacity:.96;
  }
  .hero-live-copy{z-index:4;}
}


/* Search result highlighting and page navigation tools */
.search-highlight{background:#f4d46b;color:inherit;padding:0 .12em;border-radius:.2em;box-shadow:0 0 0 1px rgba(201,152,50,.18)}
.page-tools{position:fixed;left:22px;bottom:20px;z-index:1000;display:flex;gap:8px;direction:rtl}
.page-tool{border:1px solid rgba(201,152,50,.5);background:rgba(255,253,248,.96);color:#102b40;border-radius:22px;padding:9px 14px;font:inherit;font-size:13px;cursor:pointer;box-shadow:0 5px 18px rgba(18,40,55,.12);backdrop-filter:blur(5px)}
.page-tool:hover{background:#102b40;color:#fff;border-color:#102b40}
@media(max-width:620px){.page-tools{left:12px;bottom:12px}.page-tool{padding:8px 11px;font-size:12px}}

/* V54: deter casual copying of public literary content. */
.article-body,.article-reading,.archive-page .card,#latest-posts .post-card,.category-grid .cat,.books .book{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
.article-body img,.article-reading img,.archive-page .card img,#latest-posts .post-card img,.books .book img{-webkit-user-drag:none;user-drag:none;}

/* V81 — Friends comments and article likes */
.community-section{margin-top:48px;padding-top:30px;border-top:1px solid #e8dfd1}
.community-stats{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.community-like{display:inline-flex;align-items:center;gap:7px;border:1px solid #dccdb6;background:#fffaf1;color:#705522;border-radius:20px;padding:8px 14px;font-family:inherit;cursor:pointer;transition:.2s}
.community-like:hover,.community-like.liked{border-color:#c69a49;background:#f8eedb}.community-like .like-symbol{font-size:16px}.community-like b,.community-comments-count b{font-weight:700}.community-comments-count{font-size:13px;color:#777066}
.community-account{margin-bottom:14px}.community-welcome{background:#f8f4eb;border:1px solid #e8decd;border-radius:8px;padding:10px 14px;font-size:13px;color:#5d5a54}.text-action{border:0;background:none;color:#9b742c;font-family:inherit;cursor:pointer;margin-right:12px}
.community-login-note{font-size:13px;color:#756f66;margin-bottom:12px}.community-auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.community-auth{background:#fbf8f1;border:1px solid #e8dfd1;border-radius:9px;padding:15px;display:grid;gap:8px}.community-auth h3{font-family:Amiri,serif;color:var(--navy);font-size:20px;margin:0 0 3px}.community-auth input,.comment-form textarea{box-sizing:border-box;width:100%;font:inherit;background:#fff;border:1px solid #d8cdbb;border-radius:6px;padding:9px 10px}.community-auth input{font-size:12px}.community-auth .btn{justify-self:start}.comment-composer{margin:18px 0}.comment-form{background:#fffdf9;border:1px solid #e8dfd1;border-radius:9px;padding:15px}.comment-form textarea{min-height:110px;resize:vertical;font-family:Amiri,serif;font-size:17px;line-height:1.9}.comment-form-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:9px}.comment-form-foot small{color:#8b847a;font-size:10px}.comment-locked{padding:13px;background:#f8f4eb;border:1px dashed #dccdb6;border-radius:8px;color:#777066;font-size:12px}
.comments-list{display:grid;gap:12px;margin-top:20px}.comment-card{background:#fffdf9;border:1px solid #e8dfd1;border-radius:9px;padding:15px}.comment-head{display:flex;align-items:baseline;gap:12px;justify-content:space-between}.comment-head strong{font-family:Amiri,serif;font-size:19px;color:var(--navy)}.comment-head time{font-size:10px;color:#948d82}.comment-text{margin-top:8px;font-family:Amiri,serif;font-size:17px;line-height:1.9;color:#403d38;word-break:break-word}.comment-actions{display:flex;gap:12px;margin-top:9px}.comment-actions button{border:0;background:none;color:#9b742c;font-family:inherit;font-size:11px;cursor:pointer;padding:0}.comment-actions button:hover{text-decoration:underline}.no-comments{color:#8a847a;font-size:12px;text-align:center;padding:18px}.community-status{min-height:18px;margin-top:8px;font-size:11px;color:#9b742c}.community-status.error{color:#a4574e}
@media(max-width:700px){.community-auth-grid{grid-template-columns:1fr}.comment-form-foot{align-items:flex-start;flex-direction:column}.comment-head{display:block}.comment-head time{display:block;margin-top:2px}}

/* V82 — member accounts / authentication */
.member-cta-section{padding-top:6px;padding-bottom:18px}.member-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;background:#102b46;color:#fff;border-radius:10px;padding:20px 24px;box-shadow:0 7px 20px rgba(20,35,50,.08)}.member-cta .section-title{font-family:Amiri,serif;color:#e8c16d;font-size:28px}.member-cta p{margin:4px 0 0;color:#e9e4da;font-size:13px;line-height:1.8}.member-cta-actions{display:flex;gap:9px;flex-wrap:wrap;flex-shrink:0}.member-cta-actions .btn{border-color:rgba(255,255,255,.22)}.member-cta-actions .btn:not(.primary){background:transparent;color:#fff}.community-page-main{min-height:620px}.community-auth-page-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:980px;margin:0 auto}.community-auth-panel{background:#fffdf9;border:1px solid #e8dfd1;border-radius:10px;padding:24px;box-shadow:0 5px 16px rgba(20,35,50,.04)}.community-auth-panel h2{font-family:Amiri,serif;color:var(--navy);font-size:28px;margin:0 0 5px}.community-auth-panel p{color:#716b62;font-size:13px;line-height:1.8;margin:0 0 16px}.community-page-form{display:grid;gap:11px}.community-page-form label{display:grid;gap:5px;color:#5e5a54;font-size:12px}.community-page-form input{box-sizing:border-box;width:100%;border:1px solid #d8cdbb;background:#fff;color:#263746;border-radius:6px;padding:10px 11px;font:inherit}.community-page-form small{font-size:10px;color:#918a80;margin-top:-5px}.community-page-form .btn{justify-self:start}.text-action.standalone{display:inline-block;margin:0;text-decoration:none;font-size:11px}.community-forgot{grid-column:1/-1;max-width:none}.reset-panel{grid-column:1/-1}.reset-panel[hidden]{display:none}.community-auth .standalone{display:inline-block;margin:0;text-decoration:none}.community-auth small{color:#918a80;font-size:10px}.comment-locked a{color:#9b742c;text-decoration:none}.comment-locked a:hover{text-decoration:underline}
@media(max-width:800px){.member-cta{display:block;text-align:center}.member-cta-actions{justify-content:center;margin-top:14px}.community-auth-page-grid{grid-template-columns:1fr}.community-forgot,.reset-panel{grid-column:auto}}

/* V83 — compact site-wide email subscription in footer; WhatsApp/name UI intentionally hidden for now */
.footer-grid{grid-template-columns:minmax(300px,1.25fr) 1fr 1fr auto;gap:24px;align-items:center}
.footer-subscribe{min-width:0;text-align:right}
.footer-subscribe-text{font-family:"Noto Kufi Arabic",Arial,sans-serif;font-size:11px;color:#dce3e8;margin-bottom:6px;white-space:nowrap}
.footer-subscribe-form{display:flex;gap:6px;align-items:center;max-width:390px}
.footer-subscribe-form input{min-width:0;flex:1;width:150px;border:1px solid #607080;background:#f9f7f1;color:#1c3043;border-radius:5px;padding:6px 8px;font-family:inherit;font-size:10px;outline:none}
.footer-subscribe-form input:focus{border-color:#d1a14a;box-shadow:0 0 0 2px rgba(189,138,44,.15)}
.footer-subscribe-form button{border:1px solid #bd8a2c;background:#bd8a2c;color:#fff;border-radius:5px;padding:6px 9px;font-family:inherit;font-size:10px;cursor:pointer;white-space:nowrap}
.footer-subscribe-form button:hover{filter:brightness(1.06)}
.footer-subscribe-status{min-height:14px;margin-top:3px;font-size:9px;color:#d8b25f;line-height:1.5}
.footer-subscribe-status.error{color:#efaaa0}
.archive-footer-inner{text-align:center}
.archive-footer-inner .footer-subscribe{max-width:390px;margin:0 0 18px auto;text-align:right}
.archive-footer-inner .footer-subscribe-form{margin-right:0}
.archive-footer-brand strong{font-family:Amiri,serif;font-size:24px;color:#fff}
.archive-footer-brand small{display:block;font-family:"Noto Kufi Arabic",Arial,sans-serif;font-size:10px;color:#aebdc6;margin-top:5px}
@media(max-width:1000px){.footer-grid{grid-template-columns:1fr 1fr;gap:18px}.footer-subscribe{grid-column:1/-1;justify-self:stretch}.footer-subscribe-form{max-width:420px}.footer-subscribe-text{white-space:normal}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr;gap:18px}.footer-subscribe{grid-column:auto;text-align:center}.footer-subscribe-form{max-width:100%;margin:0 auto}.footer-subscribe-text{white-space:normal}.archive-footer-inner .footer-subscribe{margin:0 auto 18px;text-align:center}.archive-footer-inner .footer-subscribe-form{margin:0 auto}}

/* V84 — compact reader login/register controls in the header */
.header-auth-box{position:relative;flex:0 0 auto;direction:rtl;z-index:60}
.header-auth-actions{display:flex;align-items:center;gap:6px;white-space:nowrap}
.header-auth-login,.header-auth-register{font-family:"Noto Kufi Arabic",Arial,sans-serif;font-size:10px;line-height:1.5;padding:7px 10px;border-radius:5px;cursor:pointer;text-decoration:none;transition:.15s}
.header-auth-welcome{font-family:"Noto Kufi Arabic",Arial,sans-serif;font-size:10px;color:#111;white-space:nowrap}.header-auth-welcome strong{font-weight:700;color:#111}
.header-auth-login{border:1px solid #c7a15b;background:#fffaf0;color:#73531d}
.header-auth-login:hover{background:#f4ead7}
.header-auth-register{border:1px solid #bd8a2c;background:#bd8a2c;color:#fff}
.header-auth-register:hover{filter:brightness(1.06)}
.header-login-form{position:absolute;top:calc(100% + 8px);right:0;width:220px;background:#fffdf8;border:1px solid #ded2bf;border-radius:8px;padding:10px;box-shadow:0 10px 26px rgba(20,35,50,.16);display:grid;gap:6px}
.header-login-form[hidden]{display:none}
.header-login-form input{box-sizing:border-box;width:100%;border:1px solid #d8cdbb;background:#fff;color:#263746;border-radius:5px;padding:7px 8px;font:inherit;font-size:10px;outline:none}
.header-login-form input:focus{border-color:#bd8a2c;box-shadow:0 0 0 2px rgba(189,138,44,.12)}
.header-login-form button{border:1px solid #bd8a2c;background:#bd8a2c;color:#fff;border-radius:5px;padding:6px 10px;font-family:inherit;font-size:10px;cursor:pointer}
.header-login-form>a{color:#9b742c;font-size:9px;text-decoration:none}
.header-login-form>a:hover{text-decoration:underline}
.header-login-status{min-height:14px;font-size:9px;color:#9b742c;line-height:1.5}
.header-login-status.error{color:#a4574e}
@media(max-width:900px){.header-inner{position:relative}.header-auth-box{margin-right:auto}.header-auth-actions{gap:4px}.header-auth-login,.header-auth-register{padding:6px 7px;font-size:9px}.header-login-form{right:0;width:215px}.archive-page .header-auth-box{margin-right:0}}
@media(max-width:560px){.header-auth-actions{gap:3px}.header-auth-login,.header-auth-register{padding:5px 6px;font-size:8px}.header-login-form{width:205px}}

/* V90 — ضبط صورة الكاتب وفق المرجع المرفق: هامش علوي يقارب 11%، ومسافة أسفل اليدين تقارب 8% من ارتفاع المشهد. */
@media(min-width:1101px){
  .hero-live-person{
    width:min(40vw,820px);
    left:4.5%;
    bottom:8%;
  }
}
@media(min-width:901px) and (max-width:1100px){
  .hero-live-person{
    width:min(44vw,650px);
    left:2%;
    bottom:8%;
  }
}

/* V93 — إزاحة أفقية مؤكدة لصورة الكاتب. مقدار الحركة يساوي تقريبًا 15% من عرض الصورة، مع إبقائها بوضوح إلى يسار المنتصف. */
@media(min-width:1101px){
  .hero-live-person{
    left:calc(4.5% + 123px) !important;
    transform:none !important;
  }
}
@media(min-width:901px) and (max-width:1100px){
  .hero-live-person{
    left:calc(2% + 98px) !important;
    transform:none !important;
  }
}


/* V94 — موضع أفقي مباشر لصورة الكاتب: نقلها إلى اليمين دون توسيطها. */
@media(min-width:1101px){
  .hero-live-person{left:10.5% !important;right:auto !important;transform:none !important;}
}
@media(min-width:901px) and (max-width:1100px){
  .hero-live-person{left:8% !important;right:auto !important;transform:none !important;}
}


/* V95 — إزاحة أفقية فعلية على شاشة سطح المكتب. أزيل الاعتماد على left وحده، ونستخدم translateX واضحًا بمقدار يقارب 15% من عرض صورة الكاتب. */
@media(min-width:1101px){
  .hero-live-person{transform:translateX(115px) !important;}
}
@media(min-width:901px) and (max-width:1100px){
  .hero-live-person{transform:translateX(95px) !important;}
}

/* V127 — اخترت لك .. */
.choice-section{padding:34px 0 28px;background:var(--paper)}
.choice-card{position:relative;max-width:900px;margin:0 auto;padding:28px 34px 30px;background:#fffdf9;border:1px solid #e8decd;border-radius:10px;box-shadow:0 7px 20px rgba(20,35,50,.055);text-align:right}
.choice-label{font-family:Amiri,serif;font-size:34px;color:var(--navy);margin:0 0 5px;text-align:center}
.choice-note{text-align:center;color:#8b806f;font-size:12px;line-height:1.8;margin:0 0 20px}
.choice-title{font-family:Amiri,serif;font-size:31px;line-height:1.45;color:var(--navy);margin:0 0 14px}
.choice-excerpt{font-family:Amiri,serif;font-size:20px;line-height:2.05;color:#3f3a34;margin:0 0 18px;white-space:pre-line}
.choice-read{display:inline-block;color:#9a762b;font-size:13px;text-decoration:none;border-bottom:1px solid rgba(154,118,43,.35);padding-bottom:3px}
.choice-read:hover{color:var(--navy)}
.choice-actions{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.choice-again{border:0;background:none;color:var(--navy);font-family:inherit;font-size:13px;cursor:pointer;padding:4px 0;border-bottom:1px solid rgba(20,35,50,.25)}
.choice-again:hover{color:#9a762b;border-bottom-color:rgba(154,118,43,.4)}
.topic-reader-section{padding:4px 0 32px;background:var(--paper)}
.topic-reader-card{max-width:900px;margin:0 auto;padding:30px 34px 32px;background:#fffdf9;border:1px solid #e8decd;border-radius:10px;box-shadow:0 7px 20px rgba(20,35,50,.055);text-align:right}
.topic-reader-label{font-family:Amiri,serif;font-size:34px;color:var(--navy);margin:0 0 5px;text-align:center}
.topic-reader-note{text-align:center;color:#8b806f;font-size:12px;line-height:1.8;margin:0 0 20px}
.topic-reader-form{display:flex;gap:10px;max-width:720px;margin:0 auto}
.topic-reader-form input{flex:1;min-width:0;border:1px solid #d9cdbb;background:#fff;font-family:inherit;font-size:15px;color:var(--navy);padding:12px 15px;border-radius:6px;outline:none}
.topic-reader-form input:focus{border-color:#9a762b;box-shadow:0 0 0 2px rgba(154,118,43,.08)}
.topic-reader-form button{border:1px solid var(--navy);background:var(--navy);color:#fff;font-family:inherit;font-size:13px;padding:0 22px;border-radius:6px;cursor:pointer}
.topic-reader-form button:hover{background:#9a762b;border-color:#9a762b}
.topic-reader-result{max-width:720px;margin:22px auto 0;padding-top:20px;border-top:1px solid #eee5d8}
.topic-reader-query{font-size:12px;color:#8b806f;margin-bottom:7px}
.topic-reader-result h3{font-family:Amiri,serif;font-size:29px;line-height:1.45;color:var(--navy);margin:0 0 10px}
.topic-reader-result p{font-family:Amiri,serif;font-size:19px;line-height:2;color:#3f3a34;margin:0 0 15px;white-space:pre-line}
.topic-reader-link{display:inline-block;color:#9a762b;font-size:13px;text-decoration:none;border-bottom:1px solid rgba(154,118,43,.35);padding-bottom:3px}
.topic-reader-again{margin-right:18px;border:0;background:none;color:var(--navy);font-family:inherit;font-size:13px;cursor:pointer;padding:4px 0;border-bottom:1px solid rgba(20,35,50,.25)}
.topic-reader-again:hover{color:#9a762b;border-bottom-color:rgba(154,118,43,.4)}
.topic-reader-empty{text-align:center;color:#786f63;font-size:13px;margin:0}
@media(max-width:560px){.topic-reader-form{flex-direction:column}.topic-reader-form button{min-height:44px}.topic-reader-card{padding:24px 18px}.topic-reader-label{font-size:30px}.topic-reader-result h3{font-size:27px}.topic-reader-result p{font-size:18px;line-height:1.95}
.choice-section{padding:24px 0}.choice-card{padding:22px 18px}.choice-label{font-size:30px}.choice-title{font-size:27px}.choice-excerpt{font-size:18px;line-height:1.95}}

.mood-reader-section{padding:4px 0 34px;background:var(--paper)}
.mood-reader-card{max-width:900px;margin:0 auto;padding:30px 34px 32px;background:#fffdf9;border:1px solid #e8decd;border-radius:10px;box-shadow:0 7px 20px rgba(20,35,50,.055);text-align:center}
.mood-reader-label{font-family:Amiri,serif;font-size:34px;color:var(--navy);margin:0 0 5px}
.mood-reader-note{color:#8b806f;font-size:12px;line-height:1.8;margin:0 0 21px}
.mood-reader-options{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
.mood-option{border:1px solid #d9cdbb;background:#fff;color:var(--navy);font-family:inherit;font-size:14px;padding:11px 16px;border-radius:22px;cursor:pointer;transition:.18s ease}
.mood-option:hover,.mood-option.is-selected{border-color:#9a762b;background:#f8f1e4;transform:translateY(-1px)}
.mood-reader-result{max-width:720px;margin:22px auto 0;padding-top:20px;border-top:1px solid #eee5d8;text-align:right}
.mood-reader-query{font-size:12px;color:#8b806f;margin-bottom:7px}
.mood-reader-result h3{font-family:Amiri,serif;font-size:29px;line-height:1.45;color:var(--navy);margin:0 0 10px}
.mood-reader-result p{font-family:Amiri,serif;font-size:19px;line-height:2;color:#3f3a34;margin:0 0 15px}
.mood-reader-link{display:inline-block;color:#9a762b;font-size:13px;text-decoration:none;border-bottom:1px solid rgba(154,118,43,.35);padding-bottom:3px}
.mood-reader-again{margin-right:18px;border:0;background:none;color:var(--navy);font-family:inherit;font-size:13px;cursor:pointer;padding:4px 0;border-bottom:1px solid rgba(20,35,50,.25)}
.mood-reader-again:hover{color:#9a762b;border-bottom-color:rgba(154,118,43,.4)}
.mood-reader-empty{text-align:center;color:#786f63;font-size:13px;margin:0}
@media(max-width:560px){.mood-reader-card{padding:24px 18px}.mood-reader-label{font-size:30px}.mood-option{font-size:13px;padding:10px 13px}.mood-reader-result h3{font-size:27px}.mood-reader-result p{font-size:18px;line-height:1.95}}

/* V135: book sample reader */
.book-preview-btn{display:inline-block;margin-top:13px;background:var(--gold);color:#fff;padding:9px 18px;border-radius:6px;font-size:13px;box-shadow:0 4px 10px rgba(0,0,0,.10);transition:filter .15s ease,transform .15s ease}.book-preview-btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
.reader-hero{height:175px}.reader-section{padding-top:28px}.reader-topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}.reader-back{color:var(--gold);font-size:14px}.reader-meta{display:flex;align-items:center;gap:14px;font-family:Amiri,serif;font-size:20px}.reader-meta span{font-family:"Noto Kufi Arabic",Arial,sans-serif;font-size:11px;color:#8b8478;background:#e8d8b9;padding:3px 10px;border-radius:15px}.pdf-reader{background:#ded8cc;border:1px solid #d3c9b8;border-radius:10px;overflow:hidden;box-shadow:0 10px 28px rgba(60,45,25,.12)}.pdf-toolbar{background:var(--navy);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;direction:ltr}.pdf-nav,.pdf-zoom{display:flex;align-items:center;gap:7px}.pdf-toolbar button{font:inherit;font-size:12px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;border-radius:5px;padding:6px 10px;cursor:pointer}.pdf-toolbar button:hover:not(:disabled){background:rgba(255,255,255,.16)}.pdf-toolbar button:disabled{opacity:.4;cursor:not-allowed}.page-control{display:flex;align-items:center;gap:5px;font-size:11px;direction:rtl}.page-control input{width:52px;text-align:center;background:#fff;color:var(--ink);border:0;border-radius:4px;padding:6px;font:inherit}.pdf-stage{min-height:620px;display:flex;justify-content:center;align-items:flex-start;overflow:auto;padding:22px;background:#bdb6aa;direction:ltr}.pdf-stage canvas{display:block;background:#fff;box-shadow:0 5px 18px rgba(0,0,0,.20);max-width:none}.pdf-loading{color:#fff;background:rgba(16,43,70,.85);padding:12px 20px;border-radius:7px;align-self:center;font-size:13px}.pdf-hint{text-align:center;background:#f7f1e5;color:#716b61;font-size:11px;padding:9px 12px}.reader-page #pdfReader:fullscreen{width:100vw;height:100vh;border-radius:0;display:flex;flex-direction:column}.reader-page #pdfReader:fullscreen .pdf-stage{flex:1;min-height:0}.reader-page #pdfReader:fullscreen .pdf-hint{display:none}
@media(max-width:700px){.reader-topbar{align-items:flex-start;flex-direction:column}.pdf-toolbar{flex-wrap:wrap;justify-content:center}.pdf-stage{min-height:480px;padding:12px}.pdf-zoom button:nth-last-child(-n+2){display:none}.reader-hero{height:165px}.reader-meta{font-size:18px}}
/* V137: local page-image reader fallback; no external PDF viewer dependency */
.pdf-stage #bookPageImage{display:block;background:#fff;box-shadow:0 5px 18px rgba(0,0,0,.20);max-width:none;user-select:none;-webkit-user-drag:none}


/* V166 — smallest-phone layout: normal-flow navigation strip under the top header. */
.mobile-phone-nav{display:none}
@media(max-width:560px){
  .mobile-phone-nav{
    display:flex;
    align-items:center;
    justify-content:space-around;
    gap:2px;
    width:100%;
    height:44px;
    padding:0 8px;
    box-sizing:border-box;
    background:#fffdf8;
    border-bottom:1px solid #ddd4c4;
    box-shadow:0 2px 7px rgba(20,35,50,.07);
    position:relative;
    z-index:19;
    direction:rtl;
  }
  .mobile-phone-nav a{
    flex:1 1 0;
    text-align:center;
    white-space:nowrap;
    font-family:"Noto Kufi Arabic",Arial,sans-serif;
    font-size:11px;
    line-height:44px;
    color:#152c45;
    text-decoration:none;
  }
  .mobile-phone-nav a.active{color:#bd8a2c;font-weight:600}
  .home-page .hero-live-read{display:none}
  .home-page .hero-live{height:620px;min-height:620px}
  .home-page .hero-live-person{width:min(96vw,620px);bottom:-12px}

  /* Archive: keep only the author and account controls in the top bar.
     The four-item phone navigation is the row immediately below it. */
  .archive-page .site-header{height:68px;padding:0}
  .archive-page .nav{height:68px;width:92%;flex-wrap:nowrap;justify-content:space-between;gap:8px}
  .archive-page .brand{width:auto!important;order:0;margin:0;text-align:right}
  .archive-page .brand strong{font-size:25px}
  .archive-page .brand small{display:none}
  .archive-page .menu{display:none}
  .archive-page .header-auth-box{margin:0!important;order:1}
  .archive-page .header-auth-actions{gap:3px}
  .archive-page .header-auth-login,.archive-page .header-auth-register{font-size:8px;padding:5px 6px}
  .archive-page .hero{padding:38px 0 46px}
  .archive-page .hero h1{font-size:35px}
  .archive-page .hero p{font-size:14px}
}


/* V167 — final smallest-phone corrections. */
@media(max-width:560px){
  /* The archive account controls stay inside the top header and never overlap the hero. */
  .archive-page .site-header{overflow:visible!important;position:relative!important;}
  .archive-page .nav{position:relative!important;overflow:visible!important;}
  .archive-page .header-auth-box{position:static!important;order:1!important;margin:0!important;flex:0 0 auto!important;}
  .archive-page .header-auth-actions{position:static!important;}

  /* Home: enlarge and center the author portrait; undo the old desktop inline translation. */
  .home-page .hero-live-person{
    left:50%!important;
    right:auto!important;
    transform:translateX(-50%)!important;
    width:min(110vw,680px)!important;
    bottom:-12px!important;
  }
}


/* V168 — verified smallest-phone fixes. These rules intentionally come last so they win over legacy overrides. */
@media(max-width:560px){
  /* HOME: portrait is centered, larger, and lowered behind the desk. */
  .home-page .hero-live-person{
    position:absolute!important;
    left:50%!important;
    right:auto!important;
    width:118vw!important;
    max-width:none!important;
    bottom:-12px!important;
    transform:translateX(-50%)!important;
  }
  .home-page .hero-live-person img{width:100%!important;max-width:none!important;height:auto!important;object-fit:contain!important;object-position:center bottom!important;}

  /* ARCHIVE: auth controls are physically mounted in the top header. */
  .archive-page .site-header{height:68px!important;padding:0!important;overflow:visible!important;}
  .archive-page .nav{height:68px!important;width:92%!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;flex-wrap:nowrap!important;}
  .archive-page .brand{order:0!important;width:auto!important;margin:0!important;text-align:right!important;}
  .archive-page .menu{display:none!important;}
  .archive-header-auth-mount{display:block!important;order:1!important;flex:0 0 auto!important;position:static!important;}
  .archive-header-auth-mount .header-auth-box{position:static!important;margin:0!important;display:block!important;}
  .archive-header-auth-mount .header-auth-actions{display:flex!important;position:static!important;align-items:center!important;gap:3px!important;white-space:nowrap!important;}
  .archive-header-auth-mount .header-auth-login,.archive-header-auth-mount .header-auth-register{font-size:8px!important;padding:5px 6px!important;}

  /* The phone navigation is the only secondary navigation row. */
  .mobile-phone-nav{display:flex!important;position:relative!important;top:auto!important;left:auto!important;right:auto!important;}
}

/* V169 — final corrections after live mobile verification. */
@media(max-width:560px){
  /* HOME: move the portrait farther back so the desk visibly sits in front of its lower edge. */
  .home-page .hero-live{position:relative;overflow:hidden;}
  .home-page .hero-live-person{
    position:absolute!important;
    left:50%!important;
    right:auto!important;
    width:116vw!important;
    max-width:none!important;
    bottom:-52px!important;
    transform:translateX(-50%)!important;
    z-index:2!important;
  }
  .home-page .hero-live-person img{
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    object-fit:contain!important;
    object-position:center bottom!important;
  }
  /* ARCHIVE: only the dedicated four-item phone navigation remains below the header. */
  .archive-page .menu{display:none!important;}
  .archive-page .site-header{height:68px!important;min-height:68px!important;padding:0!important;}
  .archive-page .nav{height:68px!important;width:92%!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;flex-wrap:nowrap!important;}
  .archive-page .brand{order:0!important;width:auto!important;margin:0!important;text-align:right!important;}
  .archive-page .brand strong{font-size:25px!important;}
  .archive-page .header-auth-box{position:static!important;order:1!important;margin:0!important;flex:0 0 auto!important;}
  .archive-page .header-auth-actions{position:static!important;display:flex!important;align-items:center!important;gap:3px!important;white-space:nowrap!important;}
  .archive-page .header-auth-login,.archive-page .header-auth-register{font-size:8px!important;padding:5px 6px!important;}

  /* The generated phone navigation must remain above page content and must not inherit desktop offsets. */
  .mobile-phone-nav{position:relative!important;display:flex!important;top:auto!important;left:auto!important;right:auto!important;z-index:60!important;}
}

/* V172 — mobile hero uses the original background desk directly; no foreground duplicate.
   The portrait is transparent and layered over the same background, eliminating
   the horizontal seam/repeated-library strip caused by a second background crop. */
/* V171 — mobile hero rebuilt from live components, not a screenshot.
   The background and portrait remain independent assets. The desk foreground
   reuses the exact same background image with the same cover/positioning and
   is clipped to its lower desk area, so there can be no mismatched/repeated
   library strip over the portrait. */
@media(max-width:560px){
  .home-page .hero-live{
    height:760px!important;
    min-height:760px!important;
    position:relative!important;
    overflow:hidden!important;
    isolation:isolate;
    background:#17110d!important;
  }
  .home-page .hero-live-bg{
    inset:0!important;
    z-index:0!important;
    background-size:cover!important;
    background-position:35% center!important;
    background-repeat:no-repeat!important;
  }
  .home-page .hero-live-content{position:relative!important;z-index:2!important;height:100%!important;}
  .home-page .hero-live-copy{
    top:48px!important;
    right:5%!important;
    width:90%!important;
    z-index:5!important;
    text-align:center!important;
  }
  .home-page .hero-live-copy h1{font-size:42px!important;line-height:1.1!important;}
  .home-page .hero-live-copy h2{font-size:18px!important;line-height:1.5!important;margin:8px 0 14px!important;}
  .home-page .hero-live-copy p{font-size:14px!important;line-height:1.95!important;max-width:380px!important;margin:0 auto!important;}
  .home-page .hero-live-person{
    position:absolute!important;
    left:50%!important;
    right:auto!important;
    bottom:105px!important;
    width:118vw!important;
    max-width:none!important;
    transform:translateX(-50%)!important;
    z-index:2!important;
    opacity:1!important;
  }
  .home-page .hero-live-person img{
    width:100%!important;
    height:auto!important;
    max-width:none!important;
    object-fit:contain!important;
    object-position:center bottom!important;
  }
  /* V172: do not paint a second foreground copy of the background.
     The original hero background already contains the desk at its natural
     lower edge. The transparent portrait sits directly above it. */
  .home-page .hero-live::after{display:none!important;content:none!important;}

  /* Archive mobile: the screenshot's composition is rebuilt as real HTML/CSS. */
  .archive-page .page-hero.archive-mobile-hero{
    height:760px!important;
    min-height:760px!important;
    padding:0!important;
    position:relative!important;
    overflow:hidden!important;
    background:#17110d!important;
    color:#fff!important;
    isolation:isolate!important;
    display:block!important;
  }
  .archive-page .archive-hero-bg{
    position:absolute!important;
    inset:0!important;
    z-index:0!important;
    background-image:url("assets/images/hero-background.webp")!important;
    background-size:cover!important;
    background-position:35% center!important;
    background-repeat:no-repeat!important;
  }
  .archive-page .archive-hero-copy{
    position:relative!important;
    z-index:5!important;
    width:90%!important;
    height:100%!important;
    margin:0 auto!important;
    padding:48px 0 0!important;
    box-sizing:border-box!important;
    text-align:center!important;
    direction:rtl!important;
    color:#fff!important;
    text-shadow:0 2px 12px rgba(0,0,0,.72),0 1px 3px rgba(0,0,0,.95)!important;
  }
  .archive-page .archive-hero-kicker{
    color:#e8bd63!important;
    font-size:22px!important;
    line-height:1.2!important;
    margin-bottom:5px!important;
    font-weight:500!important;
  }
  .archive-page .archive-hero-copy h1{
    font-family:Amiri,serif!important;
    font-size:48px!important;
    line-height:1.12!important;
    margin:0!important;
    color:#fff!important;
    font-weight:700!important;
  }
  .archive-page .archive-hero-copy p{
    max-width:390px!important;
    margin:18px auto 0!important;
    color:#fff!important;
    font-family:Amiri,serif!important;
    font-size:18px!important;
    line-height:1.95!important;
  }
  .archive-page .archive-hero-person{
    position:absolute!important;
    left:50%!important;
    bottom:105px!important;
    width:94vw!important;
    max-width:none!important;
    transform:translateX(-50%)!important;
    z-index:2!important;
    line-height:0!important;
  }
  .archive-page .archive-hero-person img{
    display:block!important;
    width:100%!important;
    height:auto!important;
    max-width:none!important;
  }
  /* V172: the page background itself supplies the desk; no duplicate overlay. */
  .archive-page .page-hero.archive-mobile-hero::after{display:none!important;content:none!important;}
}

/* V173 — tablet/medium screens: use the same principle that fixed the phone hero.
   Keep the original library background untouched and simply lower the transparent
   portrait so its hands meet the desk surface naturally. No second desk/background
   image is introduced, eliminating seams and repeated background strips. */
@media(min-width:700px) and (max-width:1100px){
  .home-page .hero-live{
    position:relative!important;
    overflow:hidden!important;
  }
  .home-page .hero-live-bg{
    background-position:44% center!important;
  }
  .home-page .hero-live-person{
    left:1%!important;
    right:auto!important;
    width:min(55vw,720px)!important;
    max-width:none!important;
    bottom:-55px!important;
    transform:none!important;
    z-index:2!important;
  }
  .home-page .hero-live-person img{
    width:100%!important;
    height:auto!important;
    max-width:none!important;
    object-fit:contain!important;
    object-position:left bottom!important;
  }
}

/* V175 — tablet/medium: make the author sit visibly behind the desk.
   Do not add a second desk/background layer. The original hero background
   supplies the desk; the transparent portrait is simply scaled back and
   raised so the hands rest on the desk surface, matching desktop/mobile. */
@media(min-width:561px) and (max-width:1100px){
  .home-page .hero-live-person{
    left:8%!important;
    right:auto!important;
    width:min(44vw,650px)!important;
    max-width:none!important;
    bottom:8%!important;
    transform:translateX(95px)!important;
    z-index:2!important;
  }
  .home-page .hero-live-person img{
    width:100%!important;
    height:auto!important;
    max-width:none!important;
    object-fit:contain!important;
    object-position:left bottom!important;
  }
}

/* V176 — fix the Works/Archive hero on tablet and desktop.
   Previously the archive portrait rules existed only inside the phone breakpoint,
   so the image rendered at its natural size and spilled over the article list. */
.archive-page .page-hero.archive-mobile-hero{
  height:340px!important;
  min-height:340px!important;
  padding:0!important;
  position:relative!important;
  display:block!important;
  overflow:hidden!important;
  isolation:isolate!important;
  background:#102b40!important;
  color:#fff!important;
}
.archive-page .archive-hero-bg{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  background-image:url("assets/images/hero-background.webp")!important;
  background-size:cover!important;
  background-position:center 58%!important;
  background-repeat:no-repeat!important;
}
.archive-page .archive-hero-person{
  position:absolute!important;
  left:2%!important;
  right:auto!important;
  bottom:0!important;
  width:min(43vw,720px)!important;
  height:100%!important;
  max-width:none!important;
  display:flex!important;
  align-items:flex-end!important;
  transform:none!important;
  z-index:2!important;
  overflow:hidden!important;
  line-height:0!important;
  pointer-events:none!important;
}
.archive-page .archive-hero-person img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:left bottom!important;
}
.archive-page .archive-hero-copy{
  position:absolute!important;
  z-index:5!important;
  top:50%!important;
  right:7%!important;
  left:auto!important;
  width:40%!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
  transform:translateY(-50%)!important;
  text-align:right!important;
  direction:rtl!important;
  color:#fff!important;
  text-shadow:0 2px 12px rgba(0,0,0,.72),0 1px 3px rgba(0,0,0,.95)!important;
}
.archive-page .archive-hero-kicker{
  color:#e8bd63!important;
  font-size:22px!important;
  line-height:1.3!important;
  margin:0 0 5px!important;
}
.archive-page .archive-hero-copy h1{
  font-family:Amiri,serif!important;
  font-size:clamp(32px,3.1vw,48px)!important;
  line-height:1.18!important;
  margin:0!important;
  color:#fff!important;
}
.archive-page .archive-hero-copy p{
  max-width:440px!important;
  margin:12px 0 0 auto!important;
  color:#fff!important;
  font-family:Amiri,serif!important;
  font-size:17px!important;
  line-height:1.85!important;
}
.archive-page .page-hero.archive-mobile-hero::after{display:none!important;content:none!important;}

@media(min-width:561px) and (max-width:1100px){
  .archive-page .page-hero.archive-mobile-hero{height:300px!important;min-height:300px!important;}
  .archive-page .archive-hero-bg{background-position:43% center!important;}
  .archive-page .archive-hero-person{left:1%!important;width:min(44vw,500px)!important;}
  .archive-page .archive-hero-copy{right:4%!important;width:48%!important;}
  .archive-page .archive-hero-kicker{font-size:19px!important;}
  .archive-page .archive-hero-copy h1{font-size:clamp(29px,4vw,38px)!important;}
  .archive-page .archive-hero-copy p{font-size:15px!important;margin-top:8px!important;}
}
@media(max-width:560px){
  .archive-page .page-hero.archive-mobile-hero{height:760px!important;min-height:760px!important;}
  .archive-page .archive-hero-bg{background-position:35% center!important;}
  .archive-page .archive-hero-copy{
    position:relative!important;top:auto!important;right:auto!important;left:auto!important;
    width:90%!important;height:100%!important;margin:0 auto!important;padding:48px 0 0!important;
    transform:none!important;text-align:center!important;
  }
  .archive-page .archive-hero-kicker{font-size:22px!important;}
  .archive-page .archive-hero-copy h1{font-size:48px!important;}
  .archive-page .archive-hero-copy p{max-width:390px!important;margin:18px auto 0!important;font-size:18px!important;}
  .archive-page .archive-hero-person{
    left:50%!important;right:auto!important;bottom:105px!important;width:94vw!important;height:auto!important;
    max-width:none!important;transform:translateX(-50%)!important;overflow:visible!important;
  }
  .archive-page .archive-hero-person img{width:100%!important;height:auto!important;max-height:none!important;}
}


/* V178: preserve full navigation on tablet-sized screens without changing the home hero. */
@media (min-width:561px) and (max-width:900px){
  body:not(.home-page) header .header-inner nav,
  body:not(.home-page) header .header-inner > nav{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:clamp(8px,1.35vw,14px)!important;
    font-size:clamp(11px,1.45vw,13px)!important;
    white-space:nowrap!important;
  }
  header .header-inner{gap:12px!important;}
  header .logo{font-size:clamp(20px,2.6vw,27px)!important;}
}

/* V178: photographic title banners on inner pages only; homepage hero is untouched. */
body:not(.home-page) > .page-hero{
  background-image:linear-gradient(rgba(8,17,29,.20),rgba(8,17,29,.35)),url("assets/images/empty-office.webp")!important;
  background-size:cover!important;
  background-position:center 55%!important;
  background-repeat:no-repeat!important;
  color:#fff!important;
  text-align:center!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
body:not(.home-page) > .page-hero > .container{
  width:min(1180px,92%)!important;
  margin:0 auto!important;
  text-align:center!important;
}
body:not(.home-page) > .page-hero h1,
body:not(.home-page) > .page-hero p{
  color:#fff!important;
  text-align:center!important;
  text-shadow:0 2px 7px rgba(0,0,0,.78)!important;
}
body:not(.home-page) > .page-hero p{margin-left:auto!important;margin-right:auto!important;}


/* V179: make the Works/Archive title banner match the approved inner-page headers.
   Keep the homepage hero and the accepted archive portrait sizing/layout untouched elsewhere. */
.archive-page .page-hero.archive-mobile-hero{
  height:207px!important;min-height:207px!important;padding:0!important;
  position:relative!important;display:flex!important;overflow:hidden!important;
  align-items:center!important;justify-content:center!important;
  background-image:linear-gradient(rgba(8,17,29,.20),rgba(8,17,29,.35)),url("assets/images/empty-office.webp")!important;
  background-size:cover!important;background-position:center 55%!important;background-repeat:no-repeat!important;
  background-color:#102b40!important;color:#fff!important;text-align:center!important;
}
.archive-page .archive-hero-bg{display:none!important;background-image:none!important;}
.archive-page .archive-hero-person{display:none!important;}
.archive-page .archive-hero-copy{
  position:relative!important;top:auto!important;right:auto!important;left:auto!important;
  width:min(1180px,92%)!important;height:auto!important;margin:0 auto!important;padding:0!important;
  transform:none!important;text-align:center!important;direction:rtl!important;
  color:#fff!important;text-shadow:0 2px 7px rgba(0,0,0,.78)!important;
}
.archive-page .archive-hero-kicker{color:#fff!important;font-size:inherit!important;margin:0 0 2px!important;}
.archive-page .archive-hero-copy h1{font-size:50px!important;line-height:1.25!important;margin:0!important;color:#fff!important;}
.archive-page .archive-hero-copy p{max-width:none!important;margin:4px auto 0!important;color:#fff!important;font-size:16px!important;line-height:1.9!important;}
@media(max-width:560px){
  .archive-page .page-hero.archive-mobile-hero{height:207px!important;min-height:207px!important;}
  .archive-page .archive-hero-copy{width:92%!important;padding:0!important;}
  .archive-page .archive-hero-copy h1{font-size:40px!important;}
  .archive-page .archive-hero-copy p{font-size:14px!important;}
}

/* V181 — archive tablet-width header: keep menu and account controls in one row.
   The dedicated phone navigation remains the only navigation below 561px. */
@media (min-width:561px) and (max-width:900px){
  .archive-page .site-header{height:76px!important;min-height:76px!important;overflow:visible!important;padding:0!important;}
  .archive-page .nav{width:96%!important;height:100%!important;display:flex!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;}
  .archive-page .brand{order:0!important;flex:0 0 auto!important;width:auto!important;margin:0!important;}
  .archive-page .brand strong{font-size:clamp(18px,2.7vw,25px)!important;}
  .archive-page .menu{display:flex!important;order:1!important;flex:1 1 auto!important;min-width:0!important;justify-content:center!important;align-items:center!important;gap:clamp(7px,1.35vw,13px)!important;white-space:nowrap!important;}
  .archive-page .menu a{font-size:clamp(10px,1.45vw,12px)!important;padding:18px 0!important;}
  .archive-header-auth-mount{display:block!important;order:2!important;flex:0 0 auto!important;position:static!important;margin:0!important;}
  .archive-header-auth-mount .header-auth-box{display:block!important;position:static!important;margin:0!important;}
  .archive-header-auth-mount .header-auth-actions{display:flex!important;position:static!important;align-items:center!important;gap:3px!important;white-space:nowrap!important;}
  .archive-header-auth-mount .header-auth-login,.archive-header-auth-mount .header-auth-register{font-size:clamp(8px,1.1vw,9px)!important;padding:5px 6px!important;}
}

/* V182 — keep the homepage navigation available throughout the tablet transition. */
@media (min-width:561px) and (max-width:900px){
  body.home-page header .header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:nowrap;}
  body.home-page header .menu-toggle{display:none!important;}
  body.home-page header .site-nav{display:flex!important;position:static;inset:auto;width:auto;flex:1;justify-content:center;align-items:center;flex-direction:row;flex-wrap:wrap;gap:clamp(8px,1.6vw,18px);padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;}
  body.home-page header .site-nav a{padding:12px 0;border:0;white-space:nowrap;font-size:clamp(11px,1.25vw,13px);}
  body.home-page header .site-nav a.active:after{bottom:4px;}
}
@media (max-width:560px){
  body.home-page header .menu-toggle{display:block!important;}
  body.home-page header .site-nav{display:none;}
  body.home-page header .site-nav.open{display:flex!important;}
}

/* V182 — center the archive navigation at every viewport width without changing its responsive visibility. */
.archive-page .nav{justify-content:space-between;}
.archive-page .menu{flex:1 1 auto;justify-content:center;text-align:center;}
@media (min-width:621px){
  .archive-page .menu{justify-content:center;}
}

/* V183 — stabilize archive hero title centering at every viewport width.
   Center the copy against the hero itself, not a responsive right/left offset. */
.archive-page .page-hero.archive-mobile-hero{position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;}
.archive-page .page-hero.archive-mobile-hero .archive-hero-copy{
  position:absolute!important;top:50%!important;left:50%!important;right:auto!important;
  width:min(1180px,92%)!important;max-width:none!important;height:auto!important;
  margin:0!important;padding:0!important;transform:translate(-50%,-50%)!important;
  text-align:center!important;direction:rtl!important;box-sizing:border-box!important;
}
.archive-page .page-hero.archive-mobile-hero .archive-hero-kicker,
.archive-page .page-hero.archive-mobile-hero h1,
.archive-page .page-hero.archive-mobile-hero p{width:100%!important;text-align:center!important;margin-left:auto!important;margin-right:auto!important;}
.archive-page .page-hero.archive-mobile-hero p{max-width:680px!important;}
@media(max-width:560px){
  .archive-page .page-hero.archive-mobile-hero .archive-hero-copy{position:absolute!important;top:50%!important;left:50%!important;right:auto!important;width:92%!important;height:auto!important;margin:0!important;padding:0!important;transform:translate(-50%,-50%)!important;}
}

/* Subscriber anti-bot challenge */
.subscriber-human-check{flex:1 0 100%;margin-top:10px;font-size:13px;color:var(--muted,#53616b)}.subscriber-captcha-label{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.subscriber-captcha-label input{max-width:90px;min-width:70px;padding:8px;border:1px solid #cfc8bb;border-radius:6px;background:#fff}.subscriber-honeypot{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}.subscriber-count{margin-top:8px;font-size:13px;opacity:.85} [data-member-only-contact][hidden]{display:none!important}
@media(max-width:1199px){.subscriber-count{display:none!important}}

/* V194: keep the human-verification challenge on its own row below the subscriber email field. */
.footer-subscribe-form{flex-wrap:wrap}
.footer-subscribe-form>input[type="email"]{order:1;flex:1 1 180px;min-width:0}
.footer-subscribe-form>button[type="submit"]{order:3;flex:0 0 auto}
.subscriber-human-check{order:2;display:block;position:static!important;float:none!important;clear:both;flex:0 0 100%;width:100%;max-width:100%;min-width:0;box-sizing:border-box;margin:8px 0 2px;padding:8px 0 0;overflow:visible}
.subscriber-human-check[hidden]{display:none!important}
.subscriber-captcha-label{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%;box-sizing:border-box}
.footer-subscribe-form .subscriber-human-check input[type="number"]{display:inline-block;flex:0 0 90px;width:90px;min-width:70px;max-width:90px;box-sizing:border-box}
.subscriber-human-check .subscriber-honeypot{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* =====================================================================
   V206 — one header, one footer and one home hero for the whole site.
   These rules use their own class names (fb-*) so the older layered
   header/footer/hero rules above no longer take part.
   ===================================================================== */
:root{--fb-navy:#102b46;--fb-navy-deep:#0b1c2c;--fb-gold:#bd8a2c;--fb-gold-soft:#e7c98a;--fb-paper:#fffdf8;--fb-line:#e4d9c6;--fb-ink:#1b2f44;--fb-header-h:72px}

/* ---------- Header ---------- */
.fb-header{position:sticky;top:0;z-index:80;background:rgba(255,253,248,.97);border-bottom:1px solid var(--fb-line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);direction:rtl;font-family:"Noto Kufi Arabic",Tahoma,Arial,sans-serif}
.fb-header *{box-sizing:border-box}
.fb-header__inner{width:min(1180px,calc(100% - 40px));height:var(--fb-header-h);margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:24px;position:relative}
.fb-logo{justify-self:start;font:700 28px/1.2 Amiri,"Times New Roman",serif;color:var(--fb-navy);text-decoration:none;white-space:nowrap;letter-spacing:0}
.fb-logo:hover{color:var(--fb-navy)}
.fb-nav{display:flex;align-items:center;gap:4px;justify-self:center}
.fb-nav a{position:relative;display:inline-flex;align-items:center;height:40px;padding:0 16px;font-size:15px;font-weight:500;line-height:1;color:var(--fb-ink);text-decoration:none;border-radius:8px;white-space:nowrap;transition:color .15s,background-color .15s}
.fb-nav a[hidden]{display:none}
.fb-nav a:hover{color:var(--fb-gold);background:rgba(189,138,44,.08)}
.fb-nav a.active{color:var(--fb-gold)}
.fb-nav a.active::after{content:"";position:absolute;inset-inline:16px;bottom:2px;height:2px;border-radius:2px;background:var(--fb-gold)}
.fb-nav a:focus-visible,.fb-logo:focus-visible,.fb-menu-toggle:focus-visible{outline:2px solid var(--fb-gold);outline-offset:2px}
.fb-nav a.editor-home-link{color:#8a6420;font-weight:700}
.fb-header__end{justify-self:end;display:flex;align-items:center;gap:10px;min-width:0}
.fb-menu-toggle{display:none;width:44px;height:44px;padding:0;border:1px solid var(--fb-line);border-radius:10px;background:#fff;cursor:pointer;position:relative}
.fb-menu-toggle span{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:var(--fb-navy);transition:transform .2s,opacity .2s,top .2s}
.fb-menu-toggle span:nth-child(1){top:14px}.fb-menu-toggle span:nth-child(2){top:21px}.fb-menu-toggle span:nth-child(3){top:28px}
.fb-menu-toggle[aria-expanded="true"] span:nth-child(1){top:21px;transform:rotate(45deg)}
.fb-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.fb-menu-toggle[aria-expanded="true"] span:nth-child(3){top:21px;transform:rotate(-45deg)}

/* Sign-in control placed in the header by app.js */
.fb-header .header-auth-box{position:static!important;margin:0!important;order:0!important;flex:0 0 auto!important;z-index:auto}
.fb-header .header-auth-actions{display:flex;align-items:center;gap:8px;white-space:nowrap}
.fb-header .header-auth-welcome{font-size:13px;color:var(--fb-ink);max-width:190px;overflow:hidden;text-overflow:ellipsis}
.fb-header .header-auth-welcome[hidden],.fb-header .header-auth-register[hidden]{display:none}
.fb-header .header-auth-login,.fb-header .header-auth-register{font:500 13px/1 "Noto Kufi Arabic",Tahoma,Arial,sans-serif!important;height:36px;padding:0 14px!important;border-radius:8px;display:inline-flex;align-items:center;cursor:pointer;text-decoration:none}
.fb-header .header-auth-login{border:1px solid #c9a868;background:#fffaf0;color:#73531d}
.fb-header .header-auth-login:hover{background:#f4ead7}
.fb-header .header-auth-register{border:1px solid var(--fb-gold);background:var(--fb-gold);color:#fff}
.fb-header .header-login-form{position:absolute;top:calc(100% + 8px);inset-inline-end:0;right:auto;left:0;width:270px!important;background:var(--fb-paper);border:1px solid var(--fb-line);border-radius:12px;padding:14px;box-shadow:0 14px 34px rgba(16,43,70,.18);display:grid;gap:9px;z-index:90}
.fb-header .header-login-form[hidden]{display:none}
.fb-header .header-login-form input{width:100%;height:40px;border:1px solid #d8cdbb;border-radius:8px;padding:0 10px;font:400 14px "Noto Kufi Arabic",Tahoma,Arial,sans-serif;background:#fff;color:var(--fb-ink)}
.fb-header .header-login-form button{height:40px;border:0;border-radius:8px;background:var(--fb-gold);color:#fff;font:700 14px "Noto Kufi Arabic",Tahoma,Arial,sans-serif;cursor:pointer}
.fb-header .header-login-form>a{font-size:12px;color:#8a6420;text-decoration:none}
.fb-header .header-login-status{font-size:12px;min-height:16px;line-height:1.6;color:#8a6420}
.fb-header .header-login-status.error{color:#a4574e}

/* Mid-size screens: keep the bar from crowding when extra links (member, editor) are shown. */
@media(max-width:1180px){
  .fb-header__inner{grid-template-columns:auto 1fr auto;column-gap:16px}
  .fb-nav a{padding:0 11px}
  .fb-nav a.active::after{inset-inline:11px}
  .fb-header .header-auth-welcome{display:none}
}
@media(max-width:860px){
  :root{--fb-header-h:64px}
  .fb-header__inner{grid-template-columns:1fr auto;width:calc(100% - 32px);column-gap:12px}
  .fb-logo{font-size:24px}
  .fb-menu-toggle{display:inline-block;flex:0 0 auto}
  .fb-nav{position:absolute;top:100%;inset-inline:-16px;display:none;flex-direction:column;align-items:stretch;gap:2px;padding:10px 16px 14px;background:var(--fb-paper);border-bottom:1px solid var(--fb-line);box-shadow:0 18px 30px rgba(16,43,70,.12);justify-self:stretch}
  .fb-nav.is-open{display:flex}
  .fb-nav a{height:48px;font-size:16px;padding:0 12px;border-radius:10px}
  .fb-nav a.active{background:rgba(189,138,44,.10)}
  .fb-nav a.active::after{display:none}
  .fb-header .header-auth-welcome{display:none}
  .fb-header .header-auth-login{height:40px}
  .fb-header .header-login-form{inset-inline:0;left:0;right:0;width:auto!important}
}

/* ---------- Home hero ---------- */
/* The room and the author are one scene with fixed proportions: the author is
   placed in the room's own coordinates, so he sits at the desk in exactly the
   same way at every screen size. Only the visible window onto the scene changes. */
.fb-hero{--h:clamp(430px,36vw,640px);--ratio:2.8484;--sw:max(100vw,calc(var(--h) * var(--ratio)));--pc:.374;position:relative;height:var(--h);overflow:hidden;background:var(--fb-navy-deep);isolation:isolate;direction:rtl}
.fb-hero *{box-sizing:border-box}
.fb-hero__stage{position:absolute;inset:0;overflow:hidden}
.fb-hero__scene{position:absolute;bottom:0;left:clamp(calc(100vw - var(--sw)),calc(var(--pc) * 100vw - .374 * var(--sw)),0px);width:var(--sw);aspect-ratio:2048/719;background:url("assets/images/hero-background.webp") center/100% 100% no-repeat}
/* soft shadow where the forearms rest on the desk */
.fb-hero__scene::before{content:"";position:absolute;left:37.4%;bottom:-1.2%;width:31%;height:7.5%;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(6,4,2,.70) 0%,rgba(6,4,2,.42) 45%,rgba(6,4,2,0) 72%);filter:blur(6px);z-index:1}
.fb-hero__person{position:absolute;left:37.4%;bottom:2.6%;height:81%;width:auto;max-width:none;transform:translateX(-50%);z-index:2;filter:brightness(.95) contrast(1.03) saturate(.93) sepia(.07) drop-shadow(0 6px 10px rgba(0,0,0,.28));-webkit-user-drag:none;user-select:none;pointer-events:none}
/* darkens the side of the room that carries the text */
.fb-hero__stage::after{content:"";position:absolute;inset:0;background:linear-gradient(to left,rgba(8,17,29,.72) 0%,rgba(8,17,29,.50) 30%,rgba(8,17,29,.08) 58%,rgba(8,17,29,0) 100%);z-index:3;pointer-events:none}
.fb-hero__copy{position:absolute;z-index:4;top:50%;inset-inline-start:max(40px,calc((100% - 1180px) / 2));width:min(44%,540px);transform:translateY(-50%);text-align:start;color:#fff;font-family:"Noto Kufi Arabic",Tahoma,Arial,sans-serif}
.fb-hero__kicker{font-size:clamp(15px,1.25vw,20px);color:var(--fb-gold-soft);margin:0 0 6px;font-weight:500}
.fb-hero__copy h1{font:700 clamp(46px,5vw,84px)/1.15 Amiri,"Times New Roman",serif;margin:0;color:#fff;text-shadow:0 3px 18px rgba(0,0,0,.45)}
.fb-hero__copy h2{font:400 clamp(18px,1.7vw,27px)/1.5 "Noto Kufi Arabic",Tahoma,Arial,sans-serif;margin:6px 0 14px;color:var(--fb-gold-soft)}
.fb-hero__copy p{font-size:clamp(14px,1.05vw,17px);line-height:2.05;margin:0 0 22px;color:#f1ede4;max-width:520px;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.fb-hero__button{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 28px;border-radius:10px;background:var(--fb-gold);color:#fff;font-weight:700;font-size:16px;text-decoration:none;box-shadow:0 10px 26px rgba(0,0,0,.28);transition:filter .15s,transform .15s}
.fb-hero__button:hover{filter:brightness(1.08);transform:translateY(-1px);color:#fff}
.fb-hero__button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.fb-hero__button .book-icon{font-size:15px;opacity:.9}

@media(max-width:1180px){.fb-hero{--pc:.30}.fb-hero__copy{width:min(46%,480px)}}
/* Tablets and phones: the text sits above, the scene below with the author centred. */
@media(max-width:860px){
  .fb-hero{--h:clamp(290px,62vw,400px);--pc:.5;height:auto;display:flex;flex-direction:column;background:var(--fb-navy-deep)}
  .fb-hero__copy{position:static;order:1;transform:none;width:auto;max-width:560px;margin:0 auto;padding:34px 22px 6px;text-align:center}
  .fb-hero__copy h1{font-size:clamp(40px,10.5vw,58px)}
  .fb-hero__copy h2{font-size:clamp(17px,4.4vw,21px);margin:4px 0 10px}
  .fb-hero__copy p{font-size:15px;line-height:1.95;margin:0 auto 18px}
  .fb-hero__stage{position:relative;order:2;inset:auto;height:var(--h);width:100%}
  .fb-hero__stage::after{background:linear-gradient(to bottom,var(--fb-navy-deep) 0%,rgba(11,28,44,.55) 16%,rgba(11,28,44,0) 42%)}
}
@media(prefers-reduced-motion:reduce){.fb-hero__button,.fb-nav a,.fb-menu-toggle span{transition:none}}

/* ---------- Footer ---------- */
.fb-footer{background:var(--fb-navy-deep);color:#d9dfe6;direction:rtl;font-family:"Noto Kufi Arabic",Tahoma,Arial,sans-serif;margin-top:0}
.fb-footer *{box-sizing:border-box}
.fb-footer__inner{width:min(1180px,calc(100% - 40px));margin:0 auto;padding:44px 0 30px;display:grid;grid-template-columns:1.1fr 1fr 1.4fr;gap:36px;align-items:start}
.fb-footer__logo{display:inline-block;font:700 26px/1.3 Amiri,"Times New Roman",serif;color:#fff;text-decoration:none;margin-bottom:14px}
.fb-footer__social{display:flex;gap:10px}
.fb-footer__social a{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid rgba(231,201,138,.45);color:var(--fb-gold-soft);transition:background-color .15s,color .15s,border-color .15s}
.fb-footer__social a:hover{background:var(--fb-gold);border-color:var(--fb-gold);color:#fff}
.fb-footer__social svg{width:20px;height:20px;fill:currentColor;display:block}
.fb-footer__heading{font-size:13px;font-weight:700;color:var(--fb-gold-soft);margin:6px 0 12px;letter-spacing:0}
.fb-footer__nav{display:grid;gap:2px;justify-items:start}
.fb-footer__nav a{color:#d9dfe6;text-decoration:none;font-size:15px;line-height:1;padding:9px 0}
.fb-footer__nav a[hidden]{display:none}
.fb-footer__nav a:hover{color:var(--fb-gold-soft)}
.fb-footer__form{display:flex;gap:8px;flex-wrap:wrap}
.fb-footer__form input[type=email]{flex:1 1 200px;min-width:0;height:46px;border:1px solid rgba(255,255,255,.22);border-radius:10px;background:rgba(255,255,255,.06);color:#fff;padding:0 14px;font:400 15px "Noto Kufi Arabic",Tahoma,Arial,sans-serif}
.fb-footer__form input[type=email]::placeholder{color:#9fb0c0}
.fb-footer__form input[type=email]:focus{outline:2px solid var(--fb-gold-soft);outline-offset:1px}
.fb-footer__form button[type=submit]{height:46px;padding:0 20px;border:0;border-radius:10px;background:var(--fb-gold);color:#fff;font:700 15px "Noto Kufi Arabic",Tahoma,Arial,sans-serif;cursor:pointer;white-space:nowrap}
.fb-footer__form button[type=submit]:hover{filter:brightness(1.08)}
.fb-footer__form .subscriber-human-check{flex:1 1 100%;font-size:13px;color:#d9dfe6}
.fb-footer__form .subscriber-human-check[hidden]{display:none}
.fb-footer__form .subscriber-human-check input[type=number]{display:block;margin-top:6px;width:120px;height:40px;border-radius:8px;border:1px solid rgba(255,255,255,.3);background:#fff;color:#1b2f44;padding:0 10px;font-size:15px}
.fb-footer__form .subscriber-honeypot{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.fb-footer__status{min-height:20px;margin-top:8px;font-size:13px;line-height:1.7;color:var(--fb-gold-soft)}
.fb-footer__status.error{color:#f0a79d}
.fb-footer__copy{border-top:1px solid rgba(255,255,255,.12);text-align:center;font-size:13px;color:#9fb0c0;padding:16px 20px 20px}
@media(max-width:860px){
  .fb-footer__inner{grid-template-columns:1fr;gap:26px;padding:34px 0 22px;width:calc(100% - 40px);text-align:center}
  .fb-footer__social{justify-content:center}
  .fb-footer__nav{grid-auto-flow:column;justify-content:center;gap:18px}
  .fb-footer__form{justify-content:center}
}

/* V207 — line drawing behind each category card */
.category-grid .cat{background:linear-gradient(135deg,#0d2238 0%,#153555 100%);transition:transform .2s,box-shadow .2s}
.category-grid .cat:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(16,43,70,.22)}
.category-grid .cat>*:not(.cat-art){position:relative;z-index:1}
.cat-art{position:absolute;inset-inline-end:-14px;bottom:-26px;width:150px;height:150px;color:#e7c98a;opacity:.32;z-index:0;pointer-events:none;transition:opacity .25s,transform .35s}
.cat-art svg{display:block;width:100%;height:100%;overflow:visible}
.category-grid .cat:hover .cat-art{opacity:.5;transform:rotate(-5deg) scale(1.06)}
@media(max-width:560px){.cat-art{width:128px;height:128px;bottom:-20px}}
@media(prefers-reduced-motion:reduce){.category-grid .cat,.cat-art{transition:none}.category-grid .cat:hover{transform:none}.category-grid .cat:hover .cat-art{transform:none}}

/* V208 — "create account" stays reachable on small screens: in the bar on tablets, inside the menu on phones */
.fb-nav a.fb-nav__register{display:none}
@media(max-width:860px){.fb-header .header-auth-login,.fb-header .header-auth-register{height:40px}}
@media(max-width:600px){
  .fb-header .header-auth-register{display:none}
  .fb-nav a.fb-nav__register:not([hidden]){display:flex;justify-content:center;margin-top:8px;background:var(--fb-gold);color:#fff;font-weight:700}
  .fb-nav a.fb-nav__register:not([hidden]):hover{background:var(--fb-gold);color:#fff;filter:brightness(1.08)}
}

/* V209 — no "start reading" button on tablets and phones */
@media(max-width:768px){.fb-hero__button{display:none}.fb-hero__copy p{margin-bottom:6px}.fb-hero__copy{padding-bottom:14px}}

/* V212 — phones: nothing may be wider than the screen.
   A text box has a "natural" width that depends on the phone's fonts. On some phones (Samsung) it is
   wider than the screen, and it pushed the page sideways. Text boxes now always fit their container. */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),select,textarea{max-width:100%}
.fb-footer__inner>*{min-width:0}
.fb-footer__form input[type=email]{width:100%}
.fb-header__inner{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.fb-logo{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1180px){.fb-header__inner{grid-template-columns:auto minmax(0,1fr) auto}}
@media(max-width:860px){.fb-header__inner{grid-template-columns:minmax(0,1fr) auto}}
@media(max-width:380px){
  .fb-header__inner{width:calc(100% - 24px);column-gap:8px}
  .fb-logo{font-size:21px}
  .fb-header__end{gap:6px}
  .fb-header .header-auth-login{padding:0 10px!important;font-size:12px!important}
  .fb-menu-toggle{width:40px;height:40px}
  .fb-menu-toggle span{left:10px;right:10px}
  .fb-menu-toggle span:nth-child(1){top:12px}.fb-menu-toggle span:nth-child(2){top:19px}.fb-menu-toggle span:nth-child(3){top:26px}
  .fb-menu-toggle[aria-expanded="true"] span:nth-child(1),.fb-menu-toggle[aria-expanded="true"] span:nth-child(3){top:19px}
  .fb-nav{inset-inline:-12px;padding-inline:12px}
}
/* Safety net: even if some element is still too wide, the page itself cannot slide sideways. */
html,body{overflow-x:clip}