/* =========================================================================
   أرشيف عبدالعزيز المسلّم — ورقة الأنماط
   Abdulaziz Al Msallam Archive — stylesheet
   Book / archival theme. Printed-page palette, ruled lines, restrained type.
   ========================================================================= */

/* ------------------------------ 1. المتغيرات ------------------------------ */
:root {
    /* لوحة ألوان غلاف «صوت الرمل، ضوء البحر»: ورق الكرافت الرملي، وحبر الفحم،
       وأزرق البحر للروابط والأزرار، وصدأ الرمل للعناوين الصغيرة والزخارف.
       Palette of the «صوت الرمل، ضوء البحر» cover: sand-kraft paper, charcoal ink,
       sea blue (البحر) for links and buttons, rust-sand (الرمل) for kickers and ornaments.
       The token names are historical: --oxblood is the main accent, --gold the secondary. */

    /* الورق والحبر / paper & ink */
    --paper:        #e9dfcc;
    --paper-2:      #f8f3ea;
    --paper-3:      #e0d4bd;
    --paper-edge:   #cfbfa3;

    --ink:          #2a2826;
    --ink-2:        #4d4841;
    --ink-3:        #655c50;

    /* التجليد / binding accents */
    --logo-ink:     #244d58;   /* حبر الشعار — أزرق «البحر» */
    --logo-paper:   #f8f3ea;   /* ورق الشعار — خلفية الترويسة تطابقه */
    --oxblood:      #244d58;   /* أزرق البحر / sea blue */
    --oxblood-dk:   #173842;
    --gold:         #76471c;   /* صدأ «الرمل» كما في الغلاف / the cover's rust */
    --gold-soft:    #c9a676;
    --sage:         #7c7961;   /* ورق المريمية في الغلاف / the cover's sage paper */

    /* الأرضية الداكنة: فحم ورق الغلاف الدافئ — الأزرق يبقى للّمسات فقط
       dark ground: the cover's warm charcoal papers — sea blue stays an accent */
    --night:        #34312d;
    --night-2:      #45413c;
    --night-deep:   #262422;
    --on-night:     #efe6d6;
    --on-night-2:   #c9bca6;
    --on-night-3:   #aa9f8b;

    --rule:         #d0c1a5;
    --rule-soft:    #ddd1bb;

    /* القياسات / metrics */
    --wrap:         1180px;
    --wrap-narrow:  760px;
    --radius:       3px;
    --radius-lg:    5px;

    --shadow-sm:    0 1px 2px rgba(42, 40, 38, .07);
    --shadow-md:    0 2px 10px rgba(42, 40, 38, .09);
    --shadow-book:  0 1px 1px rgba(42,40,38,.10), 0 6px 16px rgba(42,40,38,.13);

    /* خطّ عناوين الغلاف (Alexandria) للعناوين، وIBM Plex للنصّ.
       The cover's rounded geometric title face for headings; Plex for reading.
       --serif keeps its old name so every existing heading rule picks the new face up. */
    --display: "Alexandria", "IBM Plex Sans Arabic", "Noto Sans Arabic", sans-serif;
    --serif:  var(--display);
    --sans:   "IBM Plex Sans Arabic", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* قصاصات الغلاف / the cover's paper scraps */
    --kraft:        #c9b79c;
    --kraft-dk:     #b8a386;
    --letter:       #f4eee2;   /* ورق الرسالة / letter paper */
    --tape:         #eee6d4;   /* شريط العنوان / title tape */
    --scrap-sage:   #858670;
    --scrap-char:   #4d4a46;
    --brass:        #b39457;
    --tag:          #45585f;   /* البطاقة المعلّقة / the hanging tag */

    /* حبيبات الورق / paper grain */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");

    /* حوافّ الورق الممزّق — بلاطات SVG تتكرّر فلا تتمدّد مع الحجم
       Torn paper edges: seamless SVG tiles that repeat, so the tear never stretches */
    --tear-t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='16' viewBox='0 0 160 16' preserveAspectRatio='none'%3E%3Cpath d='M0 16 L0.0 5.8 L1.3 5.4 L2.6 5.4 L4.7 4.7 L5.9 4.5 L7.4 3.6 L9.2 3.8 L11.2 3.9 L13.3 2.9 L15.9 3.8 L18.1 2.1 L19.7 1.8 L21.4 4.5 L24.0 7.6 L26.5 6.0 L28.2 5.5 L30.5 6.2 L32.2 7.8 L33.5 5.7 L34.8 6.8 L36.8 5.5 L39.0 4.6 L40.4 5.5 L42.0 7.5 L43.6 8.0 L45.3 8.7 L46.7 9.6 L48.2 9.5 L49.9 7.9 L51.9 8.3 L53.6 8.4 L55.5 8.2 L56.9 6.7 L59.3 6.7 L61.5 8.6 L64.0 9.1 L65.8 10.7 L67.4 9.5 L69.7 9.5 L71.2 9.8 L72.7 9.2 L74.7 8.3 L76.2 7.5 L78.1 7.7 L79.8 9.4 L81.5 10.8 L83.6 11.2 L85.0 13.0 L87.2 15.0 L89.1 12.3 L91.7 9.7 L93.9 10.5 L96.1 8.7 L97.8 7.5 L100.2 5.9 L102.6 6.1 L104.3 6.3 L105.6 6.7 L108.1 7.4 L110.3 7.2 L112.7 5.8 L113.9 7.0 L115.4 7.1 L117.5 7.8 L118.7 6.4 L120.2 6.5 L122.3 8.2 L124.0 9.7 L125.8 11.0 L128.2 11.0 L129.9 10.7 L132.2 12.6 L134.8 10.8 L136.6 10.7 L138.4 11.6 L140.0 12.4 L141.8 13.9 L143.1 13.0 L144.7 15.0 L146.6 12.2 L148.1 15.0 L149.9 13.3 L152.3 12.9 L153.7 10.5 L155.0 9.5 L156.4 7.9 L158.6 6.6 L160.0 5.8 L160 16Z'/%3E%3C/svg%3E");
    --tear-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='16' viewBox='0 0 160 16' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L0.0 10.2 L1.3 10.6 L2.6 10.6 L4.7 11.3 L5.9 11.5 L7.4 12.4 L9.2 12.2 L11.2 12.1 L13.3 13.1 L15.9 12.2 L18.1 13.9 L19.7 14.2 L21.4 11.5 L24.0 8.4 L26.5 10.0 L28.2 10.5 L30.5 9.8 L32.2 8.2 L33.5 10.3 L34.8 9.2 L36.8 10.5 L39.0 11.4 L40.4 10.5 L42.0 8.5 L43.6 8.0 L45.3 7.3 L46.7 6.4 L48.2 6.5 L49.9 8.1 L51.9 7.7 L53.6 7.6 L55.5 7.8 L56.9 9.3 L59.3 9.3 L61.5 7.4 L64.0 6.9 L65.8 5.3 L67.4 6.5 L69.7 6.5 L71.2 6.2 L72.7 6.8 L74.7 7.7 L76.2 8.5 L78.1 8.3 L79.8 6.6 L81.5 5.2 L83.6 4.8 L85.0 3.0 L87.2 1.0 L89.1 3.7 L91.7 6.3 L93.9 5.5 L96.1 7.3 L97.8 8.5 L100.2 10.1 L102.6 9.9 L104.3 9.7 L105.6 9.3 L108.1 8.6 L110.3 8.8 L112.7 10.2 L113.9 9.0 L115.4 8.9 L117.5 8.2 L118.7 9.6 L120.2 9.5 L122.3 7.8 L124.0 6.3 L125.8 5.0 L128.2 5.0 L129.9 5.3 L132.2 3.4 L134.8 5.2 L136.6 5.3 L138.4 4.4 L140.0 3.6 L141.8 2.1 L143.1 3.0 L144.7 1.0 L146.6 3.8 L148.1 1.0 L149.9 2.7 L152.3 3.1 L153.7 5.5 L155.0 6.5 L156.4 8.1 L158.6 9.4 L160.0 10.2 L160 0Z'/%3E%3C/svg%3E");
    --tear-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='160' viewBox='0 0 16 160' preserveAspectRatio='none'%3E%3Cpath d='M16 0 L5.8 0.0 L5.4 1.3 L5.4 2.6 L4.7 4.7 L4.5 5.9 L3.6 7.4 L3.8 9.2 L3.9 11.2 L2.9 13.3 L3.8 15.9 L2.1 18.1 L1.8 19.7 L4.5 21.4 L7.6 24.0 L6.0 26.5 L5.5 28.2 L6.2 30.5 L7.8 32.2 L5.7 33.5 L6.8 34.8 L5.5 36.8 L4.6 39.0 L5.5 40.4 L7.5 42.0 L8.0 43.6 L8.7 45.3 L9.6 46.7 L9.5 48.2 L7.9 49.9 L8.3 51.9 L8.4 53.6 L8.2 55.5 L6.7 56.9 L6.7 59.3 L8.6 61.5 L9.1 64.0 L10.7 65.8 L9.5 67.4 L9.5 69.7 L9.8 71.2 L9.2 72.7 L8.3 74.7 L7.5 76.2 L7.7 78.1 L9.4 79.8 L10.8 81.5 L11.2 83.6 L13.0 85.0 L15.0 87.2 L12.3 89.1 L9.7 91.7 L10.5 93.9 L8.7 96.1 L7.5 97.8 L5.9 100.2 L6.1 102.6 L6.3 104.3 L6.7 105.6 L7.4 108.1 L7.2 110.3 L5.8 112.7 L7.0 113.9 L7.1 115.4 L7.8 117.5 L6.4 118.7 L6.5 120.2 L8.2 122.3 L9.7 124.0 L11.0 125.8 L11.0 128.2 L10.7 129.9 L12.6 132.2 L10.8 134.8 L10.7 136.6 L11.6 138.4 L12.4 140.0 L13.9 141.8 L13.0 143.1 L15.0 144.7 L12.2 146.6 L15.0 148.1 L13.3 149.9 L12.9 152.3 L10.5 153.7 L9.5 155.0 L7.9 156.4 L6.6 158.6 L5.8 160.0 L16 160Z'/%3E%3C/svg%3E");
    --tear-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='160' viewBox='0 0 16 160' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L10.2 0.0 L10.6 1.3 L10.6 2.6 L11.3 4.7 L11.5 5.9 L12.4 7.4 L12.2 9.2 L12.1 11.2 L13.1 13.3 L12.2 15.9 L13.9 18.1 L14.2 19.7 L11.5 21.4 L8.4 24.0 L10.0 26.5 L10.5 28.2 L9.8 30.5 L8.2 32.2 L10.3 33.5 L9.2 34.8 L10.5 36.8 L11.4 39.0 L10.5 40.4 L8.5 42.0 L8.0 43.6 L7.3 45.3 L6.4 46.7 L6.5 48.2 L8.1 49.9 L7.7 51.9 L7.6 53.6 L7.8 55.5 L9.3 56.9 L9.3 59.3 L7.4 61.5 L6.9 64.0 L5.3 65.8 L6.5 67.4 L6.5 69.7 L6.2 71.2 L6.8 72.7 L7.7 74.7 L8.5 76.2 L8.3 78.1 L6.6 79.8 L5.2 81.5 L4.8 83.6 L3.0 85.0 L1.0 87.2 L3.7 89.1 L6.3 91.7 L5.5 93.9 L7.3 96.1 L8.5 97.8 L10.1 100.2 L9.9 102.6 L9.7 104.3 L9.3 105.6 L8.6 108.1 L8.8 110.3 L10.2 112.7 L9.0 113.9 L8.9 115.4 L8.2 117.5 L9.6 118.7 L9.5 120.2 L7.8 122.3 L6.3 124.0 L5.0 125.8 L5.0 128.2 L5.3 129.9 L3.4 132.2 L5.2 134.8 L5.3 136.6 L4.4 138.4 L3.6 140.0 L2.1 141.8 L3.0 143.1 L1.0 144.7 L3.8 146.6 L1.0 148.1 L2.7 149.9 L3.1 152.3 L5.5 153.7 L6.5 155.0 L8.1 156.4 L9.4 158.6 L10.2 160.0 L0 160Z'/%3E%3C/svg%3E");
    --tear2-t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='16' viewBox='0 0 160 16' preserveAspectRatio='none'%3E%3Cpath d='M0 16 L0.0 10.3 L1.2 10.0 L3.0 10.0 L4.7 8.8 L6.8 9.9 L9.3 9.0 L11.0 9.5 L12.7 8.3 L14.9 9.5 L17.0 8.2 L18.6 9.6 L20.0 9.5 L22.0 9.2 L23.7 7.8 L26.0 8.9 L27.3 10.0 L29.7 9.7 L32.2 11.8 L33.6 15.0 L34.9 13.2 L37.4 13.3 L39.4 13.3 L41.1 12.6 L42.5 9.6 L44.0 11.2 L45.5 8.4 L46.9 9.1 L48.5 8.5 L50.3 8.1 L52.7 9.5 L54.4 9.0 L56.5 7.7 L58.3 8.8 L60.3 8.6 L62.4 6.9 L64.7 6.4 L66.0 7.2 L67.6 7.3 L69.4 10.2 L71.7 7.1 L73.2 8.8 L75.0 8.4 L77.2 8.7 L79.1 8.8 L80.8 9.6 L83.2 9.5 L85.5 9.4 L87.1 9.0 L88.7 11.4 L90.5 10.9 L92.3 12.2 L93.9 11.6 L95.5 14.0 L96.8 13.0 L98.8 12.5 L100.4 12.9 L103.0 13.6 L104.6 9.0 L106.9 6.8 L108.7 7.4 L110.0 7.4 L111.4 6.9 L112.9 3.8 L114.3 5.2 L116.5 3.8 L118.8 2.9 L120.5 1.1 L122.9 1.0 L124.5 1.4 L126.9 1.1 L129.0 2.5 L130.7 3.5 L133.2 2.6 L135.5 7.2 L137.7 5.2 L139.2 6.3 L141.0 5.3 L142.8 3.7 L145.0 4.5 L147.3 5.5 L149.3 6.5 L151.3 8.5 L153.4 8.4 L155.8 9.5 L157.1 9.5 L159.7 10.4 L160.0 10.3 L160 16Z'/%3E%3C/svg%3E");
    --tear2-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='16' viewBox='0 0 160 16' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L0.0 5.7 L1.2 6.0 L3.0 6.0 L4.7 7.2 L6.8 6.1 L9.3 7.0 L11.0 6.5 L12.7 7.7 L14.9 6.5 L17.0 7.8 L18.6 6.4 L20.0 6.5 L22.0 6.8 L23.7 8.2 L26.0 7.1 L27.3 6.0 L29.7 6.3 L32.2 4.2 L33.6 1.0 L34.9 2.8 L37.4 2.7 L39.4 2.7 L41.1 3.4 L42.5 6.4 L44.0 4.8 L45.5 7.6 L46.9 6.9 L48.5 7.5 L50.3 7.9 L52.7 6.5 L54.4 7.0 L56.5 8.3 L58.3 7.2 L60.3 7.4 L62.4 9.1 L64.7 9.6 L66.0 8.8 L67.6 8.7 L69.4 5.8 L71.7 8.9 L73.2 7.2 L75.0 7.6 L77.2 7.3 L79.1 7.2 L80.8 6.4 L83.2 6.5 L85.5 6.6 L87.1 7.0 L88.7 4.6 L90.5 5.1 L92.3 3.8 L93.9 4.4 L95.5 2.0 L96.8 3.0 L98.8 3.5 L100.4 3.1 L103.0 2.4 L104.6 7.0 L106.9 9.2 L108.7 8.6 L110.0 8.6 L111.4 9.1 L112.9 12.2 L114.3 10.8 L116.5 12.2 L118.8 13.1 L120.5 14.9 L122.9 15.0 L124.5 14.6 L126.9 14.9 L129.0 13.5 L130.7 12.5 L133.2 13.4 L135.5 8.8 L137.7 10.8 L139.2 9.7 L141.0 10.7 L142.8 12.3 L145.0 11.5 L147.3 10.5 L149.3 9.5 L151.3 7.5 L153.4 7.6 L155.8 6.5 L157.1 6.5 L159.7 5.6 L160.0 5.7 L160 0Z'/%3E%3C/svg%3E");
    --tear2-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='160' viewBox='0 0 16 160' preserveAspectRatio='none'%3E%3Cpath d='M16 0 L10.3 0.0 L10.0 1.2 L10.0 3.0 L8.8 4.7 L9.9 6.8 L9.0 9.3 L9.5 11.0 L8.3 12.7 L9.5 14.9 L8.2 17.0 L9.6 18.6 L9.5 20.0 L9.2 22.0 L7.8 23.7 L8.9 26.0 L10.0 27.3 L9.7 29.7 L11.8 32.2 L15.0 33.6 L13.2 34.9 L13.3 37.4 L13.3 39.4 L12.6 41.1 L9.6 42.5 L11.2 44.0 L8.4 45.5 L9.1 46.9 L8.5 48.5 L8.1 50.3 L9.5 52.7 L9.0 54.4 L7.7 56.5 L8.8 58.3 L8.6 60.3 L6.9 62.4 L6.4 64.7 L7.2 66.0 L7.3 67.6 L10.2 69.4 L7.1 71.7 L8.8 73.2 L8.4 75.0 L8.7 77.2 L8.8 79.1 L9.6 80.8 L9.5 83.2 L9.4 85.5 L9.0 87.1 L11.4 88.7 L10.9 90.5 L12.2 92.3 L11.6 93.9 L14.0 95.5 L13.0 96.8 L12.5 98.8 L12.9 100.4 L13.6 103.0 L9.0 104.6 L6.8 106.9 L7.4 108.7 L7.4 110.0 L6.9 111.4 L3.8 112.9 L5.2 114.3 L3.8 116.5 L2.9 118.8 L1.1 120.5 L1.0 122.9 L1.4 124.5 L1.1 126.9 L2.5 129.0 L3.5 130.7 L2.6 133.2 L7.2 135.5 L5.2 137.7 L6.3 139.2 L5.3 141.0 L3.7 142.8 L4.5 145.0 L5.5 147.3 L6.5 149.3 L8.5 151.3 L8.4 153.4 L9.5 155.8 L9.5 157.1 L10.4 159.7 L10.3 160.0 L16 160Z'/%3E%3C/svg%3E");
    --tear2-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='160' viewBox='0 0 16 160' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L5.7 0.0 L6.0 1.2 L6.0 3.0 L7.2 4.7 L6.1 6.8 L7.0 9.3 L6.5 11.0 L7.7 12.7 L6.5 14.9 L7.8 17.0 L6.4 18.6 L6.5 20.0 L6.8 22.0 L8.2 23.7 L7.1 26.0 L6.0 27.3 L6.3 29.7 L4.2 32.2 L1.0 33.6 L2.8 34.9 L2.7 37.4 L2.7 39.4 L3.4 41.1 L6.4 42.5 L4.8 44.0 L7.6 45.5 L6.9 46.9 L7.5 48.5 L7.9 50.3 L6.5 52.7 L7.0 54.4 L8.3 56.5 L7.2 58.3 L7.4 60.3 L9.1 62.4 L9.6 64.7 L8.8 66.0 L8.7 67.6 L5.8 69.4 L8.9 71.7 L7.2 73.2 L7.6 75.0 L7.3 77.2 L7.2 79.1 L6.4 80.8 L6.5 83.2 L6.6 85.5 L7.0 87.1 L4.6 88.7 L5.1 90.5 L3.8 92.3 L4.4 93.9 L2.0 95.5 L3.0 96.8 L3.5 98.8 L3.1 100.4 L2.4 103.0 L7.0 104.6 L9.2 106.9 L8.6 108.7 L8.6 110.0 L9.1 111.4 L12.2 112.9 L10.8 114.3 L12.2 116.5 L13.1 118.8 L14.9 120.5 L15.0 122.9 L14.6 124.5 L14.9 126.9 L13.5 129.0 L12.5 130.7 L13.4 133.2 L8.8 135.5 L10.8 137.7 L9.7 139.2 L10.7 141.0 L12.3 142.8 L11.5 145.0 L10.5 147.3 L9.5 149.3 L7.5 151.3 L7.6 153.4 L6.5 155.8 L6.5 157.1 L5.6 159.7 L5.7 160.0 L0 160Z'/%3E%3C/svg%3E");
    --tear-size: 11px;
    --mask-all:
        var(--tear-t) top    / 160px var(--tear-size) repeat-x,
        var(--tear-b) bottom / 160px var(--tear-size) repeat-x,
        var(--tear-l) left   / var(--tear-size) 160px repeat-y,
        var(--tear-r) right  / var(--tear-size) 160px repeat-y,
        linear-gradient(#000 0 0) center / calc(100% - 2 * var(--tear-size) + 2px) calc(100% - 2 * var(--tear-size) + 2px) no-repeat;
    --mask-all-2:
        var(--tear2-t) top    / 160px var(--tear-size) repeat-x,
        var(--tear2-b) bottom / 160px var(--tear-size) repeat-x,
        var(--tear2-l) left   / var(--tear-size) 160px repeat-y,
        var(--tear2-r) right  / var(--tear-size) 160px repeat-y,
        linear-gradient(#000 0 0) center / calc(100% - 2 * var(--tear-size) + 2px) calc(100% - 2 * var(--tear-size) + 2px) no-repeat;
    --mask-ends:
        var(--tear-l) left  / var(--tear-size) 160px repeat-y,
        var(--tear-r) right / var(--tear-size) 160px repeat-y,
        linear-gradient(#000 0 0) center / calc(100% - 2 * var(--tear-size) + 2px) 100% no-repeat;
    --mask-bottom:
        linear-gradient(#000 0 0) top / 100% calc(100% - var(--tear-size) + 1px) no-repeat,
        var(--tear-b) bottom / 160px var(--tear-size) repeat-x;
    --mask-top:
        var(--tear-t) top / 160px var(--tear-size) repeat-x,
        linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--tear-size) + 1px) no-repeat;
}

/* ------------------------------ 2. الأساس ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* الدرج المنزلق خارج الشاشة يوسّع الصفحة في الاتجاه من اليمين لليسار ما لم يُقصّ */
    overflow-x: clip;
}

body {
    margin: 0;
    overflow-x: clip;
    font-family: var(--sans);
    font-size: 16.5px;
    line-height: 1.85;
    color: var(--ink);
    background-color: var(--paper);
    /* حبيبات ورقية خفيفة جدًا / a very faint paper grain */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--oxblood); text-decoration: none; }
a:hover { color: var(--oxblood-dk); }

h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 .6em;
    color: var(--ink);
}
h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h2 { font-size: clamp(1.45rem, 2.6vw, 2rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

hr {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: 2.5rem 0;
}

::selection { background: var(--gold-soft); color: var(--ink); }

:focus-visible {
    outline: 2px solid var(--oxblood);
    outline-offset: 2px;
}
.site-footer :focus-visible, .hero-show :focus-visible { outline-color: var(--gold-soft); }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }

.skip-link {
    position: absolute; inset-inline-start: -9999px; top: 0;
    background: var(--ink); color: var(--paper-2);
    padding: .6rem 1rem; z-index: 200;
}
.skip-link:focus { inset-inline-start: 0; }

.ico { flex: none; }

/* ------------------------------ 3. الترويسة ------------------------------ */
/* ترويسة هادئة: الشعار في الوسط، والتنقّل تحته بخطّ رفيع واحد.
   A quiet masthead: centred wordmark, one hairline, nav beneath. */
.masthead {
    /* أعلى من الحجاب (110): الترويسة تُنشئ سياق تكديس خاصًّا، فلو كانت أدنى منه
       لغطّى الحجابُ الدرجَ نفسه ومنع الضغط على روابطه.
       Must sit above .nav-backdrop (110): the masthead creates its own stacking
       context, so a lower value lets the backdrop cover the drawer inside it. */
    position: sticky; top: 0; z-index: 120;
    background: var(--paper-2);
    border-bottom: 1px solid var(--rule);
}

.masthead-in {
    display: flex; align-items: center; justify-content: center;
    padding: clamp(.9rem, 1.9vw, 1.35rem) 0 clamp(.7rem, 1.4vw, 1rem);
    transition: padding .25s ease;
    position: relative;
}

.brand { display: block; line-height: 0; }
.brand-word {
    /* شعار من سطرين (نحو 1.8:1): يُقاس بالارتفاع.
       لو قيس بالعرض لبلغ ارتفاعه ٢٦٥ بكسل وابتلع نصف الشاشة.
       A two-line lockup sized by HEIGHT — sizing it by width made it 265px
       tall and swallowed half the viewport. */
    height: clamp(76px, 11vw, 130px);
    width: auto; display: block;
    transition: height .25s ease;
}
.brand:hover .brand-word { opacity: .78; }

/* الشعار نصًّا — خطّ رقعة معاصر بلون حبر الشعار الأصلي.
   نصّ حقيقي لا صورة: يظهر بالتشكيل الصحيح، ويبقى حادًّا في أي قياس،
   ويمكن تعديله من لوحة التحكم.
   The wordmark as live text: correct diacritics, crisp at any size, editable. */
.brand-fallback {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(1.5rem, 5.6vw, 3.15rem);
    /* التشكيل الكامل يحتاج مساحة رأسية، وإلا اصطدمت الحركات بما فوقها */
    line-height: 1.85;
    color: var(--logo-ink);
    display: block;
    padding-block: .12em;
    white-space: nowrap;
}
.brand:hover .brand-fallback { opacity: .78; }

/* التذييل — النسخة الفاتحة على الخلفية الداكنة */
.footer-wordmark {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.25rem, 3vw, 1.7rem);
    line-height: 1.6;
    color: var(--on-night);
    margin-bottom: 1rem;
    padding-block: .1em;
}

.burger {
    display: none;
    position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%);
    width: 42px; height: 40px;
    border: 1px solid var(--rule); background: transparent;
    border-radius: 2px; cursor: pointer; padding: 0; place-items: center; color: var(--ink);
}

/* عند التمرير تنكمش الترويسة فتترك الشاشة للمحتوى */
.masthead.scrolled .masthead-in {
    padding: .45rem 0 .35rem;
}
.masthead.scrolled .brand-word { height: clamp(52px, 7vw, 80px); }
.masthead.scrolled .main-nav a { padding-block: .5rem; }   /* only shorter: the side padding follows the width rules below */

/* التنقّل / navigation */
.main-nav { border-top: 1px solid var(--rule-soft); }
/* الروابط في وسط السطر تمامًا، والبحث مثبّت عند الحافة —
   لو بقي البحث داخل المجموعة الوسطى لانزاحت الروابط عن المنتصف.
   Links truly centred; search pinned to the edge. Leaving the search inside the
   centred group pushed the links off-centre and left dead space beside them. */
.main-nav .wrap {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    min-height: 46px;
}
.main-nav ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center;
}
.main-nav a {
    display: block; padding: .68rem .8rem;   /* ten sections must fit beside the search field */
    font-size: 1.02rem; letter-spacing: .01em;
    color: var(--ink-2); white-space: nowrap;
    border-bottom: 2px solid transparent;
}
.main-nav a:hover { color: var(--ink); }
.main-nav a.is-active { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }

.nav-search {
    position: absolute; inset-inline-end: 0; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; gap: .4rem;
    color: var(--ink-3); flex: none;
}
.nav-search-link {
    display: none;
    position: absolute; inset-inline-end: 0; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; place-items: center;
    color: var(--ink-3); border-radius: 50%;
}
.nav-search-link:hover { color: var(--ink); background: var(--paper-3); }

.nav-search input {
    border: 0; border-bottom: 1px solid var(--sage); background: transparent;
    font: inherit; font-size: .95rem; color: var(--ink);
    width: 112px; padding: .2rem 0;
    transition: width .2s ease, border-color .2s ease;
}
.nav-search input:focus { outline: none; border-bottom-color: var(--ink); width: 124px; }   /* grows only into the gap beside the links */
.nav-search input::placeholder { color: var(--ink-3); }

.nav-backdrop {
    position: fixed; inset: 0; background: rgba(34,29,24,.45);
    opacity: 0; visibility: hidden; transition: .25s; z-index: 110;
}
.nav-backdrop.open { opacity: 1; visibility: visible; }

/* ------------------------------ 4. الصدر ------------------------------ */
/* صدر بعرض الشاشة، والنصّ محاذٍ لحافة البداية لا في الوسط.
   Full-bleed hero, text set against the start edge — not centred. */
.hero {
    padding: clamp(3.5rem, 9vw, 8rem) 0 clamp(3rem, 7vw, 6rem);
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
}
.hero-compact { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2.2rem, 4vw, 3.4rem); }

.hero-inner { max-width: 68ch; }

.hero-eyebrow {
    font-size: .76rem; letter-spacing: .26em; color: var(--gold);
    margin-bottom: 1.1rem; font-weight: 600; text-transform: uppercase;
}
.hero h1 {
    font-size: clamp(2.4rem, 7vw, 5rem);
    line-height: 1.08; letter-spacing: -.02em;
    margin: 0 0 1.2rem;
}
.hero-intro {
    font-size: clamp(1.05rem, 1.7vw, 1.28rem);
    color: var(--ink-2); max-width: 56ch; line-height: 1.8;
}
.hero-portrait {
    width: 132px; height: 132px; margin: 0 0 1.8rem;
    border-radius: 50%; overflow: hidden; background: var(--paper-3);
}
.hero-portrait img { width: 100%; height: 100%; object-fit: cover; }

.hero-updated {
    display: inline-flex; align-items: center; gap: .45rem;
    margin: 2rem 0 0; padding-top: 1.2rem;
    border-top: 1px solid var(--rule);
    font-size: .84rem; color: var(--ink-3);
}
.hero-updated svg { color: var(--ink-3); flex: none; }
.hero-updated time { color: var(--ink-2); font-weight: 500; }

/* زرّ الدعوة — من أسلوب المراجع */
.hero-cta {
    display: inline-flex; align-items: center; gap: .5rem;
    margin-top: 2rem; padding: .85rem 1.9rem;
    background: var(--oxblood); color: var(--paper-2);
    border: 1px solid var(--oxblood); border-radius: 2px;
    font-size: .88rem; letter-spacing: .1em; font-weight: 600;
}
.hero-cta:hover { background: transparent; color: var(--oxblood); }

