:root{
  --bg:#faf9f7; --panel:#fff; --ink:#1b1a18; --ink2:#55514b; --ink3:#8a847c;
  --line:#e7e3dd; --line2:#f0ece6; --accent:#8a5a2b; --accent-bg:#f6efe6;
  --hl:#fdf2c8; --ui:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* the untranslated half gets a ground of its own, warmer than the panel */
  --heb-bg:#f9f4ea; --heb-line:#e9ddc6; --heb-head:#f1e5d0; --row:#f7f4ef;
  --heb:"SBL Hebrew","Ezra SIL","Times New Roman",serif;
  --pt-label:11px; --pt-name:15px; --pt-meta:12px;
}
@media(prefers-color-scheme:dark){
  :root{--bg:#16151a; --panel:#1d1c22; --ink:#eceaf2; --ink2:#b6b2c0;
        --ink3:#807c8b; --line:#2c2a33; --line2:#25242c; --accent:#d9a066;
        --accent-bg:#2a2118; --hl:#4a3f1e;
        --heb-bg:#211d24; --heb-line:#38313f; --heb-head:#2a2330;
        --row:#26242d;}
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.6 Georgia,"Iowan Old Style",serif}
header{position:sticky;top:0;z-index:40;background:var(--panel);
  border-bottom:1px solid var(--line);padding:10px 16px;display:flex;
  align-items:center;gap:12px;flex-wrap:wrap;
  padding-top:calc(10px + env(safe-area-inset-top))}
/* the same bookplate the verse reader wears, so the two halves match */
.brand{display:inline-flex;align-items:center;
  padding:5px 10px 5px 9px;border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:8px;background:var(--panel);text-decoration:none;color:var(--ink);
  cursor:pointer;line-height:0;white-space:nowrap;
  transition:background .15s,border-color .15s,transform .08s}
.brand .mk{height:14px;width:auto;display:block}
.brand .mk .np{fill:var(--accent)}
.brand:hover{background:var(--accent-bg);border-color:var(--accent)}
.brand:active{transform:translateY(1px)}
.brand:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* the wordmark and, under it, what the site is -- the same stack the verse
   reader wears, centred on the plate */
.brandcol{display:flex;flex-direction:column;align-items:center;gap:3px}
.acctabout{border:0;background:none;padding:0;cursor:pointer;font-family:inherit;
  font-size:11px;line-height:1.4;color:var(--ink3);text-decoration:none}
.acctabout:hover{color:var(--accent);text-decoration:underline}
.acctabout:focus-visible{outline:2px solid var(--accent);outline-offset:2px;
  border-radius:4px}
/* the dialog's own veil: the verse reader borrows the word card's, and there
   is no word card on this side to borrow from */
#abveil{position:fixed;inset:0;z-index:50;display:none;background:rgba(12,10,8,.5)}
#abveil.on{display:block}
.hdr-t{font:600 12px/1.2 var(--ui);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink3)}
.spacer{flex:1 1 auto}
a.back{font:600 12px/1.2 var(--ui);color:var(--accent);text-decoration:none;
  border:1px solid var(--line);border-radius:8px;padding:7px 11px;cursor:pointer}
a.back:hover{border-color:var(--accent)}
main{max-width:44rem;margin:0 auto;padding:20px 16px 90px}
h1{font:600 13px/1.3 var(--ui);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink3);margin:0 0 4px}
.lede{color:var(--ink2);font-size:15px;margin:0 0 22px}
.lede b{color:var(--ink)}
/* Each half of the library in a card of its own. Flat on the page with a
   hairline between rows, the two lists read as one long run of works with a
   heading somewhere in the middle; the gap between two cards says what the
   heading had been saying alone. */
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:5px 9px;margin:0 0 26px}
.card.heb{background:var(--heb-bg);border-color:var(--heb-line);padding-top:0}

.work{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;width:100%;
  text-align:left;border:0;border-top:1px solid var(--line2);background:none;
  color:inherit;font:inherit;padding:13px 10px;border-radius:10px;
  cursor:pointer}
.work:first-of-type{border-top:0}
.work:hover{background:var(--row)}
.card.heb .work{border-top-color:var(--heb-line)}
.card.heb .work:hover{background:var(--heb-head)}
.work b{flex:1 1 auto;font:600 var(--pt-name)/1.35 var(--ui);color:var(--ink)}
.work:hover b{color:var(--accent)}
.work i{font-style:normal;font:var(--pt-meta)/1.3 var(--ui);color:var(--ink3);
  white-space:nowrap;text-align:right}
.work i em{display:block;font-style:normal;color:var(--ink3);opacity:.85;
  margin-top:2px}
