:root{--fg:#1d1d1f;--muted:#6e6e73;--line:#e5e5ea;--accent:#8a3b12;--bg:#fff}
*{box-sizing:border-box}
body{margin:0;font:18px/1.7 "Noto Naskh Arabic","Amiri","Segoe UI",Tahoma,sans-serif;color:var(--fg);background:var(--bg)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.skip{position:absolute;inset-inline-start:-999px}
.skip:focus{inset-inline-start:1rem;top:1rem;background:#fff;padding:.4rem .8rem}
header.site,footer.site,main{max-width:46rem;margin:0 auto;padding:0 1rem}
header.site{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:baseline;justify-content:space-between;padding-block:1rem;border-bottom:1px solid var(--line)}
.brand{font-weight:700;color:var(--fg)}
.brand span{font-weight:400;color:var(--muted);font-size:.9em}
header nav{display:flex;gap:1rem}
.crumbs{font-size:.85rem;color:var(--muted);margin-top:1rem}
h1{font-size:1.7rem;line-height:1.4;margin:.6rem 0 .2rem}
h2{font-size:1.2rem;margin-top:2.2rem}
.byline{margin:0 0 1rem;color:var(--muted)}
.latin{font-family:system-ui,sans-serif;font-size:.85em;color:var(--muted)}
.credits{display:grid;grid-template-columns:max-content 1fr;gap:.2rem 1rem;margin:0 0 1.6rem;padding:.8rem 1rem;background:#faf7f4;border-radius:.5rem}
.credits dt{color:var(--muted)}
.credits dd{margin:0}
.listen{margin:-.8rem 0 1.6rem}
.listen a{display:inline-block;padding:.35rem .9rem;border:1px solid var(--accent);border-radius:2rem}
.lyrics{font-size:1.15rem;line-height:2.1}
.lyrics p{margin:0 0 1.4rem}
.items{columns:2 16rem;padding:0;list-style:none}
.items li{break-inside:avoid;padding:.15rem 0}
.note{color:var(--muted);font-size:.85rem}
.more ul{columns:2 14rem;padding-inline-start:1.2rem}
footer.site{margin-top:3rem;padding-block:1.4rem;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem}