/* ═══════════════════════════════════════════════════════════════════════════
   المؤلفات — the library, ported from alsawair.com/Books.

   WHAT THIS IS. The owner asked for this wing to be the books section of
   alsawair.com, identically. That site is the Sawaeer.Legacy codebase, so this is a
   port from source rather than a reconstruction from screenshots: every rule below
   comes from Sawaeer.Web/wwwroot/css/site.css, and the class names are kept exactly as
   they are there — .book-card, .shelf, .chip, .tf-hero — so the two can still be
   diffed against each other when either moves.

   ── THREE THINGS HAD TO CHANGE, AND ONLY THESE THREE ──────────────────────

   1 · EVERYTHING IS SCOPED UNDER .bkx. Sawaeer's names collide head-on with names this
       site already owns: .chip is a subject filter here, .book is a shelf card, .card,
       .section, .eyebrow and .reveal all exist and mean something else. Unscoped, this
       file would silently restyle half the archive. .bkx is the wing's wrapper and
       every selector below sits inside it; nothing here can escape that element.

   2 · NO BOOTSTRAP. Sawaeer's markup leans on Bootstrap's grid, buttons and utilities
       and on the bootstrap-icons font. This site has neither, and its
       Content-Security-Policy admits no CDN — adding a 200KB icon font and a framework
       to render one wing would be the tail wagging the dog. The handful of utilities
       that are actually used are written out below, and every `<i class="bi">` became
       an inline <svg> in the markup, so the rules that targeted `.bi` target `svg`.

   3 · TWO WORLDS. Sawaeer is one fixed light theme; this site has the Archive (ink) and
       the Manuscript (paper) and a toggle in the header. So the tokens are declared
       twice: the MANUSCRIPT block is Sawaeer's own light palette, value for value —
       that is the copy — and the base block is Sawaeer's own DARK palette, which that
       codebase already ships. Neither is invented here.

   The hero stays green in both worlds, because it is green in both of Sawaeer's.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── tokens ──────────────────────────────────────────────────────────────────
   Sawaeer's ramps, verbatim, declared ON THE WRAPPER rather than :root. A ramp at
   the root would be inherited by the whole document and start competing with this
   site's own --acc/--bg/--txt for the same job. Here they exist only inside the wing.

   The base values are Sawaeer's DARK theme, because this site's default world is the
   Archive; the Manuscript override below is its light theme, which is the copy. */
.bkx{
  /* green ramp */
  --green-50:#ecf5ef;  --green-100:#d3e7da; --green-200:#a7cfb5; --green-300:#74b08b;
  --green-400:#3f8d63;  --green-500:#1c6c44; --green-600:#0f3d2e; --green-700:#0c3325;
  --green-800:#09281d;  --green-900:#061d15;
  /* gold ramp */
  --gold-50:#f8f2e6;  --gold-100:#efe1c7; --gold-200:#e3cb9c; --gold-300:#ddc28a;
  --gold-400:#d2a85e; --gold-500:#c99a47; --gold-600:#a87c38; --gold-700:#84602b;
  /* warm neutrals */
  --neutral-0:#ffffff;  --neutral-50:#faf8f4;  --neutral-100:#efe9dc; --neutral-200:#e6dece;
  --neutral-300:#d2c8b5; --neutral-400:#a89e8b; --neutral-500:#7a7468; --neutral-600:#564f43;
  --neutral-700:#3c372e; --neutral-800:#26221b; --neutral-900:#16130d;

  --primary:var(--green-600); --primary-rgb:15,61,46;
  --gold:var(--gold-500); --gold-light:var(--gold-300); --gold-rgb:201,154,71;

  /* semantic — Sawaeer's [data-theme="dark"] block */
  --bk-bg:#14110b; --surface:#1e1a12; --surface-2:#181409;
  --text:#efe9dc; --muted:#a89e8b; --border:#322c20;
  --accent:var(--gold-300); --card-bg:var(--surface); --ring:var(--gold-400);

  /* fonts: the two sites already share these three families, self-hosted here
     under the same names, so the type ports with nothing substituted */
  --bk-body:'IBM Plex Sans Arabic','Tajawal','Segoe UI',Tahoma,sans-serif;
  --bk-head:'Amiri','Tajawal',serif;
  /* the site's own display token (Amiri; Cormorant in English) rather than a private
     copy: the Ruqʿa copy that sat here set /en/books in Ruqʿa's Latin. Amiri ships one
     weight, so every --bk-display rule below asks for 400. */
  --bk-display:var(--font-display);

  --space-4:1rem; --space-7:clamp(2.5rem,5vw,4rem);
  --radius-sm:8px; --radius-md:16px; --radius-lg:24px; --radius-pill:999px;
  --bk-ease:cubic-bezier(.22,.7,.25,1);
  --container-max:1200px;

  color:var(--text);
  font-family:var(--bk-body)}
