@jxsuite/starters 3.4.0 → 3.5.0

package/sites/museum/pages/ar/about.jxn

@@ -0,0 +1,232 @@
+/- kdl-version 2
+$layout "./layouts/ar.jxn"
+$head {
+    meta name=description content="أتريوم هو متحف المدينة للفنّ والتاريخ: سقف من زجاج فوق دار الجمارك القديمة، الدخول إليه مجّانيّ، تديره المدينة وقرّاؤها منذ ١٨٩٧."
+}
+
+$element .title="عن المتحف — أتريوم" .description="أتريوم هو متحف المدينة للفنّ والتاريخ: سقف من زجاج فوق دار الجمارك القديمة، الدخول إليه مجّانيّ، تديره المدينة وقرّاؤها منذ ١٨٩٧." {
+    state {
+        catalogued {
+            $expression {
+                operator call
+                target (ref)"window#/Intl/formatNumber"
+                value {
+                    - 0.94
+                    - #null
+                    - style=percent
+                }
+            }
+        }
+        archive {
+            $expression {
+                operator call
+                target (ref)"window#/Intl/formatNumber"
+                value {
+                    - 1240
+                    - #null
+                    - style=unit unit=meter unitDisplay=long
+                }
+            }
+        }
+        staff {
+            $expression {
+                operator call
+                target (ref)"window#/Intl/formatNumber"
+                value {
+                    - 61
+                }
+            }
+        }
+        languages {
+            $expression {
+                operator call
+                target (ref)"window#/Intl/formatList"
+                value {
+                    - الإنجليزيّة الفرنسيّة العربيّة
+                }
+            }
+        }
+    }
+    mu-pagehead {
+        $props {
+            kicker "عن المتحف"
+            title "متحف يختلف مع نفسه"
+            standfirst "أسّس أتريوم مئتان وأربعون أسرة، دفعت كلّ منها ما استطاعت، واشترطت كتابةً أن يبقى الدخول مجّانيًّا. وقد بقي كذلك مئةً وتسعًا وعشرين سنة، عبر إعادتَي بناء وحريق واحد."
+            metaLabel "قاعة المطالعة"
+            metaValue "الطابق الثاني، بلا موعد مسبق"
+        }
+    }
+    mu-band {
+        $props index=٠١ label=المبنى tone=chalk
+        div {
+            style {
+                display grid
+                gridTemplateColumns "minmax(0, 1.4fr) minmax(0, 0.8fr)"
+                columnGap "clamp(2rem, 5vw, 4rem)"
+                rowGap "1.25rem"
+                alignItems start
+                @--md gridTemplateColumns="minmax(0, 1fr)"
+            }
+            div {
+                style maxWidth="var(--measure)"
+                p "بدأ المتحف في غرفة فوق دار الجمارك، ضاقت به بعد تسع عشرة سنة. والسقف الزجاجيّ الذي حلّ محلّها عام ١٩١٦ بُني فوق دار الجمارك لا بدلًا منها: جدرانها الحجريّة ما زالت قائمة في الداخل، لا تحمل شيئًا، والجولة تبدأ بالمشي بينها." {
+                    style margin="0" lineHeight="1.9"
+                }
+                p "السقف هو سبب تصوير الناس للمبنى، وسبب نفور المرمّمين منه. كلّ قطعة في الطابق الأرضيّ موضوعة بحسب ما تحتمله من الضوء، ولهذا تقف خزانة الخرائط في أظلم زاوية، ويقف حوض الملح في الخارج تحت المطر." {
+                    style margin="1.1rem 0 0" lineHeight="1.9"
+                }
+                p "لا شيء هنا نسخة. وحيث يعرض المتحف نسخة — ثلاث من الخرائط أهشّ من أن تُعلَّق — تقول البطاقة ذلك في سطرها الأوّل، وبالحجم نفسه الذي كُتب به العنوان." {
+                    style margin="1.1rem 0 0" lineHeight="1.9"
+                }
+                p "وحيث لا يعرف المتحف شيئًا، تقول البطاقة ذلك أيضًا. قطعة من كلّ تسع تقريبًا بلا صانع معروف، والسجلّ يدوّن الفجوة بدل أن يخمّن." {
+                    style margin="1.1rem 0 0" lineHeight="1.9"
+                }
+            }
+            mu-oculus {
+                $props size="20rem" tone=card
+            }
+        }
+    }
+    mu-band {
+        $props index=٠٢ label="ما نحفظه" tone=card
+        div {
+            style {
+                display grid
+                gridTemplateColumns "repeat(2, minmax(0, 1fr))"
+                columnGap "clamp(2rem, 5vw, 4rem)"
+                @--md gridTemplateColumns="minmax(0, 1fr)"
+            }
+            div {
+                mu-fact {
+                    $props {
+                        term المفهرَس
+                        value "${state.catalogued}"
+                        note "من كلّ ما دخل السجلّ. والباقي في معظمه هبة الورش لعام ٢٠١٩."
+                    }
+                }
+                mu-fact {
+                    $props {
+                        term الأرشيف
+                        value "${state.archive}"
+                        note "من الورق على الرفوف: سجلّات، ودفاتر مسح، ومراسلات ورش."
+                    }
+                }
+            }
+            div {
+                mu-fact {
+                    $props {
+                        term العاملون
+                        value "${state.staff}"
+                        note "أمناء ومرمّمون وموظّفو استقبال، والاثنان اللذان يُبقيان السقف نظيفًا."
+                    }
+                }
+                mu-fact {
+                    $props {
+                        term "لغات البطاقات"
+                        value "${state.languages}"
+                        note "كلّ بطاقة جدار، في كلّ غرفة، بلا نسخة مختصرة لأيّ من الثلاث."
+                    }
+                }
+            }
+        }
+    }
+    mu-band {
+        $props index=٠٣ label="ثلاث لغات" tone=chalk
+        div {
+            style {
+                display grid
+                gridTemplateColumns "minmax(0, 1fr) minmax(0, 0.85fr)"
+                columnGap "clamp(2rem, 5vw, 4rem)"
+                alignItems start
+                @--md gridTemplateColumns="minmax(0, 1fr)" rowGap="2rem"
+            }
+            div {
+                style maxWidth="var(--measure)"
+                p "ثلث هذه المدينة يقرأ الفرنسيّة في البيت، وحصّة متنامية منها تقرأ العربيّة، ولذلك يُكتب المتحف ثلاث مرّات بدل أن يُكتب مرّة وتُلحق به ترجمات. لكلّ لغة صفحاتها ونصوصها الجداريّة وقراءتها الخاصّة للمجموعة — فالمسار العربيّ في الصالة ٢ ليس المسار الإنجليزيّ معكوسًا، بل حجّة أخرى كتبها أمين آخر." {
+                    style margin="0" lineHeight="1.9"
+                }
+                p "كلّ صفحة تحمل المبدّل نفسه، وهو لا يذكر إلّا اللغات التي وُجدت فيها تلك الصفحة فعلًا. وإن غابت لغة عن المبدّل، فذلك لأنّ الصفحة لم تُكتب بها بعد — وهو التزام نفضّل إظهاره على إخفائه." {
+                    style margin="1.1rem 0 0" lineHeight="1.9"
+                }
+            }
+            div {
+                style {
+                    border "2px solid var(--color-ink)"
+                    backgroundColor "var(--color-card)"
+                    padding "clamp(1.25rem, 3vw, 1.9rem)"
+                }
+                p "هذه الصفحة، بكلّ لغة توجد بها" {
+                    style {
+                        margin "0 0 1.1rem"
+                        fontFamily "var(--font-label)"
+                        fontSize "0.66rem"
+                        letterSpacing "var(--label-tracking)"
+                        textTransform "var(--label-case)"
+                        color "var(--color-muted)"
+                    }
+                }
+                ul {
+                    style listStyle=none margin="0" padding="0" display=grid gap="0.55rem"
+                    .children {
+                        $array items=(ref)"#/state/$page/alternates" {
+                            li {
+                                a .lang="${item.code}" dir="${item.dir}" href="${item.url}" hreflang="${item.code}" aria-current="${item.current ? 'page' : 'false'}" {
+                                    style {
+                                        display flex
+                                        alignItems baseline
+                                        gap "0.7rem"
+                                        textDecoration none
+                                        paddingBlock "0.35rem"
+                                        borderBlockEnd "1px solid var(--color-hairline)"
+                                        color "${item.current ? 'var(--color-muted)' : 'var(--color-pigment)'}"
+                                        :hover color="var(--color-ink)"
+                                    }
+                                    span "${item.code}" {
+                                        style {
+                                            fontFamily "var(--font-label)"
+                                            fontSize "0.64rem"
+                                            letterSpacing "var(--label-tracking)"
+                                            textTransform "var(--label-case)"
+                                            opacity "0.7"
+                                        }
+                                    }
+                                    span "${item.label}" {
+                                        style fontSize="1.02rem"
+                                    }
+                                    span .lang=ar dir=rtl "أنت هنا" {
+                                        style {
+                                            marginInlineStart auto
+                                            fontFamily "var(--font-label)"
+                                            fontSize "0.62rem"
+                                            letterSpacing "var(--label-tracking)"
+                                            textTransform "var(--label-case)"
+                                            display "${item.current ? 'inline' : 'none'}"
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    mu-band {
+        $props index=٠٤ label="بكلمات المؤسّسين" tone=ink
+        mu-quote {
+            $props {
+                quote "ليكن الدخول إليه مجّانيًّا، وإلّا فليكن شيئًا آخر غير ملكنا."
+                attribution "دفتر محاضر الاكتتاب، ٤ تشرين الثاني ١٨٩٧"
+            }
+        }
+    }
+    mu-cta {
+        $props {
+            kicker "تفضّلوا بالدخول"
+            heading "قاعة المطالعة مفتوحة لكلّ من لديه سؤال."
+            text "الطابق الثاني، فوق خزانة الخرائط. لا موعد للقراءة؛ واسأل عند المكتب للمناولة."
+            label "خطّط لزيارتك"
+            href "/ar/visit/"
+        }
+    }
+}

package/sites/museum/pages/ar/exhibitions/[slug].jxn

@@ -0,0 +1,150 @@
+/- kdl-version 2
+$layout "./layouts/ar.jxn"
+$paths contentType=exhibitions param=slug field=id
+$head {
+    meta name=description content="${state.entry.data.description}"
+}
+
+$element .title="${state.entry.data.title} — أتريوم" .description="${state.entry.data.description}" {
+    state {
+        entry {
+            $prototype ContentEntry
+            $src "@jxsuite/parser/ContentEntry.class.json"
+            contentType exhibitions
+            field id
+            id (ref)"#/$params/slug"
+        }
+        opens {
+            $expression {
+                operator call
+                target (ref)"window#/Intl/formatDate"
+                value {
+                    - (ref)"#/state/entry/data/date"
+                    - #null
+                    - day=numeric month=long year=numeric
+                }
+            }
+        }
+        closes {
+            $expression {
+                operator call
+                target (ref)"window#/Intl/formatDate"
+                value {
+                    - (ref)"#/state/entry/data/until"
+                    - #null
+                    - day=numeric month=long year=numeric
+                }
+            }
+        }
+        works {
+            $expression {
+                operator call
+                target (ref)"window#/Intl/formatNumber"
+                value {
+                    - (ref)"#/state/entry/data/works"
+                }
+            }
+        }
+    }
+    article {
+        mu-pagehead {
+            $props {
+                kicker "${state.entry.data.gallery}"
+                title "${state.entry.data.title}"
+                standfirst "${state.entry.data.description}"
+                metaLabel بإشراف
+                metaValue "${state.entry.data.curator}"
+            }
+        }
+        mu-band {
+            $props index=٠١ label=المعرض tone=chalk
+            div {
+                style {
+                    display grid
+                    gridTemplateColumns "minmax(0, 1.35fr) minmax(0, 0.75fr)"
+                    columnGap "clamp(2rem, 5vw, 4rem)"
+                    alignItems start
+                    @--md gridTemplateColumns="minmax(0, 1fr)" rowGap="2.5rem"
+                }
+                div {
+                    style maxWidth="var(--measure)" fontSize="1.08rem" lineHeight="2"
+                    .children {
+                        $array items=(ref)"#/state/entry/$children" {
+                            p "${item.textContent}" {
+                                style margin="0 0 1.35rem"
+                            }
+                        }
+                    }
+                }
+                aside {
+                    style {
+                        border "2px solid var(--color-ink)"
+                        backgroundColor "var(--color-card)"
+                        padding "clamp(1.1rem, 2.5vw, 1.6rem)"
+                    }
+                    p "بطاقة الجدار" {
+                        style {
+                            margin "0 0 0.5rem"
+                            fontFamily "var(--font-label)"
+                            fontSize "0.64rem"
+                            letterSpacing "var(--label-tracking)"
+                            textTransform "var(--label-case)"
+                            color "var(--color-muted)"
+                        }
+                    }
+                    div aria-hidden="true" {
+                        style {
+                            aspectRatio "4 / 3"
+                            border "2px solid var(--color-ink)"
+                            marginBlockEnd "1.1rem"
+                            background "radial-gradient(circle at 62% 40%, hsl(${state.entry.data.hue} 55% 45%) 0 31%, transparent 31.5%), repeating-linear-gradient(${state.entry.data.hue}deg, var(--color-chalk-deep) 0 9px, var(--color-card) 9px 18px)"
+                        }
+                    }
+                    mu-fact {
+                        $props term=يفتح value="${state.opens}" layout=stack
+                    }
+                    mu-fact {
+                        $props term=يغلق value="${state.closes}" layout=stack
+                    }
+                    mu-fact {
+                        $props term="عدد القطع" value="${state.works}" layout=stack
+                    }
+                    mu-fact {
+                        $props term=المكان value="${state.entry.data.gallery}" layout=stack
+                    }
+                    mu-fact {
+                        $props term=القيّم value="${state.entry.data.curator}" layout=stack
+                    }
+                    p "كلّ بطاقة جدار في هذه الغرفة مكتوبة بثلاث لغات، وبالطول نفسه. ولا يُختصر شيء من أجل جدار أقصر." {
+                        style {
+                            margin "1.25rem 0 0"
+                            paddingBlockStart "0.9rem"
+                            borderBlockStart "1px solid var(--color-hairline)"
+                            fontSize "0.9rem"
+                            lineHeight "1.8"
+                            color "var(--color-muted)"
+                        }
+                    }
+                }
+            }
+        }
+        mu-band {
+            $props index=٠٢ label="معروض أيضًا" tone=card
+            p "معرضان آخران مفتوحان في الوقت نفسه، والتذكرة نفسها — أي لا تذكرة — تُدخلكم الثلاثة." {
+                style margin="0 0 1.5rem" lineHeight="1.9" maxWidth="var(--measure)"
+            }
+            mu-more {
+                $props label="البرنامج كاملًا" href="/ar/exhibitions/"
+            }
+        }
+        mu-cta {
+            $props {
+                kicker "الدخول مجّانيّ"
+                heading "هو في الطابق الأرضيّ، وهو مفتوح الآن."
+                text "من العاشرة إلى السادسة، من الثلاثاء إلى الأحد. ادخلوا من جهة الرصيف ثمّ اتّجهوا نحو جدار دار الجمارك."
+                label "خطّط لزيارتك"
+                href "/ar/visit/"
+            }
+        }
+    }
+}

package/sites/museum/pages/ar/exhibitions/index.jxn

@@ -0,0 +1,82 @@
+/- kdl-version 2
+$layout "./layouts/ar.jxn"
+$head {
+    meta name=description content="البرنامج الجاري في أتريوم: ثلاثة معارض مستقاة من مجموعة المدينة نفسها، بتواريخها وصالاتها وأمنائها."
+}
+
+$element .title="المعارض — أتريوم" .description="البرنامج الجاري في أتريوم: ثلاثة معارض مستقاة من مجموعة المدينة نفسها، بتواريخها وصالاتها وأمنائها." {
+    state {
+        shows {
+            $prototype ContentCollection
+            $src "@jxsuite/parser/ContentCollection.class.json"
+            contentType exhibitions
+            filter {
+                - field=lang op="==" value=ar
+            }
+            sort {
+                - field=order order=asc
+            }
+        }
+    }
+    mu-pagehead {
+        $props {
+            kicker البرنامج
+            title "ما هو معلّق، وإلى متى"
+            standfirst "ثلاثة معارض تجري في وقت واحد: واحد طويل، وواحد موسميّ، وواحد في الفناء. وكلّها مستقاة من مخازن المتحف لا مستعارة، فما ترونه هنا هو المدينة تنظر إلى نفسها."
+            metaLabel الدخول
+            metaValue "مجّانيّ، بلا حجز"
+        }
+    }
+    mu-band {
+        $props index=٠١ label="في هذه الأيّام" tone=chalk
+        div {
+            style borderBlockEnd="1px solid var(--color-hairline)"
+            .children {
+                $array items=(ref)"#/state/shows" {
+                    mu-exhibition-row {
+                        $props {
+                            order "${item.data.order}"
+                            title "${item.data.title}"
+                            description "${item.data.description}"
+                            gallery "${item.data.gallery}"
+                            curator "${item.data.curator}"
+                            curatorLabel بإشراف
+                            href "/ar/exhibitions/${item.id}/"
+                            hue "${item.data.hue}"
+                            date "${item.data.date}"
+                            until "${item.data.until}"
+                            locale "${$page.locale}"
+                        }
+                    }
+                }
+            }
+        }
+    }
+    mu-band {
+        $props index=٠٢ label="كيف يعمل البرنامج" tone=card
+        div {
+            style {
+                display grid
+                gridTemplateColumns "minmax(0, 1fr) minmax(0, 1fr)"
+                columnGap "clamp(2rem, 5vw, 4rem)"
+                rowGap "1.25rem"
+                @--md gridTemplateColumns="minmax(0, 1fr)"
+            }
+            p "يتبدّل معرض واحد كلّ فصل ويستمرّ اثنان طويلًا، فيبقى دائمًا شيء لم تروه وشيء يمكن أن تعودوا إليه. لا شيء منها بتذكرة منفصلة، ولا يُغلق شيء منها لمناسبة خاصّة في ساعات العمل." {
+                style margin="0" lineHeight="1.9"
+            }
+            p "يُكتب كلّ معرض كتابةً مستقلّة بكلّ لغة ينشر بها المتحف — فالأمين الذي كتب النصّ الجداريّ العربيّ للصالة ٢ لا يترجم النصّ الإنجليزيّ، والاثنان يختلفان في مواضع. والمبدّل في أعلى هذه الصفحة يذكر اللغات التي توجد بها الصفحة، وتلك وحدها." {
+                style margin="0" lineHeight="1.9"
+            }
+        }
+    }
+    mu-cta {
+        $props {
+            kicker "الجولات المرشدة"
+            heading "تسعون دقيقة، أيّام السبت، بأيّ من اللغات الثلاث تختارون."
+            text "الحجز عند المكتب في اليوم نفسه، أو راسلونا مسبقًا إن كنتم مجموعة تزيد على ثمانية."
+            label "معلومات الزيارة"
+            href "/ar/visit/"
+        }
+    }
+}

package/sites/museum/pages/ar/index.jxn

@@ -0,0 +1,206 @@
+/- kdl-version 2
+$layout "./layouts/ar.jxn"
+$head {
+    meta name=description content="متحف بلديّ تحت سقف من زجاج: أربعة قرون من المرفأ وصنّاعه وخرائطه. الدخول مجّانيّ، من الثلاثاء إلى الأحد، بالإنجليزيّة والفرنسيّة والعربيّة."
+}
+
+$element .title="أتريوم — متحف المدينة للفنّ والتاريخ" .description="متحف بلديّ تحت سقف من زجاج: أربعة قرون من المرفأ وصنّاعه وخرائطه. الدخول مجّانيّ، من الثلاثاء إلى الأحد، بالإنجليزيّة والفرنسيّة والعربيّة." {
+    state {
+        objects {
+            $expression {
+                operator call
+                target (ref)"window#/Intl/formatNumber"
+                value {
+                    - 18400
+                }
+            }
+        }
+        visitors {
+            $expression {
+                operator call
+                target (ref)"window#/Intl/formatNumber"
+                value {
+                    - 212000
+                }
+            }
+        }
+        founded {
+            $expression {
+                operator call
+                target (ref)"window#/Intl/formatDate"
+                value {
+                    - "1897-11-04"
+                    - #null
+                    - day=numeric month=long year=numeric
+                }
+            }
+        }
+        openDays {
+            $expression {
+                operator call
+                target (ref)"window#/Intl/formatList"
+                value {
+                    - الثلاثاء الأربعاء الخميس الجمعة السبت الأحد
+                }
+            }
+        }
+        shows {
+            $prototype ContentCollection
+            $src "@jxsuite/parser/ContentCollection.class.json"
+            contentType exhibitions
+            filter {
+                - field=lang op="==" value=ar
+            }
+            sort {
+                - field=order order=asc
+            }
+            limit 3
+        }
+    }
+    mu-hero {
+        $props {
+            kicker "متحف المدينة للفنّ والتاريخ"
+            title "أربعة قرون تحت سقف واحد"
+            standfirst "يحفظ أتريوم ما صنعته المدينة واشترته وانتشلته واختلفت عليه منذ وُضع أوّل رصيف حجريّ، ويعرضه مجّانًا، بثلاث لغات، ستّة أيّام في الأسبوع."
+            primaryLabel "خطّط لزيارتك"
+            primaryHref "/ar/visit/"
+            secondaryLabel "المعروض الآن"
+            secondaryHref "/ar/exhibitions/"
+            noteLabel "الدخول مجّانيّ"
+            note "من الثلاثاء إلى الأحد، من ١٠:٠٠ إلى ١٨:٠٠"
+        }
+    }
+    mu-band {
+        $props index=٠١ label="معروض الآن" tone=chalk
+        h2 "ثلاثة معارض، وكلّها عن هذا المكان" {
+            style {
+                margin "0 0 2.25rem"
+                fontFamily "var(--font-display)"
+                fontSize "clamp(1.7rem, 3.6vw, 2.6rem)"
+                fontWeight "500"
+                lineHeight "calc(1.08 * var(--leading-scale))"
+                letterSpacing "var(--display-tracking)"
+                maxWidth "24ch"
+            }
+        }
+        div {
+            style {
+                display grid
+                gridTemplateColumns "repeat(3, minmax(0, 1fr))"
+                gap "clamp(1rem, 2.5vw, 1.75rem)"
+                @--md gridTemplateColumns="repeat(2, minmax(0, 1fr))"
+                @--sm gridTemplateColumns="minmax(0, 1fr)"
+            }
+            .children {
+                $array items=(ref)"#/state/shows" {
+                    mu-exhibition-card {
+                        $props {
+                            title "${item.data.title}"
+                            description "${item.data.description}"
+                            gallery "${item.data.gallery}"
+                            status "مفتوح الآن"
+                            href "/ar/exhibitions/${item.id}/"
+                            hue "${item.data.hue}"
+                            date "${item.data.date}"
+                            until "${item.data.until}"
+                            locale "${$page.locale}"
+                        }
+                    }
+                }
+            }
+        }
+        mu-more {
+            $props label="البرنامج كاملًا" href="/ar/exhibitions/" space="2rem"
+        }
+    }
+    mu-band {
+        $props index=٠٢ label="المتحف بالأرقام" tone=card
+        div {
+            style {
+                display grid
+                gridTemplateColumns "repeat(2, minmax(0, 1fr))"
+                columnGap "clamp(2rem, 5vw, 4rem)"
+                @--md gridTemplateColumns="minmax(0, 1fr)"
+            }
+            div {
+                mu-fact {
+                    $props {
+                        term المقتنيات
+                        value "${state.objects}"
+                        note "قطعة مفهرسة، يُعرض نحو عُشرها في أيّ وقت."
+                    }
+                }
+                mu-fact {
+                    $props {
+                        term الزوّار
+                        value "${state.visitors}"
+                        note "في آخر سنة كاملة، محسوبين عند الباب."
+                    }
+                }
+            }
+            div {
+                mu-fact {
+                    $props {
+                        term التأسيس
+                        value "${state.founded}"
+                        note "باكتتاب مئتين وأربعين أسرة، في غرفة فوق دار الجمارك."
+                    }
+                }
+                mu-fact {
+                    $props {
+                        term "أيّام الفتح"
+                        value "${state.openDays}"
+                        note "مغلق يوم الاثنين، وفي اليومين اللذين تُنظَّف فيهما القاعة كلّ سنة."
+                    }
+                }
+            }
+        }
+        p "كلّ رقم هنا تصوغه لغة الصفحة نفسها: هذه الوثيقة تكتب ١٨٬٤٠٠ بالعربيّة، و18,400 بالإنجليزيّة، و18 400 بالفرنسيّة، لأنّ المسار قد قال أصلًا بأيّ لغة هو." {
+            style {
+                margin "2rem 0 0"
+                paddingBlockStart "1.1rem"
+                borderBlockStart "1px solid var(--color-hairline)"
+                fontSize "0.95rem"
+                lineHeight "1.8"
+                color "var(--color-muted)"
+                maxWidth "var(--measure)"
+            }
+        }
+    }
+    mu-band {
+        $props index=٠٣ label="من قاعة المطالعة" tone=chalk
+        div {
+            style {
+                display grid
+                gridTemplateColumns "minmax(0, 1.05fr) minmax(0, 1fr)"
+                columnGap "clamp(2rem, 5vw, 4rem)"
+                alignItems start
+                @--md gridTemplateColumns="minmax(0, 1fr)" rowGap="2rem"
+            }
+            mu-quote {
+                $props {
+                    quote "المتحف غرفة تحفظ فيها المدينة ما لا تتّفق عليه."
+                    attribution "هيلين فورنييه، أوّل أمينة للمتحف، ١٨٩٧"
+                }
+            }
+            div {
+                style maxWidth="var(--measure)"
+                p "قاعة المطالعة في الطابق الثاني مفتوحة لكلّ من لديه سؤال. على رفوفها سجلّات المرفأ، ودفاتر المسح، وأربعمئة صندوق من مراسلات الورش، ودفاتر محاضر المتحف نفسه — بما فيها تلك التي دوّنت خلافات كان الأمناء يفضّلون كتمانها." {
+                    style margin="0" lineHeight="1.9"
+                }
+                p "لا حاجة إلى موعد للقراءة، وثمّة حاجة إليه لمناولة المواد. اسأل عند المكتب، ويحضر أحد الموظّفين الصندوق خلال ساعة." {
+                    style margin="1.1rem 0 0" lineHeight="1.9"
+                }
+            }
+        }
+    }
+    mu-cta {
+        $props {
+            kicker "الدخول مجّانيّ"
+            heading "القاعة مفتوحة. تعالوا واختلفوا معنا."
+            text "ستّة أيّام في الأسبوع، من العاشرة إلى السادسة، بلا تذكرة وبلا حجز. ويبقى الفناء مفتوحًا ساعة إضافيّة طوال الصيف."
+            label "خطّط لزيارتك"
+            href "/ar/visit/"
+        }
+    }
+}