/*
 * ============================================================
 * NEDAL SOFTWARE
 * ============================================================
 *
 *   ███████  █████  ██    ██ ██████  ██
 *   ██      ██   ██ ██    ██ ██   ██ ██
 *   ███████ ███████ ██    ██ ██   ██ ██
 *        ██ ██   ██ ██    ██ ██   ██ ██
 *   ███████ ██   ██  ██████  ██████  ██
 *
 *   صُنع في السعودية  |  Made in Saudi Arabia
 *
 * ============================================================
 *
 * Project Name : article
 * Project Title: Article | Personal Archive & Books Experience
 * Version      : 4.4.2
 * File Created : 2026-10-20
 *
 * Developed by: Nedal Hussein Al Masseri
 * Website: https://www.almasseri.net
 *
 * Copyright (c) 2026 Nedal Hussein Al Masseri
 * All Rights Reserved.
 *
 * Unauthorized copying, modification, redistribution,
 * or resale is strictly prohibited without prior
 * written permission.
 *
 * ============================================================
 */
/* ---------- Tokens ---------- */
:root{
  --paper:#f3f6f8;
  --surface:#ffffff;
  --ink:#12283a;
  --ink-2:#4a5d6c;
  --ink-3:#7d8d99;
  --sea:#347aaa;
  --sea-deep:#1f5a84;
  --sea-soft:#e1edf5;
  --sand:#b88746;
  --sand-soft:#f4ebdd;
  --line:#d5e0e8;
  --ui:"Alexandria", "Segoe UI", Tahoma, sans-serif;
  --display:"Reem Kufi", "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;
  --text:"Noto Naskh Arabic", "Traditional Arabic", "Times New Roman", serif;
  --wrap:min(1180px, 100% - 2.5rem);
  --radius:14px;
  --ease:cubic-bezier(.22,.8,.2,1);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(76px + env(safe-area-inset-top,0px));-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

body.nx{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--text);font-size:1.0625rem;line-height:1.9;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
}
body.nx-modal-on{overflow:hidden}
.nx img{max-width:100%;height:auto;display:block}
.nx a{color:inherit;text-decoration:none}
.nx button,.nx input,.nx textarea{font:inherit;color:inherit}
.nx :focus-visible{outline:2px solid var(--sea);outline-offset:3px;border-radius:6px}
.nx svg{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.nx-skip{position:absolute;inset-inline-start:1rem;top:-4rem;z-index:100;background:var(--ink);color:#fff!important;padding:.5rem 1rem;border-radius:8px}
.nx-skip:focus{top:1rem}

/* Before JS takes over: avoid a flash of the animated hero words */
.nx-pre [data-nx-blur] .nx-w,.nx-pre [data-nx-fade]{opacity:0}

/* ---------- Top bar ---------- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:41;background:rgba(243,246,248,.82);backdrop-filter:blur(14px)}
.nx-bar{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:.85rem max(1.25rem, (100% - 1180px)/2);
  background:rgba(243,246,248,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,padding .3s;
}
.nx-bar.is-scrolled{border-bottom-color:var(--line);padding-block:.55rem}
.nx-brand{display:flex;align-items:center;gap:.7rem;font-family:var(--ui);font-weight:600;font-size:1.05rem;white-space:nowrap}
.nx-brand-mark{
  display:grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:50%;
  background:var(--ink);color:var(--paper);font-size:1.25rem;line-height:1;padding-bottom:.2rem;
}
.nx-nav{display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none}
.nx-nav::-webkit-scrollbar{display:none}
.nx-nav a{
  position:relative;padding:.45rem .9rem;border-radius:999px;
  font-family:var(--ui);font-size:.98rem;color:var(--ink-2);white-space:nowrap;transition:color .25s,background .25s;
}
.nx-nav a:hover{color:var(--ink);background:var(--sea-soft)}
.nx-nav a[aria-current="page"]{color:var(--paper);background:var(--ink)}

/* ---------- Toast ---------- */
.nx-toast{
  position:fixed;z-index:60;inset-inline:0;margin-inline:auto;width:max-content;max-width:calc(100% - 2rem);
  top:calc(80px + env(safe-area-inset-top,0px));
  padding:.75rem 1.2rem;border-radius:12px;background:var(--sand-soft);color:#5d421c;border:1px solid #e5d2b2;
  font-family:var(--ui);font-size:.95rem;box-shadow:0 10px 30px -12px rgba(18,40,58,.35);
}
.nx-toast.is-ok{background:var(--sea-soft);color:var(--sea-deep);border-color:#bcd5e6}

/* ---------- Hero ---------- */
.nx-hero{position:relative;overflow:hidden;isolation:isolate;background:var(--paper)}
.nx-waves{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.nx-hero-inner{
  width:var(--wrap);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:end;gap:2rem;
  padding-block:clamp(2.5rem,7vw,6rem) 0;
}
.nx-name{
  margin:0;font-family:var(--ui);font-weight:800;
  font-size:clamp(2.2rem,4.4vw,3.9rem);line-height:1.3;letter-spacing:0;color:var(--ink);
}
.nx-w{display:inline-block;will-change:transform,filter,opacity}
.nx-line{display:block;white-space:nowrap}
.nx-hero-sub{margin:1.1rem 0 0;max-width:34em;font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--ink-2)}
.nx-counters{display:flex;flex-wrap:wrap;margin:2.4rem 0 clamp(2.5rem,6vw,4.5rem);border-top:1px solid var(--line)}
.nx-counter{
  position:relative;flex:1 1 8rem;padding:1rem 0 .4rem 1.25rem;
  display:flex;flex-direction:column;gap:.1rem;transition:color .3s;
}
.nx-counter + .nx-counter{padding-inline-start:1.25rem;border-inline-start:1px solid var(--line)}
.nx-counter b{font-family:var(--ui);font-weight:600;font-size:clamp(2rem,4vw,3rem);line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.nx-counter span{font-family:var(--ui);font-size:.98rem;color:var(--ink-2)}
.nx-counter::after{
  content:"";position:absolute;top:-1px;inset-inline:0;height:3px;background:var(--sea);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease);
}
.nx-counter + .nx-counter::after{inset-inline-start:0}
.nx-counter:hover::after,.nx-counter.is-on::after{transform:scaleX(1)}
.nx-counter.is-on b,.nx-counter:hover b{color:var(--sea)}
.nx-portrait{margin:0;align-self:end;justify-self:center;position:relative;width:min(100%,360px);mix-blend-mode:multiply;isolation:isolate}
.nx-portrait::before{content:"";position:absolute;inset:auto 4% 0;aspect-ratio:1;border-radius:50%;background:var(--sea-soft)}
.nx-portrait img{position:relative;width:100%;mix-blend-mode:multiply}

/* ---------- Marquee (scroll velocity) ---------- */
.nx-marquee{
  overflow:hidden;border-block:1px solid var(--line);background:var(--surface);
  padding-block:1rem;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.nx-marquee-track{display:flex;width:max-content;align-items:center;gap:2.2rem;will-change:transform}
.nx-marquee-track span{font-family:var(--ui);font-size:clamp(1.25rem,2.4vw,1.9rem);color:var(--ink);white-space:nowrap}
.nx-marquee-track i{width:.5rem;height:.5rem;border-radius:50%;background:var(--sea);flex:none}

/* ---------- Section ---------- */
.nx-section{width:var(--wrap);margin-inline:auto;padding-block:clamp(3rem,7vw,5.5rem)}
.nx-section-head{display:flex;justify-content:space-between;align-items:end;gap:2rem;flex-wrap:wrap;margin-bottom:2.2rem}
.nx-section-title{margin:0;font-family:var(--ui);font-weight:700;font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.25}
.nx-section-intro{margin:.6rem 0 0;max-width:36em;color:var(--ink-2)}
.nx-search{
  display:flex;align-items:center;gap:.6rem;min-width:min(100%,320px);
  padding:.65rem 1rem;border-radius:999px;background:var(--surface);border:1px solid var(--line);
  transition:border-color .25s,box-shadow .25s;
}
.nx-search:focus-within{border-color:var(--sea);box-shadow:0 0 0 4px var(--sea-soft)}
.nx-search svg{color:var(--ink-3)}
.nx-search input{flex:1;min-width:0;border:0;background:none;outline:none;font-family:var(--ui);font-size:.98rem}
.nx-empty{padding:2rem;text-align:center;color:var(--ink-2);background:var(--surface);border-radius:var(--radius);border:1px dashed var(--line)}

/* Article rows */
.nx-rows{border-top:1px solid var(--ink)}
.nx-row{
  --mx:50%;--my:50%;position:relative;
  display:grid;grid-template-columns:1fr;padding:1.6rem 1.25rem;border-bottom:1px solid var(--line);
  border-radius:4px;transition:background-color .3s;
}
.nx-row::before,.nx-card::before,.nx-pager-link::before,.nx-benefits li::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(420px circle at var(--mx) var(--my), rgba(52,122,170,.10), transparent 60%);
}
.nx-row:hover::before,.nx-card:hover::before,.nx-pager-link:hover::before,.nx-benefits li:hover::before{opacity:1}
.nx-item-body{display:grid;grid-template-columns:9rem minmax(0,1fr);column-gap:2rem;align-items:baseline}
.nx-item-body > *{grid-column:2}
.nx-date{grid-column:1;grid-row:1 / span 3;font-family:var(--ui);font-size:.92rem;color:var(--ink-3);padding-top:.35rem}
.nx-item-title{margin:0;font-family:var(--ui);font-weight:600;font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.35}
.nx-item-title a{background:linear-gradient(var(--sea),var(--sea)) no-repeat right bottom / 0 2px;transition:background-size .45s var(--ease),color .3s}
.nx-row:hover .nx-item-title a,.nx-card:hover .nx-item-title a{color:var(--sea-deep);background-size:100% 2px}
.nx-item-title a::after{content:"";position:absolute;inset:0}
.nx-item-desc{margin:.5rem 0 0;color:var(--ink-2);max-width:62ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nx-item-foot{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.1rem;margin-top:.9rem;font-family:var(--ui);font-size:.9rem;color:var(--ink-3)}
.nx-item-foot .nx-votes,.nx-item-foot .nx-link{position:relative;z-index:2}
.nx-item-foot .nx-link{margin-inline-start:auto}

/* Media grid (lectures / press) */
.nx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:2.4rem 2rem}
.nx-card{--mx:50%;--my:50%;position:relative;border-radius:var(--radius);padding:.6rem .6rem 1rem;transition:background-color .3s}
.nx-card:hover{background:var(--surface)}
.nx-card-media{display:block;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--sea-soft)}
.nx-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.nx-card:hover .nx-card-media img{transform:scale(1.05)}
.nx-card .nx-item-body{display:block;padding:1rem .4rem 0}
.nx-card .nx-date{display:block;padding:0}
.nx-card .nx-item-title{font-size:1.3rem;margin-top:.2rem}
.nx-card .nx-item-foot > .nx-link{display:none}

/* Votes */
.nx-votes{display:inline-flex;gap:.35rem}
.nx-votes form{margin:0;display:contents}
.nx-vote{
  display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .7rem;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer;
  font-family:var(--ui);font-size:.88rem;line-height:1.4;transition:border-color .25s,color .25s,transform .25s var(--ease);
}
button.nx-vote:hover{border-color:var(--sea);color:var(--sea);transform:translateY(-2px)}
button.nx-vote:active{transform:scale(.94)}
.nx-vote.is-done{cursor:default;opacity:.75}
.nx-vote.is-mine{opacity:1;border-color:var(--sea);background:var(--sea-soft);color:var(--sea-deep)}
.nx-vote b{font-weight:500;font-variant-numeric:tabular-nums}

/* Links & buttons */
.nx-link{font-family:var(--ui);color:var(--sea-deep)!important;display:inline-flex;align-items:center;gap:.4rem}
.nx-link::after{content:"";width:.9rem;height:1px;background:currentColor;transition:width .35s var(--ease)}
.nx-link:hover::after{width:1.6rem}
.nx-link.is-sand{color:var(--sand)!important}
.nx-actions{display:flex;flex-wrap:wrap;gap:.7rem}
.nx-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8rem 1.5rem;border-radius:999px;border:1px solid var(--ink);cursor:pointer;
  background:var(--ink);color:var(--paper)!important;font-family:var(--ui);font-size:1rem;line-height:1.3;
  transition:background .3s,border-color .3s,color .3s;will-change:transform;
}
.nx-btn:hover{background:var(--sea-deep);border-color:var(--sea-deep)}
.nx-btn.is-ghost{background:transparent;color:var(--ink)!important;border-color:var(--line)}
.nx-btn.is-ghost:hover{border-color:var(--ink);background:var(--surface)}
.nx-btn.is-sand{background:var(--sand);border-color:var(--sand)}
.nx-btn.is-sand:hover{background:#9c7038;border-color:#9c7038}
.nx-back{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--ui);font-size:.95rem;color:var(--ink-2)!important;transition:color .25s}
.nx-back::before{content:"";width:.5rem;height:.5rem;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg)}
.nx-back:hover{color:var(--sea-deep)!important}
.nx-tag{display:inline-block;font-family:var(--ui);font-size:.85rem;color:var(--sea-deep);background:var(--sea-soft);border-radius:999px;padding:.15rem .75rem}

