/* ==========================================================================
   Atta Ahmed — one design system.

   Ink, gold and paper. Editorial, quiet, bilingual (Arabic RTL / English LTR).

   The file is ordered so nothing is ever overridden later on:

     1  Fonts
     2  Tokens          the only place a value is decided
     3  Reset & base
     4  Typography      display · h1–h4 · lead · body · small · caption · label
     5  Layout          page · section · split · grid
     6  Components      button · card · panel · badge · list · field · dl ·
                        accordion · details · message
     7  Compositions    header · hero · author · stats · books · novel · course ·
                        seats · fees · assessments · forms · footer
     8  Motion
     9  Responsive

   Every measurement comes from a token, and every component is defined once.
   If a value looks wrong it is wrong in section 2 and nowhere else.
   ========================================================================== */

/* ========================================================== 1 · Fonts ==== */
@font-face{font-family:Cormorant;src:url(../fonts/cormorant-300-latin.woff2)format("woff2");font-weight:300;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:Cormorant;src:url(../fonts/cormorant-400-latin.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:Cormorant;src:url(../fonts/cormorant-600-latin.woff2)format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:Cormorant;src:url(../fonts/cormorant-400-latin-ext.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;src:url(../fonts/inter-400-latin.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:Inter;src:url(../fonts/inter-500-latin.woff2)format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:Inter;src:url(../fonts/inter-600-latin.woff2)format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}

/* ========================================================= 2 · Tokens ==== */
:root{
  /* -- Surfaces. A true black ground with three planes lifted off it. ---- */
  --ink:#000000;
  --surface-1:#0a0a0b;
  --surface-2:#101012;
  --surface-3:#18181b;
  /* older names, same values */
  --ink-1:var(--surface-1);
  --ink-2:var(--surface-2);
  --ink-3:var(--surface-3);

  /* -- Ink on those surfaces. Each ratio measured against #000. ---------- */
  --paper:#f4f2ed;        /* primary text     · 19.0:1 */
  --paper-2:#c2beb5;      /* secondary text   · 11.6:1 */
  --paper-dim:var(--paper-2);
  --muted:#918d84;        /* tertiary, meta   ·  6.3:1 */

  /* -- Accent ------------------------------------------------------------ */
  --gold:#c6a45c;         /* 9.0:1 on ink */
  --gold-lt:#e2c78e;      /* 12.5:1 */
  --gold-dim:rgba(198,164,92,.34);
  --gold-wash:rgba(198,164,92,.08);

  /* -- Feedback ---------------------------------------------------------- */
  --ok:#8fbf9c;
  --warn:#e5bd80;
  --bad:#e8a08f;

  /* -- Lines ------------------------------------------------------------- */
  --line:rgba(244,242,237,.11);
  --line-2:rgba(244,242,237,.22);
  --line-strong:var(--line-2);

  /* -- Families ---------------------------------------------------------- */
  --font-display:Cormorant,"Iowan Old Style",Garamond,Georgia,serif;
  --font-ui:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* -- One type ladder. Nothing outside this list decides a size. -------- */
  --fs-display:clamp(2.6rem,1.62rem + 3.9vw,4.32rem);  /* 42 → 69 */
  --fs-h1:clamp(2.16rem,1.57rem + 2.38vw,3.24rem);     /* 35 → 52 */
  --fs-h2:clamp(1.68rem,1.34rem + 1.4vw,2.43rem);      /* 27 → 39 */
  --fs-h3:clamp(1.27rem,1.16rem + .54vw,1.62rem);      /* 20 → 26 */
  --fs-h4:clamp(1.02rem,.97rem + .22vw,1.18rem);       /* 16 → 19 */
  --fs-lg:clamp(1.06rem,1.01rem + .32vw,1.25rem);      /* 17 → 20 */
  --fs-body:clamp(1rem,.97rem + .18vw,1.1rem);         /* 16 → 17.6 */
  --fs-sm:clamp(.9rem,.88rem + .12vw,.97rem);          /* 14.4 → 15.5 */
  --fs-cap:clamp(.82rem,.8rem + .08vw,.875rem);        /* 13 → 14 */
  --fs-label:.74rem;
  --fs-meta:.7rem;
  /* older names */
  --fs-xs:var(--fs-cap);
  --fs-md:var(--fs-body);
  --lead:var(--fs-lg);

  /* Line heights travel with the size they belong to. */
  --lh-display:1.06;
  --lh-heading:1.18;
  --lh-lead:1.55;
  --lh-body:1.72;
  --lh-tight:1.45;

  --track:.2em;          /* small-caps tracking — zero in Arabic */
  --track-tight:-.014em;
  --upper:uppercase;     /* never applied to Arabic */
  --adv:.46;             /* mean glyph advance, used by .oneline */
  --arrow:"\2192";

  /* -- Spacing. Seven steps; nothing in this file uses a loose number. --- */
  --sp-1:.375rem;   /*  6 */
  --sp-2:.75rem;    /* 12 */
  --sp-3:1.25rem;   /* 20 */
  --sp-4:2rem;      /* 32 */
  --sp-5:3rem;      /* 48 */
  --sp-6:4rem;      /* 64 */
  --sp-7:6rem;      /* 96 */
  --sec-y:clamp(3.25rem,5.5vw,5.5rem);
  --gap-sm:.75rem;
  --gap:clamp(1rem,2vw,1.6rem);
  --gap-lg:clamp(1.75rem,4vw,3.5rem);

  /* -- Shape ------------------------------------------------------------- */
  --r-sm:2px;
  --r-md:3px;
  --r-lg:6px;
  --r-pill:999px;
  --r:var(--r-md);
  --shadow-1:0 2px 10px -6px rgba(0,0,0,.7);
  --shadow-2:0 18px 46px -30px rgba(0,0,0,.9);
  --shadow-gold:0 10px 26px -12px rgba(198,164,92,.55);

  /* -- Controls ---------------------------------------------------------- */
  --control-h:3rem;             /* 48px — every button and every field */
  --control-h-sm:2.625rem;      /* 42px */
  --tap:2.75rem;                /* 44px — the smallest thing a finger gets */

  /* -- Motion ------------------------------------------------------------ */
  --dur-fast:180ms;
  --dur:320ms;
  --dur-slow:620ms;
  --dur-drawer:640ms;                       /* the menu's slide, end to end */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.16,.86,.26,1);  /* the same shape, longer tail */

  /* -- Measure ----------------------------------------------------------- */
  --page:min(75rem,100% - 2.5rem);      /* 1200px */
  --page-w:min(75rem,100vw - 2.5rem);   /* the same, as a raw length */
  --narrow:min(45rem,100% - 2.5rem);    /* 720px */
  --measure:62ch;                       /* running text */
  --measure-tight:52ch;
  --measure-head:26ch;                  /* a heading */
}

/* ---- 125% on the desktop ------------------------------------------------
   Done by raising the root, not by `zoom`. Zoom rescales the whole compositing
   box — fixed elements, scroll offsets and every px measurement drift, and the
   sticky header is the first thing to break. Raising the root instead makes
   every rem in this file grow together and leaves the layout maths intact.

   The page container is re-expressed in the same breath. Left alone it would
   grow to 1500px and put the text back against the edges of the screen; held
   at 64rem it lands on the same 1280px it had before, with the margins intact.

   Nothing here can reach a phone: the query starts at 1024px. */
@media (min-width:1024px){
  html{font-size:125%}
  :root{
    --page:min(64rem,100% - 2.5rem);
    --page-w:min(64rem,100vw - 2.5rem);
    --narrow:min(38rem,100% - 2.5rem);
  }
  html{scroll-padding-top:5rem}
  .sec,[id]{scroll-margin-top:5rem}
  /* A hairline stays a hairline however large the page is set. */
  .soc svg{width:.9rem;height:.9rem}
}

/* One container width across every desktop size: 64rem is 1280px at the 125%
   root, so a wide screen gets margins instead of a longer line. */
@media (max-width:640px){
  :root{
    --page:min(75rem,100% - 1.5rem);
    --page-w:min(75rem,100vw - 1.5rem);
    --narrow:min(45rem,100% - 1.5rem);
  }
}

/* -- Arabic: the language the site is written for, with its own ladder. --- */
html[dir=rtl]{
  --font-display:Amiri,"Noto Naskh Arabic",Georgia,serif;
  --font-ui:Cairo,"Noto Sans Arabic","Segoe UI",Tahoma,sans-serif;
  --track:0;
  --track-tight:0;
  --upper:none;
  --arrow:"\2190";

  --fs-display:clamp(2.21rem,1.46rem + 3.35vw,4.05rem); /* 35 → 65 */
  --fs-h1:clamp(2rem,1.46rem + 2.16vw,2.97rem);         /* 32 → 48 */
  --fs-h2:clamp(1.57rem,1.27rem + 1.24vw,2.21rem);      /* 25 → 35 */
  --fs-h3:clamp(1.21rem,1.11rem + .45vw,1.49rem);       /* 19 → 24 */
  --fs-h4:clamp(1.02rem,.98rem + .2vw,1.16rem);
  --fs-lg:clamp(1.06rem,1rem + .34vw,1.26rem);
  --fs-body:clamp(1.02rem,.98rem + .26vw,1.19rem);      /* 16.3 → 19 */
  --fs-sm:clamp(.94rem,.91rem + .14vw,1.02rem);
  --fs-cap:clamp(.86rem,.84rem + .1vw,.92rem);
  --fs-label:.86rem;
  --fs-meta:.8rem;

  --lh-display:1.24;
  --lh-heading:1.34;
  --lh-lead:1.8;
  --lh-body:1.8;
  --lh-tight:1.6;
}

/* ================================================== 3 · Reset & base ==== */
*,*::before,*::after{box-sizing:border-box;min-width:0}
[hidden]{display:none!important}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:6rem;
  background:var(--ink);
  max-width:100%;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.sec,[id]{scroll-margin-top:6rem}

/* Smooth scroll. Lenis marks the root while it is driving, and only one thing
   may steer at a time: a native `scroll-behavior:smooth` fights the
   interpolation and every anchor jump judders. The class is only on the root
   when Lenis actually started, so a phone, a reduced-motion reader and a
   browser where the script never loaded all keep the native scroll. */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis.lenis-smooth iframe{pointer-events:none}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}

body{
  margin:0;
  max-width:100%;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-ui);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:400;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
  /* No word is ever split; a long word may only wrap at a real break. And the
     gap between words is the font's own, never a computed one — stated here so
     that nothing downstream has to remember to reset it. */
  overflow-wrap:break-word;word-break:normal;hyphens:none;-webkit-hyphens:none;
  word-spacing:normal;white-space:normal;
}
html[dir=rtl] body{letter-spacing:0}

/* One quiet wash of light behind the whole page. It used to drift on a 38s
   loop; it is held still now — the writers' band is the only thing on the site
   that moves by itself. */
body::before{
  content:"";position:fixed;inset:-20vmax;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38vmax 38vmax at 18% 8%,rgba(198,164,92,.05),transparent 62%),
    radial-gradient(46vmax 46vmax at 88% 72%,rgba(120,124,140,.045),transparent 64%);
}

img,picture,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
strong{font-weight:600;color:var(--paper)}
::selection{background:var(--gold);color:#000}

/* One focus ring for the whole site. */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:var(--r-sm)}

/* ================================================== 4 · Typography ====== */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:400;
  color:var(--paper);
  line-height:var(--lh-heading);
  letter-spacing:var(--track-tight);
  margin:0;
  text-wrap:balance;
  overflow-wrap:break-word;
}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-h4)}
.h-lg{font-size:var(--fs-h1)}

p{margin:0 0 1em;text-wrap:pretty}
p:last-child{margin-bottom:0}
h1+p,h2+p,h3+p,h1+.lead,h2+.lead,h3+.lead{margin-top:var(--sp-3)}

/* لا تبرير — والفراغ بين الكلمات هو فراغ الخطّ نفسه، لا شيء يزيده.
   ---------------------------------------------------------------------------
   مرّ هذا الموضع بثلاث حالات، وهذه خلاصتها حتى لا يُعاد الدوران:

     ١. كان مبرَّراً بحجّة أن العربية «تتمدّد عند الوصلات لا عند المسافات».
        الحجّة خاطئة: لا متصفّح يطبّق الكشيدة، بل يمطّ المسافات.
     ٢. أُلغي التبرير، ثم طُلب إعادته، فأُعيد مع استثناء الأعمدة الضيّقة.
     ٣. طُلب تبريراً كاملاً بلا استثناء، فكان ما قِيس: مسافة عرضها ٤.٨px
        تصير ٥٠.٨px في بطاقات `div.theme` — **عشرة أضعاف**. وهو ما رآه
        المالك في الصفحة فطلب إزالة الفراغات من النصّ كلّه.

   والخلاصة التي لا مفرّ منها: التبرير **هو** توزيع فائض السطر على
   مسافاته. لا توجد في CSS خاصية تحدّ من هذا التوزيع — لا `max-word-spacing`
   ولا ما يشبهها. فـ«مبرَّر» و«بلا فراغات» لا يجتمعان، والثاني هو المطلوب.

   `start` لا `left`: تعني الحافة اليمنى تحت `dir=rtl` واليسرى تحت `ltr`،
   فلا يحتاج أيٌّ من الخطّين قاعدةً خاصة به.

   ★ الحافة المسنّنة هي ثمن هذا، وهي الثمن الأصغر. */
p,li,dd,blockquote{text-align:start}

/* ★ الباقي محاذاةٌ لا علاقة لها بالتبرير.
   اللافتة والشارة والتسمية والتعليق تحت الصورة ليست نصّاً جارياً: كلمتان
   أو ثلاث، والسطر الأخير لا يُمطّ أصلاً، فالتبرير عليها لا يفعل شيئاً —
   إلا حين تلتفّ إلى سطرين فيتمدّد أوّلهما. تبقى على `start` كما كانت في
   التصميم قبل أي من هذا. وهذا ليس استثناءَ عرضٍ بل قرار محاذاة. */
figcaption,.eyebrow,.minih,.sec__sub,.stats small,.statechip,.hint,
.roles li,.pxl__who span,.mmap__no,.acc__btn em,.vol__meta,
.price__kind,.entry__when,.novel__alt{text-align:start}
/* والموسَّط يبقى موسَّطاً: هذه القاعدة تلي ما سبق فتغلبه. */
.center,.center p,.center li,.sec__head .lead,.sec__head p,
.bookshero__lead,.novel__form,.hero__scroll,.ftr__bot{text-align:center}
/* `.sec__head p` and not `.sec__head>p`: a paragraph nested deeper inside a
   centred section head used to be centred by inheriting through the
   `text-align:inherit` rule that stood here. That rule is gone with the
   justification it existed to undo, so the centring has to name the descendants
   itself — otherwise the rule above would start-align them and only the direct
   children would stay centred. */
.center,.center p,.center li,.sec__head .lead,.sec__head p,
.bookshero__lead,.novel__form,.hero__scroll,.ftr__bot{text-align:center}

.lead{
  font-family:var(--font-display);
  font-size:var(--fs-lg);
  line-height:var(--lh-lead);
  color:var(--paper-2);
  font-weight:300;
  max-width:var(--measure);
}
html[dir=rtl] .lead{font-family:var(--font-ui);font-weight:400}

.sm{font-size:var(--fs-sm)}
.xs{font-size:var(--fs-cap);line-height:var(--lh-tight)}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums lining-nums}
.center{text-align:center}
.hint{font-size:var(--fs-cap);color:var(--muted);margin:0;line-height:var(--lh-tight)}

.eyebrow{
  font-family:var(--font-ui);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:var(--track);
  text-transform:var(--upper);
  color:var(--gold);
  margin:0 0 var(--sp-2);
  display:flex;align-items:center;gap:var(--sp-2);
  line-height:1.5;
}
.eyebrow::before{content:"";width:2rem;height:1px;background:var(--gold);opacity:.7;flex:none}
.eyebrow.center{justify-content:center}

.minih{
  font-family:var(--font-ui);font-size:var(--fs-label);font-weight:600;
  letter-spacing:var(--track);text-transform:var(--upper);color:var(--gold);
  margin:0 0 var(--sp-2);
}

.sec__sub{
  font-family:var(--font-display);font-size:var(--fs-h3);color:var(--gold);
  margin:var(--sp-1) 0 0;font-weight:300;
}
html[dir=rtl] .sec__sub{font-family:var(--font-ui);font-weight:500}

/* A heading asked to stay on one line. Sized from how many characters it has
   (--ch, written by the template) and how wide its own column is. */
.onelinebox{container-type:inline-size;max-width:100%;margin-inline:auto}
.oneline{
  white-space:nowrap;
  letter-spacing:var(--track-tight);
  font-size:min(var(--fs-h1), calc(var(--page-w) / (var(--ch,30) * var(--adv))));
  font-size:min(var(--fs-h1), calc(100cqi / (var(--ch,30) * var(--adv))));
}
h2.oneline{
  font-size:min(var(--fs-h2), calc(var(--page-w) / (var(--ch,30) * var(--adv))));
  font-size:min(var(--fs-h2), calc(100cqi / (var(--ch,30) * var(--adv))));
}
@media (max-width:559px){
  .oneline{white-space:normal;text-wrap:balance;font-size:var(--fs-h1)}
  h2.oneline{font-size:var(--fs-h2)}
}
/* Splitting a heading into words leaves the pieces free to wrap, which undoes
   the one thing this heading is for. Put back above the phone breakpoint only,
   so the rule right above still gets to let it wrap on a narrow screen. */
@media (min-width:560px){
  .sec__head h2.oneline{white-space:nowrap}
}

/* Roles: Writer · Painter · Academic Lecturer · Entrepreneur. */
.roles{
  display:flex;flex-wrap:wrap;align-items:center;gap:.1rem var(--sp-2);margin:0;
  font-family:var(--font-ui);color:var(--gold);letter-spacing:.04em;font-size:var(--fs-sm);
}
/* Writer · Painter · Academic Lecturer · Entrepreneur are four equals, so they
   are never allowed to break into a second line with one name stranded under
   the others. They hold one rank and shrink to fit the width they are given. */
.roles--hero,.roles--author{flex-wrap:nowrap;white-space:nowrap}
.roles--hero li,.roles--author li{flex:none}
html[dir=rtl] .roles{letter-spacing:0}
.roles li{display:flex;align-items:center;gap:var(--sp-2);white-space:nowrap}
.roles li:not(:last-child)::after{content:"\00B7";color:var(--gold);opacity:.55}
.roles--hero{margin-top:var(--sp-2)}
.roles--author{margin:var(--sp-2) 0 var(--sp-3)}
.roles--ftr{margin-top:var(--sp-2)}

.hp{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip{
  position:fixed;top:-140px;inset-inline-start:1rem;z-index:2000;
  background:var(--gold);color:#000;padding:.7rem 1.1rem;font-weight:600;
  border-radius:var(--r-md);transition:top var(--dur-fast) var(--ease);
}
.skip:focus{top:1rem}

/* ====================================================== 5 · Layout ====== */
.wrap{width:var(--page);margin-inline:auto}
.narrow{width:var(--narrow);margin-inline:auto}

.sec{padding:var(--sec-y) 0;position:relative}
.sec--tight{padding:clamp(2rem,3.5vw,3rem) 0}
.sec--line{border-top:1px solid var(--line)}
.sec--top{padding-top:clamp(7rem,12vw,10rem)}
.sec--formtop{padding-top:0}
.sec--quiz{padding-top:0}

/* The section head: a label, a heading, and one short line under it. All of it
   sits on the page's centre line — the label, the heading, the second title
   under it and the sentence beneath them, in both scripts. The sentence is
   balanced rather than left to fall where it will, because a centred line that
   breaks into two even halves is what stops a centred paragraph reading as
   ragged. */
.sec__head{margin-bottom:var(--sp-5);text-align:center}
.sec__head .eyebrow{justify-content:center;margin-inline:auto}
.sec__head h2,.sec__head .sec__sub{margin-inline:auto}
.sec__head h2{max-width:var(--measure-head);text-wrap:balance}
.sec__head .onelinebox h2{max-width:none}
.sec__head>p:not(.eyebrow){
  text-align:center;text-wrap:balance;max-width:58ch;
  margin-inline:auto;margin-top:var(--sp-3);
}
.sec__head .lead{margin-bottom:0}

.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-lg);align-items:center}
.split--end{align-items:end}
.split--top{align-items:start}
.coursegrid{margin-top:var(--sp-5)}
.seatsrow{margin-top:var(--sp-5)}

/* The course's facts read against the sentence beside them, not against the
   buttons under it. The column is bottom-aligned, so the lift is a margin
   below the list. Under 900px the two columns stack and it goes away. */
@media (min-width:901px){
  .coursefacts{margin-bottom:clamp(1.5rem,3vw,3rem)}
}

/* ================================================== 6 · Components ====== */

/* ---- Button -------------------------------------------------------------
   One shape, five intents, six states. Nothing on the site uses a button that
   is not one of these. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  font-family:var(--font-ui);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:var(--track);
  text-transform:var(--upper);
  line-height:1.2;
  min-height:var(--control-h);
  padding:.7rem 1.75rem;
  border:1px solid var(--line-2);
  border-radius:var(--r-md);
  color:var(--paper);
  background:transparent;
  cursor:pointer;
  text-align:center;
  white-space:nowrap;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
html[dir=rtl] .btn{letter-spacing:0;text-transform:none}
.btn:hover{border-color:var(--gold);color:var(--gold)}
.btn:active{transform:translateY(1px)}

.btn--primary,.btn--gold{background:var(--gold);border-color:var(--gold);color:#000}
.btn--primary:hover,.btn--gold:hover{
  background:var(--gold-lt);border-color:var(--gold-lt);color:#000;
  transform:translateY(-2px);box-shadow:var(--shadow-gold);
}
.btn--primary:active,.btn--gold:active{transform:translateY(0)}

.btn--tertiary{border-color:transparent;background:var(--surface-2)}
.btn--tertiary:hover{background:var(--surface-3);border-color:var(--line-2);color:var(--paper)}

.btn--ghost{border-color:transparent;padding-inline:.75rem}
.btn--ghost:hover{border-color:transparent;color:var(--gold);background:var(--gold-wash)}

.btn--danger{border-color:rgba(232,160,143,.5);color:var(--bad)}
.btn--danger:hover{border-color:var(--bad);background:rgba(232,160,143,.08);color:var(--bad)}

.btn--sm{min-height:var(--control-h-sm);padding:.5rem 1.1rem;font-size:var(--fs-meta)}
.btn--lg{min-height:3.5rem;padding:.9rem 2.25rem}
.btn--full{width:100%;margin-top:var(--sp-3)}

.btn[disabled],.btn[aria-disabled=true],.btn.is-off,a.is-off{
  opacity:.55;cursor:default;pointer-events:none;
  background:transparent;color:var(--paper-2);border-color:var(--line-2);
  box-shadow:none;transform:none;
}
.btn.is-busy{position:relative;color:transparent;pointer-events:none}
.btn.is-busy::after{
  content:"";position:absolute;width:1.05rem;height:1.05rem;border-radius:50%;
  border:2px solid var(--paper);border-top-color:transparent;
  animation:spin .7s linear infinite;
}
.btn--primary.is-busy::after,.btn--gold.is-busy::after{border-color:#000;
  border-top-color:transparent}
@keyframes spin{to{transform:rotate(360deg)}}

.btn-row{display:flex;flex-wrap:wrap;gap:var(--gap-sm)}
.btn-row--gap{margin-top:var(--sp-4)}
.btn-row--center{justify-content:center;margin-top:var(--sp-4)}

/* ---- A text link that behaves like an action ---------------------------- */
.link-more{
  display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--tap);
  font-family:var(--font-ui);font-size:var(--fs-label);font-weight:600;
  letter-spacing:var(--track);text-transform:var(--upper);color:var(--gold);
  border-bottom:1px solid var(--gold-dim);
  transition:gap var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
html[dir=rtl] .link-more{letter-spacing:0;text-transform:none}
.link-more::after{content:var(--arrow);font-family:var(--font-ui)}
.link-more:hover{gap:1rem;border-bottom-color:var(--gold)}
.morerow{margin:var(--sp-4) 0 0}

/* ---- Breadcrumb ---------------------------------------------------------
   The trail Google prints under a result instead of a bare URL. It is set in
   the label size so it reads as a position marker rather than as text, and the
   separator is a real character in the flow — `content` on a pseudo-element
   would be invisible to the accessibility tree and to anything reading the
   markup, which is the one audience the crumb exists for. */
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);
  margin-bottom:var(--sp-3);
  font-family:var(--font-ui);font-size:var(--fs-meta);
  letter-spacing:var(--track);text-transform:var(--upper);color:var(--muted);
}
html[dir=rtl] .crumbs{letter-spacing:0;text-transform:none}
.crumbs a{color:var(--muted);border-bottom:1px solid transparent}
.crumbs a:hover{color:var(--gold);border-bottom-color:var(--gold-dim)}
.crumbs [aria-current]{color:var(--paper-2)}

/* ---- Surfaces: panel and card ------------------------------------------- */
.panel{
  background:var(--surface-1);border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(1.35rem,2.6vw,2.25rem);
}
.panel--gold{border-color:var(--gold-dim)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));gap:var(--gap)}
.card{
  background:var(--surface-1);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--sp-4) var(--sp-3);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),
             background var(--dur) var(--ease);
}
.card:hover{border-color:var(--gold-dim);transform:translateY(-3px);background:var(--surface-2)}
.card h3{margin-bottom:var(--sp-2)}
.card p{font-size:var(--fs-sm);color:var(--muted);margin:0}
.card b.k{
  display:block;font-family:var(--font-ui);font-size:var(--fs-meta);font-weight:600;
  letter-spacing:var(--track);text-transform:var(--upper);color:var(--gold);
  margin-bottom:var(--sp-3);
}
html[dir=rtl] .card b.k{letter-spacing:0;text-transform:none}

