/* Al-Warraq — the library's doorway.
   Palette: Cloud Dancer (Pantone's colour of 2026) paper, malachite emerald, saffron gold.
   Type: Alexandria for display, IBM Plex Sans Arabic for reading, Amiri for verse, Fraunces for Latin covers.
   Every icon has an entrance "draw" and its own hover motion; everything calms down under
   prefers-reduced-motion. (The --rose* tokens are the saffron accent; the names predate it.) */

:root {
    --bg: #F2F0EA;
    --bg-2: #E9E5DA;
    --card: #FFFFFF;
    --ink: #13201C;
    --muted: #5A6762;
    --line: #E1DCD0;
    --brand: #0E6B5A;
    --brand-2: #18A086;
    --brand-rgb: 14 107 90;
    --brand-ink: #FFFFFF;
    --brand-soft: #DDEEE8;
    --brand-deep: #0A4A3E;
    --rose: #A35F08;
    --rose-2: #F2B544;
    --rose-soft: #FBEFD5;
    --grad: linear-gradient(140deg, #18A086 0%, #0E6B5A 58%, #0A4A3E 100%);
    --grad-btn: linear-gradient(140deg, #139477 0%, #0B5546 100%);
    --glass: rgba(242, 240, 234, .78);
    --shadow-sm: 0 1px 2px rgba(19, 32, 28, .05), 0 2px 8px -4px rgba(19, 32, 28, .10);
    --shadow: 0 1px 2px rgba(19, 32, 28, .05), 0 14px 32px -18px rgba(10, 74, 62, .32);
    --shadow-lg: 0 2px 4px rgba(19, 32, 28, .05), 0 30px 60px -30px rgba(10, 74, 62, .48);
    --arch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 46' preserveAspectRatio='none'%3E%3Cpath d='M0 46V24C0 11.5 9 5 20 0c11 5 20 11.5 20 24v22z'/%3E%3C/svg%3E");
    --cv-l: 92%;
    --cv-l2: 84%;
    --cv-fg-l: 22%;
    --av-l: 90%;
    --ic-bg-l: 93%;
    --ic-fg-l: 38%;
    --font-ui: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, system-ui, sans-serif;
    --font-logo: 'Alexandria', 'IBM Plex Sans Arabic', sans-serif;
    --font-ar: 'Amiri', 'Noto Naskh Arabic', 'Times New Roman', serif;
    --font-lat: 'Fraunces', Georgia, 'Times New Roman', serif;
    --r: 18px;
    --r-lg: 30px;
    --ease: cubic-bezier(.22, .8, .24, 1);
    --spring: cubic-bezier(.34, 1.56, .64, 1);
    color-scheme: light
}

:root[data-theme="dark"] {
    --bg: #0F1614;
    --bg-2: #131C19;
    --card: #17221F;
    --ink: #ECF2EF;
    --muted: #9DB0A8;
    --line: #26342F;
    --brand: #4FD1B0;
    --brand-2: #7FE3C9;
    --brand-rgb: 79 209 176;
    --brand-ink: #062019;
    --brand-soft: #173A31;
    --brand-deep: #0B2F27;
    --rose: #F2B544;
    --rose-2: #F7CB72;
    --rose-soft: #3A2C12;
    --grad-btn: linear-gradient(140deg, #5BD8B8 0%, #2FB592 100%);
    --glass: rgba(15, 22, 20, .78);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .25);
    --shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 10px 24px -16px rgba(0, 0, 0, .45);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, .25), 0 22px 44px -26px rgba(0, 0, 0, .55);
    --cv-l: 24%;
    --cv-l2: 18%;
    --cv-fg-l: 90%;
    --av-l: 26%;
    --ic-bg-l: 22%;
    --ic-fg-l: 78%;
    color-scheme: dark
}


/* ---------- base ---------- */

* {
    box-sizing: border-box
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden
}

img {
    max-width: 100%
}

a {
    color: inherit
}

button,
input,
select {
    font: inherit;
    color: inherit
}

button {
    cursor: pointer
}

[hidden] {
    display: none!important
}

:focus-visible {
    outline: 3px solid var(--brand-2);
    outline-offset: 2px
}

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

.wrap {
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: clamp(16px, 3.5vw, 36px)
}

section {
    scroll-margin-top: 84px
}

h1,
h2,
h3 {
    margin: 0;
    text-wrap: balance;
    line-height: 1.25
}

h2 {
    font-size: clamp(1.45rem, 2.6vw, 2rem);
    font-weight: 700
}

.lead {
    color: var(--muted);
    margin: 6px 0 0;
    max-width: 62ch
}


/* ---------- icons ---------- */

.ic {
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform-box: fill-box;
    transform-origin: center;
    overflow: visible
}

/* entrance: the outline draws itself when its section scrolls into view */
.js .reveal .ic path[pathLength] {
    stroke-dasharray: 1;
    stroke-dashoffset: 1
}

/* no [pathLength] here: Chrome does not restyle the SVG paths when "in" arrives if the selector names that
   camelCase attribute, so the icons stayed undrawn (paths without pathLength are not dashed: no effect) */
.js .reveal.in .ic path {
    animation: draw 1.1s var(--ease) forwards;
    animation-delay: var(--d, .1s)
}

@keyframes draw {
    to {
        stroke-dashoffset: 0
    }
}

/* each icon has its own motion, played on hover of whatever holds it */
.cc:hover .ic,
.catitem:hover .ic,
.topnav a:hover .ic,
.sec-head:hover .sec-ic .ic,
.desk:hover .dk-ic .ic,
.tag:hover .ic,
.foot a:hover .ic {
    animation: var(--hover-anim, bob .8s var(--spring));
}

.ic-nov,
.ic-nb {
    --hover-anim: bookflip .9s var(--spring)
}

.ic-poe {
    --hover-anim: quill 1.1s ease-in-out
}

.ic-dra {
    --hover-anim: sway 1s ease-in-out
}

.ic-phi {
    --hover-anim: glow 1.2s ease-in-out
}

.ic-his {
    --hover-anim: rise .8s var(--spring)
}

.ic-sci {
    --hover-anim: shake .8s ease-in-out
}

.ic-med {
    --hover-anim: beat .9s ease-in-out
}

.ic-eng {
    --hover-anim: spin 1.4s var(--ease)
}

.ic-mat {
    --hover-anim: wobble .9s ease-in-out
}

.ic-rel {
    --hover-anim: twinkle 1s var(--spring)
}

.ic-pol {
    --hover-anim: spin 1.8s var(--ease)
}

.ic-chi {
    --hover-anim: jelly .9s var(--spring)
}

.ic-bio {
    --hover-anim: wave .9s ease-in-out
}

.ic-tra {
    --hover-anim: compass 1.2s var(--ease)
}

.ic-psy {
    --hover-anim: bob .8s var(--spring)
}

.ic-art {
    --hover-anim: tilt 1s ease-in-out
}

.ic-gen {
    --hover-anim: jelly .9s var(--spring)
}

.ic-dev {
    --hover-anim: rise .8s var(--spring)
}

.ic-ara {
    --hover-anim: bob .8s var(--spring)
}

.ic-hor {
    --hover-anim: shake .8s ease-in-out
}

.ic-mys {
    --hover-anim: wobble .9s ease-in-out
}

@keyframes bob {
    0%,
    100% {
        transform: translateY(0)
    }
    45% {
        transform: translateY(-4px) scale(1.08)
    }
}

@keyframes bookflip {
    0%,
    100% {
        transform: perspective(60px) rotateY(0)
    }
    50% {
        transform: perspective(60px) rotateY(-35deg) scale(1.08)
    }
}

@keyframes quill {
    0%,
    100% {
        transform: rotate(0)
    }
    25% {
        transform: rotate(-14deg) translateY(-2px)
    }
    55% {
        transform: rotate(10deg)
    }
    80% {
        transform: rotate(-4deg)
    }
}

@keyframes sway {
    0%,
    100% {
        transform: skewX(0)
    }
    30% {
        transform: skewX(-8deg)
    }
    65% {
        transform: skewX(6deg)
    }
}

@keyframes glow {
    0%,
    100% {
        transform: translateY(0);
        filter: none
    }
    50% {
        transform: translateY(-3px) scale(1.1);
        filter: drop-shadow(0 0 6px currentColor)
    }
}

@keyframes rise {
    0% {
        transform: scaleY(1)
    }
    40% {
        transform: scaleY(1.18) translateY(-2px)
    }
    70% {
        transform: scaleY(.94)
    }
    100% {
        transform: scaleY(1)
    }
}

@keyframes shake {
    0%,
    100% {
        transform: rotate(0)
    }
    20% {
        transform: rotate(-14deg)
    }
    40% {
        transform: rotate(11deg)
    }
    60% {
        transform: rotate(-7deg)
    }
    80% {
        transform: rotate(4deg)
    }
}

@keyframes beat {
    0%,
    100% {
        transform: scale(1)
    }
    20% {
        transform: scale(1.2)
    }
    40% {
        transform: scale(.95)
    }
    60% {
        transform: scale(1.12)
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes wobble {
    0%,
    100% {
        transform: translateX(0)
    }
    25% {
        transform: translateX(-3px) rotate(-6deg)
    }
    50% {
        transform: translateX(2px) rotate(4deg)
    }
    75% {
        transform: translateX(-1px) rotate(-2deg)
    }
}

@keyframes twinkle {
    0% {
        transform: scale(1) rotate(0)
    }
    50% {
        transform: scale(1.25) rotate(72deg)
    }
    100% {
        transform: scale(1) rotate(144deg)
    }
}

@keyframes jelly {
    0%,
    100% {
        transform: scale(1, 1)
    }
    30% {
        transform: scale(1.2, .85)
    }
    50% {
        transform: scale(.88, 1.12)
    }
    70% {
        transform: scale(1.06, .96)
    }
}

@keyframes wave {
    0%,
    100% {
        transform: rotate(0)
    }
    25% {
        transform: rotate(-10deg)
    }
    50% {
        transform: rotate(8deg)
    }
    75% {
        transform: rotate(-4deg)
    }
}

@keyframes compass {
    0% {
        transform: rotate(0)
    }
    35% {
        transform: rotate(-40deg)
    }
    65% {
        transform: rotate(25deg)
    }
    100% {
        transform: rotate(0)
    }
}

@keyframes tilt {
    0%,
    100% {
        transform: rotate(0)
    }
    50% {
        transform: rotate(-18deg) scale(1.08)
    }
}

@keyframes floaty {
    0%,
    100% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(-6px)
    }
}


/* ---------- top bar ---------- */

.bar {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 30;
    background: var(--glass);
    backdrop-filter: saturate(1.6) blur(16px);
    -webkit-backdrop-filter: saturate(1.6) blur(16px);
    border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent)
}

.bar-in {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-block: 10px
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex: none
}

.logo-mark {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 15px;
    filter: drop-shadow(0 6px 14px rgb(var(--brand-rgb) / .35));
    animation: logoIn .9s var(--spring) both;
    transition: transform .4s var(--spring), filter .4s
}

.logo-mark.sm {
    width: 34px;
    height: 34px;
    animation: none
}

.logo:hover .logo-mark {
    transform: rotate(-6deg) scale(1.06);
    filter: drop-shadow(0 8px 18px rgba(242, 181, 68, .45)) saturate(1.15)
}

@keyframes logoIn {
    from {
        transform: scale(.4) rotate(-20deg);
        opacity: 0
    }
}

.logo-mark .lg-pr {
    transform-box: view-box;
    transform-origin: 24px 26px;
    animation: pageFlap 6s ease-in-out infinite
}

.logo-mark .lg-q,
.logo-mark .lg-q2 {
    transform-box: view-box;
    transform-origin: 25px 19px;
    animation: quillWrite 3.2s ease-in-out infinite
}

.logo-mark .lg-st {
    transform-box: fill-box;
    transform-origin: center;
    animation: starTw 2.6s ease-in-out infinite
}

.logo:hover .lg-pr {
    animation-duration: 1.4s
}

.logo:hover .lg-q,
.logo:hover .lg-q2 {
    animation-duration: .9s
}

@keyframes pageFlap {
    0%,
    70%,
    100% {
        transform: scaleX(1)
    }
    80% {
        transform: scaleX(.55) skewY(-4deg)
    }
    90% {
        transform: scaleX(1.03)
    }
}

@keyframes quillWrite {
    0%,
    100% {
        transform: rotate(0)
    }
    30% {
        transform: rotate(-9deg) translate(-.6px, .4px)
    }
    60% {
        transform: rotate(5deg)
    }
}

@keyframes starTw {
    0%,
    100% {
        transform: scale(.7) rotate(0);
        opacity: .65
    }
    50% {
        transform: scale(1.15) rotate(45deg);
        opacity: 1
    }
}

.logo-txt {
    display: flex;
    flex-direction: column;
    line-height: 1.2
}

.logo-txt b {
    font-family: var(--font-logo);
    font-size: 1.32rem;
    font-weight: 700;
    line-height: 1.5;
    padding-top: .1em;
    margin-bottom: -.25em;
    white-space: nowrap;
    background: linear-gradient(120deg, var(--ink) 30%, var(--brand) 75%, var(--rose));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.logo-txt small {
    font-size: .68rem;
    color: var(--muted);
    letter-spacing: .02em;
    white-space: nowrap
}

.topnav {
    display: none;
    gap: 2px;
    margin-inline-start: 4px
}

.topnav a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 99px;
    text-decoration: none;
    color: var(--muted);
    font-weight: 500;
    transition: background .25s, color .25s
}

.topnav a .ic {
    width: 17px;
    height: 17px;
    color: var(--brand)
}

.topnav a:hover {
    background: var(--brand-soft);
    color: var(--ink)
}

.search {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding-inline: 16px 5px;
    background: var(--card);
    border: 1.5px solid var(--line);
    border-radius: 99px;
    box-shadow: var(--shadow-sm);
    transition: border-color .25s, box-shadow .25s
}

.search:focus-within {
    border-color: var(--brand-2);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-2) 22%, transparent), var(--shadow)
}

.search .ic {
    color: var(--muted);
    transition: color .25s
}

.search:focus-within .ic {
    color: var(--brand);
    animation: searchPeek .9s var(--spring)
}

@keyframes searchPeek {
    0% {
        transform: rotate(0)
    }
    35% {
        transform: rotate(-25deg) scale(1.2)
    }
    70% {
        transform: rotate(12deg)
    }
    100% {
        transform: rotate(0)
    }
}

.search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: 0;
    height: 100%;
    font-size: 1rem
}

.search button,
.btn-grad {
    flex: none;
    position: relative;
    overflow: hidden;
    height: 36px;
    padding-inline: 18px;
    border: 0;
    border-radius: 99px;
    background: var(--grad-btn);
    color: var(--brand-ink);
    font-weight: 600;
    box-shadow: 0 6px 16px -8px rgb(var(--brand-rgb) / .7);
    transition: transform .25s var(--spring), box-shadow .25s
}

.search button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px -8px rgb(var(--brand-rgb) / .8)
}

.tools {
    display: flex;
    gap: 6px;
    flex: none
}

.ibtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-width: 42px;
    height: 42px;
    padding-inline: 10px;
    border: 1.5px solid var(--line);
    border-radius: 14px;
    background: var(--card);
    font-weight: 600;
    transition: border-color .25s, transform .3s var(--spring), background .25s
}

.ibtn:hover {
    border-color: var(--brand-2);
    transform: translateY(-2px)
}

.lang-btn:hover {
    animation: flip .6s var(--ease)
}

/* the language menu: a <details>, so it opens without the script too */
.lmenu {
    position: relative
}

.lmenu>summary {
    gap: 6px;
    list-style: none;
    cursor: pointer;
    user-select: none
}

.lmenu>summary::-webkit-details-marker {
    display: none
}

.lmenu>summary .ic {
    width: 18px;
    height: 18px;
    color: var(--brand)
}

.lmenu[open]>summary {
    border-color: var(--brand-2)
}

.lmenu-list {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 8px);
    z-index: 40;
    display: grid;
    min-width: 180px;
    padding: 6px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-lg)
}

.lmenu-list a {
    padding: 8px 12px;
    border-radius: 10px;
    color: var(--ink);
    font-weight: 500;
    text-decoration: none
}

.lmenu-list a:hover,
.lmenu-list a:focus-visible {
    background: var(--brand-soft);
    color: var(--brand)
}

.lmenu-list a[aria-current] {
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: 700
}

@keyframes flip {
    50% {
        transform: translateY(-2px) rotateX(180deg)
    }
    100% {
        transform: translateY(-2px) rotateX(360deg)
    }
}

.theme-btn .ic {
    position: absolute;
    transition: transform .6s var(--spring), opacity .35s
}

