@font-face{font-family:"Cinzel";src:url(/assets/fonts/cinzel-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Cinzel";src:url(/assets/fonts/cinzel-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(/assets/fonts/eb-garamond-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(/assets/fonts/eb-garamond-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(/assets/fonts/eb-garamond-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Amiri";src:url(/assets/fonts/amiri-regular-arabic.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+FE70-FEFF,U+00AB,U+00BB}
@font-face{font-family:"Amiri";src:url(/assets/fonts/amiri-bold-arabic.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+FE70-FEFF,U+00AB,U+00BB}

:root{
  --ink:#0a1d21;        /* deep oxidised teal, from the book covers */
  --ink-2:#0f2a2f;      /* raised surface */
  --ink-3:#163a40;      /* rules and outlines */
  --vellum:#f1e7d0;     /* body text */
  --vellum-2:#c9bea6;   /* secondary text */
  --gold:#e3b04b;       /* brand gold */
  --gold-deep:#b9862a;
  --measure:36rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--ink);color:var(--vellum);font:400 1.1875rem/1.62 "EB Garamond",Georgia,serif;font-feature-settings:"onum","kern"}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:#f3cf7a}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(68rem,100% - 2rem);margin-inline:auto}
h2,h3{font-family:"Cinzel",serif;font-weight:600;color:var(--gold);line-height:1.15;margin:0}
h2{font-size:clamp(1.7rem,3.2vw,2.35rem);letter-spacing:.02em}
h3{font-size:1.45rem;letter-spacing:.01em}
p{margin:0 0 1em}
.lede{font-size:1.3rem;line-height:1.5;color:var(--vellum)}
.muted{color:var(--vellum-2)}

/* header */
.top{position:sticky;top:0;z-index:10;background:rgba(10,29,33,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--ink-3)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--vellum);font-family:"Cinzel",serif;font-weight:600;font-size:1.05rem;letter-spacing:.06em}
.brand img{width:2.3rem;height:2.3rem}
.nav{display:flex;gap:1.4rem;align-items:center;font-size:1.05rem}
.nav a{color:var(--vellum);text-decoration:none}
.nav a:hover{color:var(--gold)}
.nav .ar{font-family:"Amiri",serif;font-size:1.15rem}
@media (max-width:720px){.nav a:not(.ar):not(.en):not(.keep){display:none}}

/* hero: the emblem is the one bold moment on the page */
.hero{position:relative;text-align:center;padding:clamp(2.5rem,7vw,5rem) 0 clamp(2.5rem,6vw,4rem);overflow:hidden;
  background:radial-gradient(60rem 30rem at 50% 38%,rgba(227,176,75,.13),transparent 62%),var(--ink)}
.hero .emblem{width:min(46rem,100%);margin:0 auto;filter:drop-shadow(0 18px 40px rgba(0,0,0,.55));animation:rise 1.4s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.hero p{max-width:34rem;margin:1.6rem auto 0}
.actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:1.8rem}
.btn{display:inline-block;padding:.72rem 1.35rem;border-radius:3px;font:600 1.02rem/1 "EB Garamond",serif;letter-spacing:.02em;text-decoration:none;border:1px solid var(--gold)}
.btn.solid{background:linear-gradient(180deg,#f0c766,var(--gold) 55%,var(--gold-deep));color:#1b1405;border-color:var(--gold-deep)}
.btn.solid:hover{filter:brightness(1.06);color:#1b1405}
.btn.line{color:var(--gold);background:transparent}
.btn.line:hover{background:rgba(227,176,75,.1)}

/* new release */
.release{background:var(--ink-2);border-block:1px solid var(--ink-3);padding:clamp(3rem,7vw,5rem) 0}
.release .wrap{display:grid;grid-template-columns:minmax(14rem,21rem) 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.cover{border-radius:2px 5px 5px 2px;box-shadow:-6px 0 0 -3px rgba(0,0,0,.35) inset,0 22px 44px rgba(0,0,0,.55),0 2px 0 rgba(255,255,255,.04)}
.release .status{display:inline-block;font-style:italic;color:var(--gold);margin-bottom:.6rem}
.release h2{font-size:clamp(2rem,4vw,2.9rem)}
.release .sub{font-style:italic;font-size:1.3rem;color:var(--vellum);margin:.5rem 0 1.4rem;line-height:1.35}
.release ul{margin:0 0 1.4rem;padding-left:1.1rem}
.release li{margin-bottom:.3rem}
.release li::marker{color:var(--gold)}
.fine{font-size:.98rem;color:var(--vellum-2)}
@media (max-width:760px){.release .wrap{grid-template-columns:1fr}.release .cover{max-width:15rem;margin-inline:auto}}

/* books */
.books{padding:clamp(3.5rem,8vw,6rem) 0}
.books>.wrap>h2{text-align:center;margin-bottom:.4rem}
.books>.wrap>.muted{text-align:center;margin-bottom:3rem}
.book{display:grid;grid-template-columns:11rem 1fr;gap:clamp(1.5rem,4vw,3rem);padding:2.4rem 0;border-top:1px solid var(--ink-3)}
.book:last-child{border-bottom:1px solid var(--ink-3)}
.book .cover-slot{width:11rem;aspect-ratio:5/8;background:linear-gradient(160deg,#173c42,#0b2226);display:flex;align-items:center;justify-content:center;text-align:center;padding:1rem;font-family:"Cinzel",serif;color:var(--gold);border-radius:2px 5px 5px 2px;box-shadow:0 16px 32px rgba(0,0,0,.5)}
.book .cover-slot img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.book h3{margin-bottom:.2rem}
.book .tag{font-style:italic;color:var(--vellum-2);margin-bottom:1rem}
.book .body{max-width:var(--measure)}
.formats{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem}
.formats .btn{padding:.55rem 1rem;font-size:.98rem}
.book[dir=rtl]{grid-template-columns:1fr 11rem}
.book[dir=rtl] .cover-slot{order:2}
.book[dir=rtl] .body{font-family:"Amiri",serif;font-size:1.25rem;line-height:1.9}
.book[dir=rtl] h3{font-family:"Amiri",serif;font-weight:700;font-size:1.65rem;letter-spacing:0}
@media (max-width:620px){.book,.book[dir=rtl]{grid-template-columns:1fr}.book .cover-slot,.book[dir=rtl] .cover-slot{order:0;width:9.5rem}}

/* about */
.about{background:var(--ink-2);border-block:1px solid var(--ink-3);padding:clamp(3.5rem,8vw,6rem) 0}
.about .wrap{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.about h2{margin-bottom:1.2rem}
.about .text{max-width:var(--measure)}
.about blockquote{margin:0;padding:1.6rem 0 0;border-top:1px solid var(--gold-deep);font-style:italic;font-size:1.45rem;line-height:1.45;color:var(--vellum)}
.about blockquote footer{font-style:normal;font-size:1rem;color:var(--vellum-2);margin-top:1rem}
@media (max-width:820px){.about .wrap{grid-template-columns:1fr}}

/* watch + contact */
.watch{padding:clamp(3.5rem,8vw,6rem) 0}
.watch .wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:2.5rem}
.channel h3{margin-bottom:.5rem}
.channel[dir=rtl]{font-family:"Amiri",serif;font-size:1.2rem;line-height:1.85}
.channel[dir=rtl] h3{font-family:"Amiri",serif;font-weight:700;font-size:1.6rem}
.watch .lead{grid-column:1/-1;max-width:var(--measure)}
@media (max-width:700px){.watch .wrap{grid-template-columns:1fr}}

footer.site{border-top:1px solid var(--ink-3);padding:2.8rem 0 3.2rem;font-size:1rem;color:var(--vellum-2)}
footer.site .wrap{display:grid;grid-template-columns:auto 1fr;gap:1.4rem 2rem;align-items:center}
footer.site img{width:3.4rem}
footer.site p{margin:0 0 .35rem}
footer.site .warn{grid-column:1/-1;border-top:1px solid var(--ink-3);padding-top:1.3rem;font-size:.95rem}

/* Arabic page (html[dir=rtl]) */
html[dir=rtl] body{font-family:"Amiri","EB Garamond",serif;font-size:1.25rem;line-height:1.9;font-feature-settings:normal}
html[dir=rtl] h2,html[dir=rtl] h3,html[dir=rtl] .brand{font-family:"Amiri",serif;font-weight:700;letter-spacing:0}
html[dir=rtl] h2{font-size:clamp(1.9rem,3.4vw,2.6rem)}
html[dir=rtl] h3{font-size:1.7rem}
html[dir=rtl] .brand{font-size:1.3rem}
html[dir=rtl] .nav .en{font-family:"EB Garamond",serif;font-size:1.05rem}
html[dir=rtl] .btn{font-family:"Amiri",serif;font-weight:700;font-size:1.1rem;padding:.6rem 1.35rem .75rem}
html[dir=rtl] .release ul{padding-left:0;padding-right:1.2rem}
html[dir=rtl] .release .sub,html[dir=rtl] .about blockquote,html[dir=rtl] .book .tag,html[dir=rtl] .release .status{font-style:normal}
html[dir=rtl] .about blockquote{font-size:1.6rem;line-height:1.7}
html[dir=rtl] .actions.start{justify-content:flex-start}
.hero .seal{width:min(19rem,62vw);margin:0 auto;border-radius:50%;box-shadow:0 0 0 1px rgba(227,176,75,.25),0 24px 60px rgba(0,0,0,.6),0 0 90px rgba(227,176,75,.12);animation:rise 1.4s cubic-bezier(.2,.7,.2,1) both}
.soon{display:inline-block;margin-top:.4rem;color:var(--gold);font-style:italic}
html[dir=rtl] .soon{font-style:normal}
.actions.start{justify-content:flex-start;margin-top:0}
.nav .en{font-family:"EB Garamond",serif}
.other-lang{margin-top:2.6rem;text-align:center;color:var(--vellum-2)}