/* ---- Badge ---------------------------------------------------------------- */
.statechip{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  margin:0 0 var(--sp-3);padding:.35rem .9rem;
  border:1px solid var(--gold-dim);border-radius:var(--r-pill);
  font-size:var(--fs-cap);font-weight:600;color:var(--gold-lt);
  letter-spacing:var(--track);text-transform:var(--upper);line-height:1.6;
}
html[dir=rtl] .statechip{letter-spacing:0;text-transform:none}
.statechip::before{content:"";width:.4rem;height:.4rem;border-radius:50%;
  background:var(--gold);flex:none}
.statechip--center{margin:var(--sp-3) auto 0}

/* ---- Tick list (every bulleted list on the site) ------------------------- */
.ticks{display:grid;gap:var(--sp-2)}
.ticks li{
  position:relative;padding-inline-start:1.4rem;color:var(--paper-2);
  font-size:var(--fs-sm);line-height:var(--lh-body);
}
.ticks li::before{
  content:"";position:absolute;inset-inline-start:0;top:.6em;
  width:6px;height:6px;border:1px solid var(--gold);transform:rotate(45deg);
}
.ticks--lg li{font-size:var(--fs-body);color:var(--paper);padding-block:.1rem}
.ticks.cols{grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));
  gap:var(--sp-2) var(--sp-4)}
@media (max-width:420px){.ticks.cols{grid-template-columns:1fr}}

/* ---- Definition rows ----------------------------------------------------- */
.dl{border-top:1px solid var(--line)}
.dl>div{
  display:flex;flex-wrap:wrap;gap:.25rem var(--sp-3);justify-content:space-between;
  align-items:baseline;padding:var(--sp-2) .1rem;border-bottom:1px solid var(--line);
}
.dl dt{
  font-size:var(--fs-label);letter-spacing:var(--track);text-transform:var(--upper);
  color:var(--muted);line-height:1.6;
}
html[dir=rtl] .dl dt{letter-spacing:0;text-transform:none}
.dl dd{margin:0;font-family:var(--font-display);font-size:var(--fs-h4);
  color:var(--paper);text-align:end}
html[dir=rtl] .dl dd{font-family:var(--font-ui);font-weight:500}
.dl dd.sm{font-family:var(--font-ui);font-size:var(--fs-sm)}
.dl--stack>div{display:block;padding:var(--sp-2) .1rem}
.dl--stack dt{display:block;margin-bottom:.25rem}
.dl--stack dd{text-align:start;color:var(--paper-2)}
.dl .cur{
  font-family:var(--font-ui);font-size:var(--fs-meta);letter-spacing:var(--track);
  text-transform:var(--upper);color:var(--gold);margin-inline-start:.35rem;
}
html[dir=rtl] .dl .cur{letter-spacing:0;text-transform:none}

/* ---- A labelled entry ---------------------------------------------------- */
.entry{
  display:grid;grid-template-columns:8rem minmax(0,1fr);gap:.35rem var(--sp-4);
  padding-bottom:var(--sp-3);margin-bottom:var(--sp-3);border-bottom:1px solid var(--line);
}
.entry:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.entry__when{
  font-size:var(--fs-label);letter-spacing:var(--track);text-transform:var(--upper);
  color:var(--gold);padding-top:.3rem;line-height:1.6;
}
html[dir=rtl] .entry__when{letter-spacing:0;text-transform:none;font-weight:600}
.entry p{margin:0;color:var(--paper-2);font-size:var(--fs-sm)}

/* ---- Accordion ----------------------------------------------------------- */
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{
  width:100%;display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) .2rem;min-height:3.5rem;
  background:none;border:0;color:inherit;cursor:pointer;text-align:start;font:inherit;
  transition:padding-inline-start var(--dur) var(--ease);
}
.acc__btn:hover{padding-inline-start:.6rem}
.acc__btn i{
  font-style:normal;font-family:var(--font-ui);font-size:var(--fs-meta);font-weight:600;
  letter-spacing:.08em;color:var(--gold);width:2rem;flex:none;
}
.acc__btn h3{flex:1;min-width:0}
.acc__btn em{
  font-style:normal;font-size:var(--fs-meta);letter-spacing:var(--track);
  text-transform:var(--upper);color:var(--muted);flex:none;max-width:34%;
  text-align:end;line-height:1.5;
}
html[dir=rtl] .acc__btn em{letter-spacing:0;text-transform:none}
.acc__sign{position:relative;width:15px;height:15px;flex:none}
.acc__sign::before,.acc__sign::after{
  content:"";position:absolute;background:var(--gold);
  transition:transform var(--dur) var(--ease);
}
.acc__sign::before{top:7px;inset-inline-start:0;width:15px;height:1px}
.acc__sign::after{inset-inline-start:7px;top:0;width:1px;height:15px}
.acc__btn[aria-expanded=true] .acc__sign::after{transform:rotate(90deg)}
.acc__panel{overflow:hidden;height:0;transition:height var(--dur-slow) var(--ease)}
.acc__inner{padding:0 0 var(--sp-4);padding-inline-start:3rem}

/* ---- The cue on the syllabus --------------------------------------------
   Only the first unit is open when the page arrives, and nothing else says the
   other seven do anything. So the English Drama row carries a small tap mark
   with a ring breathing out of its sign, and it keeps breathing until somebody
   presses it — then it goes, and stays gone for the rest of the visit. It is
   the one thing on the page asking to be touched, so it does not give up
   asking before it has been. Everything here is written in by the script; the
   markup carries none of it. */
.acc__tap{
  display:inline-flex;align-items:center;gap:.4rem;flex:none;
  font-family:var(--font-ui);font-size:var(--fs-meta);font-weight:600;
  letter-spacing:var(--track);text-transform:var(--upper);
  color:var(--gold);background:var(--gold-wash);
  border:1px solid var(--gold-dim);border-radius:var(--r-pill);
  padding:.26rem .7rem;line-height:1.4;white-space:nowrap;
  animation:cueIn 560ms var(--ease-soft) both;
}
html[dir=rtl] .acc__tap{letter-spacing:0;text-transform:none}
.acc__tap::before{
  content:"";width:.42rem;height:.42rem;border-radius:50%;background:var(--gold);
  flex:none;animation:cueTap 2.6s var(--ease) .7s infinite;
}
/* The ring is laid exactly over the sign — 15px square, either script — and
   grows out of it. */
.acc__ring{
  position:absolute;inset:0;border:1px solid var(--gold);border-radius:50%;
  opacity:0;pointer-events:none;animation:cueRing 2.6s var(--ease) .7s infinite;
}
.acc__ring+.acc__ring{animation-delay:2s}
.acc__cue-out{animation:cueOut 300ms var(--ease) forwards !important}

@keyframes cueIn{from{opacity:0;translate:0 .45rem;scale:.94}to{opacity:1;scale:1}}
@keyframes cueOut{to{opacity:0;scale:.9}}
@keyframes cueTap{
  0%,26%,100%{transform:scale(1);opacity:1}
  10%{transform:scale(.5);opacity:.55}
}
@keyframes cueRing{
  0%{transform:scale(1);opacity:.6}
  72%,100%{transform:scale(3.2);opacity:0}
}

/* ---- Details (the FAQ) --------------------------------------------------- */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:var(--sp-3) .2rem;display:flex;gap:var(--sp-3);
  align-items:center;font-family:var(--font-display);font-size:var(--fs-h4);
  min-height:3.5rem;transition:color var(--dur) var(--ease);
}
html[dir=rtl] .faq summary{font-family:var(--font-ui);font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";margin-inline-start:auto;color:var(--gold);font-size:1.3rem;
  font-family:var(--font-ui);transition:transform var(--dur) var(--ease);flex:none;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--gold)}
.faq p{padding:0 .2rem var(--sp-3);margin:0;color:var(--muted);max-width:70ch;
  font-size:var(--fs-sm)}

/* ---- Messages: empty, error, success ------------------------------------- */
.empty{
  text-align:center;padding:clamp(2rem,5vw,3.5rem) var(--sp-3);
  border:1px dashed var(--line-2);border-radius:var(--r-md);
}
.empty h3{margin-bottom:var(--sp-2)}
.empty p{max-width:52ch;margin-inline:auto;text-align:center}

.formmsg{
  padding:var(--sp-3);border:1px solid var(--line-2);border-radius:var(--r-md);
  font-size:var(--fs-sm);display:none;line-height:var(--lh-tight);
}
.formmsg.is-on{display:block}
.formmsg.ok{border-color:var(--gold-dim);background:var(--gold-wash);color:var(--gold-lt)}
.formmsg.bad{border-color:var(--bad);background:rgba(232,160,143,.08);color:var(--bad)}

/* ============================================== 7 · Compositions ======== */

/* ---- Header -------------------------------------------------------------- */
/* The header used to drop in from above on load. It is simply in place now.
   The transition that stays is the stuck state — a background arriving when
   the page is scrolled — which is feedback, not an entrance. */
.hdr{
  position:fixed;inset:0 0 auto;z-index:100;border-bottom:1px solid transparent;
  transition:background var(--dur-slow) var(--ease),border-color var(--dur-slow) var(--ease),
             box-shadow var(--dur-slow) var(--ease);
}
.hdr.is-stuck{
  background:rgba(0,0,0,.9);
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);box-shadow:var(--shadow-2);
}
.hdr__in{
  width:var(--page);margin-inline:auto;display:flex;align-items:center;
  justify-content:space-between;gap:var(--sp-3);height:4.75rem;
  transition:height var(--dur) var(--ease);
}
.hdr.is-stuck .hdr__in{height:4rem}

.brand{
  font-family:var(--font-display);font-size:var(--fs-h4);letter-spacing:.09em;
  white-space:nowrap;color:var(--gold);font-weight:600;flex:none;
  display:inline-flex;align-items:center;min-height:var(--tap);
  transition:color var(--dur) var(--ease);
}
html[dir=rtl] .brand{letter-spacing:0;font-weight:400}
.brand:hover{color:var(--gold-lt)}

/* A navigation link never shrinks below its own word. A flex item that
   shrinks under `white-space:nowrap` spills its text over the link beside it,
   which is what used to break the header on the longer pages. */
.nav{display:flex;align-items:center;gap:clamp(1rem,1.8vw,1.6rem);min-width:0}
.nav a{
  flex:0 0 auto;
  font-size:var(--fs-meta);font-weight:500;letter-spacing:var(--track);
  text-transform:var(--upper);color:var(--paper-2);position:relative;
  white-space:nowrap;min-height:var(--tap);display:inline-flex;align-items:center;
  transition:color var(--dur) var(--ease);
}
html[dir=rtl] .nav a{font-size:.88rem;letter-spacing:0;text-transform:none}
.nav a::after{
  content:"";position:absolute;inset-inline-start:0;bottom:.9rem;height:1px;width:0;
  background:var(--gold);transition:width var(--dur) var(--ease);
}
.nav a:hover,.nav a.is-active{color:var(--paper)}
.nav a:hover::after,.nav a.is-active::after{width:100%}

.hdr__cta{display:flex;align-items:center;gap:var(--sp-2);flex:none}
.langsw{
  display:inline-flex;align-items:center;justify-content:center;gap:.25rem;
  min-height:var(--tap);padding:.4rem .7rem;
  border:1px solid var(--line-2);border-radius:var(--r-md);
  background:transparent;color:var(--paper-2);cursor:pointer;
  font-family:var(--font-ui);font-size:var(--fs-meta);font-weight:600;
  letter-spacing:.08em;white-space:nowrap;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.langsw:hover{border-color:var(--gold);color:var(--gold)}
.langsw b{color:var(--gold);font-weight:600}
.langsw i{font-style:normal}
.langsw--ftr{padding:.5rem .9rem;font-family:inherit;letter-spacing:normal;
  font-size:var(--fs-cap)}

.burger{
  display:none;width:var(--tap);height:var(--tap);border:1px solid var(--line-2);
  background:transparent;border-radius:var(--r-md);cursor:pointer;padding:0;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.burger[aria-expanded=true]{border-color:var(--gold-dim);background:var(--gold-wash)}
/* The three lines fold into the cross over the same beat the menu takes to
   arrive, so the button and the panel read as one gesture. */
.burger span{
  display:block;width:17px;height:1px;background:var(--paper);
  transition:transform 420ms var(--ease-soft),opacity 200ms var(--ease),
             background var(--dur) var(--ease);
}
.burger[aria-expanded=true] span{background:var(--gold)}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(3px)rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0;transform:scaleX(.2)}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-3px)rotate(-45deg)}

/* Six English words plus a wordmark and a switch need this much room. */
@media (max-width:1140px){
  .nav{display:none}
  .burger{display:flex}
}

/* The menu. The panel draws down over the page and its rows arrive just behind
   it, one after another, so the whole thing is read as a single movement
   instead of as something that was suddenly there. `visibility` is stepped at
   one end of the slide or the other and never in between, so the panel is
   never half-present to a screen reader or to a stray tap. */
.drawer{
  position:fixed;inset:0;z-index:99;background:var(--ink);display:flex;
  flex-direction:column;justify-content:center;gap:var(--sp-1);
  padding:6rem var(--sp-3) 3rem;padding-bottom:max(3rem,env(safe-area-inset-bottom));
  transform:translateY(-100%);opacity:0;visibility:hidden;overflow-y:auto;
  will-change:transform,opacity;
  transition:transform var(--dur-drawer) var(--ease-soft),
             opacity 280ms var(--ease) 140ms,
             visibility 0s linear var(--dur-drawer);
}
.drawer.is-open{
  transform:none;opacity:1;visibility:visible;
  transition:transform var(--dur-drawer) var(--ease-soft),
             opacity 240ms var(--ease),
             visibility 0s linear 0s;
}
.drawer nav{display:flex;flex-direction:column}
.drawer a:not(.btn){
  font-family:var(--font-display);font-size:clamp(1.6rem,6.5vw,2.2rem);
  padding:.4rem 0;min-height:var(--tap);display:flex;align-items:center;
  border-bottom:1px solid var(--line);color:var(--paper);
}
html[dir=rtl] .drawer a:not(.btn){font-size:clamp(1.4rem,5.6vw,1.95rem)}
.drawer .btn{margin-top:var(--sp-3)}

/* Each row settles after the panel it sits in. `--i` is its place in the list,
   written by the script. The lift uses `translate` rather than `transform` so
   that a button's own hover lift is left free to work. */
.drawer a{
  opacity:0;translate:0 1.15rem;
  transition:opacity 340ms var(--ease),translate 500ms var(--ease-soft);
}
.drawer.is-open a{
  opacity:1;translate:none;
  transition-delay:calc(var(--i,0) * 46ms + 180ms);
}

/* ---- Hero ---------------------------------------------------------------- */
.hero{
  position:relative;background:var(--ink);overflow:hidden;
  padding:clamp(6.5rem,10vw,8.5rem) 0 clamp(2rem,4vw,3.25rem);
}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:var(--gap-lg);align-items:center;min-height:min(70svh,640px);
}
.hero__text{position:relative;z-index:2}
.hero__name{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .28em;
  font-family:var(--font-display);font-size:var(--fs-display);font-weight:300;
  letter-spacing:var(--track-tight);line-height:var(--lh-display);margin:0;
}
.hero__given{color:var(--paper);white-space:nowrap}
.hero__family{color:var(--gold);white-space:nowrap}
.hero__intro{
  color:var(--paper-2);font-size:var(--fs-body);line-height:var(--lh-body);
  max-width:var(--measure-tight);margin:var(--sp-3) 0 0;
}
.hero .btn-row{margin-top:var(--sp-4)}
.hero__figure{position:relative;justify-self:end;width:100%;max-width:30rem}
html[dir=rtl] .hero__figure{justify-self:start}
.hero__figure img{width:100%;height:auto;filter:contrast(1.02) brightness(1.02) saturate(1.05)}
.hero__scroll{
  position:absolute;inset-inline-end:0;bottom:clamp(1.5rem,4vw,3rem);z-index:1;
  writing-mode:vertical-rl;font-size:var(--fs-meta);letter-spacing:.24em;
  text-transform:var(--upper);color:var(--muted);display:flex;align-items:center;
  gap:var(--sp-2);
}
/* A plain gold rule. It used to run down and away on a 2.6s loop. */
.hero__scroll::after{
  content:"";width:1px;height:52px;background:linear-gradient(var(--gold),transparent);
}
@media (max-width:1140px){.hero__scroll{display:none}}

/* ---- The era band ----------------------------------------------------------
   A marquee of era names, running with no end to it. The ten names are written
   twice in the markup and the track slides exactly half its own width, so the
   second set is standing under the first at the moment it wraps and the seam
   never arrives.

   The spacing is a margin on each name and not a `gap` on the track: a gap
   leaves one fewer space than there are names, so the two halves are not the
   same width and half a width of travel lands a little off every lap. A margin
   belongs to the name, and the halves are then equal to the pixel.

   Rightwards in Arabic, leftwards in English — each script's own reading
   direction, so the names arrive the way the eye is already moving. */
.strip{border-block:1px solid var(--line);padding:.8rem 0;overflow:hidden;
  background:var(--surface-1)}
.strip__track{display:flex;width:max-content;
  animation:slide 46s linear infinite;will-change:transform}
html[dir=rtl] .strip__track{animation-name:slideR}
.strip:hover .strip__track,.strip.is-idle .strip__track{animation-play-state:paused}
.strip span{
  font-family:var(--font-display);font-size:var(--fs-sm);color:var(--muted);
  letter-spacing:.04em;white-space:nowrap;display:flex;align-items:center;gap:3rem;
  margin-inline-end:3rem;
}
html[dir=rtl] .strip span{letter-spacing:0}
.strip span::after{content:"\2022";color:var(--gold)}
/* The two laps every band on the site runs on. */
@keyframes slide{to{transform:translateX(-50%)}}
@keyframes slideR{to{transform:translateX(50%)}}

/* ---- Author --------------------------------------------------------------- */
.author{position:relative;overflow:hidden;border-top:1px solid var(--line)}
.author__in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr);
  gap:var(--gap-lg);align-items:center;
}
.author__text{max-width:var(--measure)}
.author__name{font-size:var(--fs-h1);margin:0}
.author__p{color:var(--paper-2);margin-bottom:1em}
.author__figure{position:relative;justify-self:end;width:100%;max-width:26rem}
html[dir=rtl] .author__figure{justify-self:start}
.author__figure img{width:100%;height:auto;opacity:.92}

/* ---- Stats ---------------------------------------------------------------- */
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));
  border-top:1px solid var(--line);
}
.stats li{
  padding:var(--sp-4) var(--sp-3);border-bottom:1px solid var(--line);
  border-inline-end:1px solid var(--line);
  /* The figure and its word sit in the middle of the cell they are given,
     across and down, so four unequal labels still read as one row. */
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
}
.stats li:last-child{border-inline-end:0}
.stats b{
  display:block;font-family:var(--font-display);font-size:var(--fs-h1);font-weight:400;
  color:var(--gold);line-height:1.1;margin-bottom:var(--sp-1);
}
.stats small{
  font-size:var(--fs-label);letter-spacing:var(--track);text-transform:var(--upper);
  color:var(--muted);display:block;line-height:1.5;
}
html[dir=rtl] .stats small{letter-spacing:0;text-transform:none}
.stats small{text-align:center}

/* ---- Cover row ------------------------------------------------------------ */
.covers{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:var(--gap)}
.cover{
  position:relative;display:block;border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;background:var(--surface-2);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.cover:hover{border-color:var(--gold-dim);transform:translateY(-4px)}
.cover img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center top}

/* ---- Novel band ----------------------------------------------------------- */
.novelband__in{
  display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr);
  gap:var(--gap-lg);align-items:center;
}
.novelband__cover{
  display:block;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  background:var(--surface-2);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.novelband__cover:hover{border-color:var(--gold-dim);transform:translateY(-4px)}
.novelband__cover img{width:100%}
.novelband__h{font-size:var(--fs-h2);margin:0}
.novelband__form{
  font-family:var(--font-ui);font-size:var(--fs-label);letter-spacing:var(--track);
  text-transform:var(--upper);color:var(--gold);margin:var(--sp-2) 0 var(--sp-3);
}
html[dir=rtl] .novelband__form{letter-spacing:0;text-transform:none}
.novelband .lead{margin-bottom:var(--sp-2)}

/* ---- Novel page ----------------------------------------------------------- */
.novel__in{
  display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  gap:var(--gap-lg);align-items:start;
}
.novel__figure{
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  background:var(--surface-2);position:sticky;top:6.5rem;
}
.novel__figure img{width:100%}
.novel__text{max-width:var(--measure)}
.novel__h{margin:0}
.novel__alt{
  font-family:var(--font-display);font-size:var(--fs-h3);color:var(--gold);
  margin:var(--sp-1) 0 0;font-weight:300;letter-spacing:.02em;
}
html[dir=rtl] .novel__alt{
  font-family:var(--font-ui);font-weight:500;letter-spacing:0;
  direction:ltr;text-align:start;
}
.novel__form{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);
  font-family:var(--font-ui);font-size:var(--fs-label);letter-spacing:var(--track);
  text-transform:var(--upper);color:var(--muted);margin:var(--sp-3) 0;
}
html[dir=rtl] .novel__form{letter-spacing:0;text-transform:none}
.novel__status{
  border:1px solid var(--gold-dim);color:var(--gold);padding:.3rem .75rem;
  border-radius:var(--r-pill);white-space:nowrap;
}
a.novel__status{
  min-height:var(--tap);display:inline-flex;align-items:center;justify-content:center;
  border-color:var(--gold);cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
a.novel__status:hover,a.novel__status:focus-visible{
  background:var(--gold);color:var(--ink);border-color:var(--gold-lt);
  transform:translateY(-2px);box-shadow:var(--shadow-gold);
}
a.novel__status:active{transform:translateY(0)}
.novel__promo{
  font-family:var(--font-display);font-size:var(--fs-h4);color:var(--gold);
  border-inline-start:2px solid var(--gold-dim);padding-inline-start:var(--sp-3);
  margin:var(--sp-3) 0 0;line-height:var(--lh-lead);
}
html[dir=rtl] .novel__promo{font-family:var(--font-ui);font-weight:500}
.novel__facts{margin-top:var(--sp-4)}
.novel__text .vsec__note{margin-top:var(--sp-3)}
.novel__covers{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-sm)}
.novel__turn{
  font-family:var(--font-display);font-size:var(--fs-h3);color:var(--paper);
  line-height:var(--lh-lead);border-block:1px solid var(--line);
  padding:var(--sp-3) 0;margin:var(--sp-3) 0;
}
html[dir=rtl] .novel__turn{font-family:var(--font-ui);font-weight:500}
.novel__turn em{font-style:normal;color:var(--gold)}
.prose>p:last-child{margin-bottom:0}

.places{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:var(--gap)}
.place{
  margin:0;background:var(--surface-1);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.place:hover{border-color:var(--gold-dim);transform:translateY(-3px)}
.place__img img{width:100%;aspect-ratio:3/2;object-fit:cover}
.place figcaption{padding:var(--sp-3);flex:1}
.place__name{
  display:block;font-family:var(--font-display);font-size:var(--fs-h4);
  color:var(--paper);line-height:var(--lh-tight);margin-bottom:var(--sp-1);
  text-wrap:balance;
}
html[dir=rtl] .place__name{font-family:var(--font-ui);font-weight:600}
.place figcaption p{margin:0;font-size:var(--fs-sm);color:var(--muted)}
.place--pending .place__img{background:var(--surface-2)}
.place--pending .place__img img{opacity:.85}
.place__note{margin-top:var(--sp-1);color:var(--gold);opacity:.9;font-size:var(--fs-sm)}
.places__note{margin:var(--sp-4) auto 0;max-width:var(--measure)}

.citymap{margin:0 auto;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface-1);overflow:hidden;max-width:46rem}
.citymap img{width:100%;display:block}
.citymap figcaption{
  font-family:var(--font-ui);font-size:var(--fs-label);letter-spacing:var(--track);
  text-transform:var(--upper);color:var(--muted);padding:var(--sp-2) var(--sp-3);
  border-top:1px solid var(--line);
}
html[dir=rtl] .citymap figcaption{letter-spacing:0;text-transform:none}

.casts{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:var(--gap)}
.cast{
  margin:0;background:var(--surface-1);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.cast:hover{border-color:var(--gold-dim);transform:translateY(-3px)}
.cast__img img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top}
.cast figcaption{padding:var(--sp-3);flex:1;display:flex;flex-direction:column}
.cast__name{
  display:block;font-family:var(--font-display);font-size:var(--fs-h4);
  color:var(--paper);line-height:var(--lh-tight);
}
html[dir=rtl] .cast__name{font-family:var(--font-ui);font-weight:600}
.cast__role{
  display:block;font-family:var(--font-ui);font-size:var(--fs-meta);font-weight:600;
  letter-spacing:var(--track);text-transform:var(--upper);color:var(--gold);
  margin:var(--sp-1) 0 var(--sp-2);
}
html[dir=rtl] .cast__role{letter-spacing:0;text-transform:none}
.cast figcaption p{margin:0;font-size:var(--fs-sm);color:var(--muted)}

.themes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;
}
.theme{background:var(--ink);padding:var(--sp-4) var(--sp-3)}
.theme b{
  display:block;font-family:var(--font-ui);font-size:var(--fs-label);font-weight:600;
  letter-spacing:var(--track);text-transform:var(--upper);color:var(--gold);
  margin-bottom:var(--sp-2);
}
html[dir=rtl] .theme b{letter-spacing:0;text-transform:none}
.theme p{margin:0;font-family:var(--font-display);font-size:var(--fs-h4);
  color:var(--paper-2);line-height:var(--lh-lead)}
html[dir=rtl] .theme p{font-family:var(--font-ui)}

.pull{
  margin:var(--sp-4) 0;padding:var(--sp-3);border:1px solid var(--gold-dim);
  border-radius:var(--r-md);background:var(--gold-wash);
  font-family:var(--font-display);font-size:var(--fs-h3);color:var(--gold-lt);
  line-height:var(--lh-lead);text-align:start;
}
html[dir=rtl] .pull{font-family:var(--font-ui);font-weight:500}

/* ---- Social --------------------------------------------------------------- */
.socs{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;margin-top:var(--sp-4)}
.socs--compact{margin-top:var(--sp-2)}
/* Under the two buttons in the hero, where a reader looks for them: centred
   across the column, a size a thumb can hit, and gold rather than grey. */
.socs--hero{
  justify-content:center;gap:var(--sp-3);margin-top:var(--sp-4);
}
.socs--hero .soc{
  width:var(--tap);height:var(--tap);color:var(--gold);
  border-color:var(--gold-dim);background:var(--gold-wash);
}
.socs--hero .soc svg{width:1.4rem;height:1.4rem}
a.socs--hero .soc:hover,.socs--hero a.soc:hover{
  color:var(--gold-lt);border-color:var(--gold);background:rgba(198,164,92,.16);
}
.soc{
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--tap);height:var(--tap);border:1px solid var(--line-2);border-radius:50%;
  color:var(--paper-2);flex:none;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),
             background var(--dur) var(--ease);
}
.soc span{display:none}
.soc svg{width:1.05rem;height:1.05rem;fill:currentColor;flex:none}
a.soc:hover{border-color:var(--gold);color:var(--gold);background:var(--gold-wash)}
.soc.is-off{opacity:.45;cursor:default}

/* ---- Faces (the twelve writers) ------------------------------------------- */
.faces{display:grid;grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr));gap:var(--gap)}
.face{
  margin:0;background:var(--surface-1);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.face:hover{border-color:var(--gold-dim);transform:translateY(-3px)}
.face__img{overflow:hidden;background:var(--surface-2)}
.face__img img{width:100%;aspect-ratio:3/4;object-fit:cover}
.face figcaption{padding:var(--sp-3);display:flex;flex-direction:column;flex:1}
.face__no{
  font-family:var(--font-ui);font-size:var(--fs-meta);font-weight:600;
  letter-spacing:.16em;color:var(--gold);display:block;margin-bottom:var(--sp-1);
}
.face__name{
  display:block;font-family:var(--font-display);font-size:var(--fs-h4);
  font-weight:400;color:var(--paper);line-height:var(--lh-tight);text-wrap:balance;
}
html[dir=rtl] .face__name{font-family:var(--font-ui);font-weight:500}
.face__yr{
  display:block;font-family:var(--font-ui);font-size:var(--fs-meta);letter-spacing:.1em;
  color:var(--gold);margin:var(--sp-1) 0;direction:ltr;text-align:start;white-space:nowrap;
}
html[dir=rtl] .face__yr{letter-spacing:0}
.face figcaption p{margin:0;font-size:var(--fs-sm);color:var(--muted)}
.figures__note{margin:var(--sp-3) 0 0}

/* ---- Flow (the four stages) ----------------------------------------------- */
.flow{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;
}
.flow li{background:var(--ink);padding:var(--sp-4) var(--sp-3)}
.flow b{
  display:block;font-family:var(--font-ui);font-size:var(--fs-meta);letter-spacing:.2em;
  color:var(--gold);margin-bottom:var(--sp-2);
}
.flow h3{margin-bottom:var(--sp-1)}
.flow p{font-size:var(--fs-sm);color:var(--muted);margin:0}

/* ---- Seats ---------------------------------------------------------------- */
.seats{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-3) var(--sp-5);
  align-items:center}
.seats__fig{font-family:var(--font-display);line-height:.95}
.seats__fig b{
  font-size:clamp(2.75rem,2rem + 3.4vw,4rem);font-weight:400;color:var(--gold);
  font-variant-numeric:tabular-nums lining-nums;
}
/* The slot holds either a figure or a sentence; the two cannot be set alike. */
.seats__fig b.seats--word{
  font-size:var(--fs-h3);line-height:var(--lh-tight);color:var(--gold-lt);
  display:block;text-wrap:balance;
}
.seats__fig span{font-size:var(--fs-h4);color:var(--muted);margin-inline-start:.2rem}
.seats__lbl{
  font-family:var(--font-ui);font-size:var(--fs-label);letter-spacing:var(--track);
  text-transform:var(--upper);color:var(--muted);margin-top:var(--sp-2);
}
html[dir=rtl] .seats__lbl{letter-spacing:0;text-transform:none}
.seats__body{min-width:0}
.seats p{font-size:var(--fs-sm)}
.seats__bar{
  height:2px;background:var(--surface-3);position:relative;overflow:hidden;
  margin:var(--sp-2) 0;
}
.seats__bar i{
  position:absolute;inset-block:0;inset-inline-start:0;width:0;
  background:linear-gradient(90deg,var(--gold),var(--gold-lt));
  transition:width 1.4s var(--ease);
}
.seats__dots{display:flex;flex-wrap:wrap;gap:5px;min-height:2.25rem;align-content:flex-start}
.seats__dots i{width:9px;height:9px;border:1px solid var(--gold-dim);border-radius:50%}
.seats__dots i.taken{background:var(--gold);border-color:var(--gold)}

/* ---- Fees ----------------------------------------------------------------- */
.feesgrid{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:var(--gap-lg);align-items:start;
}
.feespanel{padding:clamp(1.5rem,3vw,2.5rem)}
.price{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--sp-2);
  font-family:var(--font-display);margin-bottom:var(--sp-1)}
.price b{
  font-size:clamp(2.5rem,1.9rem + 2.6vw,3.75rem);font-weight:400;color:var(--paper);
  line-height:1.05;font-variant-numeric:tabular-nums lining-nums;
}
.price b.price--soon{font-size:var(--fs-h2);color:var(--gold)}
.price span{
  font-size:var(--fs-label);font-family:var(--font-ui);letter-spacing:var(--track);
  text-transform:var(--upper);color:var(--gold);
}
html[dir=rtl] .price span{letter-spacing:0;text-transform:none}
.price__kind{
  font-family:var(--font-ui);font-size:var(--fs-label);font-weight:600;
  letter-spacing:var(--track);text-transform:var(--upper);color:var(--gold);margin:0;
}
html[dir=rtl] .price__kind{letter-spacing:0;text-transform:none}
.offer{
  margin:var(--sp-3) 0 0;padding:var(--sp-2) var(--sp-3);border:1px solid var(--gold-dim);
  border-radius:var(--r-md);background:var(--gold-wash);color:var(--gold-lt);
  font-size:var(--fs-sm);
}
.offer b{color:var(--gold);font-weight:600}
.price-after{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem var(--sp-3);
  justify-content:space-between;margin:var(--sp-3) 0 0;padding-top:var(--sp-3);
  border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--muted);
}
.price-after b{font-family:var(--font-display);font-size:var(--fs-h4);
  color:var(--paper-2);font-weight:400}
html[dir=rtl] .price-after b{font-family:var(--font-ui);font-weight:500}
.feespanel__note{margin:var(--sp-3) 0 var(--sp-4);font-size:var(--fs-sm)}
.feespanel .minih{margin-bottom:var(--sp-2)}
.feespanel__books{margin-top:var(--sp-4);padding-top:var(--sp-3);
  border-top:1px solid var(--line)}
.feespanel__books .dl{border-top:0}
.feespanel__books .dl>div{padding-top:0;border-bottom:0}
.feespanel__books .dl dd{font-size:var(--fs-h3);color:var(--gold);
  font-family:var(--font-display)}
html[dir=rtl] .feespanel__books .dl dd{font-family:var(--font-ui)}
.policies__h{margin-bottom:var(--sp-3)}

/* ---- Books page ------------------------------------------------------------
   The hero opens like a title page: the label, the English title, the Arabic
   title and the single line under them all sit on the page's centre line. The
   two paragraphs of prose below stay at the reading edge — a long paragraph
   ragged on both sides is what reads as scattered. */
.bookshero .eyebrow{justify-content:center;margin-inline:auto}
.bookshero__h{margin-bottom:var(--sp-2);text-align:center}
.bookshero .sec__sub{text-align:center;margin-inline:auto}
.bookshero__lead{
  margin-top:var(--sp-3);max-width:56ch;margin-inline:auto;
  text-align:center;text-wrap:balance;
}
.bookshero__ps{max-width:var(--measure);margin-top:var(--sp-3);margin-inline:auto}
.bookindex{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:0;
  border-top:1px solid var(--line);margin-top:var(--sp-5);
}
.bookindex a{
  display:flex;align-items:baseline;gap:var(--sp-2);padding:var(--sp-2) .2rem;
  min-height:var(--tap);border-bottom:1px solid var(--line);color:var(--paper-2);
  font-size:var(--fs-sm);
  transition:color var(--dur) var(--ease),padding-inline-start var(--dur) var(--ease);
}
.bookindex a:hover{color:var(--gold);padding-inline-start:.5rem}
.bookindex i{
  font-style:normal;font-family:var(--font-ui);font-size:var(--fs-meta);font-weight:600;
  letter-spacing:.1em;color:var(--gold);flex:none;
}
.bookindex span{min-width:0}

.vols{display:block}
.vol{
  padding:var(--sec-y) 0;border-top:1px solid var(--line);
  width:var(--page);margin-inline:auto;scroll-margin-top:6rem;
}
.vol__head{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--sp-2) var(--sp-4);
  align-items:baseline;padding-bottom:var(--sp-4);
}
.vol__heading{min-width:0}
.vol__no{font-family:var(--font-ui);font-size:var(--fs-label);font-weight:600;
  letter-spacing:.16em;color:var(--gold)}
.vol__title{font-size:var(--fs-h2);line-height:var(--lh-heading);text-wrap:balance}
.vol__sub{font-family:var(--font-display);font-size:var(--fs-h4);color:var(--gold);
  margin:var(--sp-1) 0 0}
html[dir=rtl] .vol__sub{font-family:var(--font-ui)}
.vol__meta{
  margin:0;font-size:var(--fs-meta);letter-spacing:var(--track);
  text-transform:var(--upper);color:var(--muted);text-align:end;line-height:1.9;
  white-space:nowrap;
}
html[dir=rtl] .vol__meta{letter-spacing:0;text-transform:none}
.vol__body{
  display:grid;grid-template-columns:minmax(0,.38fr) minmax(0,1fr);
  gap:var(--gap-lg);align-items:start;
}
.vol__covers{position:sticky;top:6.5rem;display:grid;gap:var(--gap-sm)}
.vol__cover{margin:0;border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;background:var(--surface-2)}
/* A front cover and a back cover are not the same shape, and left to their
   own heights one frame ran short and filled the rest with ground. Both are
   held to the same 2:3 and the picture covers it, so the pair reads as one
   pair of plates with no dead band inside either. */
.vol__cover img{width:100%;display:block;aspect-ratio:2/3;object-fit:cover;
  object-position:center}
.vol__cover figcaption{
  font-family:var(--font-ui);font-size:var(--fs-meta);font-weight:600;
  letter-spacing:var(--track);text-transform:var(--upper);color:var(--muted);
  padding:var(--sp-1) var(--sp-2);border-top:1px solid var(--line);
  background:var(--surface-1);
}
html[dir=rtl] .vol__cover figcaption{letter-spacing:0;text-transform:none}
.vol__text{display:grid;gap:var(--sp-4);align-content:start}
.vsec__h{
  font-family:var(--font-display);font-size:var(--fs-h3);font-weight:400;
  margin:0 0 var(--sp-2);color:var(--paper);padding-bottom:var(--sp-1);
  border-bottom:1px solid var(--line);text-wrap:balance;
}
html[dir=rtl] .vsec__h{font-family:var(--font-ui);font-weight:600}
.vsec p{margin-bottom:var(--sp-2);font-size:var(--fs-sm)}
.vsec p:last-child{margin-bottom:0}
.vsec__note{
  font-size:var(--fs-sm);color:var(--paper-2);
  border-inline-start:1px solid var(--gold-dim);padding-inline-start:var(--sp-3);
  margin:var(--sp-3) 0 0;
}
.vol__for{
  display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);align-items:baseline;margin:0;
  padding-top:var(--sp-3);border-top:1px solid var(--line);
}
.vol__for b{
  font-family:var(--font-ui);font-size:var(--fs-meta);font-weight:600;
  letter-spacing:var(--track);text-transform:var(--upper);color:var(--gold);flex:none;
}
html[dir=rtl] .vol__for b{letter-spacing:0;text-transform:none}
.vol__for span{font-size:var(--fs-sm);color:var(--muted);min-width:0}
.vol__order{margin-top:var(--sp-3);justify-self:start}
.chain{
  font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--gold);line-height:2;
  border:1px solid var(--gold-dim);padding:var(--sp-3);border-radius:var(--r-md);
  direction:ltr;text-align:start;overflow-x:auto;
}