.theme-btn .i-moon {
    opacity: 0;
    transform: rotate(-90deg) scale(.4)
}

.theme-btn .i-sun {
    color: #F5A524
}

.theme-btn .i-moon {
    color: var(--brand)
}

.theme-btn:hover .i-sun {
    transform: rotate(90deg)
}

.theme-btn .tw {
    animation: starTw 2.4s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center
}

:root[data-theme="dark"] .theme-btn .i-sun {
    opacity: 0;
    transform: rotate(90deg) scale(.4)
}

:root[data-theme="dark"] .theme-btn .i-moon {
    opacity: 1;
    transform: none
}

@media (max-width:640px) {
    .logo-txt {
        display: none
    }
    .search button {
        display: none
    }
    .bar-in {
        gap: 10px
    }
}

@media (min-width:1060px) {
    .topnav {
        display: flex
    }
}


/* ---------- hero ---------- */

.hero-sec {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(180deg, var(--bg-2), var(--bg))
}

.blobs {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 55%, transparent 100%)
}

.blobs i {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
    animation: blob 18s ease-in-out infinite
}

.blobs .b1 {
    width: 460px;
    height: 460px;
    background: #9BD8FF;
    top: -160px;
    inset-inline-start: -120px
}

.blobs .b2 {
    width: 360px;
    height: 360px;
    background: #FFD3E2;
    top: 18%;
    inset-inline-end: 34%;
    animation-delay: -6s
}

.blobs .b3 {
    width: 300px;
    height: 300px;
    background: #C9E6FF;
    top: 30%;
    inset-inline-end: -80px;
    animation-delay: -12s
}

:root[data-theme="dark"] .blobs i {
    opacity: .14;
    filter: blur(90px)
}

@keyframes blob {
    0%,
    100% {
        transform: translate(0, 0) scale(1)
    }
    33% {
        transform: translate(40px, 30px) scale(1.1)
    }
    66% {
        transform: translate(-30px, 20px) scale(.92)
    }
}

.hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: center;
    padding-block: clamp(32px, 6vw, 72px) clamp(28px, 4vw, 48px)
}

.hero-txt>* {
    animation: up .8s var(--ease) both
}

.hero-txt>*:nth-child(2) {
    animation-delay: .08s
}

.hero-txt>*:nth-child(3) {
    animation-delay: .16s
}

.hero-txt>*:nth-child(4) {
    animation-delay: .24s
}

.hero-txt>*:nth-child(5) {
    animation-delay: .32s
}

@keyframes up {
    from {
        opacity: 0;
        transform: translateY(18px)
    }
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px 6px 12px;
    border-radius: 99px;
    background: var(--card);
    border: 1px solid var(--line);
    color: var(--brand);
    font-weight: 600;
    font-size: .88rem;
    box-shadow: var(--shadow-sm)
}

.tag .ic {
    width: 17px;
    height: 17px
}

.tag .ic-spark {
    color: var(--rose);
    fill: color-mix(in srgb, var(--rose) 18%, transparent);
    animation: twinkle 3s ease-in-out infinite
}

.tag.rose {
    color: var(--rose);
    background: color-mix(in srgb, var(--card) 70%, transparent)
}

.hero h1 {
    font-size: clamp(2.2rem, 5.6vw, 4.1rem);
    font-weight: 700;
    margin-top: 16px;
    max-width: 14ch;
    line-height: 1.15;
    letter-spacing: -.01em;
    background: linear-gradient(110deg, var(--ink) 35%, var(--brand) 70%, var(--rose) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-bottom: .08em
}

.hero .lead {
    font-size: 1.08rem
}

.quick {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
    align-items: center
}

.quick span {
    color: var(--muted);
    font-size: .92rem
}

.qchip {
    padding: 7px 15px;
    border: 1.5px solid var(--line);
    border-radius: 99px;
    background: var(--card);
    font-size: .95rem;
    box-shadow: var(--shadow-sm);
    transition: transform .3s var(--spring), border-color .25s, color .25s, box-shadow .25s
}

.qchip:hover {
    border-color: var(--brand-2);
    color: var(--brand);
    transform: translateY(-3px);
    box-shadow: var(--shadow)
}

.stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px
}

.stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px 12px 14px;
    background: var(--glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
    transition: transform .3s var(--spring), box-shadow .3s
}

.stat:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow)
}

.stat .st-ic {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: var(--brand-soft);
    color: var(--brand)
}

.stat:nth-child(2) .st-ic {
    background: var(--rose-soft);
    color: var(--rose)
}

.stat:nth-child(3) .st-ic {
    background: color-mix(in srgb, #2BB673 14%, var(--card));
    color: #1E9E62
}

.stat:hover .ic {
    animation: jelly .8s var(--spring)
}

.stat b {
    display: block;
    font-size: 1.45rem;
    line-height: 1.1;
    font-weight: 700;
    font-variant-numeric: tabular-nums
}

.stat span {
    color: var(--muted);
    font-size: .86rem
}

.fan {
    display: none;
    position: relative;
    height: 360px;
    direction: ltr
}

.fan .cover {
    position: absolute;
    width: 172px;
    top: 30px;
    box-shadow: var(--shadow-lg);
    animation: fanIn 1s var(--spring) both, floaty 6s ease-in-out infinite;
    transition: transform .4s var(--spring)
}

.fan .cover:nth-child(1) {
    left: 2%;
    rotate: -10deg;
    translate: 0 30px;
    animation-delay: .1s, 0s
}

.fan .cover:nth-child(2) {
    left: 19%;
    rotate: -5deg;
    translate: 0 8px;
    z-index: 2;
    animation-delay: .2s, -1.2s
}

.fan .cover:nth-child(3) {
    left: 36%;
    rotate: 0deg;
    z-index: 3;
    animation-delay: .3s, -2.4s
}

.fan .cover:nth-child(4) {
    left: 53%;
    rotate: 5deg;
    translate: 0 10px;
    z-index: 2;
    animation-delay: .4s, -3.6s
}

.fan .cover:nth-child(5) {
    left: 70%;
    rotate: 10deg;
    translate: 0 34px;
    animation-delay: .5s, -4.8s
}

.fan .cover:hover {
    rotate: 0deg;
    scale: 1.06;
    z-index: 5
}

@keyframes fanIn {
    from {
        opacity: 0;
        transform: translateY(60px) scale(.8)
    }
}

@media (min-width:980px) {
    .hero {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr)
    }
    .fan {
        display: block
    }
}


/* ---------- section heads ---------- */

.sec-head {
    display: flex;
    align-items: flex-start;
    gap: 14px
}

.sec-ic {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: var(--grad);
    color: #fff;
    box-shadow: 0 10px 22px -10px rgb(var(--brand-rgb) / .7);
    margin-top: 2px
}

.sec-ic .ic {
    width: 24px;
    height: 24px;
    stroke-width: 2
}

.reveal {
    opacity: 1
}

.js .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s var(--ease), transform .8s var(--ease)
}

.js .reveal.in {
    opacity: 1;
    transform: none
}



/* ---------- categories ---------- */

.cats-sec {
    padding-block: 34px 10px
}

.catgrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 22px
}

@media (min-width:620px) {
    .catgrid {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media (min-width:980px) {
    .catgrid {
        grid-template-columns: repeat(4, 1fr)
    }
}

@media (min-width:1180px) {
    .catgrid {
        grid-template-columns: repeat(6, 1fr)
    }
}

a.cc,
a.av {
    text-decoration: none;
    color: inherit
}

.cc {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: linear-gradient(160deg, hsl(var(--h) 90% var(--ic-bg-l) / .55), var(--card) 55%);
    text-align: start;
    box-shadow: var(--shadow-sm);
    transition: transform .35s var(--spring), border-color .3s, box-shadow .3s;
    animation: up .6s var(--ease) both;
    animation-delay: calc(var(--i, 0) * 40ms)
}

.cc::after {
    content: "";
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    inset-inline-end: -30px;
    top: -30px;
    background: hsl(var(--h) 90% 75% / .22);
    transition: transform .5s var(--ease)
}

.cc:hover {
    transform: translateY(-5px);
    border-color: hsl(var(--h) 75% 70%);
    box-shadow: var(--shadow)
}

.cc:hover::after {
    transform: scale(1.8)
}

:root[data-theme="dark"] .cc {
    background: var(--card)
}

:root[data-theme="dark"] .cc::after {
    background: hsl(var(--h) 80% 70% / .08)
}

.cci {
    position: relative;
    z-index: 1;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: hsl(var(--h) 90% var(--ic-bg-l));
    color: hsl(var(--h) 60% var(--ic-fg-l));
    transition: transform .4s var(--spring)
}

.cci .ic {
    width: 26px;
    height: 26px
}

.cc:hover .cci {
    transform: rotate(-8deg) scale(1.08)
}

.cc b {
    position: relative;
    z-index: 1;
    font-weight: 600;
    line-height: 1.3
}

.cc small {
    position: relative;
    z-index: 1;
    color: var(--muted);
    font-variant-numeric: tabular-nums
}


/* ---------- Arabic poetry ---------- */

.poetry-sec {
    padding-block: 34px 10px
}

.poetry {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    padding: clamp(20px, 4vw, 40px);
    border-radius: var(--r-lg);
    background: radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--rose-soft) 90%, transparent), transparent 55%), radial-gradient(120% 120% at 0% 100%, var(--brand-soft), transparent 60%), var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--shadow)
}

.poetry::before {
    content: "\201D";
    position: absolute;
    inset-inline-end: 28px;
    top: -6px;
    font-size: 8rem;
    line-height: 1;
    color: var(--rose);
    opacity: .14;
    font-family: Georgia, 'Times New Roman', serif;
    pointer-events: none
}

.poetry h2 {
    margin-top: 12px
}

.verse {
    margin: 20px 0 0;
    padding: 16px 20px;
    border-inline-start: 4px solid var(--rose-2);
    border-radius: 14px;
    background: color-mix(in srgb, var(--card) 75%, transparent);
    font-family: var(--font-ar);
    font-size: clamp(1.1rem, 2.2vw, 1.35rem);
    line-height: 2;
    min-height: 6.2em;
    transition: opacity .6s, transform .6s var(--ease)
}

.verse.out {
    opacity: 0;
    transform: translateY(8px)
}

.verse span {
    display: block
}

.verse cite {
    display: block;
    margin-top: 6px;
    font-family: var(--font-ui);
    font-size: .85rem;
    font-style: normal;
    color: var(--rose)
}

.poets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-content: start
}

@media (min-width:640px) {
    .poets {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

@media (min-width:980px) {
    .poetry {
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
        align-items: center
    }
}

.poet {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--card);
    text-align: start;
    transition: transform .3s var(--spring), border-color .25s, box-shadow .25s;
    animation: up .6s var(--ease) both;
    animation-delay: calc(var(--i, 0) * 35ms)
}

.poet:hover {
    transform: translateY(-3px);
    border-color: var(--rose-2);
    box-shadow: var(--shadow)
}

.poet .pm {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rose-2), var(--brand-2));
    color: #fff;
    font-family: var(--font-ar);
    font-weight: 700;
    font-size: 1.15rem;
    transition: transform .5s var(--spring)
}

.poet:hover .pm {
    transform: rotate(360deg)
}

.poet span {
    display: flex;
    flex-direction: column;
    min-width: 0
}

/* a long name goes on to a second line: cutting an Arabic word with "…" breaks its joined letters */
.poet b {
    font-weight: 600;
    font-size: .92rem;
    line-height: 1.35
}

@media (max-width:420px) {
    .poet {
        gap: 8px;
        padding: 8px
    }
    .poet .pm {
        width: 34px;
        height: 34px;
        font-size: 1rem
    }
    .poet b {
        font-size: .88rem
    }
}

.poet small {
    color: var(--muted);
    font-size: .78rem
}


/* ---------- popular ---------- */

.pop-sec {
    padding-block: 30px 6px
}

.pop-sec h3 {
    font-size: 1.1rem;
    margin: 0 0 12px
}

.shelfrow {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 4px 2px 12px;
    scroll-snap-type: x proximity
}

.sh {
    flex: none;
    width: 130px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 6px
}

.sh .cover {
    width: 130px
}

.sh-t {
    color: inherit;
    text-decoration: none;
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden
}

.sh-v {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--muted);
    font-size: .8rem
}

.sh-v .ic {
    width: 14px;
    height: 14px
}

.qrow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 6px
}

#popSearch {
    margin-top: 16px
}


/* ---------- browse: sidebar + results ---------- */

.browse-sec {
    padding-top: 40px
}

.layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    padding-block: 22px 40px;
    align-items: start
}

.side {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 16px;
    box-shadow: var(--shadow-sm);
    display: none
}

.side.open {
    display: block;
    animation: up .4s var(--ease)
}

.side h3 {
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
    margin: 0 0 8px
}

.side .grp+.grp {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line)
}

.catlist {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.catitem {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    text-align: start;
    transition: background .2s, transform .25s var(--spring)
}

.catitem:hover {
    background: var(--brand-soft);
    transform: translateX(-2px)
}

[dir="ltr"] .catitem:hover {
    transform: translateX(2px)
}

.catitem[aria-pressed="true"] {
    background: var(--grad-btn);
    color: var(--brand-ink);
    box-shadow: 0 8px 18px -10px rgb(var(--brand-rgb) / .8)
}

.catitem i {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: hsl(var(--h) 90% var(--ic-bg-l));
    color: hsl(var(--h) 60% var(--ic-fg-l))
}

.catitem i .ic {
    width: 16px;
    height: 16px
}

.catitem[aria-pressed="true"] i {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .8)
}

.catitem span {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.35
}

.catitem small {
    flex: none;
    opacity: .75;
    font-variant-numeric: tabular-nums
}

.sel {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: .88rem;
    color: var(--muted)
}

.sel+.sel {
    margin-top: 12px
}

.sel select {
    height: 42px;
    padding-inline: 10px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    background: var(--bg);
    color: var(--ink);
    width: 100%
}

.sel select:focus {
    border-color: var(--brand-2);
    outline: 0
}

.clear {
    margin-top: 16px;
    width: 100%;
    height: 42px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    background: transparent;
    font-weight: 500;
    transition: border-color .2s, color .2s
}

.clear:hover {
    border-color: var(--rose-2);
    color: var(--rose)
}

@media (min-width:980px) {
    .layout {
        grid-template-columns: 270px minmax(0, 1fr);
        gap: 28px
    }
    .side {
        display: block;
        position: sticky;
        top: calc(env(safe-area-inset-top, 0px) + 80px);
        max-height: calc(100vh - 100px);
        overflow: auto;
        scrollbar-width: thin
    }
    #filtBtn {
        display: none
    }
}

.res-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px
}

.res-head .count {
    font-weight: 600;
    font-variant-numeric: tabular-nums
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding-inline: 12px 8px;
    border: 0;
    border-radius: 99px;
    background: var(--rose-soft);
    color: var(--ink);
    animation: up .3s var(--ease);
    transition: background .2s, color .2s
}

.chip:hover {
    background: var(--rose);
    color: #fff
}

#filtBtn {
    margin-inline-start: auto;
    height: 40px;
    padding-inline: 16px;
    border: 1.5px solid var(--line);
    border-radius: 14px;
    background: var(--card);
    font-weight: 600
}

.beyond {
    margin: 0 0 18px;
    padding: 14px 16px;
    background: var(--card);
    border: 1.5px dashed var(--brand-2);
    border-radius: var(--r)
}

.beyond p {
    margin: 0 0 8px;
    font-weight: 600
}

.beyond div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.beyond a {
    padding: 5px 12px;
    border-radius: 99px;
    background: var(--brand-soft);
    text-decoration: none;
    font-weight: 500;
    transition: background .2s, color .2s
}

.beyond a:hover {
    background: var(--brand);
    color: var(--brand-ink)
}


/* ---------- covers & cards ---------- */

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 28px 18px
}

@media (min-width:640px) {
    .grid {
        grid-template-columns: repeat(auto-fill, minmax(172px, 1fr))
    }
}

.book {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    animation: up .5s var(--ease) both
}

.cover {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 2/3;
    border-radius: 6px 14px 14px 6px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--shadow);
    background: linear-gradient(165deg, hsl(var(--h) 85% var(--cv-l)), hsl(var(--h) 75% var(--cv-l2)));
    color: hsl(var(--h) 50% var(--cv-fg-l));
    transition: transform .45s var(--spring), box-shadow .35s
}

[dir="rtl"] .cover {
    border-radius: 14px 6px 6px 14px
}

.cover::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 10px;
    background: linear-gradient(90deg, rgba(0, 0, 0, .12), rgba(255, 255, 255, .3) 55%, rgba(0, 0, 0, 0));
    pointer-events: none;
    z-index: 3
}

[dir="rtl"] .cover::after {
    background: linear-gradient(270deg, rgba(0, 0, 0, .12), rgba(255, 255, 255, .3) 55%, rgba(0, 0, 0, 0))
}

.cover::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
    transform: translateX(-120%);
    transition: transform .8s var(--ease);
    pointer-events: none
}

.grid .cover:hover,
.sh .cover:hover {
    transform: translateY(-6px) rotate(-1.2deg);
    box-shadow: var(--shadow-lg)
}

.cover:hover::before {
    transform: translateX(120%)
}

.cv-fb {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px 14px 14px;
    padding-inline-start: 22px
}

.cv-cat {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .75
}

.cv-title {
    font-family: var(--font-lat);
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.25;
    text-wrap: balance;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden
}

.cv-title.ar {
    font-family: var(--font-ar);
    font-size: 1.32rem;
    line-height: 1.6
}

.cv-long .cv-title {
    font-size: 1rem
}

.cv-auth {
    font-size: .8rem;
    font-weight: 500;
    padding-top: 8px;
    border-top: 1.5px solid currentColor;
    overflow-wrap: anywhere;
    opacity: .9
}

.cv-deco {
    position: absolute;
    inset-inline-end: -28px;
    bottom: 40px;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, hsl(var(--h) 90% 82% / .7), hsl(var(--h) 80% 70% / .25));
    transition: transform .6s var(--ease)
}

.cover:hover .cv-deco {
    transform: scale(1.25) translate(-6px, -6px)
}

.cvimg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .35s;
    z-index: 2;
    background: var(--card)
}

.cvimg.ok {
    opacity: 1
}

.meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0
}

.ttl {
    font-size: .98rem;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden
}

.ttl-a {
    color: inherit;
    text-decoration: none;
    transition: color .2s
}

.ttl-a:hover {
    color: var(--brand)
}

.by {
    margin: 0;
    color: var(--muted);
    font-size: .88rem;
    overflow-wrap: anywhere
}

.row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin-top: 6px
}

.btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding-inline: 15px;
    border-radius: 99px;
    background: var(--grad-btn);
    color: var(--brand-ink);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 600;
    box-shadow: 0 6px 14px -8px rgb(var(--brand-rgb) / .7);
    transition: transform .25s var(--spring), box-shadow .25s
}

.btn::after,
.search button::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
    transform: translateX(-110%);
    transition: transform .7s var(--ease)
}

.btn:hover,
.search button:hover {
    transform: translateY(-1px)
}

.btn:hover::after,
.search button:hover::after {
    transform: translateX(110%)
}

.lnk {
    font-size: .85rem;
    color: var(--brand);
    text-underline-offset: 3px
}

.state {
    margin: 24px 0;
    color: var(--muted)
}

.state.loading::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-inline-end: 10px;
    vertical-align: -3px;
    border: 2.5px solid var(--brand-soft);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: spin .8s linear infinite
}

.err {
    padding: 14px 16px;
    border: 1px solid var(--rose);
    border-radius: var(--r);
    background: var(--card)
}

.err button,
.more {
    height: 44px;
    padding-inline: 24px;
    border: 1.5px solid var(--brand);
    border-radius: 99px;
    background: transparent;
    color: var(--brand);
    font-weight: 600;
    transition: background .25s, color .25s, transform .25s var(--spring)
}

.err button {
    margin-inline-start: 10px
}

.more {
    display: block;
    margin: 32px auto 0
}

.more:hover,
.err button:hover {
    background: var(--brand);
    color: var(--brand-ink);
    transform: translateY(-2px)
}

#sentinel {
    height: 1px
}


/* ---------- authors ---------- */

.authors-sec {
    padding-block: 34px
}

.avs {
    display: flex;
    gap: 18px;
    margin-top: 22px;
    overflow-x: auto;
    padding-block: 8px 14px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin
}

.avs.all {
    flex-wrap: wrap;
    overflow: visible
}

.av {
    flex: none;
    width: 112px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: center;
    scroll-snap-align: start
}

.av .mono {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: hsl(var(--h) 85% var(--av-l));
    color: hsl(var(--h) 50% var(--cv-fg-l));
    font-family: var(--font-ar);
    font-weight: 700;
    font-size: 2rem;
    box-shadow: var(--shadow-sm);
    transition: transform .4s var(--spring)
}

.av .mono::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    padding: 2.5px;
    background: conic-gradient(from 0deg, var(--brand-2), var(--rose-2), var(--brand-2));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .3s
}

.av:hover .mono {
    transform: translateY(-4px) scale(1.04)
}

.av:hover .mono::before {
    opacity: 1;
    animation: spin 3s linear infinite
}

.av b {
    font-size: .9rem;
    line-height: 1.3;
    font-weight: 600;
    overflow-wrap: anywhere
}

.av small {
    color: var(--muted);
    font-size: .78rem
}

.linkbtn {
    margin-top: 10px;
    height: 42px;
    padding-inline: 20px;
    border: 1.5px solid var(--line);
    border-radius: 99px;
    background: var(--card);
    font-weight: 500;
    transition: border-color .2s, color .2s, transform .25s var(--spring)
}

.linkbtn:hover {
    border-color: var(--brand-2);
    color: var(--brand);
    transform: translateY(-2px)
}


/* ---------- research ---------- */

.research-sec {
    padding-block: 34px 64px
}

.desks {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 24px
}

@media (min-width:900px) {
    .desks {
        grid-template-columns: 1fr 1fr
    }
}

.desk {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: clamp(18px, 2.6vw, 28px);
    min-width: 0;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .3s, transform .3s var(--spring)
}

.desk:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px)
}

.desk h3 {
    font-size: 1.3rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px
}

.dk-ic {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px
}

.dk-ic.med {
    background: var(--rose-soft);
    color: var(--rose)
}

.dk-ic.eng {
    background: var(--brand-soft);
    color: var(--brand)
}

.desk p.d {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: .95rem
}

.desk input {
    width: 100%;
    height: 48px;
    margin-top: 16px;
    padding-inline: 16px;
    border: 1.5px solid var(--line);
    border-radius: 14px;
    background: var(--bg);
    font-size: 1rem;
    direction: ltr;
    text-align: left;
    transition: border-color .25s, box-shadow .25s
}

.desk input:focus {
    outline: 0;
    border-color: var(--brand-2);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-2) 20%, transparent)
}

.topics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px
}

.topic {
    padding: 4px 12px;
    border: 1.5px solid var(--line);
    border-radius: 99px;
    background: transparent;
    font-size: .88rem;
    transition: border-color .2s, color .2s, transform .25s var(--spring)
}

.topic:hover {
    border-color: var(--brand-2);
    color: var(--brand);
    transform: translateY(-2px)
}

/* papers found for the topic */
.papers {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.p-head,
.p-msg {
    margin: 0;
    color: var(--muted);
    font-size: .9rem
}

.p-msg.loading::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-inline-end: 8px;
    vertical-align: -2px;
    border: 2.5px solid var(--brand-soft);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: spin .8s linear infinite
}

.p-skel {
    height: 74px;
    border-radius: 14px;
    background: linear-gradient(90deg, var(--bg) 0%, var(--brand-soft) 50%, var(--bg) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.2s linear infinite
}

@keyframes shimmer {
    to {
        background-position: -200% 0
    }
}

.paper {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--bg);
    animation: up .45s var(--ease) both;
    animation-delay: calc(var(--i, 0) * 40ms);
    transition: border-color .2s, transform .25s var(--spring)
}

.paper:hover {
    border-color: var(--brand-2);
    transform: translateY(-2px)
}

.p-t {
    display: block;
    font-weight: 600;
    line-height: 1.45;
    text-decoration: none;
    color: var(--ink);
    overflow-wrap: anywhere
}

.p-t:hover {
    color: var(--brand)
}

.p-m {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.5;
    overflow-wrap: anywhere
}

.p-f {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-top: 8px
}

.p-f .btn {
    height: 30px;
    font-size: .82rem
}

.p-c {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--muted);
    font-size: .8rem
}

.src-h {
    margin: 18px 0 8px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--muted)
}

/* the big databases, as compact chips */
.srcs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.src {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1.5px solid var(--line);
    border-radius: 99px;
    text-decoration: none;
    font-size: .88rem;
    transition: border-color .2s, background .2s, transform .25s var(--spring)
}

.src:hover {
    background: var(--brand-soft);
    border-color: var(--brand-2);
    transform: translateY(-2px)
}

.src:hover b {
    color: var(--brand)
}

.src b {
    font-weight: 600;
    direction: ltr
}

.src em {
    flex: none;
    font-style: normal;
    color: var(--brand);
    transition: transform .3s var(--spring)
}

.src:hover em {
    transform: translate(3px, -3px)
}

[dir="rtl"] .src:hover em {
    transform: translate(-3px, -3px)
}


/* ---------- footer ---------- */

.foot {
    position: relative;
    background: var(--card);
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .92rem
}

.foot::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: -1px;
    height: 3px;
    background: var(--grad)
}

.foot-in {
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
    padding-block: 36px 44px
}

@media (min-width:860px) {
    .foot-in {
        grid-template-columns: 1.2fr .8fr 1.4fr
    }
}

.foot-brand .logo-txt b {
    font-size: 1.15rem
}

.foot-brand p {
    margin: 12px 0 0;
    max-width: 42ch
}

.foot-src {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.foot-src h3 {
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 4px
}

.foot-src a {
    text-decoration: none;
    width: fit-content;
    transition: color .2s, transform .25s var(--spring)
}

.foot-src a:hover {
    color: var(--brand);
    transform: translateX(-3px)
}

[dir="ltr"] .foot-src a:hover {
    transform: translateX(3px)
}

.foot-cats {
    grid-column: 1 / -1
}

.foot-cats h3 {
    font-size: .8rem;
    letter-spacing: .06em;
    color: var(--ink);
    margin-bottom: 8px
}

#footCats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px
}

#footCats a {
    text-decoration: none;
    font-size: .88rem;
    transition: color .2s
}

#footCats a:hover {
    color: var(--brand)
}

.foot-legal p {
    margin: 0 0 8px;
    max-width: 70ch;
    font-size: .86rem
}


/* visitors: today / this month / this year, at the very bottom */

.visits {
    border-top: 1px solid var(--line);
    padding-block: 22px 30px;
    text-align: center
}

.visits h3 {
    font-size: .8rem;
    letter-spacing: .06em;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 14px
}

.fv-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 720px;
    margin-inline: auto
}

.fv {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 0;
    padding: 14px 12px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(160deg, var(--brand-soft), var(--card) 70%);
    text-align: start;
    transition: transform .3s var(--spring), box-shadow .3s
}

.fv:nth-child(2) {
    background: linear-gradient(160deg, var(--rose-soft), var(--card) 70%)
}

.fv:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow)
}

.fv-ic {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: var(--card);
    color: var(--brand);
    box-shadow: var(--shadow-sm)
}

.fv:nth-child(2) .fv-ic {
    color: var(--rose)
}

.fv:nth-child(3) .fv-ic {
    color: var(--brand-2)
}

.fv:hover .ic {
    animation: jelly .8s var(--spring)
}

.fv-ic .ic-eye {
    animation: blink 5s ease-in-out infinite
}

@keyframes blink {
    0%,
    92%,
    100% {
        transform: scaleY(1)
    }
    95% {
        transform: scaleY(.1)
    }
}

.fv b {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--ink);
    font-variant-numeric: tabular-nums
}

.fv small {
    display: block;
    font-size: .8rem;
    color: var(--muted)
}

@media (max-width:560px) {
    .fv {
        flex-direction: column;
        text-align: center;
        gap: 8px;
        padding: 12px 6px
    }
    .fv b {
        font-size: 1.3rem
    }
}


/* ---------- dark-mode tweaks ---------- */

:root[data-theme="dark"] .logo-mark,
:root[data-theme="dark"] .sec-ic {
    filter: none
}

/* ---------- calm mode ---------- */

@media (prefers-reduced-motion:reduce) {
    *,
    *::before,
    *::after {
        animation: none!important;
        transition: none!important;
        scroll-behavior: auto!important
    }
    .js .reveal {
        opacity: 1;
        transform: none
    }
    .js .reveal .ic path[pathLength] {
        stroke-dashoffset: 0
    }
}


/* =====================================================================================
   The doorway — Al-Warraq 2026.
   A modern Arabic library: Cloud Dancer paper, a malachite pointed arch that frames the books,
   a saffron sun rising behind it, Alexandria headlines over IBM Plex Sans Arabic, verse in Amiri.
   The arch is the motif everywhere: the logo, section badges, category tiles, the footer's colonnade.
   ===================================================================================== */

body {
    text-rendering: optimizeLegibility
}

h1,
h2,
.logo-txt b {
    font-family: var(--font-logo)
}

h2 {
    font-weight: 800;
    font-size: clamp(1.6rem, 3vw, 2.35rem);
    line-height: 1.35;
    letter-spacing: -.01em
}

html[lang="en"] h2 {
    letter-spacing: -.025em;
    line-height: 1.15
}

::selection {
    background: var(--rose-2);
    color: #13201C
}

:focus-visible {
    outline-color: var(--rose-2)
}

/* ---------- top bar ---------- */

.bar {
    border-bottom: 0;
    box-shadow: 0 1px 0 var(--line)
}

.logo-mark {
    width: 40px;
    height: 46px;
    border-radius: 0;
    filter: drop-shadow(0 8px 12px rgb(var(--brand-rgb) / .28))
}

.logo-mark.sm {
    width: 34px;
    height: 39px
}

.logo-mark svg {
    width: 100%;
    height: 100%;
    overflow: visible
}

.logo:hover .logo-mark {
    transform: translateY(-2px);
    filter: drop-shadow(0 10px 16px rgba(242, 181, 68, .5))
}

.lg-sun {
    transform-box: fill-box;
    transform-origin: center;
    animation: sunRise 1.2s .35s var(--spring) both, sunPulse 5s 1.8s ease-in-out infinite
}

.lg-waw {
    animation: wawIn .9s .15s var(--ease) both
}

.logo:hover .lg-sun {
    animation: sunHop .8s var(--spring)
}

@keyframes sunRise {
    from {
        transform: translateY(10px) scale(.3);
        opacity: 0
    }
}

@keyframes sunPulse {
    0%,
    100% {
        transform: scale(1)
    }
    50% {
        transform: scale(1.16)
    }
}

@keyframes sunHop {
    45% {
        transform: translateY(-3px) scale(1.25)
    }
}

@keyframes wawIn {
    from {
        opacity: 0;
        transform: translateY(4px)
    }
}

.logo-txt b {
    font-weight: 800;
    font-size: 1.26rem;
    letter-spacing: -.01em;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: var(--ink)
}

.logo-txt small {
    color: var(--brand);
    font-weight: 500
}

.topnav a {
    font-weight: 600;
    color: color-mix(in srgb, var(--ink) 78%, transparent)
}

.topnav a:hover {
    background: var(--card);
    color: var(--ink);
    box-shadow: var(--shadow-sm)
}

.search {
    border-radius: 16px;
    padding-inline: 16px 5px
}

.search button,
.btn-grad {
    border-radius: 12px
}

.ibtn {
    border-radius: 13px
}

/* ---------- hero: the doorway ---------- */

.hero-sec {
    background: radial-gradient(60% 70% at 92% -10%, color-mix(in srgb, var(--rose-2) 22%, transparent), transparent 70%), linear-gradient(180deg, var(--bg-2), var(--bg) 88%)
}

.hero {
    padding-block: clamp(30px, 5.5vw, 70px) clamp(30px, 4vw, 52px)
}

.tag {
    background: var(--brand-soft);
    border-color: transparent;
    box-shadow: none;
    color: var(--brand)
}

.tag .ic-spark {
    color: var(--rose);
    fill: var(--rose-2)
}

.hero h1 {
    font-weight: 800;
    font-size: clamp(2.5rem, 6.2vw, 4.7rem);
    line-height: 1.22;
    letter-spacing: -.015em;
    max-width: 12ch;
    margin-top: 18px;
    padding-bottom: 0;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: var(--ink)
}

html[lang="en"] .hero h1 {
    line-height: 1.04;
    letter-spacing: -.04em;
    max-width: 13ch
}

/* a saffron brush stroke under the headline, drawn on arrival */
.swash {
    display: block;
    width: min(300px, 70%);
    height: 22px;
    margin-top: 4px;
    color: var(--rose-2);
    overflow: visible
}

.swash path {
    fill: none;
    stroke: currentColor;
    stroke-width: 7;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: draw 1.2s .5s var(--ease) forwards
}

.hero .lead {
    font-size: clamp(1rem, 1.6vw, 1.12rem);
    line-height: 1.85
}

.qchip {
    border-radius: 12px;
    font-weight: 500
}

.qchip:hover {
    background: var(--brand-soft);
    border-color: transparent
}

/* the numbers, set like a colophon: no boxes, hairlines between them */
.stats {
    gap: 0;
    width: fit-content;
    max-width: 100%;
    margin-top: 30px;
    border-block: 1px solid var(--line)
}

.stat {
    padding: 14px 22px;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    border-radius: 0;
    box-shadow: none
}

.stat:first-child {
    padding-inline-start: 0
}

.stat+.stat {
    border-inline-start: 1px solid var(--line)
}

.stat:hover {
    transform: translateY(-2px);
    box-shadow: none
}

.stat b {
    font-family: var(--font-logo);
    font-weight: 800;
    font-size: clamp(1.35rem, 2.3vw, 1.85rem);
    letter-spacing: -.01em
}

.stat:nth-child(3) .st-ic {
    background: color-mix(in srgb, var(--ink) 7%, var(--card));
    color: var(--ink)
}

@media (min-width:561px) {
    .stats {
        display: grid;
        grid-template-columns: repeat(3, auto)
    }
    .stat {
        padding-inline: 18px
    }
}

@media (max-width:560px) {
    .stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%
    }
    .stat {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 12px 10px
    }
    .stat .st-ic {
        width: 34px;
        height: 34px
    }
    .stat b {
        font-size: 1.15rem
    }
}

/* the books stand in a malachite arch, a saffron sun rising behind its shoulder */
.fan {
    display: block;
    height: 270px;
    isolation: isolate
}

.fan::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    bottom: 0;
    width: min(250px, 66%);
    aspect-ratio: 40 / 46;
    translate: -50% 0;
    background: var(--grad);
    -webkit-mask: var(--arch) center / 100% 100% no-repeat;
    mask: var(--arch) center / 100% 100% no-repeat;
    animation: archUp 1.1s .1s var(--ease) both
}

.fan::after {
    content: "";
    position: absolute;
    z-index: -2;
    width: 76px;
    aspect-ratio: 1;
    left: calc(50% + 34px);
    top: 4px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 32%, #FFD98A, var(--rose-2) 58%, #E2951C);
    box-shadow: 0 0 0 12px rgba(242, 181, 68, .16), 0 0 0 26px rgba(242, 181, 68, .07);
    animation: sunUp 1.4s .45s var(--spring) both, floaty 8s 2s ease-in-out infinite
}

@keyframes archUp {
    from {
        clip-path: inset(100% 0 0 0)
    }
    to {
        clip-path: inset(0 0 0 0)
    }
}

@keyframes sunUp {
    from {
        opacity: 0;
        transform: translateY(70px) scale(.5)
    }
}

.fan .cover {
    top: auto;
    bottom: 18px;
    width: 104px
}

@media (min-width:980px) {
    .fan {
        height: 450px
    }
    .fan::before {
        width: min(390px, 76%)
    }
    .fan::after {
        width: 118px;
        left: calc(50% + 70px);
        top: 6px
    }
    .fan .cover {
        bottom: 34px;
        width: 158px
    }
}

/* ---------- section heads: an arch badge ---------- */

.sec-head {
    align-items: center;
    gap: 16px
}

.sec-ic {
    width: 48px;
    height: 56px;
    padding-top: 9px;
    border-radius: 0;
    background: var(--grad);
    box-shadow: none;
    filter: none;
    -webkit-mask: var(--arch) center / 100% 100% no-repeat;
    mask: var(--arch) center / 100% 100% no-repeat
}

.sec-head .lead {
    margin-top: 2px
}

/* ---------- categories: arch tiles ---------- */

.catgrid {
    gap: 14px;
    margin-top: 26px
}

.cc {
    gap: 10px;
    padding: 18px 16px 16px;
    border-radius: 22px;
    background: var(--card)
}

.cc::after {
    inset: 0 0 auto;
    width: auto;
    height: 4px;
    top: 0;
    border-radius: 0;
    background: hsl(var(--h) 55% 50%);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .5s var(--ease)
}

[dir="ltr"] .cc::after {
    transform-origin: left
}

.cc:hover {
    border-color: hsl(var(--h) 45% 78%)
}

.cc:hover::after {
    transform: scaleX(1)
}

.cci {
    width: 44px;
    height: 51px;
    padding-top: 7px;
    border-radius: 0;
    background: hsl(var(--h) 60% var(--ic-bg-l));
    color: hsl(var(--h) 55% var(--ic-fg-l));
    -webkit-mask: var(--arch) center / 100% 100% no-repeat;
    mask: var(--arch) center / 100% 100% no-repeat;
    transition: transform .4s var(--spring), background .35s, color .35s
}

.cc:hover .cci {
    transform: translateY(-3px);
    background: hsl(var(--h) 50% 40%);
    color: #fff
}

.cc b {
    font-family: var(--font-logo);
    font-weight: 700;
    font-size: 1.02rem
}

:root[data-theme="dark"] .cc:hover .cci {
    background: hsl(var(--h) 50% 60%);
    color: #0F1614
}

/* ---------- poetry: an emerald room for the diwan ---------- */

.poetry {
    --card: rgba(255, 255, 255, .07);
    --line: rgba(255, 255, 255, .14);
    --ink: #F6F2E8;
    --muted: #B8CEC5;
    --rose: #F2B544;
    --rose-2: #F2B544;
    --rose-soft: rgba(242, 181, 68, .16);
    --brand-soft: rgba(255, 255, 255, .08);
    color: var(--ink);
    border: 0;
    box-shadow: var(--shadow-lg);
    background: radial-gradient(80% 110% at 100% 0%, rgba(242, 181, 68, .18), transparent 55%), linear-gradient(150deg, #0E6B5A, #0A4A3E 68%, #08392F)
}

.poetry::before {
    color: #F2B544;
    opacity: .2
}

/* a large faint arch behind the poets */
.poetry::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset-inline-end: -50px;
    bottom: -90px;
    width: 300px;
    aspect-ratio: 40 / 46;
    background: rgba(255, 255, 255, .05);
    -webkit-mask: var(--arch) center / 100% 100% no-repeat;
    mask: var(--arch) center / 100% 100% no-repeat;
    pointer-events: none
}

.poetry>* {
    position: relative;
    z-index: 1
}

.poetry h2 {
    font-size: clamp(1.8rem, 3.4vw, 2.6rem)
}

.verse {
    grid-column: 1 / -1;
    margin: 4px 0 0;
    padding: 24px 26px 18px;
    border: 0;
    border-radius: 20px;
    background: rgba(255, 255, 255, .07);
    box-shadow: inset 0 0 0 1px rgba(242, 181, 68, .28);
    text-align: center;
    font-size: clamp(1.3rem, 2.6vw, 1.75rem);
    line-height: 2.05
}

.verse span {
    display: block
}

.verse cite {
    color: #F2B544
}

@media (min-width:760px) {
    /* the two halves of the line face each other, as in a diwan */
    .verse {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 4rem;
        position: relative
    }
    .verse::after {
        content: "۞";
        position: absolute;
        left: 50%;
        top: 2.1em;
        transform: translate(-50%, -50%);
        color: #F2B544;
        font-size: .8em;
        line-height: 1
    }
    .verse cite {
        grid-column: 1 / -1
    }
}

@media (max-width:979px) {
    /* one column: the verse right under the heading, the poets after it */
    .poetry .verse {
        order: 1
    }
    .poetry .poets {
        order: 2
    }
}

.poet:hover {
    border-color: #F2B544
}

.poet .pm {
    background: #F2B544;
    color: #0A4A3E
}

/* ---------- books, authors, desks ---------- */

.cover {
    border-radius: 6px 12px 12px 6px
}

[dir="rtl"] .cover {
    border-radius: 12px 6px 6px 12px
}

.ttl {
    font-weight: 600
}

.av .mono {
    font-family: var(--font-ar)
}

.desk h3,
.side h3,
.pop-sec h3 {
    font-family: var(--font-logo);
    font-weight: 700
}

.more,
.linkbtn {
    border-radius: 14px
}

/* ---------- footer: an emerald hall under a colonnade ---------- */

.foot {
    --card: rgba(255, 255, 255, .06);
    --line: rgba(255, 255, 255, .12);
    --ink: #F6F2E8;
    --muted: #A9C3B9;
    --brand: #F2B544;
    --brand-2: #7FE3C9;
    --brand-soft: rgba(255, 255, 255, .08);
    --rose: #F2B544;
    --rose-soft: rgba(242, 181, 68, .14);
    margin-top: 70px;
    border-top: 0;
    color: var(--muted);
    background: linear-gradient(180deg, #0B4A3E, #08342B)
}

.foot::before {
    top: -15px;
    height: 16px;
    background: #0B4A3E;
    -webkit-mask: var(--arch) center bottom / 24px 16px repeat-x;
    mask: var(--arch) center bottom / 24px 16px repeat-x
}

.foot-brand .logo-txt b {
    font-size: 1.3rem
}

/* about, privacy, terms, contact */
.foot-pages {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line)
}

.foot-pages a {
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
    transition: color .2s
}

.foot-pages a:hover {
    color: var(--brand)
}

@media (min-width:860px) {
    .foot-in {
        grid-template-columns: 1.25fr .7fr 1.2fr
    }
    .foot-legal {
        grid-column: 3;
        grid-row: 1
    }
}

.foot .logo-mark {
    filter: none
}

.foot .lg-arch {
    fill: #F6F2E8
}

.foot .lg-waw {
    fill: #0B4A3E
}

.foot-src h3,
.foot-cats h3 {
    font-family: var(--font-logo);
    color: #F2B544
}

.fv-ic {
    box-shadow: none
}

:root[data-theme="dark"] .foot {
    background: linear-gradient(180deg, #0B2F27, #071F1A)
}

:root[data-theme="dark"] .foot::before {
    background: #0B2F27
}

:root[data-theme="dark"] .poetry {
    background: radial-gradient(80% 110% at 100% 0%, rgba(242, 181, 68, .12), transparent 55%), linear-gradient(150deg, #0D4F43, #0A3A31 68%, #072B24)
}

/* ---------- calm mode ---------- */

@media (prefers-reduced-motion:reduce) {
    .swash path {
        stroke-dashoffset: 0
    }
    .fan::before {
        clip-path: none
    }
}

/* ---------- covers: the Al-Warraq edition ----------
   A book without a picture still gets a cover, never a blank: three designs (data-v, from the book id) in the
   colours of its category: a gold-framed binding, a modern paper cover, and the doorway of the logo.
   A real cover image, once it loads, sits on top of it. */

.cover[data-v] {
    --cv-ink: #F6F2E8;
    --cv-gold: #F2B544;
    --cv-girih: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cpath d='M13 1.5l3.2 8.3 8.3 3.2-8.3 3.2L13 24.5l-3.2-8.3L1.5 13l8.3-3.2z' fill='none' stroke='%23fff' stroke-opacity='.09'/%3E%3C/svg%3E");
    color: var(--cv-ink)
}

.cover[data-v] .cv-fb {
    isolation: isolate;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 18px 14px 14px
}

.cover[data-v] .cv-cat {
    order: 0;
    font-size: .64rem;
    opacity: .9
}

.cover[data-v] .cv-title {
    order: 1;
    margin-top: auto;
    font-size: 1.12rem;
    line-height: 1.45;
    -webkit-line-clamp: 4
}

.cover[data-v] .cv-title.ar {
    font-size: 1.28rem;
    line-height: 1.55
}

.cover[data-v].cv-long .cv-title {
    font-size: .98rem
}

.cover[data-v] .cv-deco {
    order: 2;
    position: static;
    flex: none;
    width: 16px;
    height: 19px;
    margin: 6px auto auto;
    border-radius: 0;
    background: currentColor;
    opacity: .85;
    -webkit-mask: var(--arch) center / 100% 100% no-repeat;
    mask: var(--arch) center / 100% 100% no-repeat
}

.cover[data-v]:hover .cv-deco {
    transform: translateY(-2px)
}

.cover[data-v] .cv-auth {
    order: 3;
    padding-top: 0;
    border-top: 0;
    font-size: .76rem
}

/* 0 · the binding: a deep colour, a girih pattern, a gold double frame */
.cover[data-v="0"] {
    background: var(--cv-girih), linear-gradient(160deg, hsl(var(--h) 42% 27%), hsl(var(--h) 46% 17%))
}

.cover[data-v="0"] .cv-fb {
    inset: 8px;
    padding: 14px 10px 10px;
    border: 1.5px solid rgb(242 181 68 / .75);
    border-radius: 3px;
    box-shadow: inset 0 0 0 3px hsl(var(--h) 44% 21%), inset 0 0 0 4px rgb(242 181 68 / .35)
}

.cover[data-v="0"] .cv-cat,
.cover[data-v="0"] .cv-deco,
.cover[data-v="0"] .cv-auth {
    color: var(--cv-gold)
}

/* 1 · modern paper: a cream cover, a coloured band at the foot carrying the author */
.cover[data-v="1"] {
    background: linear-gradient(180deg, #F4EFE4 0 76%, hsl(var(--h) 48% 34%) 76%);
    color: #1C2622
}

.cover[data-v="1"] .cv-cat,
.cover[data-v="1"] .cv-deco {
    color: hsl(var(--h) 50% 36%)
}

.cover[data-v="1"] .cv-title.ar {
    font-family: var(--font-logo);
    font-weight: 800;
    font-size: 1.12rem;
    line-height: 1.6
}

.cover[data-v="1"] .cv-auth {
    color: var(--cv-ink);
    min-height: 18%;
    display: grid;
    place-items: center;
    width: 100%
}

/* 2 · the doorway: a lighter arch in the middle, a saffron sun above it */
.cover[data-v="2"] {
    background: linear-gradient(170deg, hsl(var(--h) 46% 36%), hsl(var(--h) 52% 24%))
}

.cover[data-v="2"] .cv-fb::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 17% 15% 15%;
    background: hsl(var(--h) 40% 46% / .55);
    -webkit-mask: var(--arch) center / 100% 100% no-repeat;
    mask: var(--arch) center / 100% 100% no-repeat
}

.cover[data-v="2"] .cv-fb::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 10%;
    inset-inline-end: 22%;
    width: 15%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--cv-gold);
    opacity: .9
}

.cover[data-v="2"] .cv-cat,
.cover[data-v="2"] .cv-auth {
    color: var(--cv-gold)
}

.cover[data-v="2"] .cv-deco {
    display: none
}

.cover[data-v="2"] .cv-title {
    margin-block: auto  /* inside the arch, not at its foot */
}

/* AdSense units (placed by the server): labelled once filled, no room taken while empty */
.ad {
    margin: 28px 0;
    text-align: center
}

.ad .ad-l {
    display: none;
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--muted);
    margin-bottom: 6px
}

.ad:has(ins[data-ad-status=filled]) .ad-l {
    display: block
}

.ad:has(ins[data-ad-status=unfilled]),
ins.adsbygoogle[data-ad-status=unfilled] {
    display: none !important
}

/* the in-feed unit among the results: a whole row of the grid */
.grid .infeed {
    grid-column: 1 / -1;
    text-align: center
}

.infeed .ad-l {
    display: none;
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--muted);
    margin-bottom: 6px
}

.infeed:has(ins[data-ad-status=filled]) .ad-l {
    display: block
}

.infeed:has(ins[data-ad-status=unfilled]) {
    display: none
}

/* the library's own words on the home page (written by the server) and its latest articles */
.intro-sec {
    padding: 8px 0 18px
}

.intro {
    display: grid;
    gap: 6px 36px;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: start;
    background: var(--card, #fff);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 22px 26px
}

.intro > h2,
.intro > p {
    grid-column: 1;
    margin: 0
}

.intro > h2 {
    font-size: 1.35rem;
    margin-bottom: 4px
}

.intro > p {
    line-height: 1.95;
    color: var(--ink)
}

.intro-arts {
    grid-column: 2;
    grid-row: 1 / span 9
}

.intro-arts h3 {
    margin: 0 0 8px;
    font-size: 1.05rem
}

.intro-arts ul {
    margin: 0 0 10px;
    padding-inline-start: 18px
}

.intro-arts li {
    margin: 6px 0;
    line-height: 1.6
}

.intro-all {
    font-weight: 700
}

@media (max-width:820px) {
    .intro {
        grid-template-columns: minmax(0, 1fr);
        padding: 18px
    }

    .intro-arts {
        grid-column: 1;
        grid-row: auto
    }
}