/* ---------- Reader ---------- */
.nx-reader{width:min(760px,100% - 2.5rem);margin-inline:auto;padding-block:clamp(2.5rem,6vw,4.5rem) 4rem}
.nx-progress{position:fixed;z-index:50;top:env(safe-area-inset-top,0px);inset-inline:0;height:3px;background:var(--sea);transform:scaleX(0);transform-origin:right}
.nx-reader-title{margin:1.4rem 0 0;font-family:var(--ui);font-weight:700;font-size:clamp(1.9rem,3.8vw,2.9rem);line-height:1.35}
.nx-reader-meta{display:flex;flex-wrap:wrap;row-gap:.3rem;margin-top:1rem;font-family:var(--ui);font-size:.95rem;color:var(--ink-3)}
.nx-reader-meta > * + *::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.5;margin:0 .9rem;vertical-align:middle}
.nx-reader-figure{margin:2.4rem 0 0;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/10;background:var(--sea-soft)}
.nx-reader-figure img{width:100%;height:118%;object-fit:cover}
.nx-prose{
  margin-top:2.4rem;font-size:clamp(1.15rem,1.6vw,1.3rem);line-height:2.15;color:#1c3446;
  overflow-wrap:break-word;text-align:justify;text-justify:inter-word;hyphens:none;
}
.nx-prose.is-compact{margin-top:0;font-size:1.1rem;line-height:2}
.nx-reader-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-top:3rem;padding-block:1.4rem;border-block:1px solid var(--line)}
.nx-pager{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem}
.nx-pager-link{
  --mx:50%;--my:50%;position:relative;display:flex;flex-direction:column;gap:.3rem;padding:1.2rem 1.4rem;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);transition:border-color .3s;
}
.nx-pager-link:hover{border-color:var(--sea)}
.nx-pager-link.is-next{text-align:left}
.nx-pager-link small{font-family:var(--ui);color:var(--ink-3);font-size:.85rem}
.nx-pager-link span{font-family:var(--ui);font-size:1.1rem;line-height:1.45}

.nx-comments{margin-top:4rem}
.nx-comments h2{font-family:var(--ui);font-size:2rem;margin:0 0 1.2rem;display:flex;align-items:baseline;gap:.6rem}
.nx-comments h2 small{font-size:1rem;color:var(--ink-3)}
.nx-comment{padding:1.1rem 0;border-top:1px solid var(--line)}
.nx-comment header{display:flex;gap:1rem;align-items:baseline;font-family:var(--ui)}
.nx-comment time{font-size:.85rem;color:var(--ink-3)}
.nx-comment p{margin:.4rem 0 0;color:#1c3446}
.nx-form{display:grid;gap:1rem;margin-top:1.6rem;padding:1.6rem;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line)}
.nx-form label{display:grid;gap:.4rem;font-family:var(--ui);font-size:.95rem;color:var(--ink-2)}
.nx-form input,.nx-form textarea{
  width:100%;padding:.75rem 1rem;border-radius:10px;border:1px solid var(--line);background:var(--paper);
  font-family:var(--text);font-size:1.05rem;transition:border-color .25s,box-shadow .25s;resize:vertical;
}
.nx-form input:focus,.nx-form textarea:focus{outline:none;border-color:var(--sea);box-shadow:0 0 0 4px var(--sea-soft)}
.nx-form-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.nx-form-foot small{color:var(--ink-3);font-family:var(--ui)}