/* ------------------------------ 5. عناوين الأقسام ------------------------------ */
.sec { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.sec-alt { background: var(--paper-2); border-block: 1px solid var(--rule-soft); }

.sec-head {
    text-align: start;
    margin-bottom: clamp(1.8rem, 3.5vw, 2.8rem);
    max-width: 62ch;
}

.sec-head h2 {
    font-size: clamp(1.7rem, 3.6vw, 2.6rem);
    letter-spacing: -.015em; margin-bottom: .5rem;
}
.sec-head p { color: var(--ink-2); margin: 0; }
.sec-head .ornament { display: none; }

/* ------------------------------ 6. (أُلغيت شبكة الأبواب القديمة) --------------- */

/* ------------------------------ 7. لافتة الصفحة الداخلية ------------------------------ */
.page-banner {
    background: var(--paper-2);
    border-bottom: 1px solid var(--rule);
    padding: clamp(2.4rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
    text-align: start;
}

.page-banner h1 {
    margin: .8rem 0 .5rem;
    font-size: clamp(2rem, 5vw, 3.4rem);
    letter-spacing: -.02em;
}
.page-banner p { color: var(--ink-2); max-width: 58ch; margin: 0; }

.crumbs {
    font-size: .84rem; color: var(--ink-3);
    display: flex; gap: .5rem; flex-wrap: wrap;
    justify-content: flex-start; margin-bottom: .9rem;
}
.crumbs a { color: var(--ink-3); }
.crumbs a:hover { color: var(--ink); }
.crumbs span { color: var(--rule); }

/* ------------------------------ 8. مرشّحات التصنيف ------------------------------ */
.filters {
    display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
    padding: 1.6rem 0;
    border-bottom: 1px solid var(--rule-soft);
    margin-bottom: 2.2rem;
}
.chip {
    border: 1px solid var(--rule);
    background: var(--paper-2);
    padding: .42rem .95rem;
    border-radius: var(--radius);
    font-size: .89rem; color: var(--ink-2);
    display: inline-flex; align-items: center; gap: .45rem;
}
.chip:hover { border-color: var(--gold); color: var(--oxblood); }
.chip.is-active {
    background: var(--oxblood); border-color: var(--oxblood); color: var(--paper-2);
    font-weight: 600;
}
.chip.is-active:hover { color: var(--paper-2); }
.chip .n { font-size: .78rem; opacity: .8; font-family: var(--serif); }

.toolbar {
    display: flex; flex-wrap: wrap; gap: 1rem;
    align-items: center; justify-content: space-between;
    margin-bottom: 1.6rem;
}
.toolbar .result-count { font-size: .88rem; color: var(--ink-3); }
.toolbar select, .toolbar input[type="search"] {
    font: inherit; font-size: .9rem;
    border: 1px solid var(--sage); background: var(--paper-2);
    padding: .42rem .7rem; border-radius: var(--radius); color: var(--ink);
}

/* ------------------------------ 9. بطاقات المواد ------------------------------ */
.items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2rem 1.6rem;
}

.card { display: flex; flex-direction: column; color: var(--ink); }
.card:hover { color: var(--ink); }

.card-cover {
    position: relative;
    aspect-ratio: 3 / 4;
    background: var(--paper-3);
    border: 1px solid var(--paper-edge);
    box-shadow: var(--shadow-book);
    overflow: hidden;
    margin-bottom: .9rem;
    transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover .card-cover {
    transform: translateY(-3px);
    box-shadow: 0 2px 3px rgba(34,29,24,.12), 0 12px 26px rgba(34,29,24,.16);
}
.card-cover img { width: 100%; height: 100%; object-fit: cover; }
.card-cover::after {
    /* حافة الكعب — أثر تجليد الكتاب */
    content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
    width: 9px;
    background: linear-gradient(90deg, rgba(34,29,24,.16), rgba(34,29,24,0));
    pointer-events: none;
}
html[dir="rtl"] .card-cover::after {
    background: linear-gradient(270deg, rgba(34,29,24,.16), rgba(34,29,24,0));
}

/* لوحة عنوان مطبوعة — تحلّ محلّ الصورة الغائبة، بلون الباب.
   A printed title plate standing in for a missing image, in the section's colour.
   Costs no files, so it scales to any number of entries. */
.cover-empty {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .5rem; padding: 1.5rem 1.1rem; text-align: center;
    color: var(--on-night);
    background:
        radial-gradient(120% 90% at 50% 0%,
            color-mix(in srgb, var(--plate, #7a4a22) 78%, var(--night-deep)) 0%,
            color-mix(in srgb, var(--plate, #7a4a22) 46%, var(--night-deep)) 62%,
            var(--night-deep) 100%);
    position: relative;
}
/* إطار داخلي رفيع كإطار صفحة العنوان */
.cover-empty::before {
    content: ""; position: absolute; inset: 10px;
    border: 1px solid color-mix(in srgb, var(--on-night) 26%, transparent);
    pointer-events: none;
}
.ce-rule {
    width: 34px; height: 1px; flex: none;
    background: color-mix(in srgb, var(--on-night) 45%, transparent);
}
.ce-mark { color: color-mix(in srgb, var(--on-night) 60%, transparent); line-height: 0; }
.ce-title {
    font-family: var(--serif);
    font-size: clamp(.92rem, 1.5vw, 1.08rem);
    font-weight: 700; line-height: 1.6;
    text-wrap: balance;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
    overflow: hidden;
}
.ce-foot {
    font-size: .74rem; letter-spacing: .04em;
    color: color-mix(in srgb, var(--on-night) 86%, transparent);
}

.card-body { display: flex; flex-direction: column; gap: .3rem; }
.card-title {
    font-family: var(--serif); font-size: 1.09rem; font-weight: 700; line-height: 1.5;
    transition: color .16s ease;
}
.card:hover .card-title { color: var(--oxblood); }
.card-meta { font-size: .81rem; color: var(--ink-3); }
.card-excerpt { font-size: .87rem; color: var(--ink-2); line-height: 1.7; }

.badge {
    display: inline-block; font-size: .72rem; letter-spacing: .04em;
    border: 1px solid var(--rule); color: var(--ink-3);
    padding: .1rem .48rem; border-radius: 2px; background: var(--paper-2);
}
.badge.gold { border-color: var(--gold-soft); color: var(--gold); }

/* قائمة مُسطّرة — للجوائز والمقالات والمناصب */
.ledger { border-top: 1px solid var(--rule); }
.ledger-row {
    display: grid;
    grid-template-columns: 92px 1fr auto;
    gap: 1.2rem; align-items: baseline;
    padding: 1.05rem .4rem;
    border-bottom: 1px solid var(--rule-soft);
    color: var(--ink);
}
.ledger-row:hover { background: var(--paper-2); color: var(--ink); }
.ledger-row:hover .ledger-title { color: var(--oxblood); }
.ledger-year {
    font-family: var(--serif); font-size: 1.05rem; color: var(--gold);
    font-variant-numeric: lining-nums;
}
.ledger-title {
    display: block;
    font-family: var(--serif); font-size: 1.1rem; font-weight: 700; line-height: 1.5;
}
.ledger-sub { display: block; font-size: .85rem; color: var(--ink-3); margin-top: .15rem; }
.ledger-tag { font-size: .78rem; color: var(--ink-3); white-space: nowrap; }

/* شبكة الصور / photo grid */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .9rem;
}
.photo {
    position: relative; display: block; margin: 0;
    aspect-ratio: 1 / 1; overflow: hidden;
    border: 1px solid var(--paper-edge);
    background: var(--paper-3);
    box-shadow: var(--shadow-sm);
}
.photo img {
    width: 100%; height: 100%; object-fit: cover;
    object-position: 50% 25%;   /* الوجوه في الثلث الأعلى غالبًا / faces sit high in portraits */
    transition: transform .35s ease;
}
.photo:hover img { transform: scale(1.04); }
.photo figcaption {
    position: absolute; inset-inline: 0; bottom: 0;
    background: linear-gradient(0deg, rgba(34,29,24,.82), rgba(34,29,24,0));
    color: var(--paper-2); font-size: .8rem; padding: 1.6rem .7rem .55rem;
    opacity: 0; transition: opacity .25s ease;
}
.photo:hover figcaption { opacity: 1; }

/* لا نتائج / empty state */
.empty {
    text-align: center; padding: 4rem 1rem; color: var(--ink-3);
    border: 1px dashed var(--rule); background: var(--paper-2);
}
.empty h3 { color: var(--ink-2); margin-bottom: .4rem; }

/* ------------------------------ 10. صفحة المادة ------------------------------ */
.detail { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.detail-grid {
    display: grid; grid-template-columns: 300px 1fr; gap: 3rem;
    align-items: start;
}
.detail-cover {
    display: block;
    border: 1px solid var(--paper-edge);
    box-shadow: var(--shadow-book);
    background: var(--paper-3);
    overflow: hidden;
}
.detail-cover img { width: 100%; }

.detail h1 { margin-bottom: .3rem; }
.detail-sub {
    font-family: var(--serif); font-size: 1.12rem; color: var(--ink-2);
    margin-bottom: 1.4rem;
}
.detail-body { font-size: 1.02rem; line-height: 1.95; color: var(--ink-2); }
.detail-body p { margin-bottom: 1.2em; }

/* جدول البيانات الوصفية — بطاقة الفهرسة */
.meta-table {
    width: 100%; border-collapse: collapse;
    margin: 1.8rem 0; font-size: .93rem;
    border-top: 1px solid var(--rule);
}
.meta-table th, .meta-table td {
    text-align: start; padding: .62rem .2rem;
    border-bottom: 1px solid var(--rule-soft); vertical-align: top;
}
.meta-table th {
    width: 148px; color: var(--ink-3); font-weight: 500; font-size: .86rem;
}
.meta-table td { color: var(--ink); }

.actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }

.btn {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--oxblood); color: var(--paper-2);
    border: 1px solid var(--oxblood);
    padding: .6rem 1.25rem; border-radius: var(--radius);
    font: inherit; font-size: .92rem; font-weight: 600;
    cursor: pointer; transition: background .18s ease;
}
.btn:hover { background: var(--oxblood-dk); border-color: var(--oxblood-dk); color: var(--paper-2); }
.btn.ghost {
    background: transparent; color: var(--ink-2); border-color: var(--rule);
}
.btn.ghost:hover { background: var(--paper-3); color: var(--oxblood); border-color: var(--gold); }
.btn.small { padding: .38rem .8rem; font-size: .85rem; }
.btn.danger { background: #8a2c22; border-color: #8a2c22; }
.btn.danger:hover { background: #6d2119; border-color: #6d2119; }

.video-embed {
    position: relative; aspect-ratio: 16 / 9; margin: 1.8rem 0;
    border: 1px solid var(--rule); background: var(--ink);
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-embed.is-tall { aspect-ratio: 9 / 16; max-width: 380px; margin-inline: auto; background: #fff; }

.related { margin-top: 4rem; padding-top: 2.2rem; border-top: 1px solid var(--rule); }

/* معرض الصور المصغّر داخل المادة */
.thumbs {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: .6rem; margin-top: 1.4rem;
}
.thumbs a {
    aspect-ratio: 1/1; overflow: hidden; border: 1px solid var(--paper-edge);
    background: var(--paper-3);
}
.thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* عارض الصور / lightbox */
.lightbox {
    position: fixed; inset: 0; z-index: 300;
    background: rgba(42, 40, 38, .94);
    display: none; place-items: center; padding: 2rem;
}
.lightbox.open { display: grid; }
.lightbox img {
    max-width: min(1100px, 94vw); max-height: 86vh;
    object-fit: contain; box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.lightbox-cap {
    color: var(--on-night); text-align: center; margin-top: 1rem; font-size: .9rem;
}
.lightbox-close {
    position: absolute; top: 1.2rem; inset-inline-end: 1.4rem;
    background: none; border: 1px solid color-mix(in srgb, var(--on-night) 40%, transparent); color: var(--on-night);
    width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
    font-size: 1.3rem; line-height: 1; display: grid; place-items: center;
}
.lightbox-close:hover { background: color-mix(in srgb, var(--on-night) 12%, transparent); }
.lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: none; border: 1px solid color-mix(in srgb, var(--on-night) 35%, transparent); color: var(--on-night);
    width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
    display: grid; place-items: center; font-size: 1.4rem;
}
.lightbox-nav:hover { background: color-mix(in srgb, var(--on-night) 12%, transparent); }
.lightbox-prev { inset-inline-start: 1.2rem; }
.lightbox-next { inset-inline-end: 1.2rem; }

/* ------------------------------ 11. الترقيم ------------------------------ */
.pager {
    display: flex; gap: .4rem; justify-content: center; align-items: center;
    margin-top: 3rem; flex-wrap: wrap;
}
.pager a, .pager span {
    min-width: 38px; height: 38px; padding: 0 .6rem;
    display: grid; place-items: center;
    border: 1px solid var(--rule); background: var(--paper-2);
    color: var(--ink-2); font-size: .9rem; border-radius: var(--radius);
}
.pager a:hover { border-color: var(--gold); color: var(--oxblood); }
.pager .current {
    background: var(--oxblood); border-color: var(--oxblood);
    color: var(--paper-2); font-weight: 600;
}
.pager .gap { border: 0; background: none; }

/* ------------------------------ 12. التذييل ------------------------------ */
.site-footer {
    background: var(--night);
    color: var(--on-night-2);
    padding: 3.2rem 0 1.8rem;
    margin-top: 4rem;
    font-size: .9rem;
}
.footer-grid {
    display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem;
    padding-bottom: 2.2rem; border-bottom: 1px solid color-mix(in srgb, var(--on-night-2) 18%, transparent);
}
.site-footer h2 {
    color: var(--on-night); font-size: .95rem; margin-bottom: 1rem;
    font-family: var(--sans); letter-spacing: .08em; font-weight: 600;
}
.site-footer a { color: var(--on-night-2); }
.site-footer a:hover { color: var(--gold-soft); }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.footer-brand p { color: var(--on-night-3); max-width: 42ch; line-height: 1.8; }
.footer-brand .fb-name {
    font-family: var(--serif); font-size: 1.3rem; color: var(--on-night); margin-bottom: .5rem;
}
.footer-bottom {
    padding-top: 1.5rem; text-align: center; color: var(--on-night-3); font-size: .84rem;
}

/* ------------------------------ 13. البحث ------------------------------ */
.search-hero { padding: 2.6rem 0; text-align: center; }
.search-box {
    display: flex; gap: .6rem; max-width: 620px; margin: 1.4rem auto 0;
}
.search-box input {
    flex: 1; font: inherit; padding: .72rem 1rem;
    border: 1px solid var(--sage); background: var(--paper-2);
    border-radius: var(--radius); color: var(--ink);
}
.search-box input:focus { border-color: var(--gold); outline: none; }

mark { background: var(--gold-soft); color: var(--ink); padding: 0 .15em; }

/* ------------------------------ 14. صفحة التثبيت ------------------------------ */
.install-page { display: grid; place-items: center; min-height: 100vh; padding: 2rem; }
.install-card {
    background: var(--paper-2); border: 1px solid var(--rule);
    padding: 2.4rem; max-width: 560px; width: 100%;
    box-shadow: var(--shadow-md);
}
.install-card h1 { font-size: 1.6rem; }
.install-card h2 { font-size: 1.2rem; margin-top: 1.8rem; }
.note {
    padding: .6rem .85rem; border-radius: var(--radius);
    font-size: .9rem; margin: 0 0 .55rem;
    border-inline-start: 3px solid transparent;
}
.note.ok  { background: #eef3ea; border-color: #6c8f5a; color: #3c5230; }
.note.bad { background: #f6eae8; border-color: #a5443a; color: #7b2b26; }
.hint { font-size: .88rem; color: var(--ink-3); }
.stack { display: grid; gap: 1rem; margin-top: 1.2rem; }
.stack label { display: grid; gap: .35rem; font-size: .9rem; color: var(--ink-2); }
.stack input, .stack select, .stack textarea {
    font: inherit; padding: .55rem .7rem;
    border: 1px solid var(--rule); background: var(--paper);
    border-radius: var(--radius); color: var(--ink); width: 100%;
}
.stack input:focus, .stack select:focus, .stack textarea:focus {
    border-color: var(--gold); outline: none;
}
.install-actions { display: flex; gap: .7rem; margin-top: 1.4rem; }
code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: var(--paper-3); padding: .1rem .35rem; border-radius: 2px;
    font-size: .88em;
}

/* بين ٨٦٠ و١١٨٠ بكسل: النصّ الأكبر يجعل الروابط تلامس حقل البحث،
   فنضيّق التباعد ونصغّر الحقل حتى يبقى السطر واحدًا بلا تداخل.
   Between 860 and 1180px the larger nav text collides with the search field,
   so tighten spacing and shrink the field to keep one clean row. */
@media (max-width: 1180px) {
    .main-nav a { padding: .62rem .72rem; font-size: .94rem; }
    .nav-search-link {
    display: none;
    position: absolute; inset-inline-end: 0; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; place-items: center;
    color: var(--ink-3); border-radius: 50%;
}
.nav-search-link:hover { color: var(--ink); background: var(--paper-3); }

.nav-search input { width: 84px; }
    .nav-search input:focus { width: 96px; }
}
@media (max-width: 1060px) {
    .main-nav a { padding: .58rem .55rem; font-size: .89rem; }
    /* الحقل يضيق عن المكان هنا، فيحلّ محلّه رمز يفتح صفحة البحث.
       البحث يبقى متاحًا دائمًا — إخفاؤه بالكامل يفقد وظيفة، لا مساحة فقط. */
    .nav-search { display: none; }
    .nav-search-link { display: grid; }
}

/* ------------------------------ 15. الاستجابة ------------------------------ */
@media (max-width: 1000px) {
    .detail-grid { grid-template-columns: 240px 1fr; gap: 2rem; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
    .burger { display: grid; }

    /* الدرج يخرج من الجهة نفسها التي فيها زرّ القائمة */
    .main-nav {
        position: fixed; inset-block: 0; inset-inline-start: 0;
        width: min(320px, 84vw);
        background: var(--paper-2);
        border-inline-end: 1px solid var(--rule);
        transform: translateX(100%);          /* عربي: يختفي إلى اليمين */
        transition: transform .28s ease, visibility .28s;
        visibility: hidden;                   /* مغلقًا لا يُوصَل إليه بلوحة المفاتيح / closed = not focusable */
        z-index: 2; overflow-y: auto;
        padding: 5rem 0 2rem;
        box-shadow: -8px 0 30px rgba(34,29,24,.16);
    }
    html[dir="ltr"] .main-nav {
        transform: translateX(-100%);
        box-shadow: 8px 0 30px rgba(34,29,24,.16);
    }
    .main-nav.open,
    html[dir="ltr"] .main-nav.open { transform: translateX(0); visibility: visible; }

    .main-nav .wrap { display: block; width: 100%; }

    /* البحث مفيد داخل الدرج بدل إخفائه */
    .nav-search-link { display: none !important; }
    .main-nav .nav-search {
        display: flex !important;
        position: static; transform: none;
        display: flex; margin: 1.2rem 1.5rem 0;
        padding-top: 1.2rem; border-top: 1px solid var(--rule-soft);
    }
    .main-nav .nav-search-link {
    display: none;
    position: absolute; inset-inline-end: 0; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; place-items: center;
    color: var(--ink-3); border-radius: 50%;
}
.nav-search-link:hover { color: var(--ink); background: var(--paper-3); }

.nav-search input { width: 100%; }
    .main-nav ul { flex-direction: column; }
    .main-nav li + li::before { display: none; }
    .main-nav a {
        padding: .85rem 1.5rem; border-bottom: 1px solid var(--rule-soft);
        border-inline-start: 3px solid transparent;
    }
    .main-nav a.is-active {
        border-bottom-color: var(--rule-soft);
        border-inline-start-color: var(--oxblood);
        background: var(--paper-3);
    }

    .detail-grid { grid-template-columns: 1fr; }
    .detail-cover { max-width: 240px; margin-inline: auto; }

    .ledger-row { grid-template-columns: 66px 1fr; gap: .9rem; }
    .ledger-tag { grid-column: 2; }
}

@media (max-width: 640px) {
    body { font-size: 16px; }
    .wrap, .wrap-narrow { width: min(100% - 1.8rem, var(--wrap)); }
    .sec { padding: 2.4rem 0; }
    .hero { padding: 2.4rem 0 2rem; }
    .hero-frame { padding: 1.8rem 1.1rem; }

    .items { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.5rem 1rem; }
    .shelf { grid-template-columns: 1fr 1fr; }
    .shelf-card { padding: 1.1rem .9rem; min-height: 0; }
    .shelf-desc { display: none; }
    .photo-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .5rem; }
    .footer-grid { grid-template-columns: 1fr; gap: 1.8rem; }
    .meta-table th { width: 110px; }
    .filters { gap: .35rem; padding: 1.1rem 0; }
    .chip { font-size: .83rem; padding: .35rem .7rem; }
}

@media (max-width: 400px) {
    .shelf { grid-template-columns: 1fr; }
    .items { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------ 16. الطباعة ------------------------------ */
@media print {
    .masthead, .site-footer, .filters, .actions, .pager, .lightbox { display: none !important; }
    body { background: #fff; color: #000; font-size: 12pt; }
    .card-cover, .detail-cover { box-shadow: none; }
    a { color: #000; text-decoration: underline; }
}

/* ------------------------------ 17. تقليل الحركة ------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================================
   18. لوحة التحكم / Admin panel
   ========================================================================= */
body.admin { background: #f2eee6; }

.admin-bar {
    background: #241f1a; color: var(--on-night);
    position: sticky; top: 0; z-index: 100;
    border-bottom: 3px solid var(--oxblood);
}
.admin-bar-in {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: .7rem 0; flex-wrap: wrap;
}
.admin-bar a { color: var(--on-night); }
.admin-bar a:hover { color: var(--gold-soft); }
.admin-brand {
    display: flex; align-items: center; gap: .6rem;
    font-family: var(--serif); font-size: 1.1rem; font-weight: 700;
}
.admin-brand .tag {
    font-family: var(--sans); font-size: .64rem; letter-spacing: .16em;
    border: 1px solid color-mix(in srgb, var(--on-night) 35%, transparent); padding: .1rem .4rem;
    border-radius: 2px; color: var(--gold-soft);
}
.admin-bar-links { display: flex; gap: 1.1rem; align-items: center; font-size: .9rem; flex-wrap: wrap; }
.admin-who { color: #a79d8e; font-size: .84rem; }

.admin-nav {
    background: #302a23; border-bottom: 1px solid rgba(232,224,210,.12);
    position: sticky; top: 52px; z-index: 99;
}
.admin-nav ul {
    list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0;
}
.admin-nav a {
    display: block; padding: .6rem 1rem; font-size: .9rem;
    color: #c9c0b1; border-bottom: 2px solid transparent;
}
.admin-nav a:hover { background: rgba(232,224,210,.06); color: #f0e9dc; }
.admin-nav a.is-active { color: var(--gold-soft); border-bottom-color: var(--gold); }

.admin-main { padding: 2.2rem 0 4rem; }

.admin-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem;
    padding-bottom: 1rem; border-bottom: 1px solid var(--rule);
}
.admin-head h1 { font-size: 1.6rem; margin: 0 0 .15rem; }
.admin-head p { color: var(--ink-3); font-size: .9rem; margin: 0; }
.admin-head .row { display: flex; gap: .6rem; flex-wrap: wrap; }

/* بطاقات الإحصاء */
.stat-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1px; border: 1px solid var(--rule);
    margin-bottom: 2.4rem;
}
.stat {
    background: var(--paper-2); padding: 1.2rem 1.1rem;
    box-shadow: 0 0 0 1px var(--rule);
    display: flex; flex-direction: column; gap: .2rem;
}
.stat .k { font-size: .8rem; color: var(--ink-3); }
.stat .v { font-family: var(--serif); font-size: 1.9rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.stat a { font-size: .8rem; }

/* جدول الإدارة */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--rule); background: var(--paper-2); }
table.tbl { width: 100%; border-collapse: collapse; font-size: .91rem; min-width: 700px; }
table.tbl th, table.tbl td {
    text-align: start; padding: .7rem .8rem; border-bottom: 1px solid var(--rule-soft);
    vertical-align: middle;
}
table.tbl thead th {
    background: var(--paper-3); font-size: .8rem; color: var(--ink-2);
    font-weight: 600; letter-spacing: .02em; white-space: nowrap;
    position: sticky; top: 0;
}
table.tbl tbody tr:hover { background: var(--paper-3); }
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl .t-title { font-family: var(--serif); font-size: 1rem; font-weight: 700; }
table.tbl .t-sub { font-size: .8rem; color: var(--ink-3); }
table.tbl .t-thumb {
    width: 44px; height: 58px; object-fit: cover;
    border: 1px solid var(--paper-edge); background: var(--paper-3);
}
table.tbl .t-actions { white-space: nowrap; display: flex; gap: .35rem; }

.pill {
    display: inline-block; font-size: .74rem; padding: .12rem .5rem;
    border-radius: 999px; border: 1px solid var(--rule); color: var(--ink-3);
    background: var(--paper);
}
.pill.on  { background: #eef3ea; border-color: #a8c197; color: #4a6b39; }
.pill.off { background: #f6f0e6; border-color: var(--gold-soft); color: #8a6a2c; }

/* النماذج */
.form-grid { display: grid; grid-template-columns: 1fr 320px; gap: 2rem; align-items: start; }
.panel {
    background: var(--paper-2); border: 1px solid var(--rule);
    padding: 1.5rem; margin-bottom: 1.4rem;
}
.panel > h2 {
    font-size: 1.05rem; font-family: var(--sans); font-weight: 600;
    margin: 0 0 1.2rem; padding-bottom: .7rem; border-bottom: 1px solid var(--rule-soft);
    color: var(--ink-2);
}
.field { display: grid; gap: .35rem; margin-bottom: 1.1rem; }
.field:last-child { margin-bottom: 0; }
.field > label { font-size: .87rem; color: var(--ink-2); font-weight: 500; }
.field .help { font-size: .79rem; color: var(--ink-3); line-height: 1.6; }
.field input[type="text"], .field input[type="url"], .field input[type="number"],
.field input[type="password"], .field input[type="email"], .field select, .field textarea {
    font: inherit; font-size: .93rem; padding: .55rem .7rem; width: 100%;
    border: 1px solid var(--rule); background: var(--paper);
    border-radius: var(--radius); color: var(--ink);
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.8; }
.field input:focus, .field select:focus, .field textarea:focus {
    border-color: var(--gold); outline: none; background: #fff;
}
.field input[type="file"] { font-size: .85rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.check { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--ink-2); }
.check input { width: 16px; height: 16px; accent-color: var(--oxblood); }

.img-preview {
    width: 100%; max-height: 260px; object-fit: contain;
    border: 1px solid var(--rule); background: var(--paper);
    margin-bottom: .6rem;
}

.media-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .7rem; }
.media-item { position: relative; }
.media-item img {
    width: 100%; aspect-ratio: 1/1; object-fit: cover;
    border: 1px solid var(--paper-edge); background: var(--paper-3);
}
.media-item .rm {
    position: absolute; top: 4px; inset-inline-end: 4px;
    width: 24px; height: 24px; border-radius: 50%;
    background: rgba(36,31,26,.82); color: #fff; border: 0;
    cursor: pointer; font-size: .95rem; line-height: 1; display: grid; place-items: center;
}
.media-item .rm:hover { background: #8a2c22; }
.media-item input[type="text"] {
    font: inherit; font-size: .76rem; width: 100%; margin-top: .3rem;
    border: 1px solid var(--rule); padding: .25rem .4rem; background: var(--paper);
    border-radius: 2px;
}

.form-actions {
    display: flex; gap: .7rem; flex-wrap: wrap; align-items: center;
    padding-top: 1.2rem; margin-top: .4rem; border-top: 1px solid var(--rule);
}

/* تنبيهات */
.alert {
    padding: .75rem 1rem; border-radius: var(--radius); font-size: .9rem;
    margin-bottom: 1rem; border-inline-start: 3px solid;
}
.alert.ok  { background: #eef3ea; border-color: #6c8f5a; color: #3c5230; }
.alert.bad { background: #f6eae8; border-color: #a5443a; color: #7b2b26; }

/* شريط الأدوات */
.admin-filters {
    display: flex; gap: .6rem; flex-wrap: wrap; align-items: center;
    margin-bottom: 1.2rem; padding: .9rem 1rem;
    background: var(--paper-2); border: 1px solid var(--rule);
}
.admin-filters select, .admin-filters input {
    font: inherit; font-size: .88rem; padding: .42rem .6rem;
    border: 1px solid var(--rule); background: var(--paper);
    border-radius: var(--radius); color: var(--ink);
}
.admin-filters label { font-size: .84rem; color: var(--ink-3); }

/* صفحة الدخول */
.login-page { display: grid; place-items: center; min-height: 100vh; padding: 2rem; }
.login-card {
    background: var(--paper-2); border: 1px solid var(--rule);
    padding: 2.4rem; width: min(100%, 400px);
    box-shadow: var(--shadow-md); text-align: center;
}
.login-card .brand-mark { margin: 0 auto 1.2rem; }
.login-card h1 { font-size: 1.35rem; margin-bottom: .3rem; }
.login-card .hint { margin-bottom: 1.6rem; }
.login-card .stack { text-align: start; }
.login-card .btn { width: 100%; justify-content: center; }
.login-back { margin-top: 1.4rem; font-size: .86rem; }

@media (max-width: 900px) {
    .form-grid { grid-template-columns: 1fr; }
    .admin-nav { top: 0; position: static; }
}
@media (max-width: 640px) {
    .field-row { grid-template-columns: 1fr; }
    .admin-bar-in { padding: .55rem 0; }
    .admin-brand { font-size: .98rem; }
}

/* =========================================================================
   19. شريط الصور المتحرّك في الصدر / Homepage slideshow
   ========================================================================= */
.hero-show {
    position: relative;
    height: clamp(340px, 62vh, 620px);
    overflow: hidden;
    background: var(--night);
    border-bottom: 1px solid var(--rule);
}

.hero-show-stage { position: absolute; inset: 0; }

.hero-slide {
    position: absolute; inset: 0; margin: 0;
    opacity: 0;
    transition: opacity 1.1s ease, transform 1.1s ease;
    transform: translateX(2.5%) scale(1.04);
    will-change: opacity, transform;
}
.hero-slide.is-active {
    opacity: 1;
    transform: translateX(0) scale(1);
    z-index: 2;
}
/* الشريحة الخارجة تنزلق إلى الجهة المقابلة */
.hero-slide.is-leaving {
    opacity: 0;
    transform: translateX(-2.5%) scale(1.02);
    z-index: 1;
}
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }

/* حجاب يضمن قراءة النص فوق أي صورة */
.hero-show-veil {
    position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: linear-gradient(0deg, rgba(42,40,38,.5) 0%, rgba(42,40,38,0) 30%);
}

.hero-show-text {
    position: absolute; inset-inline: 0; bottom: 0; z-index: 4;
    padding: 0 0 clamp(2.2rem, 5vw, 4rem);
    text-align: start; color: #f6f1e6;
}
.hero-show-text .wrap > * { max-width: 46ch; }
/* الكلمة فوق الاسم — كانت صغيرة وباهتة فوق الصورة، فكُبِّرت وأُضيء لونها */
.hero-show-text .hero-eyebrow {
    font-size: clamp(.92rem, 1.35vw, 1.12rem);
    letter-spacing: .32em;
    font-weight: 700;
    color: #f2e6cd;
    margin-bottom: 1.05rem;
    /* ظل خفيف يفصلها عن الصورة مهما كانت فاتحة */
    text-shadow: 0 1px 3px rgba(0, 0, 0, .75), 0 2px 14px rgba(0, 0, 0, .55);
}
.hero-show-text h1 {
    color: #fbf7ee; margin-bottom: .2rem;
    font-size: clamp(2rem, 5.6vw, 3.5rem);
    text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}
.hero-show-text .hero-rule { background: var(--gold-soft); margin: 1.1rem 0; }
.hero-show-text .hero-rule::before,
.hero-show-text .hero-rule::after { background: var(--gold-soft); }

.hero-show-cap {
    font-family: var(--serif); font-size: clamp(.95rem, 1.6vw, 1.12rem);
    color: #ece3d3; margin: 0; max-width: 54ch; min-height: 1.6em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .7), 0 2px 12px rgba(0, 0, 0, .45);
    transition: opacity .4s ease;
}
.hero-show-cap.is-fading { opacity: 0; }

/* الأسهم */
.show-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(42, 40, 38, .38); color: #f6f1e6;
    border: 1px solid rgba(246, 241, 230, .34);
    cursor: pointer; font-size: 1.5rem; line-height: 1;
    display: grid; place-items: center;
    transition: background .18s ease, opacity .18s ease;
    opacity: 0;
}
.hero-show:hover .show-nav,
.show-nav:focus-visible { opacity: 1; }
.show-nav:hover { background: rgba(42, 40, 38, .65); }
.show-prev { inset-inline-start: clamp(.6rem, 2vw, 1.6rem); }
.show-next { inset-inline-end: clamp(.6rem, 2vw, 1.6rem); }

/* النقاط */
.show-dots {
    justify-content: flex-start;
    position: absolute; z-index: 5; inset-inline: 0;
    bottom: clamp(.7rem, 1.6vw, 1.2rem);
    display: flex; justify-content: center; gap: .5rem;
}
.show-dots .dot {
    width: 8px; height: 8px; padding: 0; border-radius: 50%;
    background: rgba(246, 241, 230, .38);
    border: 1px solid rgba(246, 241, 230, .5);
    cursor: pointer; transition: .2s;
}
.show-dots .dot:hover { background: rgba(246, 241, 230, .7); }
.show-dots .dot.is-active {
    background: var(--gold-soft); border-color: var(--gold-soft);
    transform: scale(1.35);
}

/* صندوق العنوان يصير أخفّ حين توجد صور فوقه */
.hero.hero-compact {
    padding-top: clamp(2rem, 4vw, 3rem);
    background: none;
}
.hero.hero-compact .hero-frame { border-color: var(--rule); }

@media (max-width: 640px) {
    .hero-show { height: clamp(280px, 52vh, 420px); }
    .show-nav { opacity: 1; width: 38px; height: 38px; font-size: 1.2rem; }
    .hero-show-cap { font-size: .9rem; }
}

/* =========================================================================
   20. ألوان التجليد — كل باب بلون / Per-section binding colours
   ========================================================================= */
.shelf-card {
    /* الكعب الملوّن على حافة البطاقة */
    border-inline-start: 4px solid var(--spine, var(--oxblood));
}
.shelf-card .shelf-icon { color: var(--spine, var(--oxblood)); }
.shelf-card .shelf-num  { color: var(--spine, var(--gold)); opacity: .75; }
.shelf-card:hover {
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--spine, var(--oxblood)) 9%, transparent),
            transparent 60%),
        var(--paper-3);
}
.shelf-card:hover .shelf-title { color: var(--spine, var(--oxblood)); }

/* لافتة الباب تأخذ لونه */
.page-banner {
    border-top: 3px solid var(--spine, transparent);
}



/* المتصفحات القديمة التي لا تدعم color-mix */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .shelf-card:hover { background: var(--paper-3); }
}

/* =========================================================================
   21. سطر آخر تحديث / Last-updated line
   ========================================================================= */
.last-updated {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .84rem; color: var(--on-night-3);
}
.last-updated .ico { opacity: .7; }
.last-updated time { color: var(--gold-soft); }

.footer-bottom .sep { opacity: .4; margin: 0 .5rem; }

@media (max-width: 640px) {
    .footer-bottom { display: grid; gap: .5rem; justify-items: center; }
    .footer-bottom .sep { display: none; }
}

/* =========================================================================
   22. لوحة صور الصدر في الإدارة / Slideshow admin grid
   ========================================================================= */
.slide-admin-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1.1rem;
}
.slide-admin {
    border: 1px solid var(--rule); background: var(--paper);
    padding: .6rem;
}
.slide-admin img {
    width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
    border: 1px solid var(--paper-edge); background: var(--paper-3);
}
.slide-admin-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: .6rem; margin-top: .5rem; font-size: .82rem; color: var(--ink-3);
}
.slide-admin-row label { display: flex; align-items: center; gap: .35rem; }
.slide-admin-row input[type="number"] {
    font: inherit; font-size: .82rem; padding: .2rem .35rem;
    border: 1px solid var(--rule); background: var(--paper); border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide { transition: opacity .2s ease; transform: none !important; }
}

/* سطر آخر تحديث في صدر الصفحة الرئيسية / Last-updated line in the homepage hero */
.hero-updated {
    display: inline-flex; align-items: center; gap: .45rem;
    margin: 1.8rem 0 0;
    padding-top: 1.2rem;
    border-top: 1px solid var(--rule-soft);
    font-size: .84rem; color: var(--ink-3);
    letter-spacing: .01em;
}
.hero-updated svg { color: var(--gold); flex: none; }
.hero-updated time { color: var(--ink-2); font-weight: 500; }

/* ===========================================================================
   الشعار / Logo
   =========================================================================== */
.brand-logo {
    width: 52px; height: 52px; flex: none;
    object-fit: contain;
    display: block;
}
.brand.has-logo { gap: .7rem; }

/* التذييل / footer emblem */
.footer-logo {
    width: clamp(170px, 24vw, 260px); height: auto;
    margin-bottom: 1.2rem; display: block;
}

@media (max-width: 860px) {
    .brand-logo { width: 44px; height: 44px; }
}
@media (max-width: 640px) {
    .brand-logo { width: 38px; height: 38px; }
    .footer-logo { width: 170px; }
}

/* ===========================================================================
   القائمة النصّية — للمقالات والكتب
   Text-led listing. No cards, no covers: linked title, source beneath.
   =========================================================================== */
.jumps {
    display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
    padding: 0 0 1.4rem; margin-bottom: 2.2rem;
    border-bottom: 1px solid var(--rule);
}
.jumps a {
    font-size: .88rem; color: var(--ink-2);
    display: inline-flex; align-items: baseline; gap: .4rem;
}
.jumps a:hover { color: var(--oxblood); }
.jumps a span {
    font-family: var(--serif); font-size: .8rem; color: var(--ink-3);
}

.listing { margin-bottom: 3.2rem; }
.listing:last-child { margin-bottom: 0; }

.listing-head {
    font-family: var(--serif); font-size: 1.32rem; font-weight: 700;
    color: var(--ink); margin: 0 0 .2rem;
    padding-bottom: .7rem;
    border-bottom: 2px solid var(--spine, var(--oxblood));
    display: inline-block;
}

.entries {
    list-style: none; margin: 0; padding: 0;
    border-top: 1px solid var(--rule);
}
.entry {
    padding: 1.15rem .2rem;
    border-bottom: 1px solid var(--rule-soft);
    display: flex; flex-direction: column; gap: .22rem;
}
.entry:hover { background: var(--paper-2); }

.entry-title {
    font-family: var(--serif); font-size: 1.16rem; font-weight: 700;
    line-height: 1.55; color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--rule);
    text-underline-offset: .28em;
    text-decoration-thickness: 1px;
}
.entry-title:hover {
    color: var(--oxblood);
    text-decoration-color: var(--oxblood);
}
.entry-sub { font-size: .92rem; color: var(--ink-2); font-style: italic; }
.entry-source {
    font-size: .85rem; color: var(--ink-3);
    display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
}
.entry-tag {
    font-size: .68rem; letter-spacing: .06em;
    border: 1px solid var(--rule); color: var(--ink-3);
    padding: .05rem .38rem; border-radius: 2px; background: var(--paper-2);
}

@media (max-width: 640px) {
    .entry { padding: .95rem .1rem; }
    .entry-title { font-size: 1.06rem; }
    .listing { margin-bottom: 2.4rem; }
}

/* صور الأبواب في لوحة التحكم / section photo manager */
.sec-images {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.2rem;
}
.sec-image { display: flex; flex-direction: column; gap: .5rem; }
.sec-image-frame {
    position: relative; aspect-ratio: 4/3; overflow: hidden;
    background: var(--paper-3); border: 1px solid var(--rule);
    border-bottom: 3px solid var(--spine, var(--oxblood));
}
.sec-image-frame img { width: 100%; height: 100%; object-fit: cover; }
.sec-image-empty {
    position: absolute; inset: 0; display: grid; place-items: center; gap: .3rem;
    color: var(--ink-3); font-size: .8rem;
}
.sec-image-name {
    position: absolute; inset-inline: 0; bottom: 0;
    background: linear-gradient(0deg, rgba(34,29,24,.85), rgba(34,29,24,0));
    color: #f6f1e6; font-family: var(--serif); font-size: .95rem;
    padding: 1.4rem .6rem .45rem;
}
.sec-image input[type="file"] { font-size: .78rem; }
.sec-image-actions { display: flex; gap: .4rem; }

/* ===========================================================================
   بطاقات الأبواب — ورق دافئ، حبر خمري، وحدود ذهبية هادئة
   Archive section cards: paper, burgundy ink and restrained binding details.
   =========================================================================== */
.plates-sec { padding-top: clamp(2.4rem, 5vw, 4rem); }

.plates {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
}

.plate {
    position: relative;
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
    min-width: 0;
    min-height: 19rem;
    padding: clamp(1.25rem, 2.3vw, 1.8rem);
    background: var(--paper-2);
    color: var(--ink);
    border: 1px solid var(--rule);
    border-inline-start: 3px solid var(--spine, var(--gold-soft));
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    text-align: start;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.plate-wide {
    grid-column: span 4;
    flex-direction: row;
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2.8rem);
    background: var(--paper-3);
    border-inline-start-color: var(--spine, var(--oxblood));
}

.plate-symbol {
    display: grid;
    place-items: center;
    flex: none;
    width: 4.2rem;
    height: 4.2rem;
    color: var(--spine, var(--oxblood));
    background: var(--paper-3);
    border: 1px solid var(--paper-edge);
    border-radius: var(--radius);
}
.plate-symbol .ico { width: 2.3rem; height: 2.3rem; }
.plate-wide .plate-symbol {
    order: 2;
    width: clamp(6rem, 13vw, 9rem);
    height: clamp(6rem, 13vw, 9rem);
    color: var(--spine, var(--oxblood));
    background: var(--paper-2);
    border-color: var(--rule);
}
.plate-wide .plate-symbol .ico { width: 58%; height: 58%; }
.plate-symbol-photo { overflow: hidden; }
.plate-symbol-photo img { width: 100%; height: 100%; object-fit: cover; }

.plate-label {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .5rem;
    min-width: 0;
}
.plate-wide .plate-label { align-self: stretch; justify-content: center; }
.plate-title {
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.2vw, 1.85rem);
    line-height: 1.55;
    color: var(--spine, var(--oxblood));
    overflow-wrap: anywhere;
}
.plate-wide .plate-title { font-size: clamp(1.9rem, 3vw, 2.6rem); }
.plate-desc {
    font-size: .9rem;
    line-height: 1.85;
    color: var(--ink-2);
    overflow-wrap: anywhere;
}
.plate-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    padding-top: .85rem;
    border-top: 1px solid var(--rule);
}
.plate-wide .plate-meta { margin-top: 1.15rem; }
.plate-count { font-size: .8rem; color: var(--ink-2); }
.plate-arrow {
    font-family: var(--serif);
    font-size: 1.55rem;
    line-height: 1;
    color: var(--spine, var(--oxblood));
}

.plate:hover, .plate:focus-visible {
    color: var(--ink);
    border-color: color-mix(in srgb, var(--spine, var(--gold)) 45%, var(--rule));
    box-shadow: var(--shadow-md);
}
.plate:hover .plate-title { color: color-mix(in srgb, var(--spine, var(--oxblood)) 80%, var(--ink)); }
.plate:focus-visible { outline: 2px solid var(--spine, var(--oxblood)); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
    .plate:hover { transform: translateY(-3px); }
}

@media (max-width: 900px) {
    .plates { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .plate-wide { grid-column: span 4; min-height: 15rem; }
}
@media (max-width: 560px) {
    .plates { grid-template-columns: minmax(0, 1fr); gap: .85rem; }
    .plate, .plate-wide {
        grid-column: auto;
        flex-direction: column;
        align-items: stretch;
        gap: .9rem;
        min-height: 0;
        padding: 1.25rem;
    }
    .plate-wide .plate-symbol { order: 0; width: 4.2rem; height: 4.2rem; }
    .plate-wide .plate-symbol .ico { width: 2.3rem; height: 2.3rem; }
    .plate-title, .plate-wide .plate-title { font-size: 1.65rem; }
    .plate-meta, .plate-wide .plate-meta { margin-top: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .plate { transition: none; }
    .plate:hover { transform: none; }
}

/* ===========================================================================
   عرض المقال داخل الصفحة / the article itself, shown in place
   =========================================================================== */
.doc { margin: 2rem 0 0; }
/* النسخة المحفوظة تُفتح في نافذة مستقلّة بدل معاينة داخل الصفحة —
   المعاينة كانت تفشل على الجوال وتترك رسالة خطأ مكان المقال.
   The saved copy opens in its own window instead of previewing inline;
   the preview failed on phones and left an error where the article should be. */
.doc-link {
    border: 1px solid var(--rule); background: var(--paper-2);
    padding: 1.6rem 1.2rem; text-align: center;
}
.doc-link .btn { display: inline-block; }
.doc-link figcaption { justify-content: center; margin-top: .9rem; }
.doc-scan {
    width: 100%; height: auto; display: block;
    border: 1px solid var(--rule); background: var(--paper-2);
    box-shadow: var(--shadow-sm);
}
.doc figcaption {
    margin-top: .6rem; font-size: .84rem; color: var(--ink-3);
    display: flex; gap: .8rem; align-items: baseline; flex-wrap: wrap;
}

.login-logo { width: 210px; height: auto; margin: 0 auto 1.4rem; display: block; }

.login-wordmark {
    font-family: var(--display);
    font-weight: 700; font-size: 1.5rem; line-height: 1.6;
    color: var(--logo-ink); margin-bottom: 1.3rem; padding-block: .1em;
}

/* ===========================================================================
   النبذة / Biography — prose beside a short facts panel
   =========================================================================== */
.bio {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}
.bio-text { font-size: 1.02rem; line-height: 1.95; color: var(--ink-2); }
.bio-text p { margin: 0 0 1.15em; max-width: 62ch; }
.bio-text p:last-child { margin-bottom: 0; }
.bio-text .sec-head { margin-bottom: 1.6rem; }

/* أوّل فقرة أبرز قليلًا — تقليد صحفي يمنح النصّ مدخلًا */
.bio-text > p:first-of-type {
    font-family: var(--serif);
    font-size: 1.16rem;
    color: var(--ink);
    line-height: 1.85;
}

.bio-facts {
    border-top: 2px solid var(--ink);
    padding-top: 1.2rem;
    position: sticky; top: 140px;
}
.fact {
    display: flex; flex-direction: column; gap: .2rem;
    padding: .95rem 0;
    border-bottom: 1px solid var(--rule-soft);
}
.fact:last-child { border-bottom: 0; }
.fact-k {
    font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink-3); font-weight: 600;
}
.fact-v {
    font-family: var(--serif); font-size: 1.02rem;
    line-height: 1.65; color: var(--ink);
}

/* عن هذا الأرشيف — ملاحظة قصيرة لا قسم كامل */
.about-note {
    max-width: 60ch;
    padding-inline-start: 1.2rem;
    border-inline-start: 2px solid var(--rule);
    color: var(--ink-2);
}

.about-note p { margin: 0 0 .9em; }
.about-note p:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
    .bio { grid-template-columns: 1fr; gap: 2.2rem; }
    .bio-facts { position: static; }
}

/* =========================================================================
   تبويبات المقالات: نوع المصدر ثم التصنيف / Articles: source-type row, then category row
   ========================================================================= */
.filters-stack { flex-direction: column; align-items: center; gap: .75rem; }
.filter-row { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.filter-row + .filter-row { padding-top: .75rem; border-top: 1px dashed var(--rule-soft); width: 100%; }

/* مقالات الصحف: بلا عمود غلاف / Newspaper articles: no cover column */
.detail-grid.no-cover { grid-template-columns: minmax(0, 860px); }

/* =========================================================================
   حساباته على منصات التواصل (الصفحة الرئيسية) / Social accounts on the homepage
   ========================================================================= */
.socials {
    list-style: none; margin: 0 auto; padding: 0; max-width: 1000px;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem;
}
.social {
    display: flex; flex-direction: column; align-items: center; gap: .4rem;
    padding: 1.4rem 1rem 1.2rem; height: 100%;
    background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
    color: var(--ink); text-align: center;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.social:hover { border-color: var(--gold); color: var(--oxblood); transform: translateY(-2px); box-shadow: var(--shadow-book); }
.social-ico {
    width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin-bottom: .2rem;
    border: 1px solid var(--gold-soft); background: var(--paper-2); color: var(--oxblood);
}
.social:hover .social-ico { background: var(--oxblood); border-color: var(--oxblood); color: var(--paper-2); }
.social-name { font-family: var(--serif); font-weight: 700; font-size: 1.08rem; line-height: 1.3; }
.social-handle { font-size: .82rem; color: var(--ink-3); unicode-bidi: plaintext; word-break: break-word; }
@media (max-width: 860px) {
    .socials { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
    .social { padding: 1.1rem .6rem 1rem; }
}

/* زرّ مسح البحث الأزرق في كروم — بلون الورق / Chrome's blue search-clear button, toned to the paper */
input[type="search"]::-webkit-search-cancel-button { filter: grayscale(1) sepia(.35) opacity(.75); }

/* لا شريط ورقي بين آخر قسم فاتح والتذييل / no stray paper strip above the footer after a light section */
main:has(> .sec-alt:last-child) + .site-footer { margin-top: 0; }

/* =========================================================================
   15. طبقة الكتاب — «صوت الرمل، ضوء البحر»
   الموقع رفيق الكتاب: يصل إليه القرّاء من رمز QR داخله. كل صفحة ورقة كرافت
   تُثبَّت عليها قصاصات ممزّقة كما في الغلاف. الجرأة في مكان واحد (صدر الرئيسية)،
   وما عداه هادئ: عناوين على شرائط، وأوراق بحوافّ ممزّقة.
   The book layer. The site is the companion of the book; readers arrive by a QR
   code. Every page is a kraft sheet with torn scraps pinned to it, like the cover.
   Boldness lives in one place (the home hero); elsewhere, quiet paper devices.
   ========================================================================= */

body { background-color: var(--paper); }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: 0; }

/* ---------- شريط العنوان: عنوان مكتوب على شريط ورقي، كعنوان الغلاف ---------- */
.strip {
    position: relative; isolation: isolate;
    display: inline-block;
    padding: .14em .75em .22em;
    color: var(--ink);
}
.strip::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--grain), linear-gradient(180deg, #f3ecdc 0%, var(--tape) 100%);
    -webkit-mask: var(--mask-ends); mask: var(--mask-ends);
}
.strip-head {
    margin: 0 0 1rem;
    font-family: var(--display);
    font-size: clamp(1.45rem, 3.4vw, 2.05rem);
    font-weight: 700; line-height: 1.35;
}
.strip-head .strip { transform: rotate(-.8deg); filter: drop-shadow(0 1px 1.5px rgba(42,40,38,.18)); }
.sec-lead { color: var(--ink-2); max-width: 60ch; margin: 0 0 2rem; font-size: 1.02rem; }

/* ---------- صدر الرئيسية: الغلاف حيًّا ---------- */
.book-hero {
    position: relative; overflow: hidden;
    background:
        var(--grain),
        radial-gradient(120% 90% at 75% 0%, #d6c7ad 0%, var(--kraft) 55%, var(--kraft-dk) 100%);
    padding: clamp(1.6rem, 5vw, 3.8rem) 0 clamp(2.6rem, 6vw, 4.6rem);
    border-bottom: 1px solid #ae9a7c;
}
.book-hero-in {
    display: grid; gap: 1.4rem 3.2rem;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "collage" "note";
}
.bh-title-block { grid-area: title; }
.bh-collage     { grid-area: collage; }
.bh-note        { grid-area: note; }

.bh-title {
    margin: 0;
    display: flex; flex-direction: column; align-items: flex-start; gap: .5rem;
    font-family: var(--display); font-weight: 700;
    font-size: clamp(2.2rem, 11vw, 4.7rem); line-height: 1.22;
    color: #2a2826;
}
.bh-title .strip { padding: .06em .55em .16em; filter: drop-shadow(0 2px 2px rgba(42,40,38,.2)); }
.strip-1 { transform: rotate(-1.4deg); }
.strip-2 { transform: rotate(.9deg); margin-inline-start: .45em; }
.w-sand { color: #76471c; }
.w-sea  { color: #244d58; }
.bh-sub {
    margin: 1.1rem 0 0;
    font-family: var(--display); font-weight: 500;
    font-size: clamp(1.02rem, 2.6vw, 1.22rem); color: #3a3632;
}

/* الكولاج: قصاصات خلف إطار الصور، وبطاقة معلّقة، وختم */
.bh-collage {
    position: relative;
    width: min(100%, 500px); margin-inline: auto;
    aspect-ratio: 5 / 5.6;
}
.scrap { position: absolute; display: block; }
.scrap::before, .scrap::after { content: ""; position: absolute; }
/* قلب الورقة الفاتح يظهر عند الحافّة الممزّقة / the pale core of torn paper shows at the edge */
.scrap::before { inset: -2px; background: #ece4d3; -webkit-mask: var(--mask-all-2); mask: var(--mask-all-2); }
.scrap::after  { inset: 0; background: var(--scrap-bg); -webkit-mask: var(--mask-all); mask: var(--mask-all); }
.scrap-sage { --scrap-bg: var(--grain), var(--scrap-sage); inset: 3% 0 22% 18%;  transform: rotate(-3.5deg); }
.scrap-char { --scrap-bg: var(--grain), var(--scrap-char); inset: 24% 26% 2% 2%; transform: rotate(2.8deg); }
.scrap-grid {
    --scrap-bg:
        linear-gradient(rgba(60,70,80,.13) 1px, transparent 1px) 0 0 / 11px 11px,
        linear-gradient(90deg, rgba(60,70,80,.13) 1px, transparent 1px) 0 0 / 11px 11px,
        #efe9dd;
    inset: 62% 52% 7% 9%; transform: rotate(-6deg);
}
.bh-frame {
    position: absolute; inset: 9% 10% 9% 13%;
    transform: rotate(-1deg);
    filter: drop-shadow(0 3px 5px rgba(20,18,16,.3));
}
.bh-frame::before {
    content: ""; position: absolute; inset: -5px;
    background: #ece4d3; -webkit-mask: var(--mask-all-2); mask: var(--mask-all-2);
}
.bh-frame > .hero-show,
.bh-frame > .bh-still {
    position: absolute; inset: 0; width: 100%; height: 100%;
    background: #3b3834; border: 0;
    -webkit-mask: var(--mask-all); mask: var(--mask-all);
}
.bh-still { object-fit: cover; object-position: center 22%; }
.bh-frame .hero-slide img { object-position: center 28%; filter: saturate(.92) contrast(1.02); }

.hang-tag {
    position: absolute; top: -3%; inset-inline-end: 4%;
    width: clamp(66px, 17vw, 88px);
    transform: rotate(7deg); transform-origin: 50% 0;
    color: #3f3b37; z-index: 4;
}
.hang-string { display: block; width: 60%; margin: 0 auto -8px; height: auto; }
.tag-body {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .55rem;
    padding: 1.35rem .4rem .75rem;
    background: var(--grain), var(--tag);
    clip-path: polygon(24% 0, 76% 0, 100% 13%, 100% 100%, 0 100%, 0 13%);
    color: #eef0ec; text-align: center;
    filter: drop-shadow(0 2px 3px rgba(20,18,16,.3));
}
.tag-hole {
    position: absolute; top: .45rem; left: 50%; width: 10px; height: 10px; margin-left: -5px;
    border-radius: 50%; background: var(--kraft); box-shadow: inset 0 0 0 2px #2f3d42;
}
.tag-text { font-family: var(--display); font-weight: 700; font-size: clamp(.78rem, 2.4vw, .98rem); line-height: 1.25; }
.tag-year { font-family: var(--display); font-size: .72rem; font-weight: 600; opacity: .85; }

.postmark {
    position: absolute; bottom: 2%; inset-inline-start: -2%;
    width: clamp(78px, 21vw, 112px); aspect-ratio: 1;
    background: rgba(62, 55, 48, .62); transform: rotate(-16deg);
    mix-blend-mode: multiply; z-index: 4;
    /* ختم الغلاف نفسه / the cover's own stamp */
    -webkit-mask: url(img/stamp.svg) center / contain no-repeat; mask: url(img/stamp.svg) center / contain no-repeat;
}

/* ورقة الترحيب / the welcome note */
.bh-note {
    position: relative; isolation: isolate;
    padding: 1.35rem 1.5rem 1.6rem;
    transform: rotate(-.6deg);
    filter: drop-shadow(0 2px 4px rgba(42,40,38,.22));
    max-width: 34rem;
}
.bh-note::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--grain), var(--letter);
    -webkit-mask: var(--mask-bottom); mask: var(--mask-bottom);
}
.bh-note p { margin: 0 0 .7rem; color: var(--ink-2); font-size: 1.02rem; line-height: 1.95; }
.bh-hello { font-family: var(--display); font-weight: 600; font-size: 1.18rem !important; color: var(--ink) !important; }
.bh-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.1rem; }

/* زرّ على شريط ورق / a button on a paper strip */
.btn-paper {
    position: relative; isolation: isolate;
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 46px; padding: .55rem 1.35rem;
    font-family: var(--display); font-weight: 600; font-size: .98rem;
    color: var(--ink);
    transition: transform .18s ease;
}
.btn-paper::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--grain), var(--tape);
    box-shadow: inset 0 0 0 1px rgba(42,40,38,.12);
    -webkit-mask: var(--mask-ends); mask: var(--mask-ends);
}
.btn-paper.is-sea { color: #f4eee2; }
.btn-paper.is-sea::before { background: var(--grain), var(--oxblood); }
.btn-paper:hover { color: var(--ink); transform: rotate(-1deg) translateY(-1px); }
.btn-paper.is-sea:hover { color: #fff; }
.btn-paper:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 3px; }

@media (min-width: 900px) {
    .book-hero-in {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
        grid-template-areas: "title collage" "note collage";
        align-items: start;
    }
    .bh-title-block { padding-top: 1.2rem; }
    .bh-collage { width: min(100%, 480px); }
}

/* لحظة واحدة عند التحميل: القصاصات تستقرّ في أماكنها / one load moment: the scraps settle */
@media (prefers-reduced-motion: no-preference) {
    .bh-title .strip, .bh-collage > *, .bh-note {
        animation: settle .7s cubic-bezier(.2, .7, .2, 1) both;
    }
    .strip-2               { animation-delay: .08s; }
    .bh-collage > .scrap   { animation-delay: .12s; }
    .bh-collage > .bh-frame { animation-delay: .2s; }
    .bh-collage > .hang-tag { animation-delay: .34s; }
    .bh-collage > .postmark { animation-delay: .42s; }
    .bh-note               { animation-delay: .3s; }
}
@keyframes settle {
    from { opacity: 0; translate: 0 14px; }
    to   { opacity: 1; translate: 0 0; }
}

/* ---------- أبواب الأرشيف: قصاصات بألوان الأبواب ---------- */
.abwab-sec { padding-top: clamp(2.6rem, 6vw, 4.2rem); }
.scraps {
    display: grid; gap: 1.1rem;
    grid-template-columns: minmax(0, 1fr);   /* الهاتف: عمود واحد لتُقرأ النبذة كاملة / phones: one column so the blurb reads in full */
}
.scrap-card {
    position: relative; isolation: isolate; display: flex;
    color: #f5efe3; min-height: 0;
    filter: drop-shadow(0 2px 3px rgba(42,40,38,.22));
    transition: transform .2s ease;
}
.scrap-card:nth-child(3n+1) { transform: rotate(-.7deg); }
.scrap-card:nth-child(3n+2) { transform: rotate(.5deg); }
.scrap-card::before {
    content: ""; position: absolute; inset: -2px; z-index: -1;
    background: #e8dfcc; -webkit-mask: var(--mask-all-2); mask: var(--mask-all-2);
}
.sc-paper {
    position: relative; overflow: hidden;
    flex: 1; display: flex; flex-direction: column; gap: .55rem; padding: 1.3rem 1.3rem 1.05rem;
    background: var(--grain), var(--spine, var(--scrap-char));
    -webkit-mask: var(--mask-all); mask: var(--mask-all);
}
.sc-head { display: flex; align-items: center; gap: .7rem; }
.sc-icon {
    flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
    color: #f5efe3; line-height: 0; border: 1px solid rgba(245,239,227,.38); background: rgba(255,255,255,.07);
}
.sc-icon .ico, .sc-icon svg { width: 24px; height: 24px; }
/* أيقونة الباب كبيرة باهتة في الزاوية، كعلامة مائية على الورق / the section's icon, large and faint in the corner like a paper watermark */
.sc-ghost {
    position: absolute; z-index: 0; inset-block-end: -18%; inset-inline-end: -8%; width: 46%; max-width: 150px;
    color: #fff; opacity: .08; line-height: 0; rotate: -14deg; pointer-events: none;
    transition: opacity .35s ease, rotate .5s cubic-bezier(.2, .7, .2, 1);
}
.sc-ghost svg { width: 100%; height: auto; }
.sc-head, .sc-desc, .sc-foot { position: relative; z-index: 1; }
.sc-title { font-family: var(--display); font-weight: 700; font-size: clamp(1.2rem, 3.6vw, 1.5rem); line-height: 1.3; }
.sc-desc  { font-size: .9rem; line-height: 1.9; color: rgba(245,239,227,.92); max-width: 46ch; }
/* خطّ ذهبي قصير بين العنوان والنبذة / a short gold rule between the title and the blurb */
.sc-desc::before { content: ""; display: block; width: 2.4rem; height: 2px; margin: .1rem 0 .65rem; background: var(--gold-soft); opacity: .85; }
.sc-foot {
    margin-top: auto; padding-top: .7rem; display: flex; align-items: center; justify-content: space-between; gap: .8rem;
    border-top: 1px dashed rgba(245,239,227,.28);
}
.sc-count { font-size: .84rem; color: #f5efe3; font-weight: 500; }
.sc-go { font-size: 1.15rem; line-height: 1; color: var(--gold-soft); transition: translate .25s ease; }
.scrap-card:hover .sc-go, .scrap-card:focus-visible .sc-go { translate: -5px 0; }
.scrap-card:hover .sc-ghost { opacity: .14; rotate: -6deg; }
.scrap-card:hover { color: #fff; transform: rotate(0) translateY(-3px); }
.scrap-card:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 5px; }
/* قصاصة أخيرة وحيدة في صفّها تمتدّ على الصفّ كلّه / a last card alone on its row spans the row */
.scrap-card:last-child:nth-child(odd) { grid-column: 1 / -1; }

@media (min-width: 700px) {
    /* ثلاث بطاقات في الصف على شبكة سداسية، ليتقاسم آخرُ صفٍّ ناقص عرضَه:
       بطاقة وحيدة تأخذ الصف كله، وبطاقتان تأخذ كلٌّ منهما نصفه.
       Three cards a row on a 6-track grid so a short last row fills out:
       one leftover card spans the row, two leftovers take half each. */
    .scraps { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.6rem 1.4rem; }
    .scrap-card { min-height: 230px; grid-column: span 2; }
    .scrap-card:last-child:nth-child(odd) { grid-column: span 2; }
    .scrap-card:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
    .scrap-card:nth-last-child(2):nth-child(3n+1),
    .scrap-card:last-child:nth-child(3n+2) { grid-column: span 3; }
}

/* ---------- عن الكتاب ---------- */
.book-sec {
    background: var(--grain), linear-gradient(180deg, var(--paper) 0%, #e2d6bf 100%);
    border-block: 1px solid var(--rule-soft);
}
.book-grid { display: grid; gap: 2.2rem; align-items: center; }
.book-object { margin: 0 auto; width: min(68%, 300px); position: relative; transform: rotate(-2.5deg); }
.book-object img {
    display: block; width: 100%; height: auto;
    box-shadow: 1px 1px 0 rgba(0,0,0,.08), 4px 6px 10px rgba(42,40,38,.18), 16px 22px 40px rgba(42,40,38,.28);
}
/* ظلّ الكعب: الكتب العربية تُجلَّد من اليمين / spine shading on the right: Arabic books bind on the right */
.book-object::after {
    content: ""; position: absolute; inset-block: 0; right: 0; width: 7%;
    background: linear-gradient(270deg, rgba(20,18,16,.32), rgba(20,18,16,0));
    pointer-events: none;
}
.letter {
    position: relative; isolation: isolate;
    padding: 2.1rem clamp(1.25rem, 3.5vw, 2.4rem) 2.2rem;
    filter: drop-shadow(0 2px 5px rgba(42,40,38,.2));
}
.letter::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--grain), var(--letter);
    -webkit-mask: var(--mask-bottom); mask: var(--mask-bottom);
}
.clip {
    position: absolute; top: -14px; inset-inline-end: 2.2rem; width: 26px; height: 58px;
    border: 3px solid var(--brass); border-radius: 13px 13px 13px 13px;
    border-bottom-color: transparent; transform: rotate(4deg);
    filter: drop-shadow(1px 2px 1px rgba(42,40,38,.28));
}
.clip::after {
    content: ""; position: absolute; inset: 7px 4px auto; height: 34px;
    border: 3px solid var(--brass); border-top: 0; border-radius: 0 0 9px 9px;
}
.letter-title {
    font-family: var(--display); font-size: clamp(1.4rem, 3.4vw, 1.85rem);
    margin: 0 0 1rem; color: var(--ink);
}
.letter-body p { font-size: 1.03rem; line-height: 2.05; color: #3b3732; margin: 0 0 1rem; }
.book-facts { margin: 1.4rem 0 0; display: grid; gap: .1rem; border-top: 1px solid var(--rule); padding-top: 1rem; }
.book-facts div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: .3rem 0; }
.book-facts dt { color: var(--ink-3); font-size: .86rem; }
.book-facts dd { margin: 0; font-family: var(--display); font-weight: 600; color: var(--ink); }

@media (min-width: 900px) {
    .book-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 4rem; }
    .book-object { width: min(100%, 340px); }
}

/* ---------- البطاقات بلا صورة: قصاصة جريدة ---------- */
.cover-empty {
    color: var(--ink);
    background: var(--grain), #efe8d9;
    border-top: 4px solid var(--plate, var(--gold));
}
.cover-empty::before { border-color: rgba(42,40,38,.14); }
.ce-rule { background: var(--plate, var(--gold)); opacity: .55; }
.ce-mark { color: var(--plate, var(--gold)); }
.ce-title { font-family: var(--display); font-weight: 700; color: var(--ink); }
.ce-foot  { color: var(--ink-3); }
.card-cover { background: #efe8d9; }

/* ---------- مَن هو ---------- */
.bio-sec { padding-bottom: clamp(2.6rem, 6vw, 4.2rem); }
.bio-grid { display: grid; gap: 2.4rem; align-items: start; }
.bio-sheet {
    position: relative; isolation: isolate;
    padding: 2rem clamp(1.25rem, 3.5vw, 2.4rem) 2.2rem;
    filter: drop-shadow(0 2px 5px rgba(42,40,38,.18));
}
.bio-sheet::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--grain), var(--letter);
    -webkit-mask: var(--mask-all); mask: var(--mask-all);
}
.bio-lead { font-family: var(--display); font-weight: 500; font-size: 1.12rem; line-height: 1.9; color: var(--ink); margin: 0 0 1rem; }
.bio-body p { color: var(--ink-2); line-height: 2; }

/* بطاقة فهرسة / an index card for the facts */
.index-card {
    margin: 1.6rem 0 0; padding: .5rem 1.1rem .3rem;
    background: #fbf8f1; border-top: 3px solid var(--gold);
    box-shadow: 0 1px 2px rgba(42,40,38,.12);
}
.index-card div { display: grid; grid-template-columns: 6.5rem 1fr; gap: .8rem; padding: .45rem 0; border-bottom: 1px solid rgba(36,77,88,.14); }
.index-card div:last-child { border-bottom: 0; }
.index-card dt { color: var(--ink-3); font-size: .84rem; }
.index-card dd { margin: 0; color: var(--ink); font-size: .95rem; }

/* صور قديمة مثبّتة بشريط لاصق / vintage prints held by tape */
.prints { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 1.2rem 1rem; padding: .6rem 0; }
.print {
    position: relative; margin: 0;
    filter: drop-shadow(0 2px 4px rgba(42,40,38,.25));
}
.print img { display: block; width: 100%; height: auto; filter: sepia(.25) contrast(1.02); }
.print::after {
    content: ""; position: absolute; top: -10px; left: 50%; width: 58px; height: 19px; margin-left: -29px;
    background: rgba(238, 230, 212, .8);
    -webkit-mask: var(--mask-ends); mask: var(--mask-ends);
    transform: rotate(4deg);
}
.print-palm { width: 34%; max-width: 190px; transform: rotate(-3deg); }
.print-dhow { width: 56%; max-width: 330px; transform: rotate(2deg); }
.print-fort { width: 50%; max-width: 290px; transform: rotate(-1.5deg); }

.archive-note {
    max-width: 62ch; margin: 2.6rem auto 0; text-align: center;
    color: var(--ink-2); font-size: .98rem; line-height: 1.95;
}
.archive-note::before {
    content: ""; display: block; width: 46px; height: 2px; margin: 0 auto 1rem; background: var(--gold);
}

@media (min-width: 900px) {
    .bio-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 3.4rem; }
    .prints { flex-direction: column; align-items: center; padding-top: 1.5rem; }
    .print-palm, .print-dhow, .print-fort { width: 78%; }
    .print-palm { width: 52%; }
}

/* ---------- الحسابات: بطاقات معلّقة صغيرة ---------- */
.socials-sec { background: var(--grain), var(--paper); }
/* صفّ أيقونات هادئ / a quiet row of icons */
.socials-sec .socials {
    margin: 0; max-width: none;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 1rem .5rem;
}
.socials-sec .social { background: none; border: 0; box-shadow: none; padding: .4rem 0; gap: .35rem; min-height: 44px; }
.socials-sec .social:hover { background: none; transform: none; box-shadow: none; }
.socials-sec .social-name { font-size: .84rem; font-weight: 600; }
.socials-sec .social-handle { display: none; }

/* ---------- التذييل بحافّة ممزّقة / the footer with a torn top edge ---------- */
.site-footer { position: relative; }
.site-footer::before {
    content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 14px; will-change: transform;
    background: var(--night);
    -webkit-mask: var(--tear-t) top / 160px 14px repeat-x; mask: var(--tear-t) top / 160px 14px repeat-x;
}

/* ---------- الصفحات الداخلية: رأس من ورق الكرافت، والعنوان على شريط ---------- */
.page-banner {
    position: relative;
    background: var(--grain), radial-gradient(120% 140% at 85% 0%, #d8c9b0 0%, var(--kraft) 70%);
    border-top: 0; border-bottom: 0;
    padding: clamp(1.8rem, 4.5vw, 3.2rem) 0 clamp(2.4rem, 5vw, 3.4rem);
}
/* حافّة سفلية ممزّقة تكشف ورق الصفحة / a torn lower edge revealing the page paper */
.page-banner::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 14px; will-change: transform;
    background: var(--paper);
    -webkit-mask: var(--tear-t) top / 160px 14px repeat-x; mask: var(--tear-t) top / 160px 14px repeat-x;
}
.page-banner h1 {
    position: relative; isolation: isolate; display: inline-block;
    margin: .5rem 0 .9rem; padding: .08em .6em .16em;
    font-size: clamp(1.9rem, 6vw, 3rem); letter-spacing: 0;
    transform: rotate(-1deg);
    filter: drop-shadow(0 2px 2px rgba(42,40,38,.2));
}
.page-banner h1::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--grain), linear-gradient(180deg, #f3ecdc, var(--tape));
    -webkit-mask: var(--mask-ends); mask: var(--mask-ends);
}
.page-banner p { color: #3a3632; }

.crumbs, .crumbs a { color: #3a3632; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.crumbs span { color: rgba(42,40,38,.45); }
.search-hero { text-align: center; }
.search-hero h1 { transform: rotate(.8deg); }

/* المرشّحات: بطاقات صغيرة كبطاقة الغلاف المعلّقة / filters as small tags like the cover's hanging tag */
.filters, .filter-row { justify-content: flex-start; }
.filters { border-bottom: 0; padding-top: 2rem; }
.chip {
    border: 0; border-radius: 0;
    background: var(--grain), var(--letter);
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
    padding: .45rem 1rem; padding-inline-start: 1.35rem;
    min-height: 44px;
    box-shadow: none;
}
.chip:focus-visible { outline: 2px solid currentColor; outline-offset: -5px; }
.chip .n { opacity: 1; }
html[dir="rtl"] .chip { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); }
.chip:hover { background: var(--grain), #fbf7ee; color: var(--oxblood); }
.chip.is-active { background: var(--grain), var(--oxblood); color: #f4eee2; }

/* لون الباب يرافق الزائر إلى صفحته وموادّه، كما في بطاقته على الصفحة الرئيسية
   The door's colour follows the visitor into its section and item pages, as on its home card */
.has-spine .page-banner h1 { color: #f5efe3; }
.has-spine .page-banner h1::before { background: var(--grain), var(--spine); }
.has-spine .chip.is-active { background: var(--grain), var(--spine); }
.has-spine .chip:hover { color: var(--spine); }
.has-spine .detail .meta-table { border-top-color: var(--spine); }

/* الأغلفة في القوائم: صور مطبوعة بشريط لاصق / covers in lists as prints held with tape */
.card-cover { border: 0; }


/* القائمة (سجلّ) على ورقة / the ledger list on a sheet */
.ledger {
    border-top: 0; padding: .4rem clamp(.6rem, 2vw, 1.4rem);
    background: var(--grain), var(--letter);
    box-shadow: 0 1px 2px rgba(42,40,38,.1), 0 6px 18px rgba(42,40,38,.1);
}
.ledger-row:hover { background: #fbf7ee; }

/* ---------- صفحة المادة: ورقة مثبّتة بمشبك، وبيانات على بطاقة فهرسة ---------- */
.detail-grid > div:last-child {
    position: relative; isolation: isolate;
    padding: clamp(1.4rem, 4vw, 2.4rem) clamp(1.1rem, 3.5vw, 2.4rem) clamp(1.8rem, 4vw, 2.6rem);
    filter: drop-shadow(0 2px 5px rgba(42,40,38,.16));
}
.detail-grid > div:last-child::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--grain), var(--letter);
    -webkit-mask: var(--mask-bottom); mask: var(--mask-bottom);
}
.detail h1 { font-size: clamp(1.5rem, 4.4vw, 2.3rem); line-height: 1.45; }
.detail .meta-table {
    border-top: 3px solid var(--gold);
    background: #fbf8f1;
    box-shadow: 0 1px 2px rgba(42,40,38,.1);
}
.detail .meta-table th, .detail .meta-table td { padding: .6rem .9rem; border-bottom: 1px solid rgba(36,77,88,.14); }
.detail .meta-table tr:last-child th, .detail .meta-table tr:last-child td { border-bottom: 0; }
.detail-cover {
    position: relative; border: 0; overflow: visible;
    background: #f6f1e6; padding: 8px 8px 22px;
    box-shadow: 0 1px 2px rgba(42,40,38,.15), 0 8px 20px rgba(42,40,38,.2);
    transform: rotate(-1.2deg);
}
.detail-cover::before {
    content: ""; position: absolute; z-index: 2; top: -11px; left: 50%; width: 70px; height: 20px; margin-left: -35px;
    background: rgba(238, 230, 212, .85);
    -webkit-mask: var(--mask-ends); mask: var(--mask-ends);
    transform: rotate(3deg);
}
.related { border-top: 0; }
.related h2 { font-family: var(--display); }


/* ---------- جولة المراجعة / review round ---------- */

/* زوايا الورق: تقريب غير منتظم يُذهب الألسنة المربّعة عند الزوايا
   Irregular rounding removes the square tabs the edge strips leave at the corners */
.scrap::before, .scrap::after, .bh-frame::before,
.bh-frame > .hero-show, .bh-frame > .bh-still,
.scrap-card::before, .sc-paper, .bio-sheet::before {
    clip-path: inset(0 round 20px 14px 22px 16px);
}

/* قصاصات الأبواب أهدأ، تميل إلى فحم الغلاف / quieter section scraps, pulled toward the cover's charcoal */
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .sc-paper { background: var(--grain), color-mix(in srgb, var(--spine, var(--scrap-char)) 74%, #4d4a46); }
}

/* العنوان والمُعِدّة / subtitle and the editor's credit */
.bh-by { display: block; margin-top: .35rem; font-size: .88em; font-weight: 500; color: #4a443d; }

/* أحدث ما أُضيف: عناوين صحف لا بطاقات مكرّرة / latest additions as headlines, not repeated placeholders */
.latest-sec .card:has(.cover-empty) .card-cover { display: none; }
.latest-sec .card:has(.cover-empty) { border-top: 2px solid var(--ink); padding-top: .8rem; }
.latest-sec .items { gap: 1.6rem 1.4rem; }
.card:has(.cover-empty) .ce-title { display: none; }

/* نصّ الغلاف الخلفي: اقتباس منسوب، والتتمة عند الطلب / the back-cover text: a credited quote, the rest on demand */
blockquote.letter-body { margin: 0; }
.letter-src { margin: .6rem 0 0; font-size: .88rem; color: var(--ink-3); }
.more-text summary {
    cursor: pointer; display: inline-flex; align-items: center; min-height: 44px;
    font-family: var(--display); font-weight: 600; color: var(--oxblood);
}
.more-text[open] summary { margin-bottom: .4rem; }

/* نقاط الصور: هدف لمس 44px ودائرة واضحة فوق أي صورة / slideshow dots: 44px targets, visible over any photo */
.bh-frame .show-dots { bottom: .5rem; gap: 0; }
.bh-frame .show-dots .dot {
    width: 44px; height: 44px; border: 0; background: none; border-radius: 0;
    display: grid; place-items: center; transform: none;
}
.bh-frame .show-dots .dot::before {
    content: ""; width: 10px; height: 10px; border-radius: 50%;
    background: rgba(246,241,230,.92); box-shadow: 0 0 0 1.5px rgba(42,40,38,.7);
    transition: transform .2s ease;
}
.bh-frame .show-dots .dot:hover, .bh-frame .show-dots .dot.is-active { background: none; transform: none; }
.bh-frame .show-dots .dot.is-active::before { background: var(--gold-soft); transform: scale(1.35); }
.bh-frame .show-dots .dot:focus-visible { outline: none; }
.bh-frame .show-dots .dot:focus-visible::before { box-shadow: 0 0 0 3px #f6f1e6, 0 0 0 5px var(--ink); }
.show-pause {
    position: absolute; z-index: 6; top: .8rem; inset-inline-start: .8rem;
    width: 44px; height: 44px; display: grid; place-items: center;
    border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(42,40,38,.55); color: #f6f1e6;
}
.show-pause .i-play { display: none; }
.show-pause.is-paused .i-play { display: inline; }
.show-pause.is-paused .i-pause { display: none; }
.show-pause:focus-visible { outline: none; box-shadow: 0 0 0 3px #f6f1e6, 0 0 0 5px var(--ink); }

/* فتات الخبز: الصفحة الحالية بحبر كامل / breadcrumbs: current page in full ink */
.crumbs span:not([aria-hidden]) { color: var(--ink); }
.crumbs a { display: inline-block; padding-block: .6rem; }

/* الروابط الداخلية تهبط تحت الترويسة الثابتة / in-page anchors land below the sticky header */
html { scroll-padding-top: 5rem; }
@media (min-width: 861px) { html { scroll-padding-top: 9.5rem; } }

/* أهداف لمس مريحة / comfortable touch targets */
.burger { width: 44px; height: 44px; }
.pager a, .pager span { min-width: 44px; height: 44px; }
#sort { min-height: 44px; }
.footer-links a { display: inline-block; padding-block: .55rem; }
.footer-brand .fb-book { margin-top: .6rem; color: var(--on-night-2); }

/* بطاقات الهاتف: عناوين أقصر / phone cards: shorter titles */
@media (max-width: 640px) {
    .card-title { font-size: 1rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .card-excerpt { display: none; }
    .filters:not(.filters-stack), .filter-row {
        flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
        margin-inline: -.9rem; padding-inline: .9rem;
    }
    .filters:not(.filters-stack)::-webkit-scrollbar, .filter-row::-webkit-scrollbar { display: none; }
    .chip { flex: none; }
}
.filters-stack { align-items: stretch; }

/* صفحة البحث: مسافة أقل تحت الرأس / search: less gap under the banner */
.search-hero + .sec { padding-top: 1.2rem; }
.search-hero + .sec > .filters:first-child { padding-top: 0; }

/* متصفحات قديمة بلا aspect-ratio: ارتفاع للكولاج / old browsers without aspect-ratio */
@supports not (aspect-ratio: 1) {
    .bh-collage::before { content: ""; display: block; padding-top: 112%; }
}

/* زرّ القائمة فوق الدرج المفتوح ليبقى زرّ الإغلاق / the burger stays above the open drawer as its close button */
.burger { z-index: 3; }
.nav-search input:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; }

/* مؤشّر فتح «تتمة النص» / an open/closed cue on «تتمة النص» */
.more-text summary { list-style: none; gap: .5rem; }
.more-text summary::-webkit-details-marker { display: none; }
.more-text summary::after {
    content: ""; width: .5em; height: .5em;
    border-inline-end: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px); transition: transform .2s ease;
}

/* الترويسة تنكمش أثناء التمرير، فهامش إضافي للأقسام المقصودة / the header shrinks while scrolling: extra room for anchor targets */
#abwab, #about-book { scroll-margin-top: 1.5rem; }

/* الجولة الأخيرة / final round */
.show-pause[hidden] { display: none; }
.more-text[open] summary::after { transform: rotate(-45deg) translateY(-2px); }
@media (max-width: 640px) { .filter-row + .filter-row { width: auto; } }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem 1.4rem; }
.footer-bottom .sep { display: none; }

/* صانعو الموقع / the site's makers — The Spark Media */
.made-by {
    display: flex; justify-content: center;
    margin-top: 1.3rem; padding-top: 1.1rem;
    border-top: 1px solid rgba(201, 188, 166, .16);
}
.made-by a {
    display: inline-flex; align-items: center; gap: .75rem; min-height: 44px;
    color: var(--on-night-3); font-size: .8rem;
}
.made-by img { width: auto; height: 46px; opacity: .92; transition: opacity .2s ease; }
.made-by a:hover { color: var(--on-night-2); }
.made-by a:hover img { opacity: 1; }


/* =========================================================================
   18. أثر على الخريطة — خريطة مطبوعة مثبّتة على ورق الكرافت، وبجانبها ورقة رسالة
   تعرض الدولة المختارة. ألوان الدول من صدأ «الرمل»، والاختيار بلون الباب.
   The map section: a printed map pinned on the kraft page, with a letter-paper
   panel for the chosen country. Countries take the cover's rust; the choice
   takes the section colour (--spine).
   ========================================================================= */
.atlas-sec { padding-block: 2.2rem clamp(3rem, 6vw, 4.5rem); }
.atlas { display: grid; gap: 1.6rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.atlas-main { order: -1; min-width: 0; }            /* على الهاتف: الخريطة، ثم اللوحة، ثم الأرقام / phone: map, panel, figures */
.atlas-stats { order: 1; }
@media (min-width: 960px) {
    .atlas { grid-template-columns: 330px minmax(0, 1fr); grid-template-areas: "panel main" "panel stats"; row-gap: 1.4rem; }
    .atlas-panel { grid-area: panel; position: sticky; top: 10.5rem; max-height: calc(100vh - 12rem); overflow-y: auto; }
    .atlas-main { grid-area: main; }
    .atlas-stats { grid-area: stats; }
}

/* الخريطة / the map */
.atlas-map { position: relative; isolation: isolate; padding: 18px 18px 14px; filter: drop-shadow(0 2px 3px rgba(42,40,38,.2)); }
.atlas-map::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--grain), radial-gradient(130% 120% at 50% 40%, #f8f4ea 0%, var(--letter) 60%, #ebe1cd 100%);
    -webkit-mask: var(--mask-all); mask: var(--mask-all);
}
.atlas-svg { display: block; width: 100%; height: auto; -webkit-user-select: none; user-select: none; }
.atlas.is-zoomed .atlas-svg { cursor: grab; touch-action: none; }
.atlas-svg.is-dragging { cursor: grabbing; }
.atlas-grat { fill: none; stroke: #dccfb7; stroke-width: .6; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.atlas-land path { fill: #e3d8c2; stroke: #f8f4ea; stroke-width: .7; vector-effect: non-scaling-stroke; transition: fill .2s ease; }
.atlas-land .is-home { fill: var(--kraft); }
.atlas-land .l0, .atlas-legend .l0 { fill: #ebdcc0; background: #ebdcc0; }   /* صور فقط / photos only */
.atlas-land .l1, .atlas-legend .l1 { fill: #e2cba5; background: #e2cba5; }
.atlas-land .l2, .atlas-legend .l2 { fill: #cfac7c; background: #cfac7c; }
.atlas-land .l3, .atlas-legend .l3 { fill: #b38552; background: #b38552; }
.atlas-land .l4, .atlas-legend .l4 { fill: #8c5a2b; background: #8c5a2b; }
.atlas-land .has { cursor: pointer; }
.atlas-land .has:hover { fill: #6f4520; }
.atlas-land .is-sel, .atlas-land .is-sel:hover { fill: var(--spine, var(--oxblood)); }

.atlas-lines path { fill: none; stroke: var(--gold); stroke-width: 1; stroke-opacity: .4; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.atlas-lines .is-sel { stroke: var(--spine, var(--oxblood)); stroke-opacity: .95; stroke-width: 1.8; stroke-dasharray: none; }

.atlas-svg text { font-family: var(--display); text-anchor: middle; paint-order: stroke; stroke-linejoin: round; }
.atlas-hub circle { fill: var(--gold); }
.atlas-hub .hub-ring { fill: rgba(118,71,28,.16); stroke: var(--gold); stroke-width: 1; }
.atlas-hub .hub-name { font-size: 12px; font-weight: 700; fill: var(--gold); stroke: var(--letter); stroke-width: 3.5px; }
/* الشارقة تفتح لوحة الإمارات / Sharjah opens the UAE's panel */
.atlas-hub[data-c] { cursor: pointer; }
.atlas-hub[data-c] .hub-ring { transition: fill .15s ease, stroke-width .15s ease; }
.atlas-hub[data-c]:hover .hub-ring, .atlas-hub.is-sel .hub-ring, .atlas-hub:focus-visible .hub-ring { fill: rgba(118,71,28,.34); stroke-width: 2; }
.atlas-hub.is-sel circle:not(.hub-ring) { fill: var(--spine, var(--oxblood)); }
.atlas-hub:focus { outline: none; }

.atlas-pin { cursor: pointer; }
.atlas-pin .pin-bg { fill: var(--night); stroke: var(--letter); stroke-width: 2; transition: fill .15s ease; }
/* دبوس العلم: العلم في دائرة على حلقة ورق تأخذ لون الباب عند الاختيار
   flag pins: the flag in a circle on a paper ring that takes the section colour when chosen */
.atlas-pin.has-flag .pin-bg { fill: var(--letter); stroke: none; filter: drop-shadow(0 1px 1.5px rgba(42,40,38,.45)); }
.atlas-pin .pin-ring { fill: none; stroke: rgba(42,40,38,.3); stroke-width: .8; }
.atlas-pin:hover .pin-bg, .atlas-pin.is-sel .pin-bg, .atlas-pin:focus-visible .pin-bg { fill: var(--spine, var(--oxblood)); }
.atlas-pin text { font-size: 11px; font-weight: 700; fill: #f5efe3; }
.atlas-pin .pin-name { font-size: 12.5px; fill: var(--ink); stroke: var(--letter); stroke-width: 4px; opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.atlas-pin:hover .pin-name, .atlas-pin.is-sel .pin-name, .atlas-pin:focus-visible .pin-name { opacity: 1; }
.atlas-pin:focus { outline: none; }
.atlas-pin:focus-visible .pin-bg { stroke: var(--ink); stroke-width: 2; }
.atlas-pins .is-sel { isolation: isolate; }
.pin-lead { stroke: var(--night); stroke-width: 1; stroke-opacity: .5; vector-effect: non-scaling-stroke; }

.atlas-zoom { position: absolute; top: 28px; inset-inline-end: 28px; display: flex; flex-direction: column; gap: 4px; }
.atlas-zoom button {
    width: 34px; height: 34px; display: grid; place-items: center; padding: 0;
    font: 600 1.15rem/1 var(--display); color: var(--ink); cursor: pointer;
    background: var(--grain), #fbf7ee; border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.atlas-zoom button:hover { color: var(--spine, var(--oxblood)); border-color: var(--gold); }
.atlas-zoom button:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; }

.atlas-legend { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; padding: .75rem .3rem 0; font-size: .78rem; color: var(--ink-3); }
.atlas-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.atlas-legend .sw { display: inline-block; width: 15px; height: 10px; border-radius: 2px; }
.atlas-legend .sw.hub { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(118,71,28,.2); }

/* الأرقام تحت الخريطة: قصاصات صغيرة / the figures under the map, as small scraps */
.atlas-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: .7rem; margin: 0; }
.atlas-stats div {
    display: flex; flex-direction: column-reverse; align-items: center; gap: .1rem;
    padding: .8rem .5rem .7rem; text-align: center;
    background: var(--grain), var(--letter); box-shadow: 0 1px 2px rgba(42,40,38,.12);
}
.atlas-stats div:nth-child(odd) { transform: rotate(-.6deg); }
.atlas-stats div:nth-child(even) { transform: rotate(.4deg); }
.atlas-stats dd { margin: 0; font-family: var(--display); font-size: 1.7rem; font-weight: 700; line-height: 1.2; color: var(--ink); }
.atlas-stats dt { font-size: .8rem; color: var(--ink-3); }

/* اللوحة الجانبية: ورقة رسالة / the side panel, a sheet of letter paper */
.atlas-panel {
    min-width: 0; padding: 1.3rem 1.2rem 1rem;
    background: var(--grain), var(--letter);
    box-shadow: 0 1px 2px rgba(42,40,38,.1), 0 6px 18px rgba(42,40,38,.1);
    transition: opacity .15s ease;
}
.atlas.is-loading .atlas-panel { opacity: .5; }
.ap-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
/* اسم الدولة على شريط بلون الباب، كعنوان الصفحة / the country name on a tape in the section colour, like the page title */
.ap-name {
    position: relative; isolation: isolate; display: inline-block; margin: .2rem 0 0;
    padding: .06em .55em .14em; transform: rotate(-.8deg);
    font-family: var(--display); font-size: 1.4rem; line-height: 1.35; color: #f5efe3;
}
.ap-name::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--grain), var(--spine, var(--oxblood));
    -webkit-mask: var(--mask-ends); mask: var(--mask-ends);
}
.ap-count { display: block; margin-top: .55rem; font-size: .84rem; color: var(--ink-3); }
.ap-title { display: flex; align-items: center; gap: .65rem; }
.ap-flag { flex: none; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fbf7ee, 0 1px 3px rgba(42,40,38,.35); }
.ap-cflag { width: 17px; height: 17px; border-radius: 50%; object-fit: cover; vertical-align: -3px; margin-inline-end: .45rem; box-shadow: 0 0 0 1px rgba(42,40,38,.18); }
.ap-close {
    flex: none; width: 34px; height: 34px; display: grid; place-items: center;
    font-size: 1.35rem; line-height: 1; color: var(--ink-3); border: 1px solid var(--rule); border-radius: 50%;
}
.ap-close:hover { color: var(--ink); border-color: var(--gold); }
.ap-lead { margin: 1rem 0 1rem; font-size: .9rem; line-height: 1.85; color: var(--ink-2); }

.ap-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .7rem; }
.ap-tabs .chip { font: inherit; font-size: .84rem; min-height: 36px; padding: .25rem .8rem; padding-inline-start: 1.15rem; color: var(--ink-2); cursor: pointer; }
.ap-tabs .chip.is-active { color: #f4eee2; }
.ap-years { display: flex; gap: .2rem; overflow-x: auto; padding: .45rem 0; margin-bottom: .3rem; border-block: 1px dashed var(--rule); scrollbar-width: thin; }
.ap-years button { flex: none; padding: .4rem .45rem; font: 500 .78rem/1 var(--display); color: var(--ink-3); background: none; border: 0; border-radius: 2px; cursor: pointer; }
.ap-years button:hover { color: var(--ink); background: #efe6d4; }
.ap-years button.is-active { color: #f4eee2; background: var(--spine, var(--oxblood)); }

.ap-list { list-style: none; margin: 0; padding: 0; }
.ap-list a {
    display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: .8rem; align-items: center;
    padding: .65rem .2rem; border-bottom: 1px solid var(--rule-soft); color: var(--ink);
}
.ap-list a:hover { background: #fbf7ee; }
.ap-list a:hover .ap-t { color: var(--spine, var(--oxblood)); }
.ap-thumb { display: block; width: 62px; height: 48px; object-fit: cover; background: #efe8d9; box-shadow: 0 1px 2px rgba(42,40,38,.15); }
.ap-plate { display: grid; place-items: center; color: rgba(245,239,227,.85); background: var(--grain), var(--plate, var(--scrap-char)); }
.ap-text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.ap-t {
    font-family: var(--display); font-weight: 600; font-size: .9rem; line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ap-m { font-size: .76rem; line-height: 1.5; color: var(--ink-3); }
.ap-none { margin: 1.2rem 0; font-size: .86rem; color: var(--ink-3); text-align: center; }
/* القائمة الطويلة: أول 40، والباقي بزر / a long list: the first 40, the rest behind a button */
.ap-list.is-cut li:nth-child(n+41) { display: none; }
.ap-all {
    display: block; width: 100%; margin: .8rem 0 0; padding: .6rem; cursor: pointer;
    font: 600 .86rem/1.4 var(--display); color: var(--ink-2);
    background: none; border: 1px dashed var(--rule); border-radius: var(--radius);
}
.ap-all:hover { color: var(--spine, var(--oxblood)); border-color: var(--gold); }
.ap-all .n { font-weight: 400; color: var(--ink-3); }

/* نصوصه عن الدولة: صفحة مطوية الحافة، والعنوان، وتُفتح صفحةً صفحة في عارض الصور
   his texts on the country: a page thumbnail and the title, opening page by page in the viewer */
.ap-texts { margin: 0 0 1.3rem; }
.ap-sub { display: flex; align-items: baseline; gap: .45rem; margin: 0 0 .35rem; font: 700 1rem/1.4 var(--display); color: var(--ink); }
.ap-sub .n { font-size: .78rem; font-weight: 500; color: var(--ink-3); }
.ap-tlist { list-style: none; margin: 0; padding: 0; }
.ap-tlist a:not([hidden]) {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: .8rem; align-items: center;
    padding: .55rem .2rem; border-bottom: 1px solid var(--rule-soft); color: var(--ink);
}
.ap-tlist a:hover { background: #fbf7ee; }
.ap-tlist a:hover .ap-t { color: var(--spine, var(--oxblood)); }
.ap-tpage {
    display: block; width: 44px; height: 56px; overflow: hidden; background: #fff;
    box-shadow: 0 1px 2px rgba(42,40,38,.28), 3px 3px 0 -1px #fbf7ee, 3px 3px 0 0 rgba(42,40,38,.18);   /* صفحة ثانية خلفها / a second page behind */
}
.ap-tpage img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }

/* صورة الدولة: أحدث صورة من أخبارها / the country's photo: the newest from its news */
.ap-hero { position: relative; display: block; margin: 0 0 1rem; overflow: hidden; background: #efe8d9; box-shadow: 0 1px 3px rgba(42,40,38,.22); }
.ap-hero img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 30%; transition: transform .35s ease; }
.ap-hero:hover img { transform: scale(1.03); }
.ap-hero-cap {
    position: absolute; inset: auto 0 0; padding: 1.8rem .85rem .65rem;
    font: 600 .84rem/1.6 var(--display); color: #f5efe3;
    background: linear-gradient(rgba(30,28,26,0), rgba(30,28,26,.85));
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* صور رحلاته: صورة كبيرة، ثم شبكة، وكلها تُفتح في عارض الصور
   his trip photos: one large, then a grid, all opening in the viewer */
.ap-gallery { margin: 0 0 1.2rem; }
.ap-gallery .ap-hero { margin-bottom: 4px; }
.ap-hero-cap small { display: block; font: 400 .74rem/1.5 var(--sans); opacity: .85; }
.ap-gal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.ap-gal-grid a { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #efe8d9; }
.ap-gal-grid a[hidden] { display: none; }
.ap-gal-grid img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform .3s ease; }
.ap-gal-grid a:hover img { transform: scale(1.06); }
.ap-gal-grid a[data-more]::after {
    content: attr(data-more); position: absolute; inset: 0; display: grid; place-items: center;
    background: rgba(30,28,26,.55); color: #fff; font: 700 1.15rem var(--display);
}
.ap-gal-note { margin: .5rem 0 0; font-size: .74rem; color: var(--ink-3); }
.ap-gal-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* فهرس الدول: صورة صغيرة لكل دولة / the country index: a small photo per country */
.ap-cimg { display: block; width: 34px; height: 34px; overflow: hidden; border-radius: 50%; background: #e7dcc8; box-shadow: 0 0 0 2px #fbf7ee; }
.ap-cimg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ap-step { display: flex; justify-content: space-between; gap: .6rem; padding-top: .9rem; }
.ap-step a { display: inline-block; padding-block: .4rem; font-size: .85rem; color: var(--ink-2); }
.ap-step a:hover { color: var(--spine, var(--oxblood)); }

/* فهرس الدول: اسم وشريط بقدر المواد / the country index: a name and a bar sized by the material */
.ap-countries { list-style: none; margin: 0; padding: 0; }
.ap-countries a {
    display: grid; grid-template-columns: 34px minmax(0, 6.6rem) minmax(0, 1fr) 2.2rem; align-items: center; gap: .7rem;
    padding: .5rem .2rem; border-bottom: 1px solid var(--rule-soft); font-size: .92rem; color: var(--ink);
}
.ap-countries a:hover { background: #fbf7ee; color: var(--spine, var(--oxblood)); }
.ap-bar { position: relative; display: block; height: 6px; overflow: hidden; border-radius: 3px; background: #e7dcc8; }
.ap-bar::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: calc(var(--v) * 100%); background: var(--gold-soft); }
.ap-countries a:hover .ap-bar::after { background: var(--spine, var(--oxblood)); }
.ap-countries .n { font-family: var(--display); font-size: .85rem; color: var(--ink-3); text-align: end; }
.ap-countries .n .ico { vertical-align: -2px; }
/* الإمارات أول الفهرس: الوطن ونقطة الانطلاق / the UAE heads the index: home and the starting point */
.ap-countries .is-home a { background: rgba(118,71,28,.07); border-bottom: 1px dashed var(--gold); }
.ap-countries .is-home a:hover { background: #fbf7ee; }
.ap-countries .is-home .ap-cn { font-weight: 700; }
.ap-home { font-size: .74rem; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 959px) {
    .atlas-stats dd { font-size: 1.4rem; }
    .atlas-map { padding: 12px 10px 10px; }
    .atlas-zoom { top: 18px; inset-inline-end: 16px; }
    .atlas-panel { padding: 1.1rem 1rem .9rem; }
}

/* ---------- الأطلس في صدر الرئيسية: بطاقة بريدية / the atlas on the home hero, as a postcard ---------- */
.bh-atlas {
    position: relative; isolation: isolate; margin-top: 1.4rem;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; gap: .9rem;
    padding: .85rem .95rem; color: var(--ink);
    background: var(--grain), #efe5d1;
    border: 1px dashed rgba(118,71,28,.45);
    box-shadow: 0 1px 2px rgba(42,40,38,.15), 0 4px 10px rgba(42,40,38,.1);
    transform: rotate(.7deg); transition: transform .2s ease;
}
.bh-atlas:hover { color: var(--ink); transform: rotate(0) translateY(-2px); }
.bh-atlas:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 3px; }
.bh-atlas-title {
    position: relative; isolation: isolate; display: inline-block;
    padding: .03em .55em .12em; transform: rotate(-1.2deg);
    font-family: var(--display); font-weight: 700; font-size: 1.28rem; line-height: 1.4; color: #f5efe3;
}
.bh-atlas-title::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--grain), var(--spine, var(--oxblood));
    -webkit-mask: var(--mask-ends); mask: var(--mask-ends);
}
.bh-atlas-sub { display: block; margin-top: .55rem; font-size: .9rem; line-height: 1.6; color: var(--ink-2); }
.bh-atlas-go { display: block; margin-top: .15rem; font-family: var(--display); font-weight: 600; font-size: .86rem; color: var(--oxblood); }
.bh-atlas:hover .bh-atlas-go { text-decoration: underline; text-underline-offset: 3px; }
.bh-atlas-map { display: block; width: 100%; height: auto; }
.bh-atlas-map .mini-land { fill: #d8c9ad; }
.bh-atlas-map .mini-lines path { fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-opacity: .55; stroke-dasharray: 6 7; }
.bh-atlas-map .mini-dots circle { fill: var(--night); stroke: #efe5d1; stroke-width: 3; }
.bh-atlas-map .mini-hub { fill: var(--gold); stroke: #efe5d1; stroke-width: 4; }
.bh-atlas-title { white-space: nowrap; }
@media (max-width: 560px) {
    .bh-atlas { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
}

/* =========================================================================
   «افتح الكتاب»: نبذة الكتاب ككتاب مفتوح (_book-intro.php)
   The book's introduction as an open book: contents on the right page (kraft, like the cover),
   the chapter on the left (letter paper), a gutter between them, and a page turn between chapters.
   ========================================================================= */
.book-cover-btn {
    display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
    position: relative; color: inherit; font: inherit;
    transition: transform .25s ease;
}
.book-cover-btn:hover { transform: translateY(-4px) rotate(.6deg); }
.book-cover-btn:focus-visible { outline: 3px solid var(--oxblood); outline-offset: 6px; }
.book-cover-hint {
    position: absolute; left: -9%; bottom: 24%; rotate: -4deg;   /* a bookmark sticking out of the cover's open edge */
    isolation: isolate; padding: .35rem 1.1rem .45rem; white-space: nowrap;
    font-family: var(--display); font-weight: 700; font-size: .95rem; color: #f4eee2;
}
.book-cover-hint::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--grain), var(--oxblood);
    -webkit-mask: var(--mask-ends); mask: var(--mask-ends);
    box-shadow: 0 2px 6px rgba(42,40,38,.3);
}
.bo-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 1.3rem 0 .2rem; }
.bo-cta span { color: var(--ink-3); font-size: .92rem; max-width: 34ch; }

html:has(.book-open[open]) { overflow: hidden; }
.book-open {
    width: min(1080px, calc(100vw - 2rem)); max-width: none;
    max-height: calc(100dvh - 2rem); padding: 0; border: 0;
    background: none; color: var(--ink); overflow: visible;
}
.book-open::backdrop { background: rgba(31, 29, 27, .74); }
.bo-spread {
    display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    height: min(720px, calc(100dvh - 2rem));
    border-radius: 4px; overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,.18), 0 24px 60px rgba(0,0,0,.45);
}
/* الصفحة اليمنى: ورق الكرافت كالغلاف، والفهرس / right page: kraft like the cover, with the contents */
.bo-right {
    position: relative; display: flex; flex-direction: column; gap: .9rem;
    padding: 2.4rem 2rem 1.6rem;
    background: var(--grain), radial-gradient(120% 90% at 80% 0%, #d6c7ad 0%, var(--kraft) 60%, var(--kraft-dk) 100%);
    box-shadow: inset 18px 0 22px -14px rgba(42,40,38,.45);   /* the gutter, on the page's left edge */
    overflow-y: auto;
}
.bo-name { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.3; }
.bo-name .strip { transform: rotate(-1.2deg); filter: drop-shadow(0 2px 2px rgba(42,40,38,.2)); }
.bo-label { margin: 0; font-family: var(--display); font-weight: 600; color: var(--gold); letter-spacing: .02em; }
.bo-toc ol { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .15rem; }
.bo-toc button {
    width: 100%; min-height: 44px; display: flex; align-items: center; gap: .75rem;
    padding: .45rem .6rem; border: 0; border-radius: 3px; background: none; cursor: pointer;
    font: 600 1rem/1.5 var(--display); color: var(--ink-2); text-align: start;
    transition: background .2s ease, color .2s ease;
}
.bo-toc button:hover { background: rgba(244, 238, 226, .5); color: var(--ink); }
.bo-toc button[aria-current="true"] { background: var(--grain), var(--letter); color: var(--ink); box-shadow: 0 1px 3px rgba(42,40,38,.16); }
.bo-toc button:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 1px; }
.bo-toc-n {
    flex: none; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 50%;
    border: 1.5px solid currentColor; font-size: .82rem; color: var(--gold);
}
.bo-toc button[aria-current="true"] .bo-toc-n { background: var(--oxblood); border-color: var(--oxblood); color: #f4eee2; }
.bo-by { margin: auto 0 0; padding-top: 1rem; border-top: 1px solid rgba(42,40,38,.18); font-family: var(--display); font-weight: 500; color: var(--ink-2); }

/* الصفحة اليسرى: ورق الرسالة، والفصل / left page: letter paper, the chapter */
.bo-left {
    position: relative; display: flex; flex-direction: column; min-height: 0;
    background: var(--grain), linear-gradient(90deg, var(--letter) 0%, var(--letter) 94%, #e9e0cf 100%);
    box-shadow: inset -18px 0 22px -14px rgba(42,40,38,.35);
}
.bo-chapter {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 2.6rem clamp(1.4rem, 4vw, 3rem) 1.4rem;
    transform-origin: right center;
}
.bo-chapter:focus { outline: none; }
.bo-kicker { margin: 0 0 .3rem; font-family: var(--display); font-weight: 600; font-size: .9rem; color: var(--gold); }
.bo-h { margin: 0; font-family: var(--display); font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.4; color: var(--ink); }
.bo-h:focus { outline: none; }
.bo-sub { margin: .35rem 0 0; font-family: var(--display); font-weight: 500; font-size: 1.08rem; color: var(--oxblood); }
.bo-text { margin-top: 1.3rem; }
.bo-text p { margin: 0 0 1rem; font-size: 1.03rem; line-height: 2.05; color: #3b3732; }
.bo-text .bo-lead { font-size: 1.1rem; color: var(--ink); font-weight: 500; }
.bo-pull {
    margin: 1.4rem 0 .4rem !important; padding: .9rem 1.2rem;
    font-family: var(--display); font-weight: 600; font-size: 1.12rem !important; line-height: 1.95 !important; color: var(--ink) !important;
    border-inline-start: 4px solid; border-image: linear-gradient(180deg, #b48c58 0 50%, var(--oxblood) 50% 100%) 1;
    background: rgba(201, 183, 156, .22);
}
.bo-paths { list-style: none; counter-reset: path; margin: .4rem 0 0; padding: 0; display: grid; gap: .9rem; }
.bo-paths li {
    counter-increment: path; position: relative; padding-inline-start: 3rem;
    font-size: 1rem; line-height: 1.95; color: #3b3732;
}
.bo-paths li::before {
    content: counter(path); position: absolute; inset-inline-start: 0; top: .1rem;
    width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: 50%;
    font-family: var(--display); font-weight: 700; color: #f4eee2; background: var(--oxblood);
}
.bo-paths li:nth-child(even)::before { background: var(--gold); }
.bo-paths b { display: block; font-family: var(--display); font-size: 1.05rem; color: var(--ink); }
/* الأبعاد الثلاثة: أختام / the three dimensions as stamps */
.bo-three { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0 1.1rem; padding: 0; }
.bo-three li {
    padding: .45rem 1rem; border: 2px solid var(--oxblood); border-radius: 3px; rotate: -1.5deg;
    font-family: var(--display); font-weight: 700; color: var(--oxblood); background: rgba(36, 77, 88, .05);
}
.bo-three li:nth-child(2) { rotate: 1.2deg; border-color: var(--gold); color: var(--gold); background: rgba(118, 71, 28, .05); }
.bo-three li:nth-child(3) { rotate: -.6deg; border-color: var(--ink-2); color: var(--ink); }
/* الرمل والبحر: نصفان / sand and sea: two halves */
.bo-tide { display: grid; grid-template-columns: 1fr 1fr; margin: .4rem 0 1.4rem; border-radius: 4px; overflow: hidden; box-shadow: 0 2px 8px rgba(42,40,38,.18); }
.bo-tide p { margin: 0 !important; padding: 1.3rem 1.2rem 1.5rem; font-size: 1rem !important; line-height: 1.95 !important; }
.bo-tide b { display: block; margin-bottom: .3rem; font-family: var(--display); font-size: 1.6rem; line-height: 1.3; }
.bo-sand {
    color: #4a2c12 !important;
    background: var(--grain),
        repeating-radial-gradient(ellipse 140% 40% at 50% 115%, rgba(118,71,28,.10) 0 2px, transparent 2px 14px),
        linear-gradient(180deg, #ecdcbc 0%, #d9bd8c 100%);
}
.bo-sand b { color: #76471c; }
.bo-sea {
    color: #e6eef0 !important;
    background: var(--grain),
        repeating-linear-gradient(170deg, rgba(255,255,255,.07) 0 2px, transparent 2px 16px),
        linear-gradient(180deg, #2f6373 0%, #1d4350 100%);
}
.bo-sea b { color: #f4eee2; }

.bo-turn {
    flex: none; display: flex; align-items: center; justify-content: space-between; gap: .6rem;
    padding: .7rem clamp(1rem, 3vw, 2.4rem) .9rem; border-top: 1px solid var(--rule-soft);
}
.bo-turn button {
    min-height: 44px; padding: 0 1rem; border: 0; border-radius: 3px; background: none; cursor: pointer;
    font: 600 .98rem var(--display); color: var(--oxblood);
}
.bo-turn button:hover:not(:disabled) { background: rgba(36, 77, 88, .08); }
.bo-turn button:disabled { color: var(--ink-3); opacity: .45; cursor: default; }
.bo-turn button:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 1px; }
.bo-folio { font-size: .9rem; color: var(--ink-3); }
.bo-close {
    position: absolute; top: .6rem; left: .6rem; z-index: 2;
    width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(42,40,38,.08); color: var(--ink); font-size: 1.7rem; line-height: 1;
}
.bo-close:hover { background: rgba(42,40,38,.16); }
.bo-close:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; }
.book-open form { margin: 0; }

@media (prefers-reduced-motion: no-preference) {
    .book-open[open] .bo-spread { animation: bo-open .45s cubic-bezier(.2, .7, .2, 1) both; }
    .bo-chapter.is-turning      { animation: bo-turn .5s cubic-bezier(.2, .7, .2, 1) both; }
    .bo-chapter.is-turning-back { animation: bo-turn-back .5s cubic-bezier(.2, .7, .2, 1) both; transform-origin: left center; }
    .book-cover-hint { transition: rotate .25s ease; }
    .book-cover-btn:hover .book-cover-hint { rotate: 1deg; }
}
@keyframes bo-open      { from { opacity: 0; transform: scale(.94) rotate(-1deg); } to { opacity: 1; transform: none; } }
@keyframes bo-turn      { from { opacity: 0; transform: perspective(1400px) rotateY(-14deg) translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes bo-turn-back { from { opacity: 0; transform: perspective(1400px) rotateY(14deg) translateX(14px); } to { opacity: 1; transform: none; } }

/* الهاتف: صفحة واحدة، والفهرس شريط أفقي / phones: one page, the contents as a scrolling strip */
@media (max-width: 760px) {
    .book-open { width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; }
    .bo-spread { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 100dvh; border-radius: 0; }
    .bo-right { padding: 1rem 1rem .6rem; gap: .45rem; overflow: visible; box-shadow: inset 0 -12px 16px -12px rgba(42,40,38,.4); }
    .bo-name { font-size: 1.15rem; padding-inline-end: 3rem; }
    .bo-label { font-size: .9rem; }
    .bo-toc { margin-inline: -1rem; }
    .bo-toc ol { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding: .2rem 1rem .3rem; margin: 0; }
    .bo-toc ol::-webkit-scrollbar { display: none; }
    .bo-toc li { flex: none; }
    .bo-toc button { width: auto; white-space: nowrap; font-size: .92rem; padding: .35rem .7rem; background: rgba(244, 238, 226, .45); }
    .bo-toc-n { width: 1.55rem; height: 1.55rem; font-size: .75rem; }
    .bo-by { display: none; }
    .bo-left { box-shadow: none; background: var(--grain), var(--letter); }
    .bo-chapter { padding: 1.4rem 1.1rem 1rem; }
    .bo-tide { grid-template-columns: 1fr; }
    .bo-close { top: .5rem; left: .5rem; }
}
@media print { .book-open { display: none !important; } }

/* اسم الدولة فوق كل الأعلام (map.js يرسمه طبقةً أخيرة) / the country name above every flag (map.js draws it last) */
.has-tip .atlas-pin .pin-name { display: none; }
.atlas-tip { pointer-events: none; }
.atlas-tip .pin-name { font-size: 13px; font-weight: 700; fill: var(--ink); stroke: var(--letter); stroke-width: 5px; }

/* =========================================================================
   الأطلس: البحث، والمقاطع، ورحلاته ومشاركاته (10 أكتوبر)
   The atlas: search, videos, and his trips (10 Oct)
   ========================================================================= */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ap-search {
    display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem; padding: 0 .8rem;
    background: #fbf7ee; border: 1px solid var(--rule); border-radius: 3px; color: var(--ink-3);
}
.ap-search:focus-within { border-color: var(--spine, var(--oxblood)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--spine, var(--oxblood)) 20%, transparent); }
.ap-search input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: none; font: 400 .95rem var(--sans); color: var(--ink); outline: none; }
.ap-nores { margin: 0 0 1rem; color: var(--ink-3); font-size: .9rem; }
.is-searching .ap-all, .is-searching .ap-tabs, .is-searching .ap-years { display: none !important; }
.ap-gallery, .ap-videos, .ap-trips, .ap-texts { margin-bottom: 1.4rem; }
.ap-gallery > .ap-sub { margin-bottom: .5rem; }
.ap-gal-note a:last-child { white-space: nowrap; }
.ap-items > .ap-sub { margin-top: .4rem; }

/* المقاطع: صورة وزرّ تشغيل، وتُشغَّل في العارض / videos: a still and a play mark; they play in the viewer */
.ap-vgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem .6rem; }
.ap-video { display: block; color: inherit; text-decoration: none; }
.ap-video[hidden] { display: none; }
.ap-vthumb { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #2f2c29; box-shadow: 0 1px 3px rgba(42,40,38,.22); }
.ap-vthumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transition: transform .3s ease; }
.ap-video:hover .ap-vthumb img { transform: scale(1.04); }
.ap-play {
    position: absolute; inset: 50% auto auto 50%; translate: -50% -50%;
    width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%;
    background: rgba(31,29,27,.72); color: #f6f1e6; box-shadow: 0 0 0 2px rgba(246,241,230,.85);
    transition: background .2s ease, scale .2s ease;
}
.ap-play svg { translate: -1px 0; }
.ap-video:hover .ap-play, .ap-video:focus-visible .ap-play { background: var(--spine, var(--oxblood)); scale: 1.08; }
.ap-video:focus-visible { outline: 2px solid var(--spine, var(--oxblood)); outline-offset: 3px; }
.ap-vt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: .35rem; font: 600 .86rem/1.5 var(--display); color: var(--ink); }
.ap-video:hover .ap-vt { color: var(--spine, var(--oxblood)); }
.ap-video .ap-m { display: block; }

/* رحلاته ومشاركاته: خط زمني / his trips: a timeline */
.ap-triplist { list-style: none; margin: 0; padding: 0 .9rem 0 0; border-inline-start: 2px solid var(--rule); }
.ap-triplist li { position: relative; display: grid; gap: .1rem; padding: .45rem 0 .55rem; }
.ap-triplist li[hidden] { display: none; }
.ap-triplist li::before {
    content: ""; position: absolute; inset-inline-start: calc(-.9rem - 6px); top: .78rem;
    width: 10px; height: 10px; border-radius: 50%; background: var(--letter); border: 2px solid var(--spine, var(--gold));
}
.ap-tripdate { font: 600 .78rem/1.4 var(--display); color: var(--gold); }
.ap-tripbody { font-size: .88rem; line-height: 1.7; color: var(--ink-2); }
.ap-tripbody b { font-family: var(--display); color: var(--ink); margin-inline-end: .3rem; }
.ap-tripbody small { display: inline-block; margin-inline-start: .35rem; padding: 0 .45rem; border: 1px solid var(--rule); border-radius: 2px; font-size: .72rem; color: var(--ink-3); }

/* العارض يشغّل المقاطع / the viewer plays videos */
.lightbox-frame { display: block; width: min(960px, 92vw); aspect-ratio: 16 / 9; border: 0; background: #000; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.lightbox.is-tall .lightbox-frame { width: min(400px, 88vw); aspect-ratio: auto; height: min(760px, 78vh); }
.lightbox-frame[hidden], .lightbox img[hidden], .lightbox-link[hidden] { display: none; }
.lightbox-link { display: table; margin: .5rem auto 0; color: var(--gold-soft); font-size: .88rem; text-decoration: underline; text-underline-offset: 3px; }

/* ألبوم الصور: بحث ودولة / the album: search and country */
.album-find { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 1.4rem; padding-top: 1.6rem; }
.album-find .af-q { flex: 1 1 260px; }
.album-find input[type="search"], .album-find select {
    width: 100%; min-height: 46px; padding: 0 .9rem; border: 1px solid var(--rule); border-radius: 3px;
    background: #fbf7ee; font: 400 .95rem var(--sans); color: var(--ink);
}
.album-find .af-c { flex: 0 1 220px; }
.album-find input:focus-visible, .album-find select:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 1px; }
.album-find .af-clear { padding: .5rem .3rem; color: var(--oxblood); font-weight: 600; }
.chip.is-parent { box-shadow: inset 0 -2px 0 var(--spine, var(--oxblood)); }

/* =========================================================================
   «قالوا عنه»: الأسماء شرائط ورق كعناوين الغلاف، وكل اسم يفتح شهادته رسالةً (12 أكتوبر)
   Testimonies: the names are paper tapes like the cover's titles; each opens its letter (12 Oct)
   ========================================================================= */
.vo-hero {
    position: relative; isolation: isolate; overflow: hidden;
    padding: clamp(1.8rem, 4vw, 2.6rem) 0 clamp(2.6rem, 5vw, 3.6rem);
    background: var(--grain), radial-gradient(120% 130% at 85% 0%, #d9cbb1 0%, var(--kraft) 55%, var(--kraft-dk) 100%);
}
/* علامة اقتباس كبيرة خلف العنوان / a large quote mark behind the title */
.vo-hero::after {
    content: "”"; position: absolute; z-index: -1; top: -.12em; inset-inline-end: max(.5rem, calc(50% - 600px));
    font: 700 clamp(13rem, 30vw, 23rem)/1 var(--display); color: rgba(42, 40, 38, .08); pointer-events: none;
}
.vo-hero .crumbs a, .vo-hero .crumbs { color: #4d4841; }
.vo-hero .crumbs span { color: rgba(42, 40, 38, .35); }
.vo-kicker { margin: .4rem 0 0; font: 600 .95rem var(--display); color: var(--gold); letter-spacing: .03em; }
.vo-title { margin: .25rem 0 1rem; font: 700 clamp(2.3rem, 7vw, 4.1rem)/1.25 var(--display); }
.vo-title .strip { transform: rotate(-1.6deg); filter: drop-shadow(0 2px 2px rgba(42, 40, 38, .22)); padding-inline: .55em; }
.vo-lead { max-width: 54ch; margin: 0; font-size: 1.08rem; line-height: 1.95; color: #2f2c29; }
.vo-count { margin: 1rem 0 0; font: 500 .98rem var(--display); color: #3a3632; }
.vo-count b { color: var(--oxblood-dk); }

/* جدار الأسماء / the wall of names */
.vo-wall-sec { padding: clamp(2rem, 4.5vw, 3.2rem) 0 clamp(2.6rem, 5vw, 4rem); }
.vo-wall {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 1.15rem 1.1rem;
}
.vo-wall li { display: flex; }
.vo-tag {
    --r: -1deg;
    position: relative; isolation: isolate;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
    min-width: 10.5rem; max-width: 19rem; padding: .8rem 1.45rem .95rem; text-align: center;
    color: var(--ink); text-decoration: none;
    rotate: var(--r);
    filter: drop-shadow(0 1px 1.2px rgba(42, 40, 38, .24)) drop-shadow(0 4px 9px rgba(42, 40, 38, .08));
    transition: rotate .25s ease, translate .25s ease, filter .25s ease;
}
.vo-tag::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--grain), linear-gradient(180deg, #f7f1e4 0%, var(--tape) 100%);
    -webkit-mask: var(--mask-ends); mask: var(--mask-ends);
}
.vo-wall li:nth-child(3n+2) .vo-tag { --r: .9deg; }
.vo-wall li:nth-child(3n)   .vo-tag { --r: -.35deg; }
.vo-wall li:nth-child(4n)   .vo-tag { --r: 1.5deg; }
/* قصاصات المريمية والفحم كما في الغلاف / sage and charcoal scraps, as on the cover */
.vo-wall li:nth-child(7n+3) .vo-tag, .vo-wall li:nth-child(7n+6) .vo-tag { color: #f4eee2; }
.vo-wall li:nth-child(7n+3) .vo-tag::before { background: var(--grain), linear-gradient(180deg, #6f705a 0%, #616250 100%); }
.vo-wall li:nth-child(7n+6) .vo-tag::before { background: var(--grain), linear-gradient(180deg, #4f4c48 0%, #3f3c39 100%); }
.vo-wall li:nth-child(7n+3) .vo-rl, .vo-wall li:nth-child(7n+6) .vo-rl { color: #ece5d6; }
.vo-tag:hover, .vo-tag:focus-visible {
    rotate: 0deg; translate: 0 -3px;
    filter: drop-shadow(0 2px 2px rgba(42, 40, 38, .26)) drop-shadow(0 10px 18px rgba(42, 40, 38, .16));
}
.vo-tag:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 4px; }
.vo-nm { font: 700 1.1rem/1.45 var(--display); }
.vo-rl { max-width: 24ch; font-size: .8rem; line-height: 1.55; color: var(--ink-3); }

/* الرسائل: تحت الأسماء بلا JavaScript، وفي النافذة معه / the letters: under the names without JS, in the dialog with it */
.vo-texts { display: grid; gap: 2.6rem; max-width: var(--wrap-narrow); padding-bottom: 4rem; }
.vo-texts .vo-letter {
    padding: 2.6rem clamp(1.25rem, 4vw, 2.8rem) 2.6rem;
    filter: drop-shadow(0 2px 5px rgba(42, 40, 38, .2));
}
.vo-texts .vo-letter::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--grain), var(--letter);
    -webkit-mask: var(--mask-bottom); mask: var(--mask-bottom);
}
.vo-letter { position: relative; isolation: isolate; }
.vo-letter:focus { outline: none; }
.vo-h { margin: 0; font: 700 clamp(1.55rem, 3.6vw, 2.25rem)/1.35 var(--display); color: var(--ink); }
.vo-role { margin: .35rem 0 0; font: 500 1.02rem/1.6 var(--display); color: var(--oxblood); }
.vo-body { position: relative; margin-top: 2.1rem; }
.vo-body::before {
    content: "“"; position: absolute; top: -2.1rem; inset-inline-start: -.15rem; pointer-events: none;
    font: 700 5.5rem/1 var(--display); color: var(--gold); opacity: .25;
}
.vo-body p { margin: 0 0 1.05rem; font-size: 1.06rem; line-height: 2.1; color: #3b3732; }
.vo-body .vo-first { font-size: 1.13rem; color: var(--ink); }
.vo-body h3 { margin: 1.9rem 0 .5rem; font: 700 1.2rem/1.5 var(--display); color: var(--oxblood); }
.vo-break { height: auto; margin: 2.2rem 0; border: 0; text-align: center; }
.vo-break::before { content: "❖  ❖  ❖"; font-size: .85rem; letter-spacing: .5em; color: var(--gold); }
.vo-sign {
    margin: 2.2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--rule);
    text-align: end; font: 600 1.15rem var(--display); color: var(--ink-2);
}
.vo-sign::before { content: "— "; color: var(--gold); }

/* النافذة / the dialog */
.vo-reader {
    width: min(860px, calc(100vw - 2rem)); max-width: none; max-height: calc(100dvh - 2rem);
    padding: 0; border: 0; background: none; color: var(--ink); overflow: visible;
}
.vo-reader::backdrop { background: rgba(31, 29, 27, .74); }
.vo-reader form { margin: 0; }
.vo-sheet {
    position: relative; display: flex; flex-direction: column; height: min(800px, calc(100dvh - 2rem));
    border-radius: 4px; overflow: hidden;
    background: var(--grain), var(--letter);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .18), 0 24px 60px rgba(0, 0, 0, .45);
}
.vo-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 3.2rem clamp(1.3rem, 6vw, 4rem) 1.6rem; }
.vo-scroll .clip { top: -2.1rem; }
@media (prefers-reduced-motion: no-preference) {
    .vo-reader[open] .vo-sheet    { animation: bo-open .45s cubic-bezier(.2, .7, .2, 1) both; }
    .vo-letter.is-turning         { animation: bo-turn .5s cubic-bezier(.2, .7, .2, 1) both; transform-origin: right center; }
    .vo-letter.is-turning-back    { animation: bo-turn-back .5s cubic-bezier(.2, .7, .2, 1) both; transform-origin: left center; }
}
@media (max-width: 760px) {
    .vo-wall { gap: .9rem .7rem; }
    .vo-tag { min-width: 0; max-width: 100%; padding: .7rem 1.1rem .8rem; }
    .vo-nm { font-size: 1rem; }
    .vo-reader { width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; }
    .vo-sheet { height: 100dvh; border-radius: 0; }
    .vo-scroll { padding: 3.4rem 1.15rem 1rem; }
}
@media print { .vo-reader, .vo-wall-sec { display: none !important; } }

/* =========================================================================
   «شارك في بناء هذا الأرشيف»: الدعوة في الترويسة والرئيسية، وصفحة المشاركة (12 أكتوبر)
   «Help build this archive»: the invitation in the masthead and on the home page, and the form page (12 Oct)
   ========================================================================= */
/* في الترويسة، مقابل زرّ القائمة / in the masthead, opposite the menu button */
.masthead-cta {
    position: absolute; inset-inline-end: 0; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .4rem .95rem;
    border-radius: 3px; background: var(--grain), var(--oxblood); color: #f4eee2;
    font: 600 .9rem var(--display); text-decoration: none; white-space: nowrap;
    box-shadow: 0 1px 2px rgba(42, 40, 38, .2); transition: background .2s ease;
}
.masthead-cta:hover { background: var(--grain), var(--oxblood-dk); color: #fff; }
.masthead-cta:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 3px; }
.masthead-cta[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--gold-soft); }
.mc-short { display: none; }
@media (max-width: 1060px) { .mc-long { display: none; } .mc-short { display: inline; } }
@media (max-width: 400px) { .masthead-cta { padding: .4rem .7rem; } .masthead-cta svg { display: none; } }   /* the logo stays clear on 320px phones */

/* شريط الرئيسية / the home band */
.share-sec { border-top: 1px solid var(--rule); }
.share-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.share-in .sec-lead { margin-bottom: 0; }
.share-btns { display: flex; gap: .8rem; flex-wrap: wrap; }
.footer-brand .fb-share a { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 3px; }
.vo-invite { margin: 2.4rem 0 0; text-align: center; color: var(--ink-2); }
.vo-invite a { font-weight: 600; }

/* الصفحة / the page */
.ct-hero::after { content: none; }
.ct-hero .vo-title { margin-top: .6rem; font-size: clamp(1.9rem, 5.4vw, 3.3rem); }
.ct-hero .vo-title .strip { transform: rotate(-.9deg); }   /* a long title: less tilt, or its end climbs into the crumbs */
.ct-wrap { padding-block: clamp(2rem, 4vw, 3rem) 4.5rem; }
.ct-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.4rem, 3vw, 2.4rem); max-width: 980px; margin: 0 auto; }
.ct-option {
    position: relative; isolation: isolate; display: flex; flex-direction: column; gap: .55rem;
    padding: 2.4rem clamp(1.3rem, 3vw, 2.2rem) 2.6rem; color: var(--ink); text-decoration: none;
    rotate: -.8deg; filter: drop-shadow(0 2px 5px rgba(42, 40, 38, .2));
    transition: rotate .25s ease, translate .25s ease, filter .25s ease;
}
.ct-option:nth-child(2) { rotate: .7deg; }
.ct-option::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--grain), var(--letter); -webkit-mask: var(--mask-bottom); mask: var(--mask-bottom);
}
.ct-option:hover, .ct-option:focus-visible { rotate: 0deg; translate: 0 -4px; filter: drop-shadow(0 6px 14px rgba(42, 40, 38, .24)); }
.ct-option:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 4px; }
.ct-ico { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: rgba(36, 77, 88, .1); color: var(--oxblood); }
.ct-option b { font: 700 clamp(1.35rem, 2.6vw, 1.7rem)/1.4 var(--display); }
.ct-blurb { color: var(--ink-2); line-height: 1.9; }
.ct-go { margin-top: auto; padding-top: .6rem; font: 600 1rem var(--display); color: var(--oxblood); }

.ct-form, .ct-done { max-width: 780px; margin: 0 auto; padding-top: 3.1rem; }   /* room under the clip */
.ct-head { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; flex-wrap: wrap; }
.ct-head .letter-title { margin-bottom: .3rem; }
.ct-switch { font-size: .92rem; }
.ct-intro { margin: 0 0 1.4rem; color: var(--ink-2); }
.ct-alert { margin: 0 0 1.4rem; padding: .9rem 1.1rem; border-inline-start: 3px solid #8a2c22; background: rgba(138, 44, 34, .07); color: #5e1f18; }
.ct-alert ul { margin: .4rem 0 0; padding-inline-start: 1.2rem; }
.ct-alert p { margin: .4rem 0 0; }
.ct-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.ct-field { display: grid; gap: .35rem; margin-bottom: 1.2rem; }
.ct-field > span { font: 600 .98rem var(--display); color: var(--ink); }
.ct-field i { font-style: normal; color: #8a2c22; }
.ct-field em { font-style: normal; font-weight: 400; font-size: .85rem; color: var(--ink-3); }
.ct-field input[type="text"], .ct-field input[type="email"], .ct-field textarea, .ct-field input[type="file"] {
    width: 100%; min-height: 46px; padding: .6rem .8rem; border: 1px solid var(--rule); border-radius: 3px;
    background: #fbf8f1; font: 400 1rem/1.7 var(--sans); color: var(--ink);
}
.ct-field textarea { line-height: 1.95; resize: vertical; }
.ct-field input[type="file"] { padding: .5rem; cursor: pointer; }
.ct-field input:focus, .ct-field textarea:focus { outline: none; border-color: var(--oxblood); box-shadow: 0 0 0 3px rgba(36, 77, 88, .15); }
.ct-field [aria-invalid="true"], .ct-check input[aria-invalid="true"] { border-color: #8a2c22; outline-color: #8a2c22; }
.ct-field small { font-size: .83rem; line-height: 1.7; color: var(--ink-3); }
.ct-err { margin: 0; font-size: .88rem; color: #8a2c22; }
.ct-check { display: flex; align-items: flex-start; gap: .6rem; margin: .4rem 0 .3rem; line-height: 1.8; cursor: pointer; }
.ct-check input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .35rem; accent-color: var(--oxblood); }
.ct-send { display: flex; align-items: center; gap: .6rem 1.2rem; flex-wrap: wrap; margin-top: 1.5rem; }
.ct-send span { color: var(--ink-3); font-size: .9rem; }
.ct-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ct-done p { color: var(--ink-2); }
.ct-again { display: flex; align-items: center; gap: .8rem 1.2rem; flex-wrap: wrap; margin-top: 1.4rem; }
@media (max-width: 760px) {
    .ct-options, .ct-row { grid-template-columns: minmax(0, 1fr); }
    .ct-option, .ct-option:nth-child(2) { rotate: 0deg; }
}

/* لوحة التحكم: المشاركات / admin: submissions */
.sub-card.is-done { opacity: .72; }
.sub-head { display: flex; align-items: baseline; gap: .4rem .8rem; flex-wrap: wrap; margin-bottom: .9rem; }
.sub-head b { font-family: var(--display); font-size: 1.1rem; }
.sub-body { max-height: 26rem; overflow-y: auto; padding: .8rem 1rem; background: var(--paper); border: 1px solid var(--rule-soft); }
.sub-body p { margin: 0 0 .8rem; line-height: 1.95; }
.sub-list { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .3rem; word-break: break-all; }
.sub-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.sub-actions form { margin: 0; }
.admin-nav .badge { margin-inline-start: .25rem; }

/* =========================================================================
   بطاقة الاكتشاف: «اكتشفتُ اليوم حكاية من ذاكرة عبدالعزيز المسلم» (13 أكتوبر)
   The discovery card (13 Oct)
   ========================================================================= */
.dc-cta {
    position: relative; isolation: isolate;
    display: flex; align-items: center; justify-content: space-between; gap: .8rem 1.4rem; flex-wrap: wrap;
    margin: 2.6rem 0 0; padding: 1.3rem clamp(1.1rem, 3vw, 1.8rem);
    filter: drop-shadow(0 2px 4px rgba(42, 40, 38, .16));
}
.dc-cta::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--grain), linear-gradient(180deg, #f7f1e4 0%, var(--tape) 100%);
    -webkit-mask: var(--mask-ends); mask: var(--mask-ends);
}
.dc-cta p { margin: 0; color: var(--ink-2); }
.dc-cta b { font-family: var(--display); color: var(--ink); }
.dc-dialog {
    width: min(560px, calc(100vw - 2rem)); max-width: none; max-height: calc(100dvh - 2rem);
    padding: 0; border: 0; background: none; color: var(--ink); overflow: visible;
}
.dc-dialog::backdrop { background: rgba(31, 29, 27, .74); }
.dc-dialog form { margin: 0; }
.dc-sheet {
    max-height: calc(100dvh - 2rem); overflow-y: auto; padding: 1.4rem 1.4rem 1.2rem; border-radius: 4px;
    background: var(--grain), var(--letter); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); text-align: center;
}
.dc-sheet h2 { margin: .2rem 0 1rem; font: 700 1.3rem var(--display); }
.dc-wait { color: var(--ink-3); padding: 4rem 0; }
.dc-img { display: block; width: 100%; max-height: 58dvh; object-fit: contain; margin: 0 auto 1rem; border-radius: 3px; box-shadow: 0 2px 10px rgba(42, 40, 38, .2); }
.dc-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.dc-note { margin: .9rem 0 0; font-size: .86rem; color: var(--ink-3); }
.dc-nudge {
    position: fixed; z-index: 130; inset-inline-start: 1rem; bottom: 1rem; max-width: min(360px, calc(100vw - 2rem));
    display: flex; align-items: center; gap: .7rem; padding-block: .8rem; padding-inline: 1rem 2.7rem; border-radius: 4px;
    background: var(--grain), var(--letter); box-shadow: 0 6px 22px rgba(42, 40, 38, .3);
}
.dc-nudge p { margin: 0; font: 600 .95rem/1.6 var(--display); }
.dc-nudge .btn { flex: none; white-space: nowrap; }
.dc-x {
    position: absolute; top: .3rem; inset-inline-end: .3rem; width: 32px; height: 32px; border: 0; border-radius: 50%;
    background: none; color: var(--ink-3); font-size: 1.3rem; cursor: pointer;
}
.dc-x:hover { background: rgba(42, 40, 38, .08); color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
    .dc-nudge { animation: dc-in .45s cubic-bezier(.2, .7, .2, 1) both; }
    .dc-dialog[open] .dc-sheet { animation: bo-open .4s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes dc-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media print { .dc-cta, .dc-nudge, .dc-dialog { display: none !important; } }

/* بطاقة بلا صورة: ورقة فهرسة بلون الباب بدل اللوحة الفارغة (14 أكتوبر)
   A card without a picture: an index slip in the section's colour instead of the empty plate (14 Oct) */
.card-text {
    align-self: start; position: relative; gap: .55rem;
    padding: 1.05rem 1.1rem 1.15rem; border-top: 3px solid var(--plate, var(--gold));
    background: var(--grain), var(--letter); box-shadow: var(--shadow-book);
    transition: transform .2s ease, box-shadow .2s ease;
}
.card-text:hover { transform: translateY(-3px); box-shadow: 0 2px 3px rgba(34,29,24,.12), 0 12px 26px rgba(34,29,24,.16); }
.ct-mark { line-height: 0; color: var(--plate, var(--gold)); }
.card-text .card-title { font-size: 1.05rem; line-height: 1.6; }

/* ---------- ختم الأرشيف علامةً مائية على الصور (طلب الفريق، 15 أكتوبر 2026) ----------
   الختم المطبوع على غلاف الكتاب (img/stamp.svg) صغيرًا في الزاوية السفلى، بعيدًا عن النص. طبقتان تمتزجان بالصورة:
   حبر (multiply) يظهر على الورق الأبيض والفاتح كختم مطبوع، ونور (screen) يظهر على الصور الداكنة.
   لا z-index ولا فلتر ولا شفافية على .wm نفسه، وإلا عُزلت الطبقتان عن الصورة ولم تمتزجا بها.
   helpers.php: item_stamped() يقرّر أيّ صورة تُختم.
   The stamp printed on the book cover, small in the lower corner, clear of the text. Two layers blend with the picture:
   ink (multiply) that shows on white and light paper like a printed stamp, and light (screen) that shows on dark photos.
   No z-index, filter or opacity on .wm itself: any of them would isolate the layers from the picture.
   helpers.php: item_stamped() decides which pictures carry it. */
.wm {
    position: absolute; pointer-events: none;
    inset-block-end: 2.5%; inset-inline-end: 2.5%;
    width: clamp(30px, 19%, 90px); aspect-ratio: 1;
}
.wm::before, .wm::after {
    content: ""; position: absolute; inset: 0; rotate: -14deg;
    -webkit-mask: url(img/stamp.svg) center / contain no-repeat; mask: url(img/stamp.svg) center / contain no-repeat;
}
.wm::before { background: #fff; mix-blend-mode: screen; opacity: .5; }
.wm::after  { background: #3e3730; mix-blend-mode: multiply; opacity: .62; }
.wm[hidden] { display: none; }
.thumbs a, .doc > a { position: relative; display: block; }
.detail-cover .wm { inset-block-end: 26px; inset-inline-end: 12px; width: 17%; }
/* المقطع: في الزاوية العليا كشعار القنوات، بعيدًا عن أزرار المشغّل / a video: top corner like a channel logo, clear of the player's controls */
.video-embed .wm { inset-block: 12px auto; inset-inline: 12px auto; width: clamp(46px, 13%, 92px); }
.ap-hero .wm { inset-block: 8px auto; }
.lightbox-pic { position: relative; display: block; width: fit-content; margin-inline: auto; }
.lightbox-pic img { display: block; }
.lightbox-pic .wm { inset-block-end: 1.8%; inset-inline-end: 1.8%; width: clamp(48px, 9%, 110px); }
.lightbox.is-video .lightbox-pic .wm { inset-block: 12px auto; inset-inline: 12px auto; width: clamp(46px, 10%, 92px); }

/* الأطلس: رفّ كتبه المترجمة إلى لغة البلد / the atlas: a shelf of his books in the country's language */
.ap-books { margin: 0 0 1.4rem; }
.ap-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 1rem .8rem; }
.ap-book { display: flex; flex-direction: column; gap: .3rem; color: var(--ink); text-decoration: none; }
.ap-book[hidden] { display: none; }
.ap-bcover {
    position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; overflow: hidden;
    background: #efe8d9; color: var(--ink-3);
    box-shadow: 0 1px 2px rgba(42,40,38,.2), 0 6px 14px rgba(42,40,38,.18);
    transition: transform .2s ease, box-shadow .2s ease;
}
.ap-bcover img { width: 100%; height: 100%; object-fit: cover; }
.ap-book:hover .ap-bcover { transform: translateY(-3px); box-shadow: 0 2px 3px rgba(42,40,38,.18), 0 10px 22px rgba(42,40,38,.22); }
.ap-book:hover .ap-bt { color: var(--spine, var(--oxblood)); }
.ap-bt { font: 600 .8rem/1.5 var(--display); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ap-book .ap-m { font-size: .72rem; }

/* أبواب الأرشيف: كل قصاصة تستقرّ في مكانها حين تبلغها في التمرير / each section scrap settles into place as you scroll to it */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .scrap-card { animation: settle linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    }
}

/* =========================================================================
   «اختيار عشوائي»: نرد في الترويسة (الحاسوب) وفي القائمة (الهاتف) وتحت أبواب الأرشيف — مادة عشوائية من random.php
   «Surprise me»: a die in the masthead (desktop), the menu (phone) and under the sections — a random item
   ========================================================================= */
.masthead-dice {
    position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: .4rem .9rem;
    border: 1px solid var(--rule); border-radius: 3px; color: var(--ink);
    font: 600 .9rem var(--display); text-decoration: none; white-space: nowrap; transition: background .2s ease;
}
.masthead-dice:hover { background: var(--paper-3); color: var(--ink); }
.masthead-dice:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 3px; }
.dice { flex: none; transition: rotate .45s cubic-bezier(.3, 1.6, .5, 1); }
a:hover > .dice, a:focus-visible > .dice { rotate: 180deg; }
.nav-dice { display: none; }
@media (max-width: 860px) {
    .masthead-dice { display: none; }   /* زرّ القائمة مكانه؛ النرد في القائمة نفسها / the menu button sits there; the die moves into the menu */
    .nav-dice { display: block; }
    .nav-dice a { display: flex !important; align-items: center; gap: .5rem; color: var(--oxblood) !important; font-weight: 600; }
}
.abwab-dice { margin: 2.2rem 0 0; display: flex; align-items: center; justify-content: center; gap: .9rem; flex-wrap: wrap; color: var(--ink-2); }
.abwab-dice .btn-paper { gap: .5rem; }
.surprise-slip {
    display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 1rem 0 0; padding: .45rem .9rem;
    background: var(--grain), var(--letter); border: 1px dashed var(--rule); font-size: .92rem; color: var(--ink-2);
}
.surprise-slip a { font-weight: 600; }

/* =========================================================================
   «من ذاكرة اللسان»: مثل اليوم (ورقة زرقاء ممزّقة كقصاصات الأبواب) وكلمة من اللهجة (بطاقة معجم بشريط لاصق)
   A proverb of the day (a torn blue scrap like the section cards) and a dialect word (a dictionary card with tape)
   ========================================================================= */
.sayings-sec { padding-top: clamp(1rem, 3vw, 2rem); }
.sayings { display: grid; gap: 1.6rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .sayings { grid-template-columns: 1.15fr 1fr; gap: 2.2rem; align-items: center; } }
.say { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: .7rem; padding: 1.7rem 1.6rem 1.2rem; }
.say-kicker { margin: 0; font: 700 .82rem var(--display); letter-spacing: .04em; }
.say-mean { margin: 0; font-size: .98rem; line-height: 1.9; }
.say-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .4rem; padding-top: .7rem;
    font-size: .82rem; border-top: 1px dashed currentColor; border-top-color: color-mix(in srgb, currentColor 30%, transparent);
}
.say-share { font: 600 .86rem var(--display); text-decoration: none; }
.say-share::before { content: "↗ "; }

.say-proverb { color: #f4eee2; transform: rotate(-.7deg); filter: drop-shadow(0 3px 5px rgba(42,40,38,.25)); }
.say-proverb::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--grain), radial-gradient(120% 90% at 85% 10%, #2f6170 0%, var(--oxblood) 55%, var(--oxblood-dk) 100%);
    -webkit-mask: var(--mask-all); mask: var(--mask-all);
}
.say-proverb .say-kicker { color: var(--gold-soft); }
.say-text {
    position: relative; margin: .2rem 0 .3rem; padding-inline-start: 2.6rem;
    font: 700 clamp(1.5rem, 3.6vw, 2.15rem)/1.55 var(--display); color: #fff;
}
.say-text::before {
    content: "«"; position: absolute; inset-inline-start: 0; top: -.35em;
    font: 400 3.6rem/1 var(--display); color: var(--gold-soft); opacity: .7;
}
.say-proverb .say-mean b { color: var(--gold-soft); font-weight: 600; }
.say-proverb .say-share { color: var(--gold-soft); }
.say-proverb .say-share:hover { color: #fff; }

.say-word { color: var(--ink); background: var(--grain), var(--letter); box-shadow: var(--shadow-book); transform: rotate(.6deg); }
.say-word::before {   /* شريط لاصق / tape */
    content: ""; position: absolute; top: -11px; inset-inline-start: 50%; width: 84px; height: 22px; margin-inline-start: -42px;
    background: rgba(238, 230, 212, .9); -webkit-mask: var(--mask-ends); mask: var(--mask-ends); transform: rotate(-3deg);
}
.say-word .say-kicker { color: var(--gold); }
.say-entry { margin: 0; display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; padding-bottom: .5rem; border-bottom: 2px solid var(--ink); }
.say-w { font: 800 clamp(2rem, 5vw, 2.8rem)/1.3 var(--display); font-style: normal; color: var(--oxblood); }
.say-form { font: 500 .95rem var(--display); color: var(--ink-3); }
.say-ex { margin: 0; padding: .55rem .9rem; border-inline-start: 3px solid var(--gold-soft); background: rgba(201, 166, 118, .12); font-size: .95rem; color: var(--ink-2); }
.say-ex::before { content: "مثال: "; font-weight: 600; color: var(--gold); }
.say-word .say-share { color: var(--oxblood); }

/* =========================================================================
   جواز سفر الأطلس: شريط تحت الخريطة، وختم دخول يهبط على اللوحة، ودفتر الجواز بأختامه (map.js)
   The atlas passport: a bar under the map, an entry stamp that lands on the panel, and the passport booklet (map.js)
   ========================================================================= */
:root {
    /* بقع الحبر غير المنتظمة في الأختام / the uneven ink of a rubber stamp */
    --speckle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 0 0 0 2.05'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23s)'/%3E%3C/svg%3E");
}
.pp-bar {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .9rem; padding: .8rem 1rem;
    background: var(--grain), var(--letter); border: 1px solid var(--rule); box-shadow: var(--shadow-sm);
}
.pp-bar[hidden] { display: none; }
.pp-mini {   /* جواز صغير / a small passport */
    flex: none; width: 34px; height: 46px; border-radius: 3px 6px 6px 3px;
    background: radial-gradient(circle at 50% 46%, transparent 9px, #d8b77e 9.5px 10.5px, transparent 11px), linear-gradient(90deg, #173842 0 3px, #244d58 3px);
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.pp-info { flex: 1; min-width: 200px; display: grid; gap: .25rem; }
.pp-info b { font: 700 1rem var(--display); color: var(--oxblood); }
.pp-count { font-size: .86rem; color: var(--ink-2); }
.pp-meter { display: block; height: 5px; border-radius: 3px; background: var(--paper-3); overflow: hidden; }
.pp-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-soft), var(--gold)); transition: width .6s ease; }

/* ختم الدخول يهبط على رأس اللوحة / the entry stamp landing on the panel */
.ap-head { position: relative; }
.pp-thump {
    position: absolute; z-index: 5; top: -.2rem; inset-inline-end: 3.2rem; pointer-events: none;
    display: grid; justify-items: center; gap: .05rem; padding: .35rem .9rem .4rem;
    border: 2.5px solid #8a2f2a; outline: 1px solid #8a2f2a; outline-offset: -6px; border-radius: 8px;
    color: #8a2f2a; font-family: var(--display); text-align: center; rotate: -9deg; mix-blend-mode: multiply;
    -webkit-mask: var(--speckle); mask: var(--speckle);
    animation: pp-thump 2.8s cubic-bezier(.2, .9, .3, 1.2) both;
}
.pp-thump span { font-size: .66rem; font-weight: 700; letter-spacing: .12em; }
.pp-thump b { font-size: 1.05rem; line-height: 1.3; }
.pp-thump small { font-size: .68rem; }
@keyframes pp-thump {
    0%   { opacity: 0; scale: 2.2; }
    14%  { opacity: .92; scale: .94; }
    20%  { scale: 1; }
    80%  { opacity: .92; }
    100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .pp-thump { animation: none; opacity: .9; } }

/* دفتر الجواز / the passport booklet */
.pp-book {
    width: min(900px, calc(100vw - 2rem)); max-width: none; max-height: calc(100dvh - 2rem);
    padding: 0; border: 0; background: none; color: var(--ink); overflow: visible;
}
.pp-book::backdrop { background: rgba(31, 29, 27, .74); }
.pp-book form { margin: 0; }
.pp-spread { display: grid; grid-template-columns: minmax(0, 1fr); max-height: calc(100dvh - 2rem); overflow: auto; border-radius: 10px; box-shadow: 0 18px 50px rgba(0,0,0,.45); }
@media (min-width: 720px) { .pp-spread { grid-template-columns: 300px minmax(0, 1fr); } }
.pp-cover {
    position: relative; display: grid; place-content: center; justify-items: center; gap: .5rem; padding: 2.2rem 1.5rem; text-align: center;
    color: #d8b77e; background: var(--grain), radial-gradient(130% 100% at 30% 20%, #2f6170 0%, #1d4651 55%, #142f37 100%);
}
.pp-cover::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(216, 183, 126, .45); border-radius: 6px; pointer-events: none; }
.pp-seal {
    width: 112px; aspect-ratio: 1; background: #d8b77e; opacity: .9;
    -webkit-mask: url(img/stamp.svg) center / contain no-repeat; mask: url(img/stamp.svg) center / contain no-repeat;
}
.pp-cover h2 { margin: .6rem 0 0; font: 800 1.9rem/1.35 var(--display); color: #e6c78f; letter-spacing: .02em; }
.pp-sub { margin: 0; font: 500 .95rem var(--display); }
.pp-owner { margin: .9rem 0 0; font-size: .78rem; letter-spacing: .04em; opacity: .8; }
.pp-page {
    padding: 1.6rem 1.4rem 1.2rem; min-height: 380px;
    background:
        repeating-radial-gradient(circle at 110% -10%, transparent 0 11px, rgba(36, 77, 88, .045) 11px 12px),
        var(--grain), #f6f1e4;
}
.pp-head { margin: 0 0 1.1rem; padding-bottom: .6rem; border-bottom: 1px dashed var(--rule); font: 500 .9rem var(--display); color: var(--ink-3); }
.pp-head b { font-size: 1.15rem; color: var(--oxblood); }
.pp-stamps { list-style: none; margin: 0; padding: .3rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 1.2rem .9rem; }
.pp-stamp {
    --ink: #8a2f2a;
    display: grid; justify-items: center; align-content: center; gap: .15rem; aspect-ratio: 1.2; padding: .5rem;
    border: 2.5px solid var(--ink); outline: 1px solid var(--ink); outline-offset: -6px; border-radius: 9px;
    color: var(--ink); font-family: var(--display); text-align: center; rotate: var(--r, 0deg); mix-blend-mode: multiply;
    -webkit-mask: var(--speckle); mask: var(--speckle);
}
.pp-stamp.v1 { border-radius: 50%; aspect-ratio: 1; }
.pp-stamp.v2 { border-radius: 50% / 38%; }
.pp-stamp.v3 { border-style: double; border-width: 4px; outline-offset: -8px; border-radius: 2px; }
.pp-stamp.ink1 { --ink: #1f5566; }
.pp-stamp.ink2 { --ink: #3f6b3a; }
.pp-stamp.ink3 { --ink: #5a3f6b; }
.pp-stamp.ink4 { --ink: #76471c; }
.pp-in { font-size: .62rem; font-weight: 700; letter-spacing: .14em; }
.pp-stamp img { width: 26px; height: 18px; object-fit: cover; border-radius: 2px; filter: grayscale(1) contrast(1.4); mix-blend-mode: multiply; opacity: .8; }
.pp-stamp b { font-size: .95rem; line-height: 1.3; }
.pp-stamp small { font-size: .66rem; }
.pp-empty { margin: 1rem 0 0; color: var(--ink-3); }
.pp-note { margin: 1.4rem 0 0; font-size: .76rem; color: var(--ink-3); text-align: center; }
.pp-book .bo-close { background: rgba(255,255,255,.75); }
@media (prefers-reduced-motion: no-preference) {
    .pp-book[open] .pp-spread { animation: bo-open .45s cubic-bezier(.2, .7, .2, 1) both; }
}
@media (max-width: 719px) {   /* الهاتف: الغلاف شريط قصير فوق الأختام / phones: the cover is a short strip above the stamps */
    .pp-cover { grid-template-columns: auto 1fr; place-content: center start; justify-items: start; align-items: center; column-gap: 1rem; row-gap: .2rem; padding: 1.3rem 1.4rem 1.2rem; text-align: start; }
    .pp-seal { width: 70px; grid-row: span 2; }
    .pp-cover h2 { margin: 0; font-size: 1.35rem; }
    .pp-cover h2 br, .pp-owner { display: none; }
    .pp-page { padding: 1.2rem 1rem 1rem; }
}

/* الأطلس آخر روابط الأبواب، برمز الخريطة / the atlas, last of the section links, with a map icon */
.main-nav .nav-atlas a { display: flex; align-items: center; gap: .35rem; }
.nav-atlas svg { flex: none; color: var(--gold); }
@media (min-width: 861px) and (max-width: 960px) {   /* مع رابط الأطلس: أضيق قليلًا كي لا يبلغ رمز البحث / with the atlas link: a little tighter so it stays clear of the search icon */
    .main-nav a { padding-inline: .42rem; }
}
/* أحد عشر رابطًا: تباعد أضيق قليلًا بجانب حقل البحث، وتحت 1240 بكسل يحلّ رمز البحث محلّ الحقل (كما تحت 1060 من قبل)
   Eleven links: slightly tighter beside the search field; below 1240px the search icon replaces the field (as below 1060 before) */
@media (min-width: 1241px) { .main-nav a { padding-inline: .62rem; } }
@media (min-width: 861px) and (max-width: 1240px) {
    .nav-search { display: none; }
    .main-nav a.nav-search-link { display: grid; }
}

/* =========================================================================
   «في مثل هذا اليوم»: ورقة تقويم بتاريخ اليوم، وما حدث فيه من مسيرته (_onthisday.php)
   «On this day»: a calendar leaf with today's date, and what happened on it in his career
   ========================================================================= */
.otd-sec { padding-top: clamp(1rem, 3vw, 2rem); }
.otd {
    position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.2rem 1.6rem; align-items: start;
    padding: 1.5rem; background: var(--grain), var(--letter); box-shadow: var(--shadow-book);
}
@media (min-width: 760px) { .otd { grid-template-columns: auto minmax(0, 1fr) 260px; padding: 1.8rem 2rem; } }
.otd-leaf {   /* ورقة تقويم بثقبين / a calendar leaf with two binding holes */
    position: relative; display: grid; justify-items: center; width: 108px; padding: 0 0 .7rem; overflow: hidden;
    background: #fff; border-radius: 6px; box-shadow: 0 1px 2px rgba(42,40,38,.18), 0 6px 14px rgba(42,40,38,.16);
    transform: rotate(-2deg); font-family: var(--display); text-align: center;
}
.otd-leaf::before, .otd-leaf::after {
    content: ""; position: absolute; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--paper-3);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
}
.otd-leaf::before { inset-inline-start: 22px; }
.otd-leaf::after { inset-inline-end: 22px; }
.otd-m { display: block; width: 100%; padding: 1.25rem 0 .35rem; background: var(--grain), var(--oxblood); color: #f4eee2; font-weight: 700; font-size: .95rem; }
.otd-d { font-size: 3.1rem; line-height: 1.15; color: var(--ink); padding-top: .25rem; }
.otd-w { font-size: .8rem; color: var(--ink-3); }
.otd-body { display: grid; gap: .45rem; align-content: start; }
.otd-bday { margin: 0 0 .3rem; padding: .5rem .8rem; background: rgba(201,166,118,.18); border-inline-start: 3px solid var(--gold); font: 600 1rem var(--display); color: var(--gold); }
.otd-when { margin: 0; font: 600 .9rem var(--display); color: var(--gold); }
.otd-title { font: 700 clamp(1.2rem, 2.6vw, 1.55rem)/1.5 var(--display); color: var(--ink); text-decoration: none; }
.otd-title:hover { color: var(--oxblood); }
.otd-meta { margin: 0; font-size: .86rem; color: var(--ink-3); }
.otd-also { list-style: none; margin: .5rem 0 0; padding: .6rem 0 0; border-top: 1px dashed var(--rule); display: grid; gap: .35rem; font-size: .92rem; }
.otd-also::before { content: "وفي مثل هذا اليوم أيضًا"; display: block; font: 600 .8rem var(--display); color: var(--ink-3); margin-bottom: .1rem; }
.otd-y { display: inline-block; min-width: 3.2em; font: 700 .85rem var(--display); color: var(--oxblood); }
.otd-also a { color: var(--ink-2); }
.otd-soon { margin: .5rem 0 0; padding: .5rem .8rem; background: var(--grain), #fbf7ee; border: 1px dashed var(--gold-soft); font-size: .9rem; color: var(--ink-2); }
.otd-soon b { color: var(--gold); font-family: var(--display); }
.otd-pic { position: relative; display: block; grid-column: 1 / -1; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-3); box-shadow: var(--shadow-book); transform: rotate(1.2deg); }
@media (min-width: 760px) { .otd-pic { grid-column: auto; } }
.otd-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }