/* Enamel cards: one card system for the whole atlas.
   An enamel "dial" band on top (source note + count) over a sheet of book paper
   (title, Arabic title in nastaʿlīq, author, details, action). Gilt page edges close the card.
   Class prefix: en-. Colour per card with data-glaze="turq | cobalt | garnet". */

:root {
  --en-paper1: #fbf6ea; --en-paper2: #f1e6cf; --en-ink: #1d2433; --en-ink2: #5a6478; --en-by: #3a3022;
  --en-ar: #6b4f1d; --en-frame: rgba(184,145,58,.35); --en-edge: #c9a44c; --en-link: #0b6d79;
  --en-arabic: var(--arabic, "Noto Nastaliq Urdu", serif);
}
:root[data-theme="dark"] { --en-paper1:#232a36; --en-paper2:#1b212c; --en-ink:#f2eee3; --en-ink2:#aab4c4; --en-by:#efe6d2; --en-ar:#e3c77e; --en-frame:rgba(227,199,126,.25); --en-link:#7fd6dc; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --en-paper1:#232a36; --en-paper2:#1b212c; --en-ink:#f2eee3; --en-ink2:#aab4c4; --en-by:#efe6d2; --en-ar:#e3c77e; --en-frame:rgba(227,199,126,.25); --en-link:#7fd6dc; } }

/* glazes */
.en-card, .en-banner { --g1:#0b5f68; --g2:#178995; --g3:#063a41; }
[data-glaze="cobalt"] { --g1:#1d3576; --g2:#2c4ea3; --g3:#101f4a; }
[data-glaze="garnet"] { --g1:#6a1f36; --g2:#93304f; --g3:#3e0f1f; }

/* grid: cards in a row share one height, actions line up at the bottom */
.en-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 1.8rem; align-items: stretch; }
.en-grid.wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 28rem), 1fr)); }

