/* Homepage: the regional map behind a sheet of book paper, then three ways in, two books, and a short note on the source.
   Uses quiet-nav.css (navigation) and enamel-cards.css (cards). Class prefix: hp- */
.hp-top { position: relative; background: #d9e2dd url("img/home-map.webp") 40% 45% / cover; }
@media (max-width: 760px) { .hp-top { background-image: url("img/home-map-small.webp"); } }
.hp-top::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(248,244,236,.97) 70px, rgba(248,244,236,.75) 105px, rgba(248,244,236,0) 190px), linear-gradient(90deg, rgba(248,244,236,.5), rgba(248,244,236,0) 65%); }
:root[data-theme="dark"] .hp-top::before { background: linear-gradient(rgba(15,26,43,.95), rgba(15,26,43,.5) 120px, rgba(15,26,43,.3)), linear-gradient(90deg, rgba(15,26,43,.6), rgba(15,26,43,.1)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hp-top::before { background: linear-gradient(rgba(15,26,43,.95), rgba(15,26,43,.5) 120px, rgba(15,26,43,.3)), linear-gradient(90deg, rgba(15,26,43,.6), rgba(15,26,43,.1)); } }
/* gilt edge under the opening */
.hp-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: repeating-linear-gradient(#ecd8a2 0 1px, #c9a44c 1px 2px); }
.hp-wrap { position: relative; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.hp-brand { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .9rem; }
.hp-brand a { color: inherit; text-decoration: none; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: #6b5526; }
:root[data-theme="dark"] .hp-brand a { color: #e3c77e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hp-brand a { color: #e3c77e; } }
.hp-hero { padding: 2.8rem 0 4.2rem; }
.hp-panel { position: relative; max-width: 37rem; padding: 2rem 2.2rem 2.1rem; border-radius: 6px; color: var(--en-ink);
  background: linear-gradient(var(--en-paper1), var(--en-paper2));
  box-shadow: inset 0 0 0 8px var(--en-paper1), inset 0 0 0 9px rgba(184,145,58,.55), 0 34px 60px -26px rgba(20,30,40,.65); }
.hp-ar { margin: 0; font-family: var(--en-arabic); direction: rtl; text-align: left; font-size: 1.65rem; line-height: 2.2; color: var(--en-ar); }
.hp-panel h1 { margin: 0; font-size: clamp(2.1rem, 5vw, 3.1rem); line-height: 1.06; font-weight: 700; }
.hp-orn { display: block; width: 120px; height: 16px; margin: .9rem 0; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 16%22%3E%3Cg fill=%22none%22 stroke=%22%23c9a44c%22 stroke-width=%221%22%3E%3Cpath d=%22M0 8h50M70 8h50%22/%3E%3Cpath d=%22M60 1l7 7-7 7-7-7z%22/%3E%3C/g%3E%3Ccircle cx=%2260%22 cy=%228%22 r=%222%22 fill=%22%23c9a44c%22/%3E%3C/svg%3E") left / contain no-repeat; }
.hp-lede { margin: 0 0 1.4rem; font-size: 1.08rem; line-height: 1.55; color: var(--en-ink2); }
.hp-kinds { display: flex; flex-wrap: wrap; gap: .3rem 1.6rem; margin: 0 0 1rem; }
.hp-kinds b { font-size: 1.6rem; font-weight: 400; color: #8e2a4c; margin-right: .35rem; }
:root[data-theme="dark"] .hp-kinds b { color: #f0a8bf; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hp-kinds b { color: #f0a8bf; } }
.hp-kinds small { color: var(--en-ink2); }
.hp-surv { display: flex; height: 10px; gap: 2px; border-radius: 999px; overflow: hidden; }
.hp-pr { background: #d9a520; } .hp-ms { background: #17a2b4; } .hp-lo { background: repeating-linear-gradient(135deg, #8f9aaa 0 3px, #b6bec9 3px 6px); }
.hp-key { display: flex; flex-wrap: wrap; gap: .3rem 1.3rem; margin: .7rem 0 0; padding: 0; list-style: none; font-size: .95rem; color: var(--en-ink2); }
.hp-key i { display: inline-block; width: .75rem; height: .75rem; border-radius: 3px; margin-right: .45rem; vertical-align: -.05rem; }
.hp-key b { color: var(--en-ink); margin-right: .25rem; }
.hp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-top: 1.6rem; }
.hp-actions .en-btn { --g1:#0b5f68; --g2:#178995; --g3:#063a41; text-decoration: none; }
.hp-actions .en-link { text-decoration: none; }

/* sections below */
.hp-sec { padding: 3.4rem 0 0; }
.hp-sec > header { margin-bottom: 1.4rem; }
.hp-eyebrow { margin: 0 0 .25rem; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: #8a6d2c; }
:root[data-theme="dark"] .hp-eyebrow { color: #e3c77e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hp-eyebrow { color: #e3c77e; } }
.hp-sec h2 { margin: 0; font-size: 1.7rem; }
.hp-about { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem 3rem; align-items: center; margin: 3.6rem 0 0; padding: 1.8rem 0 3.6rem; border-top: 1px solid rgba(184,145,58,.4); }
.hp-about p { margin: 0; max-width: 62ch; font-size: .95rem; color: var(--en-ink2); line-height: 1.6; }
.hp-about nav { display: flex; gap: 1.4rem; }
.hp-about a { color: var(--en-link); }

/* compact ways in */
.hp-sec { padding-top: 2.6rem; }
.hp-sec > header { margin-bottom: 1rem; }
.hp-sec h2 { font-size: 1.45rem; }
.hp-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; }
.hp-way, .hp-vol { --g1:#0b5f68; --g2:#178995; --g3:#063a41; }
.hp-way[data-glaze="cobalt"], .hp-vol[data-glaze="cobalt"] { --g1:#1d3576; --g2:#2c4ea3; --g3:#101f4a; }
.hp-way[data-glaze="garnet"], .hp-vol[data-glaze="garnet"] { --g1:#6a1f36; --g2:#93304f; --g3:#3e0f1f; }
.hp-way { display: flex; align-items: center; gap: .95rem; padding: .7rem 1.1rem .7rem .7rem; border-radius: 12px; color: var(--en-ink); text-decoration: none;
  background: linear-gradient(var(--en-paper1), var(--en-paper2)); box-shadow: inset 0 0 0 1px rgba(184,145,58,.35), 0 14px 26px -20px rgba(20,30,60,.5); transition: transform .3s, box-shadow .3s; }
.hp-way:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(184,145,58,.6), 0 18px 30px -20px rgba(20,30,60,.6); }
.hp-seal { flex: none; width: 3.1rem; height: 3.1rem; border-radius: 9px; 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.4%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%3C/svg%3E") center / 1.5rem no-repeat, radial-gradient(120% 120% at 70% 20%, var(--g2), var(--g1) 55%, var(--g3)); box-shadow: inset 0 -2px 0 #c9a44c; }
.hp-way span:nth-child(2) { flex: 1; display: grid; }
.hp-way b { font-size: 1.12rem; } .hp-way small { color: var(--en-ink2); font-size: .9rem; line-height: 1.35; }
.hp-way > i, .hp-vol::after { font-style: normal; color: #9a7a2e; transition: transform .3s; }
.hp-way:hover > i { transform: translateX(3px); }

/* compact shelf of books */
.hp-shelf { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 1rem; }
.hp-vol { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.1rem; overflow: hidden; border-radius: 12px; padding-right: 1.2rem; color: var(--en-ink); text-decoration: none;
  background: linear-gradient(var(--en-paper1), var(--en-paper2)); box-shadow: inset 0 0 0 1px rgba(184,145,58,.35), 0 14px 26px -20px rgba(20,30,60,.5); transition: transform .3s, box-shadow .3s; }
.hp-vol:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(184,145,58,.6), 0 18px 30px -20px rgba(20,30,60,.6); }
.hp-spine { align-self: stretch; display: grid; place-content: center; text-align: center; min-width: 5.4rem; padding: .8rem .6rem; color: #ecd28c;
  background: linear-gradient(90deg, rgba(0,0,0,.25), transparent 8px), radial-gradient(140% 120% at 70% 20%, var(--g2), var(--g1) 55%, var(--g3)); box-shadow: inset -3px 0 0 #c9a44c; }
.hp-spine b { font-size: 1.6rem; font-weight: 400; line-height: 1; } .hp-spine small { margin-top: .25rem; font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; color: #d8e4e6; }
.hp-vt { display: grid; padding: .8rem 0; } .hp-vt b { font-size: 1.08rem; } .hp-vt small { color: var(--en-ink2); font-size: .9rem; }
.hp-var { font-family: var(--en-arabic); direction: rtl; font-size: 1.1rem; line-height: 2; color: var(--en-ar); white-space: nowrap; }
.hp-more { margin: .9rem 0 0; } .hp-more a { text-decoration: none; }
.hp-about { margin-top: 2.6rem; padding: 1.5rem 0 3rem; }
@media (max-width: 560px) { .hp-vol { grid-template-columns: auto 1fr; } .hp-var { display: none; } }

@media (max-width: 700px) {
  .hp-hero { padding: 1.8rem 0 2.6rem; } .hp-panel { padding: 1.5rem 1.4rem 1.6rem; }
  .hp-about { grid-template-columns: 1fr; }
}
header.site .bar{display:block;padding-top:.8rem;padding-bottom:.4rem}
header.site nav.qn{width:100%;justify-content:space-between}
header.site nav.qn .qn-links{gap:1.8rem}
header.site .hp-brand{padding-top:0;margin-bottom:.5rem}
.home-page .hp-top header.site{background:transparent}.home-page .hp-top header.site::after{display:none}
.home-page .hp-top header.site .bar{padding:0}
.home-page section.hp-hero{margin-top:0}
.home-page .hp-about nav{display:flex;gap:1rem}
.hp-ar,.hp-var{font-family:var(--arabic)}
@media(max-width:760px){header.site nav.qn .qn-links{gap:1.2rem}.hp-var{overflow-wrap:anywhere}}
:root[data-theme="dark"] header.site nav.qn a.qn-link{color:#c9d1dd}
:root[data-theme="dark"] header.site nav.qn a.qn-link[aria-current]{color:#fff6dc}

/* Leave room for Nastaliq glyph overhang at the RTL shelf edge. */
html[dir="rtl"] .hp-vol{padding-right:0;padding-inline-end:1.5rem}
html[dir="rtl"] .hp-var{padding-inline:.35rem}