.work s{text-decoration:none;color:var(--ink3);font-size:11px}
/* the books a work covers, inside the row so the whole row is the target */
.work .where{flex:1 0 100%;font:var(--pt-meta)/1.45 var(--ui);
  color:var(--ink3);margin:4px 0 0;padding:0}
.bar{display:flex;align-items:center;gap:11px;margin:0 0 14px;padding:0 0 11px;
  border-bottom:1px solid var(--line)}
.bar button{border:1px solid var(--line);background:var(--panel);color:var(--ink2);
  border-radius:8px;padding:6px 11px;font:700 12px var(--ui);cursor:pointer}
.bar button:hover{border-color:var(--accent);color:var(--accent)}
.bar .who{font:700 var(--pt-name) var(--ui);color:var(--ink)}
.bar .cat{margin-left:auto;font:10.5px var(--ui);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink3)}
.ref{font:700 var(--pt-meta) var(--ui);letter-spacing:.03em;color:var(--accent);
  text-decoration:none}
.ref:hover{text-decoration:underline}
.p{border-top:1px solid var(--line2);padding:13px 10px}
.p:first-of-type{border-top:0}
.card.heb .p{border-top-color:var(--heb-line)}
/* :first-of-type counts divs, and the banner is one, so the first passage
   under it would draw a second line against the banner's own. */
.hebsep + .p{border-top:0}
.p p{margin:3px 0 0}
.tag{font:11.5px var(--ui);color:var(--ink3);font-style:italic;margin-left:7px}
.chap{font:600 11px var(--ui);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink3);margin:22px 0 2px;padding-top:12px;
  border-top:2px solid var(--line)}
.chap:first-child{margin-top:0;padding-top:0;border-top:0}
.more{display:block;width:100%;margin-top:16px;border:1px solid var(--line);
  background:var(--panel);color:var(--accent);border-radius:10px;padding:11px;
  font:700 13px var(--ui);cursor:pointer}
.more:hover{border-color:var(--accent)}
.note{color:var(--ink3);font-style:italic;padding:12px 0}
.pager{display:flex;align-items:center;gap:10px;margin:0 0 16px}
.pager.foot{margin:22px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.pg{border:1px solid var(--line);background:var(--panel);color:var(--accent);border-radius:9px;padding:8px 12px;font:700 12px var(--ui);cursor:pointer;white-space:nowrap}
.pg:hover:not(:disabled){border-color:var(--accent)}
.pg:disabled{opacity:.4;cursor:default;color:var(--ink3)}
.pos{flex:1 1 auto;text-align:center;font:600 13px var(--ui);color:var(--ink)}
.pos i{display:block;font:400 11px var(--ui);color:var(--ink3);font-style:normal;letter-spacing:.04em}
/* a translator's note: a marker, and the note when it is asked for */
.fn{cursor:pointer;color:var(--accent);font:600 .68em var(--ui);vertical-align:super;padding:0 2px;border-radius:3px}
.fn:hover,.fn.open{background:var(--accent-bg)}
.fnbody{display:block;margin:6px 0 2px;padding:8px 11px;background:var(--accent-bg);border-radius:8px;font:13px/1.5 var(--ui);color:var(--ink2)}
.warn{background:var(--accent-bg);border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;font:13px/1.5 var(--ui);color:var(--ink2);margin:0 0 20px}

/* ---------------------------------------------------------------------------
   The directory of categories, at library/. These classes appear on no reader
   page, which is why they were missing: this stylesheet began as the Midrash
   page's own, and that page has no directory on it.
--------------------------------------------------------------------------- */
a.cat{display:block;border:1px solid var(--line);border-radius:12px;
  background:var(--panel);padding:14px 16px;margin:0 0 10px;
  color:inherit;text-decoration:none}
a.cat:hover{border-color:var(--accent)}
a.cat b{display:block;font:600 17px/1.3 var(--ui);color:var(--ink);margin:0 0 3px}
a.cat:hover b{color:var(--accent)}
a.cat .n{display:block;font:600 12px/1.4 var(--ui);color:var(--accent);
  letter-spacing:.02em;margin:0 0 6px}
a.cat .n i{font-style:normal;color:var(--ink3);font-weight:400;margin-left:9px}
a.cat .blurb{display:block;font:14px/1.5 var(--ui);color:var(--ink2)}
a.cat .shuf{display:inline-block;margin-top:9px;font:11px/1.3 var(--ui);
  letter-spacing:.04em;color:var(--ink3);border:1px solid var(--line);
  border-radius:20px;padding:4px 10px}

/* The way to send one passage, and the mark on one that was sent.

   It is a button, so it wears what the reader's other buttons wear -- the
   panel ground and hairline of .bar button, .pg and .more -- at the size a
   control belonging to one passage wants. It was set as bare text, which left
   the only thing on a passage a reader can press looking like a caption. */
.share{display:inline-block;margin:10px 0 0;padding:5px 11px;
  border:1px solid var(--line);border-radius:8px;
  background:var(--panel);color:var(--ink2);
  font:700 11px/1.3 var(--ui);letter-spacing:.04em;cursor:pointer}
.share:hover{border-color:var(--accent);color:var(--accent)}
.share:active{background:var(--accent-bg)}
/* on the warm ground the untranslated passages sit on */
.card.heb .share{border-color:var(--heb-line)}
.card.heb .share:hover{border-color:var(--accent)}
.p.lit{background:var(--hl);border-radius:8px;
  box-shadow:0 0 0 8px var(--hl);transition:background .3s,box-shadow .3s}

/* ---------------------------------------------------------------------------
   The works, and the passages, that no translation reached. Dimmed and last,
   the way the drawer beside a verse shows them -- but the Hebrew itself is
   left at full strength: dimming the one thing a reader came to read only
   makes it harder.
--------------------------------------------------------------------------- */
/* This is the seam between the translated half of a page and the rest of it,
   and a reader who misses it will wonder why the text changed language. It is
   a banner, not a footnote: eleven-pixel grey was the wrong weight for it. */
/* The head of the Hebrew card, not a rule floating above it: the card is
   already saying this is something else, so the banner names it and stops. */
.hebsep{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;
  margin:0 -9px 0;padding:13px 18px;
  border-radius:13px 13px 0 0;border-bottom:1px solid var(--heb-line);
  background:var(--heb-head);
  font:700 13px/1.35 var(--ui);letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent)}