/* Sawaeer's light theme — the copy. */
html[data-world="manuscript"] .bkx{
  --bk-bg:#faf8f4; --surface:#fffdf9; --surface-2:#faf6ec;
  --text:#211d16; --muted:var(--neutral-500); --border:var(--neutral-200);
  --accent:var(--green-600); --card-bg:var(--surface); --ring:var(--gold-300)}

/* The wing paints its own ground: Sawaeer's page is warm ivory, this site's is ink,
   and a section that kept the site background would be a cream card floating on
   black. Bleeds full width, like every other band on this site. */
.bkx{background:var(--bk-bg);margin-block:0;padding-bottom:1px}

/* ── the utilities Bootstrap used to supply ─────────────────────────────── */
/* 1140 and 12, MEASURED off alsawair.com rather than taken from Sawaeer's own
   --container-max (1200) or from Bootstrap's responsive ladder (540/720/960/1140/1320).
   Neither is what that page actually does: its .container is flat — fluid up to 1140px
   with a 12px gutter and no breakpoint steps — checked at 1440, 1000 and 820. The
   container sets the width of every row on the page, so being 60px out here would have
   shifted the hero columns, the shelves and the grid all at once. */
.bkx .container{width:100%;max-width:1140px;margin-inline:auto;padding-inline:12px}
.bkx .section{padding-block:clamp(4rem,8vw,7rem)}
.bkx .btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.5rem 1.1rem;border:1px solid transparent;border-radius:var(--radius-sm);
  font-family:var(--bk-body);font-size:1rem;font-weight:600;line-height:1.5;
  text-decoration:none;cursor:pointer;background:none;color:inherit}
.bkx .btn-outline-light{border-color:rgba(255,255,255,.5);color:#fff}
.bkx .btn-outline-light:hover{color:#fff}
.bkx .mb-2{margin-bottom:.5rem}
.bkx .mt-4{margin-top:1.5rem}
.bkx .mb-1{margin-bottom:.25rem}
.bkx .mb-0{margin-bottom:0}
.bkx .fw-bold{font-weight:700}
.bkx .text-muted{color:var(--muted)}
/* Inline icons, standing in for the bootstrap-icons font. Sized to the text they sit
   beside and inheriting its colour, which is what the font did. */
.bkx svg.bi{width:1em;height:1em;flex:none;vertical-align:-.125em;fill:none;
  stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ── the library entrance ────────────────────────────────────────────────── */
.bkx .tf-hero{position:relative;overflow:hidden;color:#fff;
  min-height:clamp(420px,56vh,560px);display:flex;align-items:center;
  background:linear-gradient(120deg,var(--green-800) 0%,var(--green-600) 60%,var(--green-700) 100%)}
.bkx .tf-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(46% 62% at 74% 42%,rgba(var(--gold-rgb),.14),transparent 70%),
    radial-gradient(38% 55% at 20% 62%,rgba(231,212,162,.10),transparent 70%),
    radial-gradient(70% 90% at 88% -10%,rgba(var(--gold-rgb),.22),transparent 55%),
    radial-gradient(125% 105% at 50% 45%,transparent 62%,rgba(4,14,10,.38) 100%)}
/* The library's own hall, where alsawair turns a star: the long reading room of
   the stacks in gold line, the ladder against them and the reading table down its
   middle (img/wings/books.svg — see wing-band.css). Held back behind the text and
   the Hero Book so both read over it. */
.bkx .tf-geometry{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:url('/img/wings/books.svg') center / cover no-repeat;
  -webkit-mask-image:radial-gradient(ellipse 34% 55% at 50% 50%,rgba(0,0,0,.15) 0,rgba(0,0,0,.55) 60%,#000 100%);
  mask-image:radial-gradient(ellipse 34% 55% at 50% 50%,rgba(0,0,0,.15) 0,rgba(0,0,0,.55) 60%,#000 100%)}
.bkx .tf-light{position:absolute;inset:-10%;pointer-events:none;
  background:linear-gradient(205deg,rgba(231,212,162,.13),rgba(231,212,162,.03) 30%,transparent 55%)}
.bkx .hs-fog{position:absolute;inset:-20%;pointer-events:none;
  background:
    radial-gradient(42% 30% at 28% 72%,rgba(231,212,162,.07),transparent 70%),
    radial-gradient(52% 34% at 72% 26%,rgba(255,255,255,.045),transparent 70%);
  filter:blur(28px)}
.bkx .hs-mashrabiya{position:absolute;inset:-10%;pointer-events:none;
  background:repeating-linear-gradient(115deg,
    rgba(231,212,162,.16) 0 22px,transparent 22px 58px,
    rgba(231,212,162,.08) 58px 74px,transparent 74px 118px);
  filter:blur(13px);opacity:.32;
  -webkit-mask-image:linear-gradient(155deg,#000,transparent 52%);
  mask-image:linear-gradient(155deg,#000,transparent 52%)}
.bkx .hs-thread{position:absolute;left:-4%;right:-4%;top:56%;height:120px;pointer-events:none;
  background:url("/img/hero/thread-gold.svg") center / 100% 100% no-repeat;opacity:.12}
.bkx .hs-dust{position:absolute;inset:0;pointer-events:none;opacity:.4;
  background-image:
    radial-gradient(2px 2px at 90px 70px,rgba(231,212,162,.8),transparent 60%),
    radial-gradient(1.6px 1.6px at 260px 210px,rgba(212,176,106,.7),transparent 60%),
    radial-gradient(2.2px 2.2px at 420px 110px,rgba(231,212,162,.6),transparent 60%),
    radial-gradient(1.4px 1.4px at 560px 300px,rgba(248,246,242,.55),transparent 60%),
    radial-gradient(1.8px 1.8px at 700px 160px,rgba(212,176,106,.6),transparent 60%);
  background-size:760px 420px}
.bkx .tf-hero .hs-dust{opacity:.3}

.bkx .tf-hero__inner{position:relative;z-index:1;text-align:start}
.bkx .bk-hero__inner{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;
  gap:clamp(1.5rem,4vw,3rem)}
.bkx .bk-hero__media{padding-bottom:30px}
.bkx .bk-hero__book{display:block;width:min(270px,68%)}
.bkx .bk-hero__book .book-card__coverwrap{border-color:rgba(var(--gold-rgb),.5)}
.bkx .bk-hero__book .book-card__coverwrap::after{animation-duration:160s}
.bkx .bk-hero__book:hover .book-card__coverwrap{--lift:-12px;--sc:1.02}

.bkx .tf-crumbs{font-size:.82rem;color:rgba(255,255,255,.7);margin-bottom:1.1rem;
  display:flex;align-items:center;gap:.6rem}
.bkx .tf-crumbs a{color:var(--gold-light);text-decoration:none}
.bkx .tf-crumbs a:hover{color:#fff}
.bkx .tf-dia{display:inline-block;width:5px;height:5px;background:rgba(var(--gold-rgb),.75);
  transform:rotate(45deg);border-radius:1px}
.bkx .eyebrow{display:inline-block;font-family:var(--bk-head);font-size:.8rem;letter-spacing:3px;
  color:var(--gold-600);background:rgba(var(--gold-rgb),.1);
  border:1px solid rgba(var(--gold-rgb),.32);border-radius:var(--radius-pill);
  padding:.2rem .95rem;margin-bottom:.75rem}
/* --gold-600, NOT --gold-light, and that is a copy rather than a choice.
   Sawaeer's .tf-eyebrow does set --gold-light — and never gets it: its generic .eyebrow
   rule sits 76KB further down the same stylesheet at equal specificity, so the later one
   wins and the hero eyebrow on alsawair.com renders --gold-600. Matched to what the site
   RENDERS rather than to what its rule says, because that is what was asked for. If the
   ordering is ever fixed upstream, this is the line to change with it. */
.bkx .tf-eyebrow{color:var(--gold-600);background:rgba(var(--gold-rgb),.14);
  border-color:rgba(var(--gold-rgb),.45)}
.bkx .tf-title{font-family:var(--bk-display);font-weight:400;color:#fff;
  font-size:clamp(2.4rem,1.6rem + 3.4vw,4.2rem);margin:.35rem 0 .5rem;line-height:1.2;
  text-shadow:0 3px 22px rgba(0,0,0,.45);animation:bkUp .9s var(--bk-ease) both}
.bkx .tf-sub{color:rgba(255,255,255,.85);max-width:520px;font-size:1.05rem;line-height:1.9;
  margin:0 0 .8rem;animation:bkUp .8s var(--bk-ease) .15s both}
.bkx .tf-actions{display:flex;flex-wrap:wrap;gap:.8rem;animation:bkUp .8s var(--bk-ease) .35s both}
.bkx .tf-stats{display:flex;align-items:center;gap:.9rem;margin-top:1.6rem;
  color:rgba(255,255,255,.75);font-size:.95rem;animation:bkUp .8s var(--bk-ease) .45s both}
.bkx .tf-stats strong{color:var(--gold-light);font-family:var(--bk-display);font-size:1.5rem;
  font-weight:400;font-variant-numeric:proportional-nums;margin-inline-end:.25rem}

.bkx .btn-gold{background:linear-gradient(135deg,var(--gold-400),var(--gold-600));
  border:none;color:#2a1e07;font-weight:700;
  box-shadow:0 10px 26px -10px rgba(var(--gold-rgb),.85)}
.bkx .btn-gold:hover,.bkx .btn-gold:focus{color:#2a1e07;filter:brightness(1.06);
  box-shadow:0 14px 30px -10px rgba(var(--gold-rgb),.95)}
/* --radius-sm, NOT --radius-pill, for the same reason as the eyebrow above: Sawaeer's
   .btn-hero asks for a pill and a generic `.btn{border-radius:var(--radius-sm)}` 6KB
   later in the same sheet takes it away, so the hero buttons on alsawair.com are 8px
   rounded rectangles. Measured on the live page, not read off the rule. */
.bkx .btn-hero{border-radius:var(--radius-sm);padding:.82rem 2.1rem;font-size:1.06rem;
  display:inline-flex;align-items:center;gap:.1rem;position:relative;overflow:hidden;
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease,filter .3s ease}
.bkx .btn-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.35) 50%,transparent 58%);
  transform:translateX(160%);transition:transform .7s cubic-bezier(.22,1,.36,1)}
.bkx .btn-hero:hover{transform:translateY(-3px)}
.bkx .btn-hero:hover::before{transform:translateX(-160%)}
.bkx .btn-hero.btn-outline-light:hover{border-color:rgba(var(--gold-rgb),.75);
  box-shadow:0 10px 26px -12px rgba(var(--gold-rgb),.5)}
.bkx .hero-btn-arrow{display:inline-block;margin-inline-start:.5rem;
  transition:transform .3s var(--bk-ease)}
.bkx .btn-hero:hover .hero-btn-arrow{transform:translateX(-6px)}

.bkx .hero-feature__media{display:flex;justify-content:center;position:relative;perspective:1000px}
.bkx .hero-feature__media::before{content:"";position:absolute;bottom:-34px;left:50%;
  width:340px;height:90px;transform:translateX(-50%);pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(231,212,162,.22),rgba(212,176,106,.08) 55%,transparent 75%)}
.bkx .hero-feature__media::after{content:"";position:absolute;bottom:-14px;left:50%;
  width:210px;height:34px;transform:translateX(-50%);pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.5),transparent 72%);filter:blur(6px)}

/* ── the shelf floor ─────────────────────────────────────────────────────── */
.bkx .series-section{position:relative;overflow:hidden}
.bkx .series-section::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(45% 38% at 12% 6%,rgba(var(--gold-rgb),.07),transparent 70%),
    radial-gradient(50% 42% at 88% 90%,rgba(14,59,46,.05),transparent 70%)}
.bkx .series-section > .container{position:relative}

.bkx .chip-row{display:flex;gap:.5rem;flex-wrap:wrap}
.bkx .chip-row--center{justify-content:center}
.bkx .chip{display:inline-flex;align-items:center;gap:.4rem;
  font-size:13px;font-weight:600;padding:.42rem .95rem;border-radius:999px;
  border:1px solid var(--border);background:var(--surface);color:var(--text);
  text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease}
.bkx .chip:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(168,129,74,.16)}
.bkx .chip.on{background:linear-gradient(135deg,var(--gold-400),var(--gold-500));
  color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(168,129,74,.32)}

/* ── outranking the site's own chips ─────────────────────────────────────────
   THIS IS THE COLLISION THE .bkx SCOPE WAS BUILT FOR, and it is worth naming, because
   a scope is not by itself a shield — it raises specificity by one class and no more.

   The day world of this site was turned green at some point, and site.css carries two
   rules that reach every chip on every page:

     html[data-world="manuscript"] body:not([data-page="curator"]) :is(…,.chip.on,…)
         → background and border: --green-600                          (0,4,2)
     html[data-world="manuscript"] :is(…, .chip.on, .margin .mn.own:hover b, …)
         → color: --acc-text, which in that world IS --green-600       (0,5,2)

   The second number is the one that matters and it is easy to read wrong: :is() takes
   the specificity of its MOST specific argument, and buried in that list is
   `.margin .mn.own:hover b` — four classes and a type. So the selector is (0,5,2), not
   the (0,3,1) that `.chip.on` alone suggests.

   `.bkx .chip.on` is (0,3,0) and lost to both, which is why the ported chip arrived
   with a green background wearing green letters: the word disappeared.

   Adding `.chip-row` — which the chip genuinely sits inside — brings these to (0,5,2),
   a tie that books.css wins on load order because it is linked after site.css. A tie
   rather than !important: an !important here would have to be fought again by every
   later thing with a legitimate claim — a focus ring, forced-colours mode, print. */
html[data-world="manuscript"] body .bkx .chip-row .chip{background:var(--surface);
  color:var(--text);border-color:var(--border)}
html[data-world="manuscript"] body .bkx .chip-row .chip:hover{border-color:var(--border);
  color:var(--text);background:var(--surface)}
html[data-world="manuscript"] body .bkx .chip-row .chip.on{
  background:linear-gradient(135deg,var(--gold-400),var(--gold-500));
  color:#fff;border-color:transparent}

.bkx .book-sort{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  gap:.35rem 1.1rem;margin-bottom:2.5rem;font-size:.88rem}
.bkx .book-sort__lbl{color:var(--muted)}
.bkx .book-sort__opt{text-decoration:none;color:var(--muted);font-weight:600;
  padding:.2rem .1rem;position:relative;transition:color .25s var(--bk-ease)}
.bkx .book-sort__opt::after{content:"";position:absolute;bottom:-2px;right:50%;left:50%;
  height:2px;background:var(--gold-600);
  transition:right .25s var(--bk-ease),left .25s var(--bk-ease)}
.bkx .book-sort__opt:hover{color:var(--accent)}
.bkx .book-sort__opt.on{color:var(--gold-700)}
html[data-world="manuscript"] .bkx .book-sort__opt.on{color:var(--gold-700)}
.bkx .book-sort__opt.on::after,.bkx .book-sort__opt:hover::after{right:0;left:0}

/* ── curated shelves ─────────────────────────────────────────────────────── */
.bkx .shelf-block{margin-bottom:3rem}
.bkx .shelf-head{display:flex;align-items:center;gap:1rem;margin-bottom:1.1rem}
.bkx .shelf-title{font-family:var(--bk-display);font-weight:400;font-size:1.35rem;
  color:var(--accent);margin:0;white-space:nowrap}
.bkx .shelf-rule{flex:1 1 auto;height:1px;
  background:linear-gradient(90deg,rgba(var(--gold-rgb),.45),transparent);position:relative}
.bkx .shelf-rule::before{content:"";position:absolute;top:-3px;inset-inline-start:0;
  width:7px;height:7px;background:var(--gold-600);transform:rotate(45deg);border-radius:1px}
.bkx .shelf-all{flex:none;color:var(--gold-700);font-weight:700;font-size:.88rem;
  text-decoration:none;white-space:nowrap}
.bkx .shelf-all:hover{color:var(--accent)}
.bkx .shelf{display:grid;grid-auto-flow:column;grid-auto-columns:218px;justify-content:start;
  gap:1.6rem;overflow-x:auto;overflow-y:hidden;padding:.5rem .25rem 1.5rem;
  scroll-snap-type:x proximity;scroll-padding-inline-start:.25rem;
  overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent)}
.bkx .shelf::-webkit-scrollbar{display:none}
.bkx .shelf .book-card{scroll-snap-align:start}

/* ── the bookshelf itself ────────────────────────────────────────────────── */
.bkx .book-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,250px));
  gap:3.25rem 2rem;justify-content:center;position:relative}