/* ---------- Library ---------- */
.nx-feature{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(220px,.8fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;
  padding:clamp(1.8rem,4vw,3.2rem);border-radius:24px;background:var(--surface);border:1px solid var(--line);
}
.nx-feature-cover{order:2;perspective:900px;justify-self:center;width:min(100%,300px)}
.nx-feature-copy h3{margin:.8rem 0 0;font-family:var(--ui);font-weight:700;font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.3}
.nx-feature-theme{margin:.4rem 0 0;font-family:var(--ui);color:var(--sea-deep);font-size:1.15rem}
.nx-feature-copy p:not(.nx-feature-theme){color:var(--ink-2);max-width:56ch}
.nx-feature .nx-actions{margin-top:1.4rem}

[data-nx-tilt]{display:block;transform-style:preserve-3d;will-change:transform}
.nx-feature-cover img,.nx-book-cover img,.nx-cover3d img,.nx-related-cover img,.nx-cover-blank{
  width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:4px 10px 10px 4px;
  box-shadow:0 1px 2px rgba(18,40,58,.2), 0 24px 40px -18px rgba(18,40,58,.55);
}
/* Arabic books bind on the right: draw the spine there */
.nx-feature-cover,.nx-book-cover,.nx-cover3d,.nx-related-cover{position:relative}
.nx-feature-cover::after,.nx-book-cover::after,.nx-cover3d::after,.nx-related-cover::after{
  content:"";position:absolute;inset-block:0;right:0;width:7%;pointer-events:none;border-radius:4px 0 0 4px;
  background:linear-gradient(270deg, rgba(0,0,0,.24), rgba(255,255,255,.18) 45%, transparent);
}
.nx-cover-blank{display:grid;place-items:center;padding:1.2rem;text-align:center;background:var(--ink);color:var(--paper);font-family:var(--ui);font-size:1.2rem}

.nx-shelf-head{display:flex;justify-content:space-between;align-items:end;gap:1.5rem;flex-wrap:wrap;margin:clamp(3rem,6vw,4.5rem) 0 2rem}
.nx-shelf-head h3{margin:0;font-family:var(--ui);font-size:clamp(1.7rem,3vw,2.3rem)}
.nx-shelf-head h3 small{font-size:1rem;color:var(--ink-3);margin-inline-start:.4rem}
.nx-shelf-tools{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.nx-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.nx-chips button{
  padding:.45rem 1rem;border-radius:999px;border:1px solid var(--line);background:var(--surface);cursor:pointer;
  font-family:var(--ui);font-size:.92rem;color:var(--ink-2);transition:all .25s;
}
.nx-chips button:hover{border-color:var(--ink);color:var(--ink)}
.nx-chips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.nx-shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:3rem 2rem}
.nx-book{display:flex;flex-direction:column;gap:.55rem}
.nx-book-cover{perspective:900px;margin-bottom:.7rem}
.nx-book h4{margin:0;font-family:var(--ui);font-size:1.2rem;line-height:1.4}
.nx-book h4 a:hover{color:var(--sea-deep)}
.nx-book p{margin:0;color:var(--ink-2);font-size:.98rem;line-height:1.8;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.nx-book .nx-tag{align-self:flex-start}
.nx-book-links{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto;padding-top:.8rem}
.nx-book-links .nx-btn{flex:1 1 auto}
.nx-btn.is-sm{padding:.55rem 1rem;font-size:.9rem;white-space:nowrap}
.nx-btn.is-sand-line{background:transparent;border-color:var(--sand);color:#8a6430!important}
.nx-btn.is-sand-line:hover{background:var(--sand);border-color:var(--sand);color:#fff!important}
.nx-book[hidden],.nx-row[hidden],.nx-card[hidden]{display:none}

/* ---------- Book page ---------- */
.nx-book-hero{position:relative;overflow:hidden;isolation:isolate;background:var(--paper);border-bottom:1px solid var(--line)}
.nx-book-hero-inner{
  width:var(--wrap);margin-inline:auto;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(240px,.85fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;padding-block:clamp(2.5rem,6vw,5rem);
}
.nx-crumbs{display:flex;gap:1.5rem;flex-wrap:wrap}
.nx-book-title{margin:1.2rem 0 0;font-family:var(--ui);font-weight:700;font-size:clamp(2rem,4vw,3.2rem);line-height:1.3}
.nx-book-tagline{margin:.6rem 0 0;font-family:var(--ui);font-size:clamp(1.1rem,2vw,1.4rem);color:var(--sea-deep)}
.nx-book-desc{margin:1.2rem 0 0;color:var(--ink-2);max-width:60ch}
.nx-facts{display:flex;flex-wrap:wrap;gap:0;margin:1.8rem 0;border-block:1px solid var(--line)}
.nx-facts div{padding:.8rem 1.4rem .8rem 1.4rem}
.nx-facts div:first-child{padding-inline-start:0}
.nx-facts div + div{border-inline-start:1px solid var(--line)}
.nx-facts dt{font-family:var(--ui);font-size:.82rem;color:var(--ink-3)}
.nx-facts dd{margin:0;font-family:var(--ui);font-size:1.15rem;font-weight:600}
.nx-book-vote{display:flex;align-items:center;gap:.9rem;margin-top:1.6rem;font-family:var(--ui);color:var(--ink-2)}
.nx-book-hero-cover{perspective:1100px;justify-self:center;width:min(100%,340px)}

.nx-panel{width:min(820px,100% - 2.5rem);margin-inline:auto;padding-block:clamp(2.5rem,5vw,4rem);border-bottom:1px solid var(--line)}
.nx-panel:last-of-type{border-bottom:0}
.nx-panel h2{margin:0 0 1.2rem;font-family:var(--ui);font-weight:700;font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.25}
.nx-panel > p{margin:0;color:#1c3446;font-size:1.12rem;line-height:2.05;text-align:justify;text-justify:inter-word}
.nx-panel-lead > p{font-size:clamp(1.15rem,1.8vw,1.35rem)}
.nx-note{margin:-.6rem 0 1.4rem;color:var(--ink-3);font-family:var(--ui);font-size:.92rem}
.nx-benefits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1rem}
.nx-benefits li{--mx:50%;--my:50%;position:relative;padding:1.1rem 1.3rem;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);border-inline-start:3px solid var(--sea)}
.nx-toc{border-top:1px solid var(--ink)}
.nx-toc details{border-bottom:1px solid var(--line)}
.nx-toc summary{display:flex;gap:1.2rem;align-items:baseline;padding:1.05rem 0;cursor:pointer;list-style:none;font-family:var(--ui);font-size:1.12rem}
.nx-toc summary::-webkit-details-marker{display:none}
.nx-toc summary span{color:var(--sea);font-variant-numeric:tabular-nums;min-width:1.5rem}
.nx-toc summary::after{content:"+";margin-inline-start:auto;color:var(--ink-3);font-size:1.4rem;line-height:1;transition:transform .3s var(--ease)}
.nx-toc details[open] summary::after{transform:rotate(45deg)}
.nx-toc details p{margin:0 0 1.1rem;padding-inline-start:2.7rem;color:var(--ink-2)}
.nx-quotes{display:grid;gap:1.4rem}
.nx-quotes blockquote,.nx-reviews blockquote{margin:0;padding-inline-start:1.4rem;border-inline-start:3px solid var(--sand);font-size:1.25rem;line-height:1.95}
.nx-reviews{display:grid;gap:1.4rem}
.nx-reviews blockquote{font-size:1.08rem}
.nx-reviews p{margin:0}
.nx-reviews cite{display:block;margin-top:.4rem;font-style:normal;font-family:var(--ui);color:var(--ink-3);font-size:.9rem}

.nx-sampler{outline:none}
.nx-sampler-page{
  position:relative;min-height:16rem;padding:clamp(1.6rem,4vw,2.6rem);border-radius:6px 16px 16px 6px;
  background:var(--surface);border:1px solid var(--line);box-shadow:0 24px 40px -30px rgba(18,40,58,.5);
}
.nx-sampler-page::before{content:"";position:absolute;inset-block:0;right:0;width:14px;border-radius:6px 0 0 6px;background:linear-gradient(270deg,rgba(18,40,58,.08),transparent)}
.ns42-sample-card h3{margin:0 0 .8rem;font-family:var(--ui);font-size:1.05rem;color:var(--sea-deep)}
.ns42-sample-card p{margin:0;font-size:1.18rem;line-height:2.05;text-align:justify;text-justify:inter-word}
.ns42-sample-card:not([hidden]){animation:nx-page .55s var(--ease)}
@keyframes nx-page{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.nx-sampler-controls{display:flex;align-items:center;justify-content:center;gap:1.2rem;margin-top:1.2rem;font-family:var(--ui);color:var(--ink-2)}
.nx-sampler-controls button{display:grid;place-items:center;width:2.8rem;height:2.8rem;border-radius:50%;border:1px solid var(--line);background:var(--surface);cursor:pointer;transition:border-color .25s,color .25s}
.nx-sampler-controls button:hover:not(:disabled){border-color:var(--ink);color:var(--sea-deep)}
.nx-sampler-controls button:disabled{opacity:.4;cursor:default}
.nx-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}
.nx-preview{padding:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface);cursor:zoom-in;transition:transform .35s var(--ease)}
.nx-preview:hover{transform:translateY(-4px)}
.nx-preview img{width:100%;aspect-ratio:3/4;object-fit:cover}
.nx-author{display:flex;gap:2rem;align-items:center}
.nx-author img{width:130px;flex:none;mix-blend-mode:multiply;border-radius:50%;background:var(--sea-soft);aspect-ratio:1;object-fit:cover;object-position:top}
.nx-author h2{margin-bottom:.5rem}
.nx-author p{margin:0 0 .8rem;color:var(--ink-2)}
.nx-related{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2rem 1.5rem}
.nx-related-card{display:flex;flex-direction:column;gap:.9rem;font-family:var(--ui);line-height:1.45}
.nx-related-cover{perspective:800px}
.nx-related-card:hover strong{color:var(--sea-deep)}

.nx-lightbox{position:fixed;inset:0;z-index:80;display:none;place-items:center;padding:2rem;background:rgba(18,40,58,.88);backdrop-filter:blur(6px)}
.nx-lightbox[aria-hidden="false"]{display:grid}
.nx-lightbox img{max-height:88vh;max-width:min(92vw,900px);border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.nx-lightbox button{position:absolute;top:calc(1rem + env(safe-area-inset-top,0px));inset-inline-end:1rem;width:2.8rem;height:2.8rem;border-radius:50%;border:0;background:var(--paper);color:var(--ink);display:grid;place-items:center;cursor:pointer}

/* ---------- Footer ---------- */
.nx-foot{
  margin-top:2rem;padding:clamp(2.5rem,6vw,4rem) max(1.25rem,(100% - 1180px)/2) calc(2rem + env(safe-area-inset-bottom,0px));
  background:var(--ink);color:#c9d6e0;display:grid;gap:1.2rem;
}
.nx-foot-name{font-family:var(--ui);font-weight:700;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.3;color:var(--paper)}
.nx-foot-nav{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;font-family:var(--ui)}
.nx-foot-nav a:hover{color:#fff}
.nx-foot small{display:block;margin-top:.6rem;padding-top:1.2rem;border-top:1px solid rgba(201,214,224,.16);font-family:var(--ui);color:#7f95a6;direction:ltr;text-align:center}

/* Reem Kufi stays only on content titles; names, navigation and UI use Alexandria */
.nx-item-title,.nx-reader-title,.nx-marquee-track span,.nx-feature-copy h3,.nx-book h4,.nx-book-title{font-family:var(--display)}

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .nx-hero-inner{grid-template-columns:1fr;align-items:start}
  .nx-portrait{order:-1;width:min(56vw,230px);justify-self:start}
  .nx-counters{margin-bottom:2.5rem}
  .nx-counter{flex:1 1 45%}
  .nx-counter:nth-child(3){border-inline-start:0;padding-inline-start:0}
  .nx-item-body{grid-template-columns:1fr}
  .nx-item-body > *{grid-column:1}
  .nx-date{grid-row:auto;padding:0}
  .nx-row{padding-inline:.4rem}
  .nx-feature{grid-template-columns:1fr}
  .nx-feature-cover{order:-1;width:min(70%,240px)}
  .nx-book-hero-inner{grid-template-columns:1fr}
  .nx-book-hero-cover{order:-1;width:min(62%,250px)}
  .nx-pager{grid-template-columns:1fr}
  .nx-author{flex-direction:column;align-items:flex-start}
}
@media (max-width: 560px){
  .nx-shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.2rem 1rem}
  .nx-book h4{font-size:1.05rem}
  .nx-book p{-webkit-line-clamp:3;font-size:.92rem}
  .nx-book .nx-btn.is-sm{padding:.5rem .6rem;font-size:.85rem}
  .nx-brand-name{display:none}
  .nx-bar{gap:.8rem}
  .nx-nav a{padding:.4rem .7rem;font-size:.92rem}
  .nx-item-foot .nx-link{margin-inline-start:0;width:100%}
  .nx-facts div{padding-inline:.9rem}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .nx-pre [data-nx-blur] .nx-w,.nx-pre [data-nx-fade]{opacity:1}
}

@media print{
  .nx-bar,.nx-foot,.nx-reader-tools,.nx-pager,.nx-form,.nx-progress,.nx-toast,body::before{display:none!important}
  body.nx{background:#fff}
  .nx-reader{width:100%;padding:0}
  .nx-w{opacity:1!important;filter:none!important;transform:none!important}
}

/*
 * ============================================================
 * END OF FILE : nx.css
 * ============================================================
 * Project : article  |  Version : 4.4.2
 * (c) 2026 NEDAL SOFTWARE - Nedal Hussein Al Masseri
 * https://www.almasseri.net
 * ============================================================
 */