/* أوراد السمانية — one stylesheet for the whole library.
 *
 * The typography is the app's: Noto Naskh Arabic for everything that is read
 * (--read: the passages, the أبيات, prose), Cairo for everything around it
 * (--ui: headings, navigation, cards, contents), 2.1 for running Arabic at
 * --fs, and headings on one scale in Cairo SemiBold. Every page links this
 * file, so a change to a token changes the library rather than one corner of
 * it.
 *
 * Published as /style.css by scripts/build_image_book.py, linked with a hash so
 * a change reaches readers despite the thirty-day cache on stylesheets.
 *
 * What is NOT here: the books are photographs of printed pages, and the type in
 * those photographs is the printer's, set long before this site existed. This
 * file governs everything around them — headings, navigation, contents,
 * captions — and the one section that is real text.
 */

/* Self-hosted: the library asks nothing of its readers, and a font from
 * someone else's CDN would hand that party an address on every visit.
 * All SIL OFL 1.1 — /fonts/*-OFL.txt. Only the weights the site sets are
 * declared: Naskh 400 and 700 (the rubricated names), Cairo 400 and 600. */
@font-face{font-family:"Noto Naskh Arabic";font-weight:400;font-display:swap;
  src:url("/fonts/NotoNaskhArabic-Regular.woff2") format("woff2"),
      url("/fonts/NotoNaskhArabic-Regular.ttf") format("truetype")}
@font-face{font-family:"Noto Naskh Arabic";font-weight:700;font-display:swap;
  src:url("/fonts/NotoNaskhArabic-Bold.woff2") format("woff2"),
      url("/fonts/NotoNaskhArabic-Bold.ttf") format("truetype")}
@font-face{font-family:"Cairo";font-weight:400;font-display:swap;
  src:url("/fonts/Cairo-Regular.woff2") format("woff2"),
      url("/fonts/Cairo-Regular.ttf") format("truetype")}
@font-face{font-family:"Cairo";font-weight:600;font-display:swap;
  src:url("/fonts/Cairo-SemiBold.woff2") format("woff2"),
      url("/fonts/Cairo-SemiBold.ttf") format("truetype")}
/* Noto Naskh Arabic draws no Latin and no ASCII punctuation — not even a
 * bracket — so those fall through to Amiri, cut down to just that range. The
 * unicode-range means a page without them never fetches it. */
@font-face{font-family:"Amiri";font-weight:400;font-display:swap;
  src:url("/fonts/Amiri-Latin-Regular.woff2") format("woff2");
  unicode-range:U+0020-007E,U+00A0-00FF,U+0100-017F,U+02B0-02FF,U+1E00-1EFF,U+2000-206F}
@font-face{font-family:"Amiri";font-weight:700;font-display:swap;
  src:url("/fonts/Amiri-Latin-Bold.woff2") format("woff2");
  unicode-range:U+0020-007E,U+00A0-00FF,U+0100-017F,U+02B0-02FF,U+1E00-1EFF,U+2000-206F}

/* ---------------------------------------------------------------- tokens */
:root{
  --bg:#FBF8F1; --surface:#FFFDF8; --ink:#1F1F1D; --soft:#5B5951;
  --emerald:#0F5132; --gold:#B8912F; --crimson:#9E2B25; --line:#E6DFCE;
  --bar:rgba(251,248,241,.94);
  --fs:25px;              /* running Arabic text */
  --read:"Noto Naskh Arabic","Amiri",Georgia,"Times New Roman",serif;
  --ui:"Cairo","Noto Naskh Arabic","Amiri",system-ui,sans-serif;
  --measure:780px;        /* the reading column */
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#14150F; --surface:#1C1E17; --ink:#EDE7D8; --soft:#A9A392;
    --emerald:#6FBF92; --gold:#D8B45A; --crimson:#E0756C; --line:#2E3126;
    --bar:rgba(20,21,15,.94);
  }
}

/* ------------------------------------------------------------------ base */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);
     font-family:var(--ui);line-height:1.8;
     -webkit-text-size-adjust:100%}

/* English pages, and any English passage inside an Arabic one. Cairo's Latin
   is serviceable but it was cut for UI; English gets a Latin face chosen
   for reading, and a line height suited to it. No extra font is downloaded —
   these are the faces a reader's own device already has. */
:root[lang="en"] body,[lang="en"]{
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,
              "Times New Roman",serif;line-height:1.75}
:root[lang="en"] h1,:root[lang="en"] h2,:root[lang="en"] h3{line-height:1.25}
:root[lang="en"] h1{font-size:clamp(34px,7vw,52px)}
:root[lang="en"] .crumbs li+li::before{content:"→"}
/* The ornament and the breadcrumb arrow both point the way the language runs. */
:root[lang="en"] .card .chev{transform:scaleX(-1)}
:root[lang="en"] .card:hover .chev{transform:scaleX(-1) translateX(-4px)}
a{color:var(--emerald)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--measure);margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------------- the headings */
/* Cairo SemiBold, about a tenth smaller than the Amiri these were set for:
   Cairo's letters stand much taller at the same size. */
h1,h2,h3{font-weight:600}
h1{font-size:clamp(36px,8vw,54px);line-height:1.35;color:var(--emerald);margin:0 0 4px}
h2{font-size:clamp(20px,4.6vw,25px);line-height:1.45;color:var(--emerald);margin:0 0 12px}
h3{font-size:clamp(18px,4vw,20px);line-height:1.5;color:var(--emerald);margin:0 0 8px}

/* ------------------------------------------------------ the reading face
 * Everything that is read rather than navigated, wherever its builder put
 * it: سر الأسرار's passages, front matter and references (.ar .prose .bayt
 * .ref .sajda .repeat), the قصائد and أوراد (.poem .single), search snippets,
 * and the library's own prose pages (.prose). */
.ar,.ref,.prose,.bayt,.poem,.single,.sajda,.repeat,.results a{font-family:var(--read)}
.sub{color:var(--soft);font-size:clamp(16px,3.6vw,20px);margin:0 auto 18px;max-width:32em}
.by{color:var(--soft);margin:0;font-size:clamp(16px,3.8vw,19px)}
/* The poet, under the title. Separate from .by, which carries what the
   source prints on its title page — sometimes a mosque, sometimes the
   form of the work, not always a person. */
.author{margin:3px 0 0;font-size:clamp(14px,3.2vw,16px);color:var(--emerald);line-height:1.9}
.author .k{color:var(--gold)}
p{margin:0 0 14px}

/* A page's opening block: rosette, title, attribution. */
.intro,header.page-head{text-align:center;padding:40px 0 10px}
.rosette{width:13px;height:13px;margin:0 auto 18px;border-radius:50%;
         background:var(--gold);opacity:.85}

/* ------------------------------------------------------------------- bar */
.bar{position:sticky;top:0;z-index:20;background:var(--bar);backdrop-filter:blur(8px);
     border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;gap:10px 12px;min-height:58px;
           flex-wrap:wrap;padding-block:8px;max-width:1040px}
.home{display:inline-flex;align-items:center;gap:8px;background:var(--surface);
      border:1px solid var(--gold);border-radius:999px;padding:6px 15px;
      color:var(--emerald);text-decoration:none;font-weight:600;font-size:16px;
      white-space:nowrap;transition:background .15s,color .15s}
.home:hover,.home:focus-visible{background:var(--gold);color:var(--bg)}
.home .dot{width:9px;height:9px;border-radius:50%;background:var(--gold);flex:none}
.home:hover .dot,.home:focus-visible .dot{background:var(--bg)}
.crumbs{margin-inline-end:auto;min-width:0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;
           margin:0;padding:0;color:var(--soft);font-size:16px}