.bkx .book-card{position:relative;display:flex;flex-direction:column;text-decoration:none;
  transition:transform .5s cubic-bezier(.19,1,.22,1),box-shadow .5s cubic-bezier(.19,1,.22,1),
    border-color .5s ease}
.bkx .book-card__link{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.bkx .book-card__coverwrap{position:relative;aspect-ratio:2 / 3;border-radius:14px;overflow:hidden;
  background:linear-gradient(160deg,var(--green-700),var(--green-900));
  border:1px solid rgba(var(--gold-rgb),.22);
  box-shadow:
    0 2px 4px rgba(9,40,29,.06),
    0 8px 16px rgba(9,40,29,.07),
    0 20px 40px rgba(9,40,29,.08),
    0 40px 80px rgba(9,40,29,.06),
    0 12px 50px rgba(9,40,29,.04);
  transform:perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateY(var(--lift,0px)) scale(var(--sc,1));
  transition:box-shadow .45s cubic-bezier(.22,1,.36,1),
    transform .45s cubic-bezier(.22,1,.36,1) 40ms,
    border-color .35s ease 90ms}
.bkx .book-card:nth-child(2n) .book-card__coverwrap{animation-delay:3s}
.bkx .book-card:nth-child(3n) .book-card__coverwrap{animation-delay:6s}
.bkx .book-card:hover .book-card__coverwrap{--lift:-12px;--sc:1.02;
  border-color:rgba(var(--gold-rgb),.6);
  box-shadow:
    0 3px 6px rgba(9,40,29,.08),
    0 12px 24px rgba(9,40,29,.10),
    0 28px 55px rgba(9,40,29,.13),
    0 55px 110px rgba(9,40,29,.10),
    0 30px 60px rgba(var(--gold-rgb),.12)}
.bkx .book-card__coverwrap img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.bkx .book-card:hover .book-card__coverwrap img{transform:scale(1.04)}
/* the physical body: a gilded page block on the left and a binding shade on the right */
.bkx .book-card__coverwrap::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to right,transparent 17px,rgba(60,40,10,.22) 18px,rgba(255,255,255,.14) 19.5px,transparent 22px),
    repeating-linear-gradient(to right,rgba(142,106,33,.5) 0 1px,rgba(255,246,216,.9) 1px 3px),
    linear-gradient(to right,#e9c87e 0,#d9b25f 12px,rgba(217,178,95,.35) 17px,transparent 19px),
    linear-gradient(to left,rgba(0,0,0,.15),rgba(255,255,255,.05) 9%,transparent 13%);
  background-size:100% 100%,18px 100%,100% 100%,100% 100%;
  background-position:left top,left top,left top,right top;
  background-repeat:no-repeat}
