/* Fatāwā Dār al-‛Ulūm Zakarīyyā — reading interface.
 *
 * The neutrals are warm and the green is *only* an accent: it marks what is
 * interactive or what names a subject, and never tints a surface. Both modes
 * share one set of token names, so nothing below the token block needs to know
 * which mode it is in.
 *
 * Cardo carries the reading text, Inter the chrome and the numbers,
 * Cinzel Decorative the one display line, Scheherazade New the Arabic.
 */

/* Cardo is served from here rather than from Google Fonts, and that is not a
   preference. The cuts Google serves have no precomposed A, I or U with macron,
   so a browser builds those out of a base letter plus U+0304 and the bar lands
   beside the letter instead of over it -- visible on every book name in this
   corpus, which is 58,000 macron letters. The full family is in vendor/cardo;
   scripts/build_web_fonts.py cuts it down to the Latin actually set here. */
@font-face {
  font-family: Cardo;
  src: url("fonts/Cardo-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: Cardo;
  src: url("fonts/Cardo-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: Cardo;
  src: url("fonts/Cardo-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --bg:          #fcfbf8;
  --surface:     #ffffff;
  --raised:      #f4f2ec;
  --sunk:        #f7f5f0;
  --rule:        #e5e1d7;
  --rule-soft:   #efece4;
  --ink:         #191713;
  --ink-2:       #4c473e;
  --ink-3:       #877f71;
  --accent:      #1a6b4c;
  --accent-on:   #ffffff;
  --accent-wash: #e9f1ec;
  --mark:        #fbeeb4;
  --mark-ink:    #3a2f06;
  --shadow:      0 1px 2px rgba(25, 23, 19, .05),
                 0 10px 30px -12px rgba(25, 23, 19, .16);

  /* The hero line only, and picked under a hard constraint: the title is nine
     macron letters, so the face must carry precomposed Ā/ā/Ī/ī/Ū/ū. Measuring
     glyph coverage is not enough -- Forum reports all six and still draws the
     macron as a detached bar beside the letter -- so candidates were rendered
     and looked at. Cardo sits second by design rather than as a bare fallback:
     no display face tested carries U+201B, the reversed comma in "al-‛Ulūm",
     and Cardo does, so that one glyph comes from there. */
  --display-face: "Cinzel Decorative", Cardo, Georgia, serif;
}

/* Dark tokens live in two places on purpose: the media query serves readers
   who never touch the toggle, the attribute rule serves the ones who do. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #100f0d;
    --surface:     #171613;
    --raised:      #1f1d19;
    --sunk:        #14130f;
    --rule:        #2d2a25;
    --rule-soft:   #23211c;
    --ink:         #f3f0ea;
    --ink-2:       #aba49a;
    --ink-3:       #7c756a;
    --accent:      #6cc79c;
    --accent-on:   #0b1712;
    --accent-wash: #17251f;
    --mark:        #4a3d16;
    --mark-ink:    #f6ecc8;
    --shadow:      0 1px 2px rgba(0, 0, 0, .5),
                   0 10px 30px -12px rgba(0, 0, 0, .7);
  }
}
:root[data-theme="dark"] {
  --bg:          #100f0d;
  --surface:     #171613;
  --raised:      #1f1d19;
  --sunk:        #14130f;
  --rule:        #2d2a25;
  --rule-soft:   #23211c;
  --ink:         #f3f0ea;
  --ink-2:       #aba49a;
  --ink-3:       #7c756a;
  --accent:      #6cc79c;
  --accent-on:   #0b1712;
  --accent-wash: #17251f;
  --mark:        #4a3d16;
  --mark-ink:    #f6ecc8;
  --shadow:      0 1px 2px rgba(0, 0, 0, .5),
                 0 10px 30px -12px rgba(0, 0, 0, .7);
}

/* ── base ───────────────────────────────────────────────────── */

* { box-sizing: border-box; }

/* An author `display` beats the UA rule for [hidden], and every page section
   below sets one, so without this they would all show at once. */
[hidden] { display: none !important; }

/* ── page entry ─────────────────────────────────────────────── */

/* Ten pixels and a fade, run on the direct children of whichever page has just
   been shown, so a route change reads as an arrival rather than a jump cut.
   The delays ramp and then flatten: past the eighth child the eye has stopped
   tracking individual arrivals, and a long ladder only delays the last one. */
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.page.is-entering > * {
  animation: .48s cubic-bezier(.2, .7, .3, 1) both rise;
}
.page.is-entering > :nth-child(1) { animation-delay: 20ms; }
.page.is-entering > :nth-child(2) { animation-delay: 50ms; }
.page.is-entering > :nth-child(3) { animation-delay: 80ms; }
.page.is-entering > :nth-child(4) { animation-delay: 110ms; }
.page.is-entering > :nth-child(n+5) { animation-delay: 140ms; }

/* The hero is one element on the page, so its own parts stagger inside it --
   otherwise the whole block arrives as a slab. */
.page.is-entering .hero > * {
  animation: .48s cubic-bezier(.2, .7, .3, 1) both rise;
}
.page.is-entering .hero > :nth-child(1) { animation-delay: 40ms; }
.page.is-entering .hero > :nth-child(2) { animation-delay: 80ms; }
.page.is-entering .hero > :nth-child(3) { animation-delay: 120ms; }
.page.is-entering .hero > :nth-child(4) { animation-delay: 170ms; }
.page.is-entering .hero > :nth-child(n+5) { animation-delay: 220ms; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  /* Not "none": the animation carries the element from opacity 0, so removing
     it outright would leave the page invisible. Collapsing it to an instant
     lands every element on its end state at once. */
  .page.is-entering > *,
  .page.is-entering .hero > * {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.6 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px;
}
kbd {
  font: 500 .72rem/1 Inter, sans-serif; color: var(--ink-3);
  border: 1px solid var(--rule); border-radius: 4px;
  padding: .16rem .3rem; background: var(--bg);
}
mark {
  background: var(--mark); color: var(--mark-ink);
  border-radius: 2px; padding: 0 .1em;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--accent-on);
  padding: .6rem 1rem; border-radius: 0 0 6px 0;
}
.skip:focus { left: 0; }

.masthead-inner, main {
  max-width: 1120px; margin: 0 auto; padding-left: 1.5rem;
  padding-right: 1.5rem;
}
main { padding-top: 2.5rem; padding-bottom: 6rem; }
.eyebrow {
  font: 500 .72rem/1.4 Inter, sans-serif; text-transform: uppercase;
  letter-spacing: .13em; color: var(--ink-3); margin: 0 0 .8rem;
}

/* ── masthead ───────────────────────────────────────────────── */
.masthead {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}
@supports (backdrop-filter: blur(1px)) {
  .masthead {
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
  }
}
.masthead-inner {
  display: flex; align-items: center; gap: 1.25rem;
  height: 62px;
}
.wordmark { display: flex; align-items: center; gap: .6rem; flex: none; }
.wordmark-text { display: flex; flex-direction: column; }
.wordmark-name {
  font: 500 .97rem/1.15 Cardo, Georgia, serif; color: var(--ink);
  white-space: nowrap;
}
.wordmark-sub {
  font: 500 .61rem/1.3 Inter, sans-serif; text-transform: uppercase;
  letter-spacing: .14em; color: var(--ink-3);
}

/* The field sits in a slot that keeps its share of the space whether or not
   the field is drawn, so the nav and toggle never shift between pages. */
.masthead-mid {
  flex: 1 1 auto; min-width: 0;
  display: flex; justify-content: center;
}
.masthead-end {
  display: flex; align-items: center; gap: .5rem; flex: none;
}

.mini-search {
  flex: 0 1 300px; min-width: 0;
  display: flex; align-items: center; gap: .5rem;
  background: var(--raised); border: 1px solid var(--rule);
  border-radius: 999px; padding: .34rem .75rem;
  transition: border-color .12s ease, background .12s ease;
}
.mini-search:focus-within {
  border-color: var(--accent); background: var(--surface);
}
.mini-icon { width: 15px; height: 15px; color: var(--ink-3); flex: none; }
.mini-search input {
  flex: 1; min-width: 0; border: 0; background: none; color: var(--ink);
  font: 400 .87rem/1.4 Inter, sans-serif; padding: .1rem 0;
}
.mini-search input:focus { outline: none; }
input[type="search"]::-webkit-search-cancel-button { display: none; }
.mini-search input::placeholder, .hero-search input::placeholder,
.page-search input::placeholder, .volume-search input::placeholder {
  color: var(--ink-3);
}
.slash { flex: none; }
.mini-search:focus-within .slash { display: none; }

.nav { display: flex; align-items: center; gap: .2rem; flex: none; }
.nav-link {
  padding: .45rem .7rem; border-radius: 7px;
  font: 400 .88rem/1 Inter, sans-serif; color: var(--ink-2);
}
.nav-link:hover { color: var(--ink); background: var(--raised); }
.nav-link.is-on { color: var(--accent); font-weight: 500; }
.theme-toggle {
  flex: none;
  width: 33px; height: 33px; display: grid; place-items: center;
  border: 1px solid var(--rule); border-radius: 999px;
  background: var(--surface); color: var(--ink-2); cursor: pointer;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
.theme-toggle svg { width: 16px; height: 16px; }
/* The icon shows the mode the button will take you to, not the current one. */
.icon-sun { display: none; }
.icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-sun { display: block; }
  :root:not([data-theme="light"]) .icon-moon { display: none; }
}
:root[data-theme="dark"] .icon-sun { display: block; }
:root[data-theme="dark"] .icon-moon { display: none; }
:root[data-theme="light"] .icon-sun { display: none; }
:root[data-theme="light"] .icon-moon { display: block; }

/* The home and search pages each own a bigger field, so the header one steps
   back rather than asking the same question twice on one screen. */
body[data-page="home"] .mini-search,
body[data-page="search"] .mini-search { display: none; }

@media (max-width: 800px) {
  .mini-search { display: none; }
  .nav-link { padding: .45rem .5rem; }
}
@media (max-width: 560px) {
  /* Below this the wordmark, the nav and the toggle together are wider than
     the screen, and .wordmark being flex:none meant it refused to wrap and
     pushed the toggle off the edge instead. Letting it take the slack (the
     middle slot is empty here, the field having gone at 800px) lets the name
     break over two lines and keeps the toggle inside the padding. */
  .masthead-mid { display: none; }
  .wordmark { flex: 1 1 auto; min-width: 0; }
  .wordmark-name { font-size: .84rem; white-space: normal; }
  .masthead-inner { height: auto; padding-top: .6rem; padding-bottom: .6rem; }
}

/* ── type-ahead ─────────────────────────────────────────────── */
.suggestions {
  position: absolute; z-index: 60; margin: 0; padding: .3rem;
  list-style: none;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 12px; box-shadow: var(--shadow);
  max-height: min(64vh, 480px); overflow-y: auto;
}
.suggestion {
  display: flex; align-items: baseline; gap: .8rem;
  padding: .55rem .7rem; border-radius: 8px; cursor: pointer;
}
.suggestion.is-active, .suggestion:hover { background: var(--raised); }
.suggestion-title {
  font: 400 .99rem/1.35 Cardo, Georgia, serif; flex: 1; min-width: 0;
}
.suggestion-meta {
  font: 400 .73rem/1 Inter, sans-serif; color: var(--ink-3);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.suggestions-empty {
  padding: .85rem .8rem; color: var(--ink-3); font-size: .87rem;
}

/* ── home ───────────────────────────────────────────────────── */
.hero { text-align: center; padding: 3.5rem 0 1rem; }
.hero-title {
  /* Cinzel Decorative is inscriptional capitals with flourished terminals: it
     sets wider than a lowercase serif and wider again than plain Cinzel. The
     clamp is measured rather than guessed -- the title inks about 18.3x the
     font size in this face, so 3.1rem fills roughly 85% of the 1072px content
     column and 4.5vw holds it on one line down to about a 500px viewport,
     below which it breaks to two. Weight 400 because the 700 and 900 cuts turn
     the flourishes into blots at display size, and caps want tracking opened
     rather than shut. */
  font: 400 clamp(1.35rem, 4.5vw, 3.1rem)/1.2 var(--display-face);
  letter-spacing: .02em; margin: 0; text-wrap: balance;
}
.hero-ar {
  font-family: "Scheherazade New", serif; font-size: 1.6rem;
  color: var(--accent); margin: .5rem 0 0; direction: rtl;
}
.hero-lede {
  max-width: 54ch; margin: 1.4rem auto 0;
  font: 400 1.06rem/1.7 Cardo, Georgia, serif; color: var(--ink-2);
}

.hero-search, .page-search {
  display: flex; align-items: center; gap: .75rem;
  max-width: 620px; margin: 2.2rem auto 0;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 999px; padding: .3rem 1.1rem;
  box-shadow: var(--shadow);
  transition: border-color .12s ease;
}
.hero-search:focus-within, .page-search:focus-within {
  border-color: var(--accent);
}
.hero-icon { width: 18px; height: 18px; color: var(--ink-3); flex: none; }
.hero-search input, .page-search input {
  flex: 1; min-width: 0; border: 0; background: none; color: var(--ink);
  font: 400 1rem/1.4 Inter, sans-serif; padding: .85rem 0;
}
.hero-search input:focus, .page-search input:focus { outline: none; }
.hero-search:focus-within .slash { display: none; }

.chip {
  display: inline-flex; align-items: baseline; gap: .4rem;
  border: 1px solid var(--rule); background: var(--surface);
  color: var(--ink-2); border-radius: 999px;
  padding: .36rem .8rem; font-size: .85rem; cursor: pointer;
  transition: border-color .12s ease, color .12s ease;
}
.chip:hover { color: var(--ink); border-color: var(--ink-3); }
.chip .n {
  font: 400 .7rem/1 Inter, sans-serif; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin: 0 0 1.2rem;
}
.section-head h2 {
  font: 400 1.35rem/1.25 Cardo, Georgia, serif; margin: 0;
}
.block { margin-top: 3.4rem; }
.block:first-of-type { margin-top: 0; }

/* ── page heads and crumbs ──────────────────────────────────── */
.page-head { max-width: 62ch; margin: 0 0 2.6rem; }
.page-head h1 {
  font: 400 clamp(1.8rem, 4vw, 2.6rem)/1.15 Cardo, Georgia, serif;
  letter-spacing: -.012em; margin: 0; text-wrap: balance;
}
.page-head .lede {
  margin: .9rem 0 0; font: 400 1.02rem/1.65 Cardo, Georgia, serif;
  color: var(--ink-2);
}
.page-head .stat-row {
  display: flex; flex-wrap: wrap; gap: 1.4rem; margin: 1.4rem 0 0;
  font: 400 .82rem/1 Inter, sans-serif; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.page-head .stat-row b { color: var(--ink); font-weight: 700; }
/* On a page head the chips sit under the stats, left-aligned and tighter. */
.page-head .topic-chips { margin: 1.4rem 0 0; }
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  font-size: .82rem; color: var(--ink-3); margin: 0 0 1.4rem;
}
.crumbs a:hover { color: var(--accent); }
.crumbs .sep { color: var(--rule); }

/* ── search page ────────────────────────────────────────────── */
.search-top { margin-bottom: 2.2rem; }
.page-search { margin-top: 0; }
.page-search .clear {
  border: 0; background: none; color: var(--ink-3); cursor: pointer;
  font-size: 1.35rem; line-height: 1; padding: 0 .2rem; flex: none;
}
.page-search .clear:hover { color: var(--ink); }
.result-summary {
  max-width: 620px; margin: 1rem auto 0; text-align: center;
  font-size: .85rem; color: var(--ink-3);
}
.result-summary b { color: var(--ink); font-weight: 700; }
.result-summary .reset { color: var(--accent); cursor: pointer; }

.search-grid {
  display: grid; grid-template-columns: 218px 1fr; gap: 3rem;
  align-items: start;
}
@media (max-width: 860px) {
  .search-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .facets { position: static !important; max-height: none !important; }
}
.facets {
  position: sticky; top: 84px; max-height: calc(100vh - 110px);
  overflow-y: auto; padding-right: .3rem;
}
/* A hidden sidebar leaves grid auto-placement to drop the results into the
   218px track meant for it, which renders the whole result list one column
   wide. Span both tracks when there is no sidebar to sit beside. */
.facets[hidden] + .results { grid-column: 1 / -1; }
.facet-label {
  font: 500 .69rem/1.4 Inter, sans-serif; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-3); margin: 0 0 .5rem;
}
.facet-group + .facet-group { margin-top: 1.9rem; }
.facet {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .7rem; width: 100%; text-align: left; cursor: pointer;
  border: 0; background: none; color: var(--ink-2);
  font: 400 .87rem/1.4 Inter, sans-serif;
  padding: .34rem .5rem; border-radius: 7px;
}
.facet:hover { background: var(--raised); color: var(--ink); }
.facet.is-on {
  background: var(--accent-wash); color: var(--accent); font-weight: 500;
}
.facet .n {
  font-size: .74rem; color: var(--ink-3); flex: none;
  font-variant-numeric: tabular-nums;
}
.facet.is-on .n { color: var(--accent); }
.facet-volumes { display: flex; flex-wrap: wrap; gap: .35rem; }
.vchip {
  min-width: 2.1rem; text-align: center; cursor: pointer;
  border: 1px solid var(--rule); background: var(--surface);
  color: var(--ink-2); border-radius: 7px;
  padding: .3rem .45rem; font: 400 .82rem/1 Inter, sans-serif;
  font-variant-numeric: tabular-nums;
}
.vchip:hover { color: var(--ink); border-color: var(--ink-3); }
.vchip.is-on {
  background: var(--accent); border-color: var(--accent);
  color: var(--accent-on); font-weight: 500;
}
.vchip.is-off { opacity: .35; cursor: default; }
.vchip.is-off:hover { color: var(--ink-2); border-color: var(--rule); }

.results { min-width: 0; }
.result {
  display: block; padding: 1.3rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.result:first-child { padding-top: 0; }
.result-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 0 0 .45rem;
  font: 400 .75rem/1 Inter, sans-serif; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.pill {
  display: inline-block;
  font: 500 .68rem/1 Inter, sans-serif; letter-spacing: .04em;
  color: var(--accent); background: var(--accent-wash);
  border-radius: 999px; padding: .27rem .55rem;
}
.result-title {
  font: 400 1.24rem/1.34 Cardo, Georgia, serif; margin: 0 0 .4rem;
  transition: color .12s ease;
}
.result:hover .result-title { color: var(--accent); }
.result-snippet {
  font: 400 .95rem/1.62 Cardo, Georgia, serif; color: var(--ink-2);
  margin: 0;
}
.empty {
  color: var(--ink-3); padding: 3rem 0;
  font: 400 1.02rem/1.6 Cardo, Georgia, serif;
}
.empty b { color: var(--ink); font-weight: 700; }

/* ── volumes ────────────────────────────────────────────────── */
/* 190px lets all five volumes sit on one row on a desktop, which is the whole
   shape of the collection at a glance. */
.volume-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: .8rem;
}
.volume-card {
  display: block; text-align: left;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 12px; padding: 1rem 1.1rem;
  transition: border-color .12s ease, transform .12s ease;
}
.volume-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.volume-card .roman {
  font: 500 .68rem/1 Inter, sans-serif; text-transform: uppercase;
  letter-spacing: .13em; color: var(--accent);
}
.volume-card .n {
  display: block; font: 400 1.26rem/1.2 Cardo, Georgia, serif;
  margin: .45rem 0 .3rem;
}
.volume-card .c {
  font: 400 .78rem/1 Inter, sans-serif; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.volume-card .subjects {
  margin: .65rem 0 0; font-size: .8rem; line-height: 1.5; color: var(--ink-2);
}

/* ── one volume: outline, listing, in-volume search ─────────── */
.browse-grid {
  display: grid; grid-template-columns: minmax(230px, 300px) 1fr; gap: 3rem;
  align-items: start;
}
@media (max-width: 900px) {
  .browse-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .outline { position: static !important; max-height: none !important; }
}
.outline {
  position: sticky; top: 84px; max-height: calc(100vh - 110px);
  overflow-y: auto; padding-right: .3rem;
}
.book { margin-bottom: 1.5rem; }
.chapter {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .6rem; width: 100%; text-align: left; cursor: pointer;
  border: 0; background: none; color: var(--ink-2);
  font: 400 .9rem/1.4 Cardo, Georgia, serif;
  padding: .32rem .5rem; border-radius: 7px;
}
/* The book row is itself a filter, so it is a button like the chapters under
   it -- but it keeps the heading's weight rather than taking a chapter's. */
.chapter.book-row {
  font: 500 .69rem/1.4 Inter, sans-serif; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-3);
  padding-top: .5rem; padding-bottom: .5rem;
}
.chapter.book-row.is-on { color: var(--accent); }
.chapter.book-row + .chapter { margin-top: .1rem; }
.chapter:hover { background: var(--raised); color: var(--ink); }
.chapter.is-on {
  background: var(--accent-wash); color: var(--accent); font-weight: 700;
}
.chapter .n {
  font: 400 .73rem/1 Inter, sans-serif; color: var(--ink-3); flex: none;
  font-variant-numeric: tabular-nums;
}
.chapter.is-on .n { color: var(--accent); }

.listing-area { min-width: 0; }

/* Searching inside one volume, so it sits over the listing rather than in the
   masthead: it filters what is already on screen. */
.volume-search {
  display: flex; align-items: center; position: relative;
  margin-bottom: 1.5rem;
  background: var(--raised); border: 1px solid var(--rule);
  border-radius: 999px;
  transition: border-color .12s ease, background .12s ease;
}
.volume-search:focus-within {
  background: var(--surface); border-color: var(--accent);
}
.volume-search-icon {
  position: absolute; left: 1rem; width: 1.05rem; height: 1.05rem;
  color: var(--ink-3); pointer-events: none;
}
.volume-search input {
  width: 100%; padding: .7rem 2.6rem .7rem 2.75rem;
  background: transparent; border: 0; outline: 0;
  font: 400 .95rem/1.4 Inter, sans-serif; color: var(--ink);
}
/* Sits over the input's right padding rather than in the flex row, so showing
   and hiding it does not shift the field's width. */
.volume-search .clear {
  position: absolute; right: .6rem;
  border: 0; background: none; color: var(--ink-3); cursor: pointer;
  font-size: 1.3rem; line-height: 1; padding: 0 .35rem;
}
.volume-search .clear:hover { color: var(--ink); }

.listing { min-width: 0; }
/* ── subjects ───────────────────────────────────────────────── */
/* Subjects are pills that hug their own name and wrap as a run of text, not a
   grid of equal boxes: the names vary from "Gifts" to "Partnership &
   Investment", and a grid sized for the longest leaves the short ones stranded
   in whitespace. */
.topic-chips {
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.topic-chip {
  display: inline-flex; align-items: baseline; gap: .45rem;
  border: 1px solid var(--rule); background: var(--surface);
  color: var(--ink-2); border-radius: 999px;
  padding: .42rem .95rem; font-size: .9rem; white-space: nowrap;
  transition: border-color .12s ease, color .12s ease;
}
.topic-chip:hover { color: var(--ink); border-color: var(--ink-3); }
.topic-chip .n {
  font: 400 .74rem/1 Inter, sans-serif; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.topic-chip:hover .n { color: var(--ink-2); }
.topic-chip.is-more { color: var(--accent); border-color: transparent; }
.topic-chip.is-more:hover { border-color: var(--accent); }

/* The home page centres its run under the search field; browse ranges it left
   under the heading. */
#home-topics { justify-content: center; margin-top: 2.2rem; }

/* A subject runs across volumes, so its listing is grouped by the volume the
   rulings were printed in, and then by chapter within it. */
.listing-group {
  font: 500 .69rem/1.4 Inter, sans-serif; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-3);
  margin: 2.2rem 0 .4rem; padding-bottom: .4rem;
  border-bottom: 1px solid var(--rule);
}
.listing-group:first-child { margin-top: 0; }
.listing-chapter {
  font: 400 1.1rem/1.35 Cardo, Georgia, serif; margin: 1.7rem 0 .5rem;
}

.listing-head {
  font: 400 1.32rem/1.3 Cardo, Georgia, serif; margin: 0 0 .3rem;
}
.listing-sub { font-size: .82rem; color: var(--ink-3); margin: 0 0 1.4rem; }
.listing-item {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.2rem; padding: .7rem .2rem;
  border-bottom: 1px solid var(--rule-soft);
  font: 400 1.02rem/1.45 Cardo, Georgia, serif;
}
.listing-item:hover { color: var(--accent); }
.listing-item .p {
  font: 400 .76rem/1 Inter, sans-serif; color: var(--ink-3); flex: none;
  font-variant-numeric: tabular-nums;
}

/* Volume-to-volume paging, same shape as the ruling-to-ruling pager. */
.volume-nav, .entry-nav {
  display: flex; gap: 1.5rem; margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.volume-nav:empty { display: none; }
.volume-nav a, .entry-nav a {
  flex: 1 1 0; min-width: 0; color: var(--ink-2);
}
.volume-nav a:hover, .entry-nav a:hover { color: var(--accent); }
.volume-nav .next, .entry-nav .next { text-align: right; margin-left: auto; }
.volume-nav .dir, .entry-nav .dir {
  display: block; margin-bottom: .3rem;
  font: 500 .68rem/1 Inter, sans-serif; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-3);
}
.volume-nav .t, .entry-nav .t {
  font: 400 .95rem/1.45 Cardo, Georgia, serif;
}

/* ── one ruling ─────────────────────────────────────────────── */
.entry { max-width: 42rem; margin: 0 auto; }
.entry-meta-top {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin: 0 0 .9rem;
  font: 400 .77rem/1 Inter, sans-serif; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.entry-title {
  font: 400 clamp(1.75rem, 4vw, 2.4rem)/1.18 Cardo, Georgia, serif;
  letter-spacing: -.012em; margin: 0; text-wrap: balance;
}
.entry-actions {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 1.6rem 0 2.4rem; padding-bottom: 2rem;
  border-bottom: 1px solid var(--rule);
}
.action {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid var(--rule); background: var(--surface);
  color: var(--ink-2); border-radius: 999px;
  padding: .42rem .9rem; font-size: .82rem; cursor: pointer;
}
.action:hover { color: var(--ink); border-color: var(--ink-3); }
.action.is-done { color: var(--accent); border-color: var(--accent); }
.action svg { width: 14px; height: 14px; }
.action.static { cursor: default; }
.action.static:hover { color: var(--ink-2); border-color: var(--rule); }

.section-label {
  font: 500 .7rem/1 Inter, sans-serif; text-transform: uppercase;
  letter-spacing: .14em; color: var(--ink-3); margin: 0 0 .9rem;
}
.qa { margin: 0 0 2.6rem; }
/* The question is the reader's own words handed back to them, so it sits in a
   card; the answer gets the open page. */
.qa-question {
  background: var(--raised); border-radius: 12px; padding: 1.4rem 1.5rem;
}
.qa-question .section-label { margin-bottom: .7rem; }
.en {
  font: 400 1.09rem/1.75 Cardo, Georgia, serif; color: var(--ink);
  margin: 0 0 1.05rem;
}
.en:last-child { margin-bottom: 0; }
.qa-question .en { font-size: 1.03rem; color: var(--ink-2); }
.ar {
  font-family: "Scheherazade New", "Traditional Arabic", serif;
  font-size: 1.6rem; line-height: 2.15;
  direction: rtl; text-align: right; unicode-bidi: isolate;
  margin: 1.6rem 0; padding: 1rem 1.2rem;
  background: var(--sunk); border: 1px solid var(--rule-soft);
  border-right: 2px solid var(--accent); border-radius: 4px 10px 10px 4px;
}
.qa-question .ar { background: var(--surface); }
.fnref {
  font: 400 .68em/0 Inter, sans-serif; vertical-align: super;
  color: var(--accent); padding: 0 .12em; cursor: pointer;
}
.fnref:hover { text-decoration: underline; }

.footnotes {
  margin-top: 3.2rem; padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}
.footnotes ol { margin: 0; padding: 0; list-style: none; }
.footnote {
  /* Baseline, not the default stretch: the key is 11.8px Inter and the text
     beside it is either 14.4px Cardo or Scheherazade half again as tall, so
     aligning the boxes left the key floating above every Arabic note. On the
     baseline the key sits on the first line of its note whichever script it
     is. */
  display: flex; align-items: baseline; gap: .8rem; padding: .5rem 0;
  font-size: .9rem; color: var(--ink-2);
  scroll-margin-top: 5rem;
}
.footnote:target {
  background: var(--accent-wash); border-radius: 8px; padding: .5rem .7rem;
}
.footnote .key {
  flex: none; min-width: 3.4em;
  font: 400 .74rem/1 Inter, sans-serif; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.footnote .txt { font-family: Cardo, Georgia, serif; line-height: 1.65; }
.footnote-ar {
  /* No size of its own, and that is the size that *looks* right rather than
     merely the size that matches. Measured against Cardo at the note's own
     14.4px: Scheherazade's letter body is 0.98 of Cardo's x-height and the ink
     of a whole word is 1.01 of a whole Cardo word. Equal numbers are already
     an optical match here, so the face needs no compensation -- which is why
     1.25rem and then 1.1rem both read as the Arabic being the larger text:
     they stand 1.19 and 1.23 times the Latin word, not level with it.
     Scheherazade is generous in the em, not small in it, whatever the usual
     rule about Arabic faces says. Measure before compensating. */
  font-family: "Scheherazade New", serif;
  direction: rtl; text-align: right; unicode-bidi: isolate;
}