/* the card */
.en-card {
  display: flex; flex-direction: column; position: relative; border-radius: 16px; overflow: hidden;
  color: var(--en-ink); text-decoration: none; background: var(--en-paper2);
  box-shadow: 0 0 0 1px rgba(120,95,50,.18), 0 30px 50px -30px rgba(20,30,60,.55);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s;
}
a.en-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(120,95,50,.22), 0 38px 56px -30px rgba(20,30,60,.65); }
.en-card:focus-visible { outline: 2px solid #b8913a; outline-offset: 5px; }
/* gilt page edges */
.en-card::after { content: ""; flex: none; height: 7px; background: repeating-linear-gradient(#ecd8a2 0 1px, var(--en-edge) 1px 2px); }

/* enamel dial */
.en-dial {
  position: relative; flex: none; min-height: 7.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.6rem; color: #f5ecd6; overflow: hidden; border-bottom: 1px solid #c9a44c;
  background: linear-gradient(170deg, rgba(255,255,255,.16), transparent 40%), radial-gradient(150% 170% at 90% 50%, var(--g2), var(--g1) 45%, var(--g3));
}
.en-dial::before {
  content: ""; position: absolute; right: -60px; top: 50%; width: 560px; height: 560px; transform: translateY(-50%); pointer-events: none;
  background: repeating-conic-gradient(rgba(255,255,255,.045) 0 .9deg, transparent .9deg 3deg);
  -webkit-mask: radial-gradient(closest-side, #000 25%, transparent); mask: radial-gradient(closest-side, #000 25%, transparent);
}
.en-note { position: relative; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: #d8e4e6; max-width: 62%; line-height: 1.5; }
.en-count { position: relative; margin-left: auto; text-align: center; padding-left: 1.4rem; border-left: 1px solid rgba(201,164,76,.6); }
.en-count b { display: block; font-size: 2.4rem; font-weight: 400; line-height: 1; color: #ecd28c; font-variant-numeric: lining-nums; }
.en-count small { display: block; margin-top: .3rem; font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: #cbd5e3; }
/* short dial with a gold star, for cards without a count (Reports, Biography, Narrators) */
.en-dial.short { min-height: 4.6rem; justify-content: flex-start; }
.en-dial .en-star { position: relative; width: 2.1rem; height: 2.1rem; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 40%22%3E%3Cpolygon points=%2239.00,20.00 33.44,25.56 33.44,33.44 25.56,33.44 20.00,39.00 14.44,33.44 6.56,33.44 6.56,25.56 1.00,20.00 6.56,14.44 6.56,6.56 14.44,6.56 20.00,1.00 25.56,6.56 33.44,6.56 33.44,14.44%22 fill=%22none%22 stroke=%22%23e3c77e%22 stroke-width=%221.3%22/%3E%3Cpolygon points=%2231.00,20.00 27.78,23.22 27.78,27.78 23.22,27.78 20.00,31.00 16.78,27.78 12.22,27.78 12.22,23.22 9.00,20.00 12.22,16.78 12.22,12.22 16.78,12.22 20.00,9.00 23.22,12.22 27.78,12.22 27.78,16.78%22 fill=%22%23e3c77e%22/%3E%3Ccircle cx=%2220%22 cy=%2220%22 r=%223.2%22 fill=%22%23fbf3df%22/%3E%3C/svg%3E") center / contain no-repeat; }

/* book page */
.en-page {
  position: relative; flex: 1; display: flex; flex-direction: column; gap: .3rem; padding: 1.5rem 1.6rem 1.6rem;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22240%22 height=%22240%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.75%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 .45  0 0 0 0 .35  0 0 0 0 .2  0 0 0 .13 0%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22/%3E%3C/svg%3E"), radial-gradient(120% 90% at 50% 0, var(--en-paper1), var(--en-paper2)); background-size: 240px, auto;
}
.en-page::before { content: ""; position: absolute; inset: 10px; border: 1px solid var(--en-frame); pointer-events: none; }
.en-title { margin: 0; font-size: 1.45rem; line-height: 1.25; font-weight: 700; color: var(--en-ink); }
.en-ar { margin: 0; align-self: flex-end; font-family: var(--en-arabic); font-size: 1.7rem; line-height: 2.1; direction: rtl; color: var(--en-ar); }
.en-orn { display: block; width: 60px; height: 16px; margin: .2rem 0 .6rem; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 60 16%22%3E%3Cg fill=%22none%22 stroke=%22%23b8913a%22 stroke-width=%221%22%3E%3Cpath d=%22M0 8h22M38 8h22%22/%3E%3Cpath d=%22M30 2l6 6-6 6-6-6z%22/%3E%3C/g%3E%3Ccircle cx=%2230%22 cy=%228%22 r=%221.6%22 fill=%22%23b8913a%22/%3E%3C/svg%3E") center / contain no-repeat; }
.en-by { margin: 0; font-size: 1.1rem; color: var(--en-by); }
.en-meta { margin: 0; color: var(--en-ink2); font-size: .98rem; }
.en-text { margin: 0; color: var(--en-ink2); font-size: 1.02rem; line-height: 1.55; }

/* actions sit at the bottom of the page */
.en-act { margin-top: auto; padding-top: 1.1rem; }
.en-btn {
  display: inline-flex; align-items: center; gap: .6rem; padding: .6rem 1.25rem; border-radius: 999px; color: #fbf3df; font-size: .95rem; letter-spacing: .04em;
  background: radial-gradient(120% 140% at 30% -40%, rgba(255,255,255,.3), transparent 55%), linear-gradient(var(--g2), var(--g1) 60%, var(--g3));
  box-shadow: inset 0 0 0 1px rgba(227,199,126,.7), 0 6px 14px -8px rgba(0,0,0,.6);
}
.en-link { display: inline-flex; align-items: center; gap: .5rem; color: var(--en-link); font-size: 1.02rem; }
.en-btn i, .en-link i { font-style: normal; transition: transform .3s; }
a.en-card:hover .en-btn i, a.en-card:hover .en-link i { transform: translateX(4px); }

/* page banner (replaces the brick drum at the top of a page) */
.en-banner {
  position: relative; overflow: hidden; border-radius: 16px; padding: 1.6rem 2rem; color: #f5ecd6; border-bottom: 1px solid #c9a44c;
  background: linear-gradient(170deg, rgba(255,255,255,.16), transparent 40%), radial-gradient(130% 220% at 92% 50%, var(--g2), var(--g1) 45%, var(--g3));
  box-shadow: 0 30px 50px -32px rgba(20,30,60,.6);
}
.en-banner::before { content: ""; position: absolute; right: -120px; top: 50%; width: 700px; height: 700px; transform: translateY(-50%); pointer-events: none;
  background: repeating-conic-gradient(rgba(255,255,255,.045) 0 .9deg, transparent .9deg 3deg);
  -webkit-mask: radial-gradient(closest-side, #000 25%, transparent); mask: radial-gradient(closest-side, #000 25%, transparent); }
.en-banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: repeating-linear-gradient(#ecd8a2 0 1px, #c9a44c 1px 2px); }
.en-banner > * { position: relative; }
.en-banner .en-eyebrow { margin: 0 0 .3rem; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: #e3c77e; }
.en-banner h1 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 700; line-height: 1.15; color: #fbf3df; }
.en-banner .en-lede { margin: .5rem 0 0; color: #d8e4e6; max-width: 60ch; }
.en-banner .en-ar { align-self: auto; color: #ecd28c; font-size: 1.6rem; }

@media (max-width: 520px) {
  .en-dial { padding: .9rem 1.2rem; } .en-page { padding: 1.3rem 1.3rem 1.4rem; } .en-banner { padding: 1.3rem 1.3rem; }
  .en-note { max-width: 58%; } .en-count b { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) { .en-card, .en-btn i, .en-link i { transition: none; } }
/* Integrations: preserve search filters and semantic lists. */
.en-grid{list-style:none;padding:0;margin:1.4rem 0;gap:1.3rem}
.en-grid>li{display:flex;min-width:0}.en-grid>li>.en-card{flex:1;min-width:0}
.en-grid>li:has(>a[hidden]){display:none}.en-card[hidden]{display:none}
.en-page .en-title::before{display:none}
.en-banner a{color:#f0dfb1}.en-banner .gb-search{margin-top:1rem}
.en-banner .gb-search input{color:#243341}.en-banner .gb-search label{color:#243341}
.en-banner .reading-info{color:#f0dfb1;background:transparent}
.en-banner>p{color:#d8e4e6}
.en-banner .en-ar{font-family:var(--arabic)}
.en-page .en-ar{font-family:var(--arabic);font-size:1.4rem;overflow-wrap:anywhere}
.en-page .en-meta{line-height:1.5}
@media(max-width:700px){.en-grid,.en-grid.wide{grid-template-columns:1fr}.en-note{letter-spacing:.08em}.en-banner h1{overflow-wrap:anywhere}}
.en-banner{display:flex;flex-direction:column;gap:.6rem}
.en-banner>*{position:relative;inset:auto;transform:none;margin:0}
.en-banner::after{top:auto;bottom:0;transform:none;height:5px}
.en-grid:has(>li>a[href="scholars.html"]){grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:700px){.en-grid:has(>li>a[href="scholars.html"]){grid-template-columns:1fr}}
/* All book-colour cards share the same size, including across grid rows. */
.en-grid{grid-auto-rows:1fr}
.en-dial{box-sizing:border-box;height:7.2rem;min-height:7.2rem}
.en-dial.short{height:4.6rem;min-height:4.6rem}
.en-grid.wide .en-page .en-title{min-height:3.65rem}
.en-grid.wide .en-page .en-ar{min-height:5.2rem}
@media(max-width:700px){.en-grid.wide .en-page .en-title{min-height:3.65rem}}

/* Compact library cards, retaining every title, source note and count. */
.en-grid.book-library{gap:1.25rem}
.book-library .en-dial{height:5.1rem;min-height:5.1rem;padding:.7rem 1.25rem}
.book-library .en-count b{font-size:1.9rem}
.book-library .en-note{font-size:.68rem;letter-spacing:.1em}
.book-library .en-page{padding:1.05rem 1.25rem 1.1rem;gap:.2rem}
.en-grid.book-library .en-title{font-size:1.25rem;min-height:3.15rem}
.en-grid.book-library .en-ar{font-size:1.22rem;min-height:3.8rem;line-height:2.1}
.book-library .en-orn{margin:0 0 .25rem;height:12px}
.book-library .en-meta{font-size:.92rem;line-height:1.4}
.book-library .en-meta p{margin:.25rem 0}
.book-library .en-act{padding-top:.7rem}
.book-library .en-btn{padding:.45rem 1rem;font-size:.9rem}
@media(max-width:700px){.book-library .en-dial{height:auto;min-height:5.1rem}.en-grid.book-library .en-title{min-height:0}.en-grid.book-library .en-ar{min-height:0}}

/* Denser library composition: no reserved empty title or Arabic rows. */
.en-grid.book-library{grid-auto-rows:1fr;align-items:stretch}
.book-library .en-card{height:100%}
.book-library .en-dial{height:4.4rem;min-height:4.4rem;padding:.6rem 1.15rem}
.book-library .en-page{padding:.9rem 1.15rem 1rem;gap:.3rem}
.en-grid.book-library .en-page .en-title{min-height:0}
.en-grid.book-library .en-page .en-ar{min-height:0;margin:.1rem 0;line-height:2}
.book-library .en-orn{margin:.1rem 0;height:10px}
.book-library .en-act{padding-top:.5rem}