/* one slow reflection crossing the cover */
.bkx .book-card__coverwrap::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.16) 50%,transparent 58%);
  transform:translateX(170%)}
.bkx .book-card:nth-child(2n) .book-card__coverwrap::after{animation-delay:5s}
.bkx .book-card:nth-child(3n) .book-card__coverwrap::after{animation-delay:9s}
.bkx .book-card__ph{position:absolute;inset:0;display:grid;place-items:center;
  color:rgba(var(--gold-rgb),.85)}
.bkx .book-card__ph svg{width:3rem;height:3rem}
.bkx .book-card__cat{position:absolute;top:10px;inset-inline-start:14px;z-index:3;
  font-size:12px;font-weight:700;color:#fff;
  background:linear-gradient(150deg,rgba(10,14,10,.52),rgba(10,14,10,.36));
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(var(--gold-rgb),.5);padding:.22rem .7rem;border-radius:99px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
  transition:box-shadow .3s ease .15s}
.bkx .book-card:hover .book-card__cat{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 14px rgba(var(--gold-rgb),.42)}
.bkx .book-card__badges{position:absolute;top:10px;inset-inline-end:14px;z-index:3;
  display:flex;flex-direction:column;gap:.3rem;align-items:flex-end}
.bkx .bk-badge{font-size:11px;font-weight:800;letter-spacing:.04em;padding:.18rem .5rem;
  border-radius:6px;color:#fff;line-height:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 6px rgba(9,40,29,.25)}
.bkx .bk-badge--pdf{background:linear-gradient(150deg,#b23b2e,#7c2018);
  border:1px solid rgba(255,255,255,.22)}

.bkx .book-card__body{padding:1.1rem .35rem 0;text-align:center;display:flex;
  flex-direction:column;align-items:center}
/* two lines in a box with overflow:hidden, so each line box holds Amiri's ink: 1.8,
   and .1em on top for a hamza or a stacked mark on the first line */
.bkx .book-card__title{font-family:var(--bk-display);font-weight:400;font-size:1.15rem;
  color:var(--accent);line-height:1.8;padding-top:.1em;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .3s var(--bk-ease)}
/* An English shelf still shows Arabic: a book with no English title keeps its Arabic
   one. The English token stops at Cormorant (site.css says why), but this box is cut
   for Amiri in both languages, so the Arabic keeps the face the Arabic shelf sets it
   in — where the Ruqʿa stood before — and the Latin is Cormorant as it was. */
html[data-lang="en"] .bkx .book-card__title{font-family:'Cormorant Garamond','Amiri',serif}
.bkx .book-card:hover .book-card__title{color:var(--gold-700)}
html[data-world="manuscript"] .bkx .book-card:hover .book-card__title{color:var(--gold-700)}
.bkx .book-card__title::after{content:"";display:block;width:0;height:2px;margin:.45rem auto 0;
  background:linear-gradient(90deg,transparent,var(--gold-600),transparent);
  transition:width .35s var(--bk-ease) .12s}
.bkx .book-card:hover .book-card__title::after{width:56px}
.bkx .book-card__meta{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem 1rem;
  margin-top:.5rem;color:var(--muted);font-size:.85rem}
.bkx .book-card__meta span{display:inline-flex;align-items:center;gap:.3rem}
.bkx .book-card__meta svg{color:var(--gold-600)}
.bkx .book-card__cta{display:inline-flex;align-items:center;gap:.4rem;margin-top:.7rem;
  color:var(--gold-700);font-weight:700;font-size:.92rem;opacity:.8;
  transition:opacity .3s var(--bk-ease) .22s}
.bkx .book-card:hover .book-card__cta{opacity:1}
.bkx .book-card__cta svg{transition:transform .3s var(--bk-ease) .22s}
.bkx .book-card:hover .book-card__cta svg{transform:translateX(-6px)}

/* quick actions over the cover, revealed on hover or keyboard focus */
.bkx .book-card__actions{position:absolute;top:0;inset-inline:0;aspect-ratio:2 / 3;z-index:4;
  display:flex;flex-direction:column;justify-content:flex-end;gap:.5rem;
  padding:1rem;border-radius:14px;opacity:0;pointer-events:none;
  background:linear-gradient(to top,rgba(6,28,20,.88) 6%,rgba(6,28,20,.4) 46%,transparent 72%);
  transition:opacity .3s var(--bk-ease)}
.bkx .book-card:hover .book-card__actions,
.bkx .book-card:focus-within .book-card__actions{opacity:1;pointer-events:auto}
.bkx .book-card__act{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.5rem .8rem;border-radius:9px;font-weight:700;font-size:.9rem;text-decoration:none;
  color:#08251b;background:linear-gradient(150deg,#eccd84,#d9b25f);
  border:1px solid rgba(255,255,255,.35);
  transition:transform .2s var(--bk-ease),box-shadow .2s var(--bk-ease)}
.bkx .book-card__act:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.32)}
.bkx .book-card__act:focus-visible{outline:2px solid #fff;outline-offset:2px}
.bkx .book-card__act--ghost{background:rgba(255,255,255,.14);color:#fff;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}

/* ── nothing on the shelf ────────────────────────────────────────────────── */
.bkx .empty-state{text-align:center;padding:var(--space-7) var(--space-4);
  background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius-lg);
  color:var(--muted)}
.bkx .empty-state .empty-icon{color:var(--gold);opacity:.7}
.bkx .empty-state .empty-icon svg{width:3rem;height:3rem}

/* ── keyframes ───────────────────────────────────────────────────────────────
   Renamed with a bk- prefix, and that is not cosmetic: @keyframes are GLOBAL no
   matter where they are declared, so a name like `heroDrift` here would silently
   replace or be replaced by one of the same name elsewhere in this site's CSS —
   which is exactly what the home band's own drift is called. */

@keyframes bkUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── narrow ──────────────────────────────────────────────────────────────── */
@media(max-width:767.98px){
  .bkx .tf-hero{min-height:70svh;text-align:center}
  .bkx .tf-crumbs,.bkx .tf-actions,.bkx .tf-stats{justify-content:center}
  .bkx .tf-sub{margin-inline:auto}
  .bkx .tf-geometry{opacity:.36}
  .bkx .bk-hero__inner{grid-template-columns:1fr}
  .bkx .bk-hero__media,.bkx .hero-feature__media{display:none}
  .bkx .hs-thread{display:none}
  .bkx .hs-dust{opacity:.22}
  .bkx .shelf{grid-auto-columns:168px;gap:1rem}
  .bkx .shelf-title{font-size:1.15rem}
  .bkx .book-grid{grid-template-columns:repeat(2,1fr);gap:2rem 1rem}
  .bkx .book-card__title{font-size:1rem}
}
/* Sawaeer drops the two runtime blurs on touch hardware — they are the most expensive
   paint on a phone GPU — and so does this. */
@media(hover:none) and (pointer:coarse){
  .bkx .hs-fog,.bkx .hs-mashrabiya{display:none}
}
@media(prefers-reduced-motion:reduce){
  .bkx .tf-geometry,.bkx .tf-light,.bkx .hs-fog,.bkx .hs-mashrabiya,.bkx .hs-dust,
  .bkx .tf-title,.bkx .tf-sub,.bkx .tf-actions,.bkx .tf-stats,
  .bkx .book-card__coverwrap,.bkx .book-card__coverwrap::after,.bkx .book-card__cat{animation:none}
}

/* ── shelf arrows ────────────────────────────────────────────────────────────
   js/books.js wraps every .shelf in .scroller and injects the pair, so the views
   carry no buttons. The row still scrolls by wheel, trackpad, touch, drag and
   keyboard; these give a mouse-only visitor a visible way past the fold, since the
   scrollbar is hidden by design and the edge fade is a hint rather than a control.

   Logical insets put «previous» on the reading-start edge — right under RTL — and the
   chevron is mirrored to match. The wrapper holds a gutter open on each side and the
   buttons live in it, so a control never sits on top of a cover. */
.bkx .scroller{position:relative;padding-inline:52px}
.bkx .scroller__btn{position:absolute;top:calc(50% - .75rem);z-index:3;
  width:44px;height:44px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(var(--gold-rgb),.45);
  background:var(--surface);color:var(--gold-700);
  box-shadow:0 6px 20px rgba(0,0,0,.14);
  font-size:1.05rem;line-height:1;cursor:pointer;transform:translateY(-50%);
  transition:background .25s var(--bk-ease),color .25s var(--bk-ease),
    opacity .25s var(--bk-ease),transform .25s var(--bk-ease)}
.bkx .scroller__btn svg{width:1.05em;height:1.05em;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bkx .scroller__btn--prev{inset-inline-start:0}
.bkx .scroller__btn--next{inset-inline-end:0}
.bkx .scroller__btn:hover:not([disabled]){background:var(--gold-600);border-color:var(--gold-600);
  color:#fff;transform:translateY(-50%) scale(1.08)}
.bkx .scroller__btn:focus-visible{outline:2px solid var(--gold-600);outline-offset:3px}
/* At either end the button stays put but reads as spent, so the row never loses its
   affordance. */
.bkx .scroller__btn[disabled]{opacity:.35;cursor:default;box-shadow:none}
/* The chevron is authored pointing one way and mirrored under RTL, so «previous»
   always points back toward the start of the row. */
html[dir="rtl"] .bkx .scroller__btn--next svg{transform:scaleX(-1)}
html[dir="ltr"] .bkx .scroller__btn--prev svg{transform:scaleX(-1)}
/* Sawaeer styles this explicitly even though .shelf already starts its items; kept so
   the two files stay line-for-line comparable. */
.bkx .shelf--featured{justify-content:start}
@media(max-width:767.98px){
  .bkx .scroller{padding-inline:42px}
  .bkx .scroller__btn{width:36px;height:36px;font-size:.9rem}
}
/* Touch devices swipe, so the arrows go — and with them the gutter they held open. */
@media(hover:none) and (pointer:coarse){
  .bkx .scroller{padding-inline:0}
  .bkx .scroller__btn{display:none}
}