.hebsep::before{content:"\05D0";font:400 18px/1 var(--heb);letter-spacing:0;
  color:var(--accent);opacity:.7}
.hebsep i{margin-left:auto;font:400 11.5px/1.4 var(--ui);font-style:normal;
  letter-spacing:.05em;text-transform:none;color:var(--ink3)}
.hebnote{margin:0;padding:11px 10px 3px;font:12.5px/1.5 var(--ui);
  color:var(--ink3);max-width:36rem}
@media(max-width:520px){
  .hebsep{font-size:12px;letter-spacing:.1em;padding:12px 14px}
  .hebsep i{margin-left:0;flex-basis:100%}
  .card{padding:4px 6px;border-radius:12px}
  .hebsep{margin:0 -6px 0;border-radius:11px 11px 0 0}
  .work,.p{padding-left:8px;padding-right:8px}
}
.work.heb{opacity:.8}
.work.heb:hover{opacity:1}
.p.heb .ref{color:var(--ink3)}
.p.heb .hebref{display:block;margin:5px 0 5px;text-decoration:none;
  font:11.5px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--ink3);overflow-wrap:anywhere}
.p.heb .hebref:hover{color:var(--accent);text-decoration:underline}
.p.heb p.hebtext{margin:0;font-family:var(--heb);direction:rtl;
  text-align:right;font-size:19px;line-height:1.95;color:var(--ink)}

/* ---------------------------------------------------------------------------
   The library's front door. Scoped to .hero so the readers' own small
   uppercase h1 is left as it is.
--------------------------------------------------------------------------- */
.hero{position:relative;margin:0 0 26px;padding:30px 0 26px;
  border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;left:50%;transform:translateX(-50%);
  top:-20px;width:100vw;height:calc(100% + 20px);z-index:-1;
  background:linear-gradient(180deg,var(--accent-bg),transparent 82%)}
.hero .eyebrow{margin:0;line-height:0;color:var(--ink3)}
.hero .eyebrow .mk{height:17px;width:auto;opacity:.85}
.hero .eyebrow .mk .np{fill:var(--accent)}
.hero h1{margin:12px 0 12px;font:400 38px/1.1 Georgia,"Iowan Old Style",serif;
  letter-spacing:-.02em;text-transform:none;color:var(--ink)}
.hero .lede{max-width:34rem;margin:0;font:16px/1.6 Georgia,"Iowan Old Style",serif;
  color:var(--ink2)}
.stats{display:flex;flex-wrap:wrap;gap:14px 30px;margin:24px 0 0}
.stats b{display:block;font:600 25px/1 var(--ui);color:var(--accent);
  letter-spacing:-.01em}
.stats span{display:block;margin-top:5px;font:11px/1.2 var(--ui);
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink3)}
.caveat{margin:0 0 22px;padding:0 0 0 13px;border-left:2px solid var(--line);
  font:13.5px/1.6 var(--ui);color:var(--ink3);max-width:38rem}
@media(max-width:520px){
  .hero h1{font-size:30px}
  .hero{padding:22px 0 20px}
  .stats{gap:12px 22px}
  .stats b{font-size:21px}
}