/* ---- Forms ----------------------------------------------------------------- */
.form{display:grid;gap:var(--sp-4)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.fieldset{border:0;padding:0;margin:0;display:grid;gap:var(--sp-3)}
.fieldset legend{
  font-family:var(--font-display);font-size:var(--fs-h3);padding:0;
  margin-bottom:var(--sp-1);display:flex;align-items:baseline;gap:var(--sp-2);
}
html[dir=rtl] .fieldset legend{font-family:var(--font-ui);font-weight:600}
.fieldset legend i{
  font-style:normal;font-family:var(--font-ui);font-size:var(--fs-meta);
  letter-spacing:.2em;color:var(--gold);
}
.field{display:flex;flex-direction:column;gap:var(--sp-1)}
.field label,.fieldlabel{
  font-size:var(--fs-label);font-weight:600;letter-spacing:var(--track);
  text-transform:var(--upper);color:var(--paper-2);line-height:1.6;
}
html[dir=rtl] .field label,html[dir=rtl] .fieldlabel{letter-spacing:0;text-transform:none}
.fieldlabel{display:block}
.field label .req,.fieldlabel .req{color:var(--gold)}
/* 16px keeps iOS from zooming the page when a field takes focus. */
.field input,.field select,.field textarea{
  font:inherit;font-size:16px;color:var(--paper);background:var(--surface-1);
  border:1px solid var(--line-2);border-radius:var(--r-md);
  padding:.8rem 1rem;min-height:var(--control-h);width:100%;appearance:none;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.field textarea{min-height:7rem;resize:vertical;line-height:var(--lh-body)}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),
    linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-inline-end:2.5rem;cursor:pointer;
}
html[dir=rtl] .field select{
  background-position:20px 50%,15px 50%;
  padding-inline-end:1rem;padding-inline-start:2.5rem;
}
.field select option{background:var(--surface-2);color:var(--paper)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--line-2)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold);background:var(--surface-2);
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--gold);outline-offset:2px;
}
.field input::placeholder,.field textarea::placeholder{color:#6a665f}
.field input[disabled],.field select[disabled],.field textarea[disabled]{
  opacity:.5;cursor:not-allowed;
}
.field .err{font-size:var(--fs-cap);color:var(--bad);display:none}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{border-color:var(--bad)}
.field.is-bad .err{display:block}
.field.is-ok input,.field.is-ok select{border-color:var(--ok)}

.choice{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);margin-top:.2rem}
.choice__opt{
  display:flex;align-items:center;gap:var(--sp-2);border:1px solid var(--line-2);
  border-radius:var(--r-md);padding:var(--sp-2) var(--sp-3);cursor:pointer;
  background:var(--surface-1);font-size:var(--fs-sm);letter-spacing:normal;
  text-transform:none;color:var(--paper-2);min-height:var(--control-h);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),
             color var(--dur) var(--ease);
}
.choice__opt:hover{border-color:var(--gold-dim);background:var(--surface-2)}
.choice__opt input{
  appearance:none;width:1.15rem;height:1.15rem;flex:none;border-radius:50%;
  border:1px solid var(--line-2);background:var(--ink);position:relative;
  transition:border-color var(--dur) var(--ease);
}
.choice__opt input:checked{border-color:var(--gold)}
.choice__opt input:checked::after{content:"";position:absolute;inset:3px;
  border-radius:50%;background:var(--gold)}
.choice__opt:has(input:checked){border-color:var(--gold);color:var(--paper);
  background:var(--gold-wash)}
.choice__opt:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}

.check{
  display:flex;gap:var(--sp-2);align-items:flex-start;cursor:pointer;
  min-height:var(--tap);font-size:var(--fs-sm);color:var(--paper-2);
  line-height:var(--lh-body);text-transform:none;letter-spacing:normal;font-weight:400;
}
.check input{
  appearance:none;width:1.35rem;height:1.35rem;flex:none;margin-top:.15rem;
  border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface-1);
  cursor:pointer;position:relative;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.check input:checked{background:var(--gold);border-color:var(--gold)}
.check input:checked::after{
  content:"";position:absolute;inset-inline-start:.42rem;top:.18rem;width:5px;height:10px;
  border:solid #000;border-width:0 2px 2px 0;transform:rotate(43deg);
}
.check input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.formnote{
  font-size:var(--fs-cap);color:var(--muted);
  border-inline-start:1px solid var(--gold-dim);padding-inline-start:var(--sp-3);margin:0;
}
#submitbtn{justify-self:start;padding-inline:2.25rem}
#wantNovel,#wantBook,#wantCourse{scroll-margin-top:8rem}

/* After the form is sent: a tick, one line, and the way back. */
.receipt{text-align:center;padding:clamp(2rem,5vw,3.25rem) var(--sp-3)}
.receipt__tick{width:3.5rem;height:3.5rem;margin:0 auto var(--sp-3)}
.receipt__tick svg{width:100%;height:100%;fill:none;stroke:var(--gold);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.receipt__tick circle{stroke-dasharray:126;stroke-dashoffset:126;
  animation:draw .7s var(--ease) forwards}
.receipt__tick path{stroke-dasharray:30;stroke-dashoffset:30;
  animation:draw .45s var(--ease) .55s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.receipt__line{
  font-family:var(--font-display);font-size:var(--fs-h3);color:var(--gold-lt);
  line-height:var(--lh-lead);margin:0 auto;max-width:26ch;text-align:center;
}
html[dir=rtl] .receipt__line{font-family:var(--font-ui);font-weight:500;max-width:24ch}
.receipt p{text-align:center}
.receipt .btn-row{justify-content:center;margin-top:var(--sp-4)}

/* ---- The assessments -------------------------------------------------------- */
.examslist{
  display:grid;gap:var(--gap-sm);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));
}
.examslist--page{grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
  gap:var(--gap)}
.examslist__item{display:flex}
.examslist__empty{color:var(--muted);font-size:var(--fs-sm);padding:var(--sp-2) 0;
  grid-column:1/-1}
.examcard{
  display:flex;flex-direction:column;gap:var(--sp-1);height:100%;
  padding:var(--sp-3);border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface-1);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),
             background var(--dur) var(--ease);
}
.examcard:hover,.examcard:focus-visible{
  border-color:var(--gold-dim);background:var(--surface-2);transform:translateY(-2px);
}
.examcard__t{font-family:var(--font-display);font-size:var(--fs-h4);color:var(--paper);
  line-height:var(--lh-tight)}
html[dir=rtl] .examcard__t{font-family:var(--font-ui);font-weight:600}
.examcard__d{font-size:var(--fs-sm);color:var(--muted)}
.examcard__meta{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  margin-top:auto;padding-top:var(--sp-2);border-top:1px solid var(--line);
  font-size:var(--fs-cap);color:var(--muted);
}
.examcard__go{
  font-style:normal;font-weight:600;color:var(--gold);
  letter-spacing:var(--track);text-transform:var(--upper);
}
html[dir=rtl] .examcard__go{letter-spacing:0;text-transform:none}
.examcard__go::after{content:" " var(--arrow)}

.quiz{max-width:48rem;margin-inline:auto}
.quiz__note{padding:var(--sp-5) var(--sp-3);text-align:center;color:var(--muted);
  font-size:var(--fs-body)}
.quiz__note--bad{color:var(--bad)}
.quiznote{
  margin:0 0 var(--sp-3);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-md);
  font-size:var(--fs-sm);border:1px solid var(--line-2);
}
.quiznote--warn{border-color:rgba(229,189,128,.5);background:rgba(229,189,128,.09);
  color:var(--warn)}

.quizcard{
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-1);
  padding:clamp(1.35rem,3.5vw,2.5rem);
}
.quizcard__h{margin:0 0 var(--sp-2)}
.quizcard__meta{
  color:var(--gold);font-size:var(--fs-sm);font-weight:600;
  margin:var(--sp-1) 0 var(--sp-3);display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--sp-2);
}
.quizcard__dot{color:var(--muted);opacity:.6}
.quizcard .btn-row{margin-top:var(--sp-4)}

/* ---- Who is sitting it ------------------------------------------------------
   Three answers before the first question, on the site's own field component
   so the assessment does not grow a second kind of form. The name takes the
   whole row because a full name in three parts needs it; the number and the
   governorate share the one below. */
.quizwho{
  margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--line);
}
.quizwho__fields{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);
  margin-top:var(--sp-3);
}
.quizwho__wide{grid-column:1 / -1}
.quizwho .hint{margin-top:.1rem}
.quizwho__msg{
  margin:var(--sp-3) 0 0;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-md);
  font-size:var(--fs-sm);color:var(--bad);
  border:1px solid rgba(232,160,143,.5);background:rgba(232,160,143,.09);
}
@media (max-width:560px){.quizwho__fields{grid-template-columns:1fr}}

/* An assessment already sat. The card says so and offers the only thing left
   to do, which is to go and read another one. */
.quizcard--taken .quizscore{margin-top:var(--sp-4)}

.quizrun__top{
  display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);align-items:baseline;
  justify-content:space-between;margin-bottom:var(--sp-2);
}
.quizrun__step{margin:0;font-weight:600;color:var(--gold);font-size:var(--fs-sm);
  font-variant-numeric:tabular-nums}
.quizrun__done{margin:0;color:var(--muted);font-size:var(--fs-cap)}
.quizclock{
  margin:0;display:inline-flex;align-items:baseline;gap:var(--sp-2);
  font-size:var(--fs-cap);color:var(--muted);
}
.quizclock__lb{letter-spacing:var(--track);text-transform:var(--upper)}
html[dir=rtl] .quizclock__lb{letter-spacing:0;text-transform:none}
.quizclock b{
  font-family:var(--font-ui);font-size:var(--fs-h4);font-weight:600;color:var(--paper);
  font-variant-numeric:tabular-nums lining-nums;direction:ltr;
  transition:color var(--dur) var(--ease);
}
.quizclock b.is-low{color:var(--warn)}
.quizclock b.is-out{color:var(--bad);animation:pulse 1s var(--ease) infinite}
@keyframes pulse{50%{opacity:.55}}

.quizrun__bar{height:2px;background:var(--surface-3);overflow:hidden;
  margin-bottom:var(--sp-4)}
.quizrun__bar i{display:block;height:100%;background:var(--gold);
  transition:width var(--dur-slow) var(--ease)}

.quizq{border:0;padding:0;margin:0;min-width:0}
.quizq__t{
  display:block;padding:0;font-family:var(--font-display);font-size:var(--fs-h3);
  line-height:var(--lh-lead);color:var(--paper);margin-bottom:var(--sp-3);
}
html[dir=rtl] .quizq__t{font-family:var(--font-ui);font-weight:500}
.quizq__t:focus-visible{outline:2px solid var(--gold);outline-offset:6px}

.qopts{display:grid;gap:var(--sp-2)}
.qopt{position:relative}
.qopt__in{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.qopt__lb{
  display:flex;align-items:center;gap:var(--sp-2);min-height:3.5rem;
  padding:var(--sp-2) var(--sp-3);cursor:pointer;
  border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface-1);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.qopt__lb:hover{border-color:var(--gold-dim);background:var(--surface-2)}
.qopt__k{
  flex:none;width:2rem;height:2rem;display:grid;place-items:center;
  border:1px solid var(--gold-dim);border-radius:50%;color:var(--gold);
  font-size:var(--fs-sm);font-weight:600;line-height:1;
}
.qopt__t{font-size:var(--fs-body);line-height:var(--lh-tight);color:var(--paper)}
.qopt__in:focus-visible+.qopt__lb{outline:2px solid var(--gold);outline-offset:3px}
.qopt.is-picked .qopt__lb{border-color:var(--gold);background:var(--gold-wash)}
.qopt.is-picked .qopt__k{background:var(--gold);border-color:var(--gold);color:#000}

.quizrun__nav{
  display:flex;gap:var(--sp-2);justify-content:space-between;align-items:center;
  margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--line);
}
.quizrun__nav .btn{min-width:7rem}

.quizscore{display:flex;align-items:baseline;gap:var(--sp-3);
  margin:var(--sp-1) 0 var(--sp-2);flex-wrap:wrap}
.quizscore b{
  font-family:var(--font-display);font-size:clamp(2.75rem,2rem + 4vw,4.25rem);
  font-weight:300;color:var(--gold);line-height:1;
  font-variant-numeric:tabular-nums lining-nums;
}
.quizscore b span{font-size:.4em;margin-inline-start:.1em}
.quizscore__of{color:var(--muted);font-size:var(--fs-body)}
.quizscore__bar{height:3px;background:var(--surface-3);overflow:hidden;
  margin-bottom:var(--sp-3)}
.quizscore__bar i{display:block;height:100%;background:var(--gold)}
.quiztally{
  display:flex;gap:var(--sp-5);margin:var(--sp-3) 0 0;padding-top:var(--sp-3);
  border-top:1px solid var(--line);
}
.quiztally b{
  display:block;font-family:var(--font-display);font-size:var(--fs-h2);color:var(--paper);
  font-weight:300;line-height:1.2;font-variant-numeric:tabular-nums;
}
.quiztally small{color:var(--muted);font-size:var(--fs-cap)}

.quizreview{margin-top:var(--sp-5)}
.quizreview__head h3{margin-bottom:var(--sp-3)}
.quizreview__list{display:grid;gap:var(--sp-2)}
.qrev{
  border:1px solid var(--line);border-inline-start:2px solid var(--bad);
  border-radius:var(--r-md);background:var(--surface-1);padding:var(--sp-3);
}
.qrev.is-ok{border-inline-start-color:var(--gold-dim)}
.qrev__q{margin:0 0 var(--sp-2);color:var(--paper);font-size:var(--fs-sm)}
.qrev__n{
  display:inline-grid;place-items:center;min-width:1.7rem;height:1.7rem;
  margin-inline-end:var(--sp-2);border:1px solid var(--line-2);border-radius:50%;
  font-size:var(--fs-meta);color:var(--muted);vertical-align:middle;
}
.qrev__line{margin:0 0 .2rem;font-size:var(--fs-sm)}
.qrev__line b{display:inline-block;min-width:5.5rem;font-weight:600;
  font-size:var(--fs-cap);color:var(--muted)}
.qrev__line--bad{color:var(--bad)}
.qrev__line--ok{color:var(--gold-lt)}

/* ---- The closing call and the footer ---------------------------------------- */
/* Eight phrases in one place, each taking over from the last. The tallest and
   widest sets the box, so nothing shifts as they change. */
.rot{
  display:grid;place-items:center;margin:0 0 var(--sp-3);
  font-family:var(--font-display);font-weight:300;line-height:1.15;
  font-size:var(--fs-h2);color:var(--gold);letter-spacing:-.01em;min-height:1.2em;
}
html[dir=rtl] .rot{font-family:Cormorant,Georgia,serif}
.rot__stack{display:grid;grid-template-areas:"w";place-items:center}
.rot__w{
  grid-area:w;opacity:0;transform:translateY(.45em);white-space:nowrap;
  transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease);
}
.rot__w.is-on{opacity:1;transform:none}
.rot__w.is-out{opacity:0;transform:translateY(-.45em)}

.cta{
  text-align:center;padding:clamp(3.5rem,7vw,6rem) 0;border-top:1px solid var(--line);
  background:radial-gradient(120% 130% at 50% 0%,rgba(198,164,92,.08),transparent 62%),
    var(--surface-1);
}
.cta h2{margin-bottom:var(--sp-3)}
.cta p,.cta .lead{margin-inline:auto;text-align:center}
.cta .btn-row{justify-content:center;margin-top:var(--sp-4)}

.notfound{text-align:center}
.notfound p,.notfound .lead{margin-inline:auto;text-align:center}

.ftr{border-top:1px solid var(--line);padding:clamp(2.5rem,5vw,4rem) 0 var(--sp-4)}
.ftr__top{
  display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--sp-4);
  padding-bottom:var(--sp-4);border-bottom:1px solid var(--line);
}
.ftr__name{
  font-family:var(--font-display);font-size:var(--fs-h2);color:var(--gold);margin:0;
  letter-spacing:.07em;font-weight:600;line-height:1.25;
}
html[dir=rtl] .ftr__name{letter-spacing:0;font-weight:400}
.ftr__blurb{margin:var(--sp-2) 0 0;max-width:38ch;font-size:var(--fs-sm);color:var(--muted)}
.ftr h2{
  font-size:var(--fs-label);font-family:var(--font-ui);font-weight:600;
  letter-spacing:var(--track);text-transform:var(--upper);color:var(--gold);
  margin:0 0 var(--sp-2);
}
html[dir=rtl] .ftr h2{letter-spacing:0;text-transform:none}
.ftr h2.ftr__h2{margin-top:var(--sp-3)}
.ftr__links li{display:flex}
.ftr__links a{
  display:inline-flex;align-items:center;min-height:var(--tap);
  font-size:var(--fs-sm);color:var(--paper-2);transition:color var(--dur) var(--ease);
}
.ftr__links a:hover{color:var(--gold)}
.ftr__bot{
  display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:space-between;
  align-items:center;padding-top:var(--sp-3);font-size:var(--fs-cap);color:var(--muted);
}

/* The author's portrait used to be wrapped by the script in an `.apic` frame:
   a gold rule offset behind it, a 2:3 window, and a wipe uncovering the picture
   as the section arrived. The script no longer builds any of that, so the rules
   for it are gone too — the picture is the plain `.author__figure` image, which
   is what a reader who asked for less movement always saw. */

/* ---- The writers, showing themselves ---------------------------------------
   The one thing on this site that still moves. Not a thing to be operated: a
   band that runs by itself — the track is doubled and slid exactly half its
   width, so the seam never arrives. It runs left in Arabic and right in
   English, each the way its own script does.

   A CSS animation on one transform, so it is the compositor's work and not the
   main thread's: no per-frame writes and nothing to stutter. Paused whenever
   the band is off screen or the tab is not being looked at, so a page scrolled
   past it costs nothing at all. */
.pxl{
  position:relative;padding:var(--sp-3) 0;
  /* A band the reader steers. It is a real scroller, so a finger drags it and
     a mouse can be held down on it; the script nudges it along on its own when
     nobody is touching it, and hands it straight back the moment anybody does.

     Forced to left-to-right whatever the page is: `scrollLeft` counts from the
     opposite end in a right-to-left box, browsers have disagreed about its
     sign for years, and the whole loop is arithmetic on that one number. The
     cards put their own direction back on their captions below. */
  direction:ltr;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-x:contain;touch-action:pan-x pan-y;
  cursor:grab;
  /* The two ends fade rather than being cut, so cards arrive and leave instead
     of appearing and vanishing. */
  -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
}
.pxl::-webkit-scrollbar{display:none}
.pxl.is-held{cursor:grabbing}
.pxl.is-held .pxl__shot{pointer-events:none}
.pxl__track{display:flex;gap:var(--gap);width:max-content;padding-inline:var(--sp-3)}
.pxl__shot{flex:none;width:min(17rem,58vw)}
html[dir=rtl] .pxl__who{direction:rtl}
.pxl__plate{
  display:block;width:100%;aspect-ratio:3/4;overflow:hidden;
  border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface-2);
}
.pxl__plate img{width:100%;height:100%;object-fit:cover}
.pxl__who{padding-top:var(--sp-2);display:flex;flex-direction:column;gap:.1rem}
.pxl__no{
  font-family:var(--font-mono);font-size:var(--fs-meta);letter-spacing:.16em;
  color:var(--gold);
}
.pxl__name{
  font-family:var(--font-display);font-size:var(--fs-h4);font-weight:400;
  color:var(--paper);line-height:var(--lh-tight);
}
html[dir=rtl] .pxl__name{font-family:var(--font-ui);font-weight:500}
.pxl__yr{
  font-family:var(--font-mono);font-size:var(--fs-cap);color:var(--muted);
  direction:ltr;text-align:start;
}
/* Asked for stillness, the band simply stops nudging itself — the reader can
   still drag it, and its ends are cut rather than faded so nothing about it
   suggests movement. */
html.nomo .pxl{
  -webkit-mask-image:none;mask-image:none;
  scrollbar-width:thin;scrollbar-color:var(--gold-dim) transparent;
}

/* ---- The city, on a rail ---------------------------------------------------
   The eight places as a tall column of large frames, with a strip of small ones
   pinned beside it that stays put while the column runs past. The strip used to
   light whichever thumbnail matched the frame crossing the middle of the
   screen; it does not any more — the rail is a plain contents strip, held in
   place by `position:sticky`, which is CSS's own work and not a script's.

   The demo this came from puts the gallery at `z-index:-1` and keeps `html` and
   `body` transparent so it still shows. That trick cannot be used here — this
   site paints its ground on `body` — and it is not needed: nothing has to sit
   over the gallery, so it stays in normal flow. */
.mmap{display:flex;gap:var(--gap);position:relative}
.mmap__rail{
  position:sticky;top:0;flex:none;width:4.5rem;height:100svh;
  display:flex;align-items:center;justify-content:center;
}
.mmap__strip{display:flex;flex-direction:column;gap:3px}
/* The rail lights whichever thumbnail belongs to the frame crossing the middle
   of the screen: five small plates, one of them lit, so the column always says
   where in the city it has got to. */
.mmap__t{
  position:relative;display:block;width:3rem;height:2rem;
  border-radius:var(--r-sm);overflow:hidden;
  border:1px solid var(--line);
  opacity:.4;transform:scale(.94);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.mmap__t.is-on{opacity:1;transform:scale(1.1);border-color:var(--gold-dim)}
.mmap__t img{width:100%;height:100%;object-fit:cover}
.mmap__shots{flex:1 1 auto;min-width:0}
.mmap__shot{
  position:relative;width:100%;max-width:44rem;margin:0 auto var(--sp-6);
  /* A small nudge per frame, so a perfectly ruled column reads as a hand's
     work rather than a spreadsheet's. */
  translate:var(--jx,0) 0;
}
.mmap__shot:last-child{margin-bottom:0}
.mmap__frame{
  position:relative;aspect-ratio:3/2;overflow:hidden;
  border-radius:var(--r-lg);background:var(--surface-2);
  border:1px solid var(--line);
}
.mmap__frame img{width:100%;height:100%;object-fit:cover}
.mmap__cap{margin-top:var(--sp-3);display:flex;flex-direction:column;gap:.2rem}
.mmap__no{
  font-family:var(--font-mono);font-size:var(--fs-meta);letter-spacing:.16em;
  color:var(--gold);
}
.mmap__name{
  font-family:var(--font-display);font-size:var(--fs-h3);font-weight:400;
  color:var(--paper);line-height:var(--lh-tight);
}
html[dir=rtl] .mmap__name{font-family:var(--font-ui);font-weight:500}
.mmap__cap p{margin:0;font-size:var(--fs-sm);color:var(--muted)}

@media (max-width:760px){
  .mmap{gap:var(--sp-2)}
  .mmap__rail{width:3.25rem}
  .mmap__t{width:2.25rem;height:1.5rem}
  .mmap__shot{translate:none}
}

/* ---- The footer's accounts --------------------------------------------------
   The round icon buttons say nothing about where they lead: the name inside
   each one is switched off site-wide by `.soc span{display:none}`. In the
   footer, which is where a reader goes looking for exactly that, they are
   spelled out with the handle beside them. */
.socs--named{flex-direction:column;align-items:stretch;gap:var(--sp-1)}
.socs--named .soc{
  width:auto;height:auto;justify-content:flex-start;border-radius:var(--r-pill);
  padding:.5rem .9rem;gap:.6rem;font-family:var(--font-ui);font-size:var(--fs-cap);
  color:var(--paper-2);
}
.socs--named .soc span{display:inline-flex;align-items:center;min-width:0}
.socs--named .soc b{font-weight:600;color:var(--paper)}

/* ====================================================== 8 · Motion ======= */
/* Two things move on this site as it is read, and text is neither of them.

     the arrival     the top of a page settling into place, once, quickly
     the pictures    every picture coming up as it is scrolled to

   Words are left entirely alone. They are simply there when the page is —
   nothing to wait for, nothing to catch up with, and nothing that can leave a
   sentence half-lit if a script never ran.

   Everything below is written so that the finished state is what the markup
   already says. A page with no JavaScript, a page that asked for stillness and
   a page whose script died halfway all read the same: full opacity, final
   position. The motion is only ever taken away from that, never added to it.  */
.rv,.rv.in{opacity:1;transform:none}
.sec__head .eyebrow::before{transform:scaleX(1);transform-origin:inline-start}
.vol .vol__covers,.vol.in .vol__covers,
.vol .vsec,.vol.in .vsec{opacity:1;transform:none}

/* ---- The way in ------------------------------------------------------------
   ساعة رملية تنقلب مرّتين، ثم يظهر الموقع. ثانيتان لا أكثر.

   ★ تنقضي بلا جافاسكربت. الطبقة تُزال بحركة CSS ذات `forwards` تبدأ بعد
     ثانيتين — لا سطر واحد من JS يشارك في إزالتها. وهذا شرط لا تحسين:
     طبقةٌ تغطّي الموقع كلّه وتنتظر سكربتاً كي تنزاح تعني موقعاً محجوباً
     إلى الأبد إن تعطّل السكربت أو حُجب أو تأخّر. الجافاسكربت هنا يقرّر
     شيئاً واحداً فقط: هل تُعرض أصلاً.

   ★ مرّة واحدة لكل جلسة. السكربت المضمّن في الرأس — قبل أي رسم — يضع
     `html.entered` إن كان الزائر قد رآها في هذا التبويب، فتُخفى بلا
     وميض. لو تُرك القرار لسكربت مؤجَّل لظهرت الطبقة لجزء من الثانية عند
     كل تنقّل داخلي، وهو أسوأ من عدم إخفائها.

   ★ الدورة ٢ث: وقفةٌ ثم قلبة ثم وقفة ثم قلبة تُتمّ الدورة (٣٦٠ = ٠)، فلا
     ترتدّ الساعة إلى وضعها الأول ارتداداً مرئياً عند نهاية كل تكرار.
     وهذا سبب كتابة الدورة كاملةً بدل ١٨٠ درجة تتكرّر. */
.enter{
  position:fixed;inset:0;z-index:2001;      /* فوق كل شيء بما فيه الدرج */
  display:grid;place-items:center;
  background:var(--ink);
  /* ★ لا تحجز نقرة. الطبقة زخرفية (aria-hidden)، وتركُها تلتقط النقر
     يعني ثانيتين يضيع فيهما ضغطُ الزائر بلا أثر ولا تفسير. */
  pointer-events:none;
  animation:enter-go var(--dur-slow) var(--ease) 2s forwards;
}
/* ★ `opacity` وحدها في الإطارات، ولا `visibility` معها.
   الشفافية تُركَّب على المُركِّب (compositor) فتمضي ولو انشغل الخيط
   الرئيسي؛ أمّا `visibility` فغير قابلة للتركيب، ووجودها في الإطار يجرّ
   الحركة كلّها إلى الخيط الرئيسي. وقد قِيس ذلك هنا: GSAP وLenis يحجزان
   الخيط نحو ١.٥ث عند الإقلاع، فكانت الطبقة تتجمّد تلك المدّة ثم تبدأ —
   فتطول الثانيتان إلى أربع. بلا `visibility` تمضي في موعدها مهما انشغل
   الخيط. */
@keyframes enter-go{to{opacity:0}}
html.entered .enter{display:none}
.enter[hidden]{display:none}

/* ★ ولماذا يتولّى الجافاسكربت الإزاحة رغم أن CSS تكفي:
   حركة CSS لا تبدأ قبل أول رسم للصفحة. وقِيس على هذا الموقع أن أول رسم
   لا يقع إطلاقاً خلال ثانية ونصف بعد `load` حين تُحمَّل vendors
   (GSAP · Lenis · ScrollTrigger · SplitText): لا مدخل `first-paint` في
   `performance` أصلاً. فالثانيتان كانتا تُحسبان من لحظةٍ تأتي متأخّرة،
   فتطول إلى أربع.

   فصار القرار: تنزاح بعد ثانيتين من بدء التحميل **أو** فور جهوز الصفحة،
   أيّهما أبعد. فتغطّي الإقلاع البطيء ولا تضيف إليه شيئاً.
   وحركة CSS تبقى كما هي للمتصفّح بلا جافاسكربت — وهناك يقع أول رسم
   سريعاً أصلاً لأن ما يؤخّره سكربتٌ لم يعمل. */
.enter.is-out{
  animation:none;opacity:0;
  transition:opacity var(--dur-slow) var(--ease);
}

.enter__hg{
  width:clamp(2.4rem,6vw,3.2rem);height:auto;color:var(--gold);
  animation:hg-turn 2s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes hg-turn{
  0%,32%    {transform:rotate(0)}
  50%,82%   {transform:rotate(180deg)}
  100%      {transform:rotate(360deg)}
}
/* الرمل ينزل خلال الوقفتين لا خلال القلبة: خيطٌ يظهر ويختفي مرّتين في
   الدورة، فيقرأ الشكلُ ساعةً تعمل لا رسماً يدور. */
.enter__fall{animation:hg-fall 2s linear infinite;transform-origin:center}
@keyframes hg-fall{
  0%,4%     {opacity:0}
  10%,28%   {opacity:1}
  34%,54%   {opacity:0}
  60%,78%   {opacity:1}
  84%,100%  {opacity:0}
}

/* من طلب السكون لا يُعطى ساعةً تدور: تُعرض ساكنةً وتنقضي أسرع. */
@media (prefers-reduced-motion:reduce){
  .enter{animation-duration:1ms;animation-delay:400ms}
  .enter__hg,.enter__fall{animation:none}
}

/* ---- The arrival -----------------------------------------------------------
   The header and the first screen come up together and are done inside half a
   second — quick, because it is the thing standing between a reader and the
   page they asked for. Four steps, 70ms apart, all on the same easing as the
   rest of the site.

   It is on `html.js` so a browser with no script never holds anything back,
   and it is `animation` rather than a transition so it can never be left
   part-way through. */
@keyframes arrive{from{opacity:0;transform:translateY(var(--arrive-y,14px))}
  to{opacity:1;transform:none}}
html.js .hdr,
html.js .hero__name,html.js .hero__figure,
html.js .roles--hero,html.js .hero__intro,
html.js .hero .btn-row,html.js .hero .socs,
html.js .sec--top .eyebrow,html.js .sec--top h1,
html.js .sec--top .lead,html.js .novel__figure,
html.js .bookshero__lead{
  animation:arrive var(--dur-slow) var(--ease-soft) both;
}
html.js .hdr{--arrive-y:-10px;animation-duration:var(--dur)}
html.js .hero__name,html.js .sec--top .eyebrow{animation-delay:60ms}
html.js .hero__figure,html.js .novel__figure{animation-delay:100ms}
html.js .roles--hero,html.js .sec--top h1{animation-delay:130ms}
html.js .hero__intro,html.js .sec--top .lead,
html.js .bookshero__lead{animation-delay:200ms}
html.js .hero .btn-row{animation-delay:270ms}
html.js .hero .socs{animation-delay:340ms}

/* ---- The pictures ----------------------------------------------------------
   A picture is dim and a little back when it is below the fold, and it comes
   forward as it is scrolled to. Where the browser can tie an animation to how
   far through the viewport an element has travelled, it does exactly that —
   the picture really does appear more the further the page is scrolled. Where
   it cannot, the script marks the frame as seen and the same values are
   crossed once. Either way the finish is identical.

   It is written on the `<picture>`/`<img>` and never on the frame around it:
   the frames carry the hover states, and a second transform on the same box
   fights the first. */
.rvi{
  display:block;
  opacity:.34;transform:translateY(18px) scale(.985);
  transition:opacity var(--dur-slow) var(--ease-soft),
             transform var(--dur-slow) var(--ease-soft);
  will-change:opacity,transform;
}
.rvi.in{opacity:1;transform:none}
@supports (animation-timeline:view()){
  html.vtl .rvi{
    opacity:1;transform:none;transition:none;
    animation:rise linear both;
    animation-timeline:view();
    animation-range:entry 4% cover 34%;
  }
  /* Arrived. The script marks a picture the moment it is as good as fully on
     screen, and the animation comes off it — a range that ends part-way
     through an element travel can otherwise never finish for the last tall
     picture on a short page, and it would sit half-lit for ever. */
  html.vtl .rvi.lit{animation:none;opacity:1;transform:none}
}
@keyframes rise{from{opacity:.34;transform:translateY(18px) scale(.985)}
  to{opacity:1;transform:none}}

/* ---- The figures counting up -----------------------------------------------
   The four numbers over the stats row run from nothing to what they say, once,
   when the row is reached. Tabular figures so the width does not jitter while
   the digits change. */
.num[data-count]{font-variant-numeric:tabular-nums lining-nums}

/* A reader who asks for stillness gets it whether the script ran or not. */
@media (prefers-reduced-motion:reduce){
  .strip__track{animation:none}
  html.js .hdr,html.js .hero__name,html.js .hero__figure,
  html.js .roles--hero,html.js .hero__intro,html.js .hero .btn-row,
  html.js .hero .socs,html.js .sec--top .eyebrow,html.js .sec--top h1,
  html.js .sec--top .lead,html.js .novel__figure,
  html.js .bookshero__lead{animation:none}
  .rvi,html.vtl .rvi{opacity:1;transform:none;transition:none;animation:none}
  .drawer a,.drawer.is-open a{opacity:1;translate:none;transition:none;transition-delay:0s}
  .quizclock b.is-out{animation:none}
  .examcard:hover,.card:hover,.face:hover,.place:hover,.cast:hover,.cover:hover,
  .novelband__cover:hover,.btn:hover,a.novel__status:hover{transform:none}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ================================================== 9 · Responsive ======= */
@media (max-width:1024px){
  .novel__figure,.vol__covers{position:static}
  /* Centred with auto margins, the pair stops stretching and is sized by its
     own contents instead — and a percentage width contributes nothing to that,
     so the frames collapsed to the width of the word under them. Asking for the
     full width first, and capping it after, gives back the two plates. */
  .vol__covers{grid-template-columns:1fr 1fr;width:100%;max-width:35rem;
    margin-inline:auto}
}

@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:var(--sp-5)}
  .author__in{grid-template-columns:1fr;gap:var(--sp-5)}
  .author__figure{justify-self:center;max-width:min(20rem,70vw);order:-1}
  html[dir=rtl] .author__figure{justify-self:center}
  .feesgrid{grid-template-columns:1fr}
  .vol__body{grid-template-columns:1fr}
  .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:var(--sp-3);
    min-height:0}
}

@media (max-width:820px){
  .novel__in{grid-template-columns:1fr;gap:var(--sp-5)}
  .novel__figure{max-width:min(20rem,72vw);margin-inline:auto}
  .ftr__top{grid-template-columns:1fr 1fr}
  .ftr__brand{grid-column:1/-1}
}

/* ---- The Arabic name on a phone -------------------------------------------
   `عطا أحمد` is the first thing the Arabic home page says, and on a phone the
   shared ladder left it small: the clamp's floor is 35px, which a hero name
   does not carry. It is raised here and here only — the desktop size is a
   settled thing and this is not the place to move it, so the token itself is
   left alone and the override stops at 760px.

   The token and not `.hero__name`: `--fs-display` is what the name reads, and
   changing the value in one media query keeps the rule that every size is
   decided by a token. Nothing else on the site uses this token, so nothing
   else moves with it. */
@media (max-width:760px){
  /* ★ +٣٠٪ بالضبط على ما كان (٢ أيلول ٢٠٢٦): كل حدّ من حدود الـclamp
     الثلاثة ضُرب في ١.٣ — القاع والميل والسقف — فالزيادة نسبتها واحدة
     على كل عرض في المدى، لا تكبر عند طرفٍ وتصغر عند آخر:
       2.8 → 3.64rem   ·   2.1 → 2.73rem   ·   2.6 → 3.38vw   ·   3.6 → 4.68rem
     على ٣٧٥px يصير الاسم ٥٨.٢px بعد أن كان ٤٤.٨px. */
  html[dir=rtl]{--fs-display:clamp(3.64rem,2.73rem + 3.38vw,4.68rem)} /* 58 → 75 */
}

@media (max-width:760px){
  .novelband__in{grid-template-columns:1fr;gap:var(--sp-4)}
  /* An auto margin makes a grid item shrink to its contents, and an image that
     has not arrived has none — so the cover collapsed and jumped on load. */
  .novelband__cover{width:100%;max-width:min(17.5rem,62vw);margin-inline:auto}
  .vol__head{grid-template-columns:auto minmax(0,1fr);gap:var(--sp-1) var(--sp-3)}
  .vol__meta{grid-column:2;text-align:start}
  .acc__btn em{display:none}
}

@media (max-width:700px){
  .grid2{grid-template-columns:1fr}
  .seats{grid-template-columns:1fr}
  /* Phones: the portrait stays beside the name at the top, and everything
     that needs a line of its own gets the full width beneath it. */
  .hero__grid{
    grid-template-columns:minmax(0,1fr) minmax(0,.66fr);
    grid-auto-rows:min-content;align-items:start;gap:var(--sp-1) var(--sp-2);
  }
  .hero__text{display:contents;animation:none}
  .hero__name{grid-column:1;grid-row:1;align-self:center}
  /* The four roles get the whole width of the page rather than the sliver
     left beside the portrait, which is the only way four of them hold one
     line on a phone instead of stacking three over one. */
  .roles--hero{grid-column:1 / -1;grid-row:2;margin-top:var(--sp-2);
    justify-content:center}
  .hero__figure{grid-column:2;grid-row:1;justify-self:end;max-width:100%}
  html[dir=rtl] .hero__figure{justify-self:start}
  .hero__intro{grid-column:1 / -1;grid-row:3;max-width:none;margin-top:var(--sp-3)}
  .hero .btn-row{grid-column:1 / -1;grid-row:4;margin-top:var(--sp-3)}
  .hero .socs{grid-column:1 / -1;grid-row:5}
}

@media (max-width:640px){
  .stats li{border-inline-end:0}
  .entry{grid-template-columns:1fr;gap:.3rem}
  .acc__inner{padding-inline-start:0}
  .acc__btn i{width:1.6rem}
  .roles--hero{font-size:var(--fs-cap);gap:.05rem .45rem}
  .roles--hero li{gap:.45rem}
  .roles--author{font-size:var(--fs-cap);gap:.05rem .45rem}
  .roles--author li{gap:.45rem}
  .quizrun__nav .btn{flex:1;min-width:0}
  /* Twelve writers: a gallery on a desk, a shelf on a phone. */
  .faces{
    display:flex;grid-template-columns:none;gap:var(--sp-2);
    overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--sp-2);
    margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%);
    scrollbar-width:thin;scrollbar-color:var(--gold-dim) transparent;
  }
  .faces .face{flex:0 0 72vw;max-width:18rem;scroll-snap-align:start}
  .faces::-webkit-scrollbar{height:3px}
  .faces::-webkit-scrollbar-thumb{background:var(--gold-dim)}
  .casts{grid-template-columns:repeat(2,1fr);gap:var(--sp-2)}
  .choice{grid-template-columns:1fr}
}

@media (max-width:480px){
  .vol__covers{grid-template-columns:1fr;width:100%;max-width:min(19rem,76vw)}
  .hero .btn-row{flex-direction:column;align-items:stretch}
  .hero .btn-row .btn{width:100%}
  .quizrun__top{gap:var(--sp-1)}
}

@media (max-width:430px){
  .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,.6fr)}
  .roles--hero,.roles--author{font-size:.8rem}
  .soc{width:2.5rem;height:2.5rem}
  .soc svg{width:.95rem;height:.95rem}
}