.crumbs a{color:var(--emerald);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs li+li::before{content:"←";margin-inline-end:8px;color:var(--gold);opacity:.75}
.crumbs [aria-current="page"]{color:var(--soft)}
/* The language switch: a quiet control, never louder than the way home. */
.lang{background:var(--surface);border:1px solid var(--line);border-radius:999px;
      padding:5px 13px;color:var(--soft);text-decoration:none;font-size:15px;
      white-space:nowrap}
.lang:hover,.lang:focus-visible{border-color:var(--gold);color:var(--emerald)}
/* The homepage carries no bar, so its switcher sits in the hero's corner,
   light enough to read on the green and quiet enough not to compete. */
.langbar{position:absolute;top:14px;inset-inline-end:16px;z-index:2}
.langbar a{display:inline-block;background:rgba(255,253,248,.10);
           border:1px solid rgba(233,217,166,.45);border-radius:999px;
           padding:5px 14px;color:#EFE6CE;text-decoration:none;font-size:15px;
           backdrop-filter:blur(4px)}
.langbar a:hover,.langbar a:focus-visible{background:rgba(255,253,248,.2);color:#FFFDF8}
/* The page's own controls. They wrap rather than run on: on a phone a poem's
   six — English, رجوع, الرئيسية, السابق, التالي, تصويب النص — are wider than
   the screen, and in one unbroken row they pushed the whole page sideways. */
.nav{display:flex;flex-wrap:wrap;gap:6px;align-items:center;color:var(--soft);font-size:15px}
.nav>*{white-space:nowrap}
.nav select,.nav a,.nav span,.nav button{background:var(--surface);border:1px solid var(--line);
     border-radius:10px;padding:4px 10px;color:var(--ink);font:inherit;text-decoration:none}
.nav button{cursor:pointer}
.nav a:hover,.nav select:hover,.nav button:hover{border-color:var(--gold)}
.nav span{color:var(--soft);opacity:.55}
.nav .now{color:var(--gold);border-color:transparent;background:transparent;
          font-variant-numeric:tabular-nums}
@media (max-width:520px){
  .home{font-size:15px;padding:5px 13px}
  .crumbs ol{font-size:14px}
}

/* ----------------------------------------------------------------- cards */
.cards{display:grid;gap:14px}
@media (min-width:720px){.cards{grid-template-columns:1fr 1fr}}
.card{display:flex;align-items:center;gap:16px;background:var(--surface);
      border:1px solid var(--line);border-radius:18px;padding:20px 20px 20px 16px;
      text-decoration:none;color:inherit;
      transition:border-color .16s,box-shadow .16s,transform .16s}
.card:hover{border-color:var(--gold);box-shadow:0 10px 26px rgba(15,81,50,.10);
            transform:translateY(-3px)}
.card .mark{flex:none;width:46px;height:46px;border-radius:14px;display:grid;
            place-items:center;background:rgba(184,145,47,.14);border:1px solid var(--gold)}
.card .mark svg{width:24px;height:24px;display:block;stroke:var(--gold);fill:none;
                stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* The order's mark can stand in that box instead of a drawn glyph. The
   artwork runs to all four edges of its file with no transparent margin,
   so it is set two points smaller than the glyphs to keep the same air
   between it and the border. */
.card .mark img{width:22px;height:22px;display:block;object-fit:contain}
.card .body{flex:1;min-width:0}
.card .t{display:block;font-size:20px;font-weight:600;color:var(--emerald);line-height:1.5}
.card .s{display:block;color:var(--soft);font-size:15px;line-height:1.65}
.card .m{display:block;margin-top:5px;color:var(--gold);font-size:14px}
.card .chev{flex:none;color:var(--gold);font-size:22px;opacity:.75;transition:transform .16s}
.card:hover .chev{transform:translateX(-4px)}
@media (prefers-reduced-motion: reduce){
  .card,.card .chev{transition:none}
  .card:hover,.card:hover .chev{transform:none}
}
.sec{display:flex;align-items:center;gap:14px;margin:0 0 22px;
     font-size:clamp(20px,4.6vw,25px);font-weight:600;color:var(--emerald)}
.sec::after{content:"";flex:1;height:1px;background:var(--line)}
.sec .count{font-size:16px;color:var(--soft);font-weight:400}

/* ---------------------------------------------------------------- footer */
footer{margin-top:clamp(36px,8vw,58px);padding:26px 0 46px;text-align:center;
       color:var(--soft);font-size:15px;border-top:1px solid var(--line)}
.flinks{display:flex;justify-content:center;gap:8px 18px;flex-wrap:wrap;
        margin:0 0 8px;padding:0;list-style:none}
.flinks a{color:var(--emerald);text-decoration:none}
.flinks a:hover{text-decoration:underline}


/* ------------------------------------------------------------- ornament --
 * One mark for the whole library: a hairline broken by three ◈, under the
 * name in the hero and between the sections of a poem. It is a mask rather
 * than a picture, so its colour is the gold token and it follows the theme
 * without a second copy of the artwork; and it is drawn rather than set as ❦
 * or ◈, because none of the site's faces has such a glyph and a character would fall back to
 * whatever font the device happens to carry.
 */
.orn{display:block;width:clamp(150px,46vw,240px);height:14px;margin:0 auto;
     background:var(--gold);opacity:.55;
     -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20240%2014%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.1%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%207H92%22%2F%3E%3Cpath%20d%3D%22M148%207H232%22%2F%3E%3Cpath%20d%3D%22M104%201L110%207L104%2013L98%207Z%22%2F%3E%3Cpath%20d%3D%22M120%201L126%207L120%2013L114%207Z%22%2F%3E%3Cpath%20d%3D%22M136%201L142%207L136%2013L130%207Z%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M104%204.9L106.1%207L104%209.1L101.9%207Z%22%2F%3E%3Cpath%20d%3D%22M120%204.9L122.1%207L120%209.1L117.9%207Z%22%2F%3E%3Cpath%20d%3D%22M136%204.9L138.1%207L136%209.1L133.9%207Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/contain no-repeat;
     mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20240%2014%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.1%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%207H92%22%2F%3E%3Cpath%20d%3D%22M148%207H232%22%2F%3E%3Cpath%20d%3D%22M104%201L110%207L104%2013L98%207Z%22%2F%3E%3Cpath%20d%3D%22M120%201L126%207L120%2013L114%207Z%22%2F%3E%3Cpath%20d%3D%22M136%201L142%207L136%2013L130%207Z%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M104%204.9L106.1%207L104%209.1L101.9%207Z%22%2F%3E%3Cpath%20d%3D%22M120%204.9L122.1%207L120%209.1L117.9%207Z%22%2F%3E%3Cpath%20d%3D%22M136%204.9L138.1%207L136%209.1L133.9%207Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/contain no-repeat}

/* Masks are everywhere current, but a browser without them would show nothing
   at all where the ornament belongs. A plain hairline is a poor ornament and a
   perfectly good divider. */
@supports not ((mask-image: none) or (-webkit-mask-image: none)){
  .orn{background:none;height:1px;border-top:1px solid var(--gold);opacity:.4}
}

/* --------------------------------------------------- thumb navigation ---
 * Phones and small tablets only; wider screens keep the bar at the top. */
.thumb{display:none}
@media (max-width: 860px){
  .thumb{display:flex;position:fixed;inset-inline:0;bottom:0;z-index:30;
         background:var(--bar);backdrop-filter:blur(10px);
         border-top:1px solid var(--line);
         padding:6px 6px calc(6px + env(safe-area-inset-bottom));
         box-shadow:0 -6px 20px rgba(0,0,0,.06)}
  .thumb a,.thumb span{flex:1;display:flex;flex-direction:column;align-items:center;
         justify-content:center;gap:3px;min-height:56px;border-radius:14px;
         text-decoration:none;color:var(--emerald);font-size:13px;line-height:1.2;
         -webkit-tap-highlight-color:transparent}
  .thumb span{color:var(--soft);opacity:.45}
  .thumb a:active{background:rgba(184,145,47,.16)}
  .thumb svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.8;
         stroke-linecap:round;stroke-linejoin:round}
  .thumb .gold{color:var(--gold)}
  body{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
}

/* A page whose text is Arabic, being read in English: said once, at the top,
   in plain words rather than as an apology. */
.pending{background:var(--surface);border:1px solid var(--line);
         border-inline-start:4px solid var(--gold);border-radius:12px;
         padding:14px 18px;margin:0 0 clamp(22px,4vw,32px);color:var(--soft);
         font-size:16px;line-height:1.7;text-align:start}

/* ------------------------------------------------------------ prose page
 * Policy pages and the library's own writing: the same measure and rhythm as
 * the reading column, one step down in size because it is prose, not liturgy. */
.prose p,.prose li{font-size:clamp(17px,4vw,18.5px);line-height:2}
.prose p{margin:0 0 16px;max-width:66ch;text-wrap:pretty}
.prose h2{margin:34px 0 10px}
.prose ul{padding-inline-start:22px;margin:10px 0}
.prose li{margin:6px 0}
.prose .box{background:var(--surface);border:1px solid var(--line);border-radius:16px;
            padding:18px 20px;margin:22px 0}