/* Mivtacho: a website that is also a sefer. The chrome is a light, plain
   website (search, menus); the reading surface is a sefer open on the desk,
   pages bowing into the spine, each ruled with the double frame of an old
   printed page. Every page is the height of the screen and never scrolls:
   what does not fit continues on the next page, and pages turn as a Hebrew
   sefer's do. */

@font-face { font-family: "Frank"; src: url(/assets/fonts/frank.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Frank"; src: url(/assets/fonts/frank-bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Drugulin"; src: url(/assets/fonts/drugulin.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Spectral"; src: url(/assets/fonts/spectral-normal-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Spectral"; src: url(/assets/fonts/spectral-normal-500.woff2) format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Spectral"; src: url(/assets/fonts/spectral-italic-400.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --he: "Frank", "Frank Ruehl CLM", "Times New Roman", serif;
  --he-display: "Drugulin", "Frank", serif;
  --en: "Spectral", Georgia, serif;
  --en-display: "Spectral", Georgia, serif; /* one book face for the English, as a sefer has */

  --bar: 62px;
  --desk: #e6e3dd;
  --desk-hi: #f1efea;
  --chrome: rgba(251, 250, 247, .94);
  --chrome-ink: #2b241b;
  --chrome-line: #d8d3c9;
  --menu: #fffefb;
  --leather: #33271d;
  --gold: #b38b3e;
  --gold-hi: #e9cf88;
  --gold-lo: #a07d36;
  --paper: #fcf9f2;
  --paper-edge: #dcd4c4;
  --fold: #ebe4d6;
  --ink: #1c1712;
  --ink-2: #4d4438;
  --ink-3: #6b604f;
  --ts: 1; /* the reader's text size: A− A+ */
  --rule: #ddd5c6;
  --frame: rgba(60, 42, 24, .5);
  --rubric: #962818;
  --blue: #2c4a6e;
  --shadow: rgba(70, 48, 20, .28);
  --sheen: rgba(255, 250, 235, .3);
  --tilt: 2.2deg;
  --turn: 820ms;
  --ease-turn: cubic-bezier(.42, .02, .3, 1);
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .1 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --pores: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --desk: #110d09; --desk-hi: #241b13; --chrome: rgba(20, 15, 11, .9); --chrome-ink: #ece1ca; --chrome-line: #3a3026; --menu: #1d1712;
    --paper: #201c16; --paper-edge: #2e2920; --fold: #2b261e; --gold: #c9a24e;
    --ink: #ece2cf; --ink-2: #c4b9a4; --ink-3: #978c79; --rule: #3c3529;
    --frame: rgba(214, 192, 150, .32); --rubric: #e08a6b; --shadow: rgba(0, 0, 0, .6); --sheen: rgba(255, 245, 225, .035);
    --blue: #8fb6e0;
  }
}
:root[data-theme="dark"] {
  --desk: #110d09; --desk-hi: #241b13; --chrome: rgba(20, 15, 11, .9); --chrome-ink: #ece1ca; --chrome-line: #3a3026; --menu: #1d1712;
  --paper: #201c16; --paper-edge: #2e2920; --fold: #2b261e; --gold: #c9a24e;
  --ink: #ece2cf; --ink-2: #c4b9a4; --ink-3: #978c79; --rule: #3c3529;
  --frame: rgba(214, 192, 150, .32); --rubric: #e08a6b; --shadow: rgba(0, 0, 0, .6); --sheen: rgba(255, 245, 225, .035);
  --blue: #8fb6e0;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; color: var(--ink); font-family: var(--en);
  background: radial-gradient(1200px 760px at 50% 30%, var(--desk-hi), var(--desk) 75%) fixed, var(--desk);
  text-rendering: optimizeLegibility;
}
body.paged { overflow: hidden; }
/* thin scrollbars everywhere */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink-3) 45%, transparent) transparent; }
a { color: inherit; }
[lang="he"] { font-family: var(--he); }
button { font: inherit; color: inherit; }

/* ------------------------------------------------------------ the top bar: a website */

.topbar {
  position: sticky; top: 0; z-index: 50; height: var(--bar); display: flex; align-items: center; gap: 18px;
  padding: 0 clamp(14px, 2.6vw, 34px); color: var(--chrome-ink);
  background: var(--chrome); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--chrome-line);
}
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; flex: none; }
.brand .mark { width: 26px; height: 26px; color: var(--gold); }
.brand-he { font: 700 23px/1 var(--he-display); }
/* the root of bitachon, ב־ט־ח, set in red within the name, as a printer marked the letters that matter */
.brand-he .root, .sh-title .root { background: linear-gradient(180deg, #d8b468, #b88d3e 55%, #8f6a2c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-en { font: 500 17px/1 var(--en); color: var(--chrome-ink); opacity: .9; margin-top: 3px; }

.search { position: relative; flex: 1 1 340px; max-width: 440px; margin-inline: auto; }
.search input {
  width: 100%; height: 38px; padding: 0 14px 0 36px; border-radius: 5px; border: 1px solid var(--chrome-line);
  background: var(--menu); color: var(--chrome-ink); font: 400 15px/1 var(--en); outline: none;
}
.search input::placeholder { color: var(--ink-3); }
.search input:focus { border-color: var(--ink-3); }
.search svg { position: absolute; left: 13px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; max-height: min(70vh, 560px); overflow: auto; z-index: 60;
  background: var(--menu); border: 1px solid var(--chrome-line); border-radius: 12px; box-shadow: 0 18px 40px var(--shadow); padding: 6px;
}
.results[hidden] { display: none; }
.result { display: block; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--chrome-ink); }
.result:hover, .result[aria-selected="true"] { background: rgba(60, 50, 35, .07); }
.result b { display: block; font: 500 15.5px/1.3 var(--en); }
.result .r-ref { display: flex; justify-content: space-between; gap: 10px; margin-top: 3px; font-size: 13px; color: var(--ink-3); }
.result .r-ref [lang="he"] { font-size: 15px; }
.result .r-snip { display: block; margin-top: 4px; font-size: 13.5px; color: var(--ink-2); }
.result mark { background: rgba(60, 50, 35, .18); color: inherit; border-radius: 2px; }
.results .none { padding: 14px; color: var(--ink-3); font-size: 14px; }

.nav { display: flex; align-items: center; gap: 4px; flex: none; }
.menu { position: relative; }
.menu > summary, .nav > a {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 8px;
  font: 500 14px/1 var(--en); text-decoration: none; white-space: nowrap;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); opacity: .6; }
.menu > summary:hover, .nav > a:hover, .menu[open] > summary { background: rgba(60, 50, 35, .07); }
.panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: min(560px, 92vw); max-height: min(74vh, 640px); overflow: auto;
  background: var(--menu); border: 1px solid var(--chrome-line); border-radius: 12px; box-shadow: 0 18px 40px var(--shadow); padding: 14px 8px;
}
/* the Sources menu: each era a box of its own that opens when touched */
.fold { margin: 0 4px 8px; border: 1px solid var(--chrome-line); border-radius: 10px; }
.fold:last-child { margin-bottom: 0; }
.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-radius: 9px; color: var(--ink); }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: ""; flex: none; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(-45deg); transition: transform .2s; margin-inline-end: 2px; }
.fold[open] > summary::before { transform: translateY(-2px) rotate(45deg); }
.fold > summary:hover { background: rgba(60, 50, 35, .07); }
.fold[open] > summary { border-bottom: 1px solid var(--chrome-line); border-radius: 9px 9px 0 0; background: rgba(60, 50, 35, .04); }
.f-en { font: 500 16px/1 var(--en); }
.f-n { color: var(--ink-3); font: italic 400 13px/1 var(--en); }
.f-he { margin-inline-start: auto; font: 700 20px/1 var(--he-display); }
.fold-in { padding: 6px 4px; }
.panel a[aria-current="page"] { background: rgba(60, 50, 35, .08); box-shadow: inset 3px 0 0 var(--rubric); }
.panel a { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: baseline; padding: 8px 12px; border-radius: 8px; text-decoration: none; }
.panel a:hover { background: rgba(60, 50, 35, .07); }
.panel a .p-en { font: 400 15.5px/1.3 var(--en); }
.panel a .p-he { font: 400 17px/1.3 var(--he); text-align: right; direction: rtl; }
.panel a .p-sub { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-3); }
.panel .letter { margin: 10px 12px 2px; font: 500 17px/1 var(--en); color: var(--ink-3); }
.modes { display: inline-flex; border: 1px solid var(--chrome-line); border-radius: 5px; padding: 2px; margin-left: 6px; }
.modes button { background: none; border: 0; cursor: pointer; padding: 6px 10px; border-radius: 3px; font: 500 12.5px/1 var(--en); opacity: .7; }
.modes button[lang="he"] { font: 15px/1 var(--he); padding: 4px 10px 5px; }
.modes button[aria-pressed="true"] { background: var(--chrome-ink); color: var(--menu); opacity: 1; }
.modes .ts { font: 500 12.5px/1 var(--en); padding: 5px 9px; }
.modes .ts:first-of-type { margin-inline-start: 4px; border-inline-start: 1px solid var(--chrome-line); border-radius: 0 3px 3px 0; }
.modes .ts[aria-disabled="true"] { opacity: .3; cursor: default; }
/* back where you left off: a quiet note, gone in a few seconds */
.resume { position: fixed; z-index: 45; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; padding: 8px 8px 8px 16px; border-radius: 5px; background: var(--menu); border: 1px solid var(--chrome-line); box-shadow: 0 10px 26px -10px var(--shadow); color: var(--ink-2); font: 400 13.5px/1 var(--en); white-space: nowrap; animation: fade-up .4s ease; }
.resume button { border: 0; border-radius: 3px; padding: 7px 12px; background: rgba(60, 50, 35, .08); color: var(--ink); font: 500 12.5px/1 var(--en); cursor: pointer; }
.resume button:hover { background: rgba(60, 50, 35, .16); }
.theme { background: none; border: 0; cursor: pointer; width: 36px; height: 36px; border-radius: 8px; font-size: 17px; opacity: .75; }
.theme:hover { opacity: 1; background: rgba(60, 50, 35, .07); }

/* ------------------------------------------------------------ the binding */

.desk-cover { position: relative; display: grid; place-items: center; align-content: center; gap: 22px; height: calc(100dvh - var(--bar)); padding: 14px 16px 18px; }
.cover {
  position: relative; display: block; height: min(calc(100dvh - var(--bar) - 90px), 820px); aspect-ratio: .69; max-width: 88vw;
  container-type: size; /* what is on the cover is sized against the cover, so it scales as one piece */
  text-decoration: none; color: var(--gold); border-radius: 7px 3px 3px 7px;
  --gold: #d6b05a; --gold-hi: #f5df9f; --gold-lo: #b08a3e;
  background:
    radial-gradient(90% 70% at 28% 22%, rgba(255, 238, 210, .10), transparent 62%),
    radial-gradient(130% 110% at 50% 50%, transparent 58%, rgba(0, 0, 0, .5)),
    var(--pores),
    linear-gradient(158deg, #4a3829, var(--leather) 46%, #1d1510);
  box-shadow:
    -3px 4px 0 -1px #d8b65f, -5px 7px 0 -2px #a7863a, -7px 10px 0 -3px #c9a751,
    0 40px 70px -24px rgba(40, 20, 5, .55), inset 0 0 0 1px rgba(0, 0, 0, .55), inset 0 0 46px rgba(0, 0, 0, .55);
  transform-origin: right center; transition: transform .8s var(--ease-turn);
  view-transition-name: cover;
}
.cover::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 24px; border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, rgba(0,0,0,.25), rgba(255,235,200,.08) 45%, rgba(0,0,0,.45)); }
.cover::after { content: ""; position: absolute; top: 0; bottom: 0; right: 24px; width: 4px;
  background: linear-gradient(90deg, rgba(0,0,0,.6), rgba(255,230,190,.10)); }
.cover:hover, .cover:focus-visible { transform: perspective(1800px) rotateY(10deg); outline: none; }
.tooling { position: absolute; inset: 20px 46px 20px 20px; border: 2px solid var(--gold); box-shadow: 0 -1px 0 rgba(0,0,0,.5), inset 0 -1px 0 rgba(0,0,0,.5); }
.tooling::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--gold-lo); }
.orn-corner { position: absolute; width: 46px; height: 46px; color: var(--gold); filter: drop-shadow(0 -1px 0 rgba(0,0,0,.6)); }
.orn-corner.tl { top: 6px; left: 6px; }
.orn-corner.tr { top: 6px; right: 6px; transform: scaleX(-1); }
.orn-corner.bl { bottom: 6px; left: 6px; transform: scaleY(-1); }
.orn-corner.br { bottom: 6px; right: 6px; transform: scale(-1); }
.cover-face { position: absolute; inset: 20px 46px 20px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(10px, 5cqh, 38px); }
.cover-panel {
  display: flex; flex-direction: column; align-items: center; text-align: center; width: 78%;
  padding: clamp(10px, 4.1cqh, 32px) 18px clamp(9px, 3.6cqh, 28px);
  border: 1.5px solid var(--gold-lo); outline: 1px solid var(--gold-lo); outline-offset: 5px;
  background: linear-gradient(rgba(0,0,0,.12), rgba(0,0,0,.2));
}
.cover-sefer, .cover-title, .cover-sub-he {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, #a9853a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, .55)) drop-shadow(0 1px 0 rgba(255, 220, 160, .12));
}
.cover-sefer { font: 700 clamp(12px, 3.3cqh, 25px)/1 var(--he); letter-spacing: .12em; }
.cover-title { font: 700 clamp(40px, 16.5cqh, 136px)/1.05 var(--he-display); margin: 4px 0 2px; }
/* the root letters the brightest gold on the cover, the מ and ו an older, quieter gold, as in the top bar */
.cover-title { background: linear-gradient(180deg, #c4ab78, #a08654 60%, #7c6539) !important; -webkit-background-clip: text !important; background-clip: text !important; }
.cover-title .root { background: linear-gradient(180deg, #f6e3a6, #e2bc5c 50%, #c49638 80%, #a37a2a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cover-rule { position: relative; display: block; width: 66%; height: 1px; margin: clamp(6px, 2.5cqh, 18px) 0; background: var(--gold-lo); }
.cover-rule i { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; background: var(--gold); transform: translate(-50%, -50%) rotate(45deg); }
.cover-sub-he { font: 700 clamp(13px, 3.7cqh, 29px)/1.3 var(--he); }
.cover-mark { width: clamp(30px, 9.5cqh, 72px); height: auto; color: var(--gold); filter: drop-shadow(0 -1px 0 rgba(0,0,0,.6)); }
.cover-open { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; white-space: nowrap; font: italic 400 14px/1 var(--en); color: var(--ink-2); opacity: .75; }
.cover-open [lang="he"] { font: normal 400 17px/1 var(--he); }
.cover-open:hover { opacity: 1; }

/* the pasuk the site is named for, stamped under the title */
.cover-pasuk { display: block; margin-top: clamp(6px, 2.5cqh, 18px); text-align: center; }
.cover-pasuk-he { display: block; font: 700 clamp(11px, 2.75cqh, 20px)/1.5 var(--he);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 60%, #a9853a); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, .5)); }
.cover-pasuk-en { display: block; margin-top: 6px; color: var(--gold); opacity: .92; font: italic 400 clamp(9.5px, 2.05cqh, 14.5px)/1.45 var(--en); }
.cover-pasuk-ref { display: block; margin-top: 3px; color: var(--gold); opacity: .85; font: 400 clamp(9px, 1.9cqh, 13.5px)/1.2 var(--he); }
.hp-today { margin: 4px 0 24px; }
.hp-today .mini-title { font-size: 15.5px; }
.hp-today .mini-title-he { font-size: 19px; }
.hp-today .mini-en { font-size: 14px; }
.hp-today .mini-he { font-size: 17.5px; }
.hp-browse { margin: 0; color: var(--ink-3); font: 400 14px/1.4 var(--en); }
.hp-browse a { color: var(--ink-2); text-decoration-color: var(--chrome-line); text-underline-offset: 4px; }
.hp-browse a:hover { color: var(--rubric); }
.hp-today-t { display: block; margin-top: 12px; color: var(--ink); text-decoration: none; font: 400 18px/1.25 var(--en); text-wrap: balance; }
.hp-today-t:hover { color: var(--rubric); }
.hp-today-ref { display: block; margin-top: 3px; color: var(--ink-3); font-size: 12.5px; }
.hp-today-ref [lang="he"] { font-size: 14.5px; }

/* today's source: the same sefer lying open, its leather board showing
   round the pages, the pages dipping into the fold, their edges stacked */
.mini {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; height: clamp(260px, 42vh, 400px);
  padding: 5px 8px 9px; border-radius: 4px; text-decoration: none; color: var(--ink); perspective: 1400px;
  background: radial-gradient(130% 120% at 50% 40%, transparent 55%, rgba(0, 0, 0, .45)), var(--pores), linear-gradient(158deg, #4a3829, var(--leather) 46%, #1d1510);
  box-shadow: 0 18px 30px -16px rgba(40, 20, 5, .55), inset 0 0 0 1px rgba(0, 0, 0, .5);
}
/* the fold, where the two pages meet */
.mini::after { content: ""; position: absolute; z-index: 2; top: 5px; bottom: 9px; left: 50%; width: 36px; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(40, 25, 5, .14) 36%, rgba(30, 18, 4, .34) 50%, rgba(40, 25, 5, .14) 64%, transparent); }
.mini-leaf { position: relative; overflow: hidden; padding: 21px 20px 16px; background-color: var(--paper); }
.mini-leaf::before { content: none; }
/* each page dips toward the spine at its head and foot, as an open book's does */
.mini-l { transform-origin: right center; transform: rotateY(3deg); border-radius: 3px 40% 40% 3px / 3px 10px 7px 3px;
  background-image: linear-gradient(270deg, rgba(40, 25, 5, .3), rgba(90, 60, 20, .1) 8%, transparent 20%), var(--paper-grain);
  box-shadow: -1px 1px 0 var(--paper-edge), -2px 2px 0 var(--paper), -3px 3px 0 var(--paper-edge); }
.mini-r { transform-origin: left center; transform: rotateY(-3deg); border-radius: 40% 3px 3px 40% / 10px 3px 3px 7px;
  background-image: linear-gradient(90deg, rgba(40, 25, 5, .3), rgba(90, 60, 20, .1) 8%, transparent 20%), var(--paper-grain);
  box-shadow: 1px 1px 0 var(--paper-edge), 2px 2px 0 var(--paper), 3px 3px 0 var(--paper-edge); }
/* the source's title at the head of each little page, then its opening words */
.mini-leaf { display: block; }
/* a long title stops at three lines; the text below takes what room is left,
   and the page script trims it to whole lines */
.mini-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font: 500 15.5px/1.25 var(--en); color: var(--ink); text-wrap: balance; }
.mini-ref { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 3px 0 8px; padding-bottom: 7px; border-bottom: 1px solid var(--rule); color: var(--ink-3); font: italic 400 11.5px/1.2 var(--en); }
.mini-title-he { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-bottom: 8px; padding-bottom: 7px; border-bottom: 1px solid var(--rule); font: 700 17px/1.2 var(--he-display); color: var(--rubric); }
.mini-text { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.mini-en { font: 400 13px/1.5 var(--en); }
.mini-he { font: 400 16px/1.6 var(--he); text-align: justify; }
/* on a phone the page scrolls, so the little sefer grows to its passage and shows it whole */
@media (max-width: 720px) {
  .mini { height: auto; min-height: 260px; }
  .mini-title, .mini-title-he, .mini-ref, .mini-text { display: block; -webkit-line-clamp: unset !important; max-height: none !important; overflow: visible; }
}
.mini:hover .mini-leaf { background-color: color-mix(in srgb, var(--paper) 92%, var(--gold)); }
/* the four eras, two by two */
.hp-eras { grid-template-columns: 1fr 1fr; column-gap: 22px; }

/* the home page: the closed sefer, and beside it what is inside */
.desk-cover {
  grid-template-columns: auto minmax(300px, 470px); grid-template-areas: "cover panel" "open panel";
  column-gap: clamp(40px, 6vw, 100px); row-gap: 18px; justify-content: center; align-content: center;
}
.desk-cover .cover { grid-area: cover; }
.desk-cover .cover-open { grid-area: open; justify-self: center; }
.home-panel { grid-area: panel; align-self: center; color: var(--ink); }
/* the labels: the Hebrew leads, the English beside it */
.hp-kicker { display: flex; align-items: baseline; gap: 9px; margin: 0 0 12px; color: var(--ink-2); font: italic 400 15px/1 var(--en); }
.hp-kicker [lang="he"] { color: var(--rubric); font: normal 700 19px/1 var(--he-display); }
.hp-title { margin: 0 0 16px; font: 400 clamp(22px, 1.95vw, 29px)/1.2 var(--en); text-wrap: balance; }
.hp-lede { margin: 0 0 20px; color: var(--ink-2); font: 400 16px/1.6 var(--en); max-width: 30em; }
.hp-actions { display: flex; align-items: center; gap: 18px; margin: 0 0 22px; }
.hp-btn { display: inline-flex; align-items: center; padding: 12px 22px; border-radius: 3px; background: var(--chrome-ink); color: var(--menu); text-decoration: none; font: 500 15px/1 var(--en); }
.hp-btn:hover { background: #000; }
.hp-link { color: var(--ink-2); font: 500 14px/1 var(--en); text-underline-offset: 4px; }
.hp-link:hover { color: var(--rubric); }
.hp-h { display: flex; align-items: baseline; gap: 9px; margin: 0 0 9px; color: var(--ink-3); font: italic 400 14.5px/1 var(--en); }
.hp-h [lang="he"] { color: var(--ink); font: normal 700 18px/1 var(--he-display); }
.hp-eras { display: grid; margin: 0 0 22px; border-top: 1px solid var(--chrome-line); }
.hp-era { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 14px; padding: 10px 2px; border-bottom: 1px solid var(--chrome-line); text-decoration: none; }
.hp-era:hover .hp-en, .hp-era:hover .hp-he { color: var(--rubric); }
.hp-en { font: 400 18px/1.15 var(--en); }
.hp-n { color: var(--ink-3); font-size: 12.5px; }
.hp-he { min-width: 4.5em; text-align: right; font: 700 20px/1 var(--he-display); }
.hp-topics { display: flex; flex-wrap: wrap; gap: 8px; }
.hp-topic { padding: 7px 12px; border: 1px solid var(--chrome-line); border-radius: 999px; background: var(--menu); text-decoration: none; font: 400 13.5px/1 var(--en); }
.hp-topic [lang="he"] { margin-inline-start: 6px; color: var(--ink-3); font: 400 15px/1 var(--he); }
.hp-topic:hover { border-color: var(--gold); color: var(--rubric); }

/* the way into the whole sefer, under the day's source: ruled as the pages are */
.hp-door {
  position: relative; display: grid; gap: 5px; margin: 0 0 16px; padding: 14px 52px 14px 18px; border-radius: 3px;
  border: 1px solid var(--chrome-line); border-inline-start: 3px solid var(--gold); background: var(--menu);
  color: var(--ink); text-decoration: none; transition: border-color .2s;
}
.hp-door:hover { border-color: var(--gold); }
.hp-door-k { display: flex; align-items: baseline; gap: 10px; color: var(--ink-2); font: italic 400 16px/1.1 var(--en); }
.hp-door-k [lang="he"] { color: var(--ink); font: normal 700 21px/1 var(--he-display); }
.hp-door-d { color: var(--ink-3); font: 400 14px/1.35 var(--en); }
.hp-door-go { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--gold); font: 400 26px/1 var(--en); transition: transform .2s ease; }
.hp-door:hover .hp-door-go { transform: translate(4px, -50%); }
/* on the landing page the day's source is a glimpse, so the three ways in fit the screen */
@media (min-width: 721px) {
  .hp-today { margin-bottom: 18px; }
  .hp-today .mini { height: clamp(220px, 36vh, 360px); }
}
@media (min-width: 721px) and (max-height: 800px) {
  .hp-door { padding-block: 11px; }
  .hp-today { margin-bottom: 14px; }
}
/* the closed sefer fits the window both ways: its height, and its width beside the panel */
.cover { height: min(calc(100dvh - var(--bar) - 110px), 700px, calc(75vw - 58px)); }

/* ------------------------------------------------------------ the open book */

.book {
  position: relative; max-width: 1300px; height: calc(100dvh - var(--bar)); margin: 0 auto;
  padding: 16px clamp(56px, 5vw, 76px) 20px;
}
.spread {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: repeat(var(--rows), auto) 1fr; align-content: start; height: 100%;
  perspective: 2600px; container-type: inline-size; --u: .5cqw;
}
.measuring .leaf, .measuring .spread { transform: none !important; }
.leaf {
  grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; position: relative; min-width: 0;
  background-color: var(--paper); overflow: hidden;
  --out: clamp(40px, 4.8vw, 76px); --in: clamp(40px, 4vw, 62px);
}
.row { min-width: 0; position: relative; z-index: 1; align-self: start; }
.row.off { display: none; }
.js .spread:not(.ready) .row { visibility: hidden; }
.leaf-r .row { direction: rtl; text-align: right; }
/* Each leaf rises from the spine, so the book lies open in a shallow V, and
   its paper shades down into the fold. */
.leaf-r {
  grid-column: 2; padding: clamp(34px, 4.2vw, 56px) var(--out) 68px var(--in);
  border-radius: 1px 6px 6px 1px; transform-origin: left center; transform: rotateY(calc(var(--tilt) * -1));
  background-image:
    linear-gradient(90deg, rgba(40, 25, 5, .42), rgba(70, 45, 10, .24) 2.5%, rgba(90, 60, 20, .1) 8%, var(--sheen) 14%, transparent 22%, transparent 95%, rgba(0, 0, 0, .04)),
    var(--paper-grain);
  box-shadow: 1px 1px 0 var(--paper-edge), 3px 2px 0 var(--paper), 4px 2px 0 var(--paper-edge), 6px 3px 0 var(--paper), 7px 4px 0 var(--paper-edge), 9px 5px 0 var(--paper), 10px 6px 0 var(--paper-edge), 18px 26px 44px -18px var(--shadow);
  view-transition-name: leaf-r;
}
.leaf-l {
  grid-column: 1; padding: clamp(34px, 4.2vw, 56px) var(--in) 68px var(--out);
  border-radius: 6px 1px 1px 6px; transform-origin: right center; transform: rotateY(var(--tilt));
  background-image:
    linear-gradient(270deg, rgba(40, 25, 5, .42), rgba(70, 45, 10, .24) 2.5%, rgba(90, 60, 20, .1) 8%, var(--sheen) 14%, transparent 22%, transparent 95%, rgba(0, 0, 0, .04)),
    var(--paper-grain);
  box-shadow: -1px 1px 0 var(--paper-edge), -3px 2px 0 var(--paper), -4px 2px 0 var(--paper-edge), -6px 3px 0 var(--paper), -7px 4px 0 var(--paper-edge), -9px 5px 0 var(--paper), -10px 6px 0 var(--paper-edge), -18px 26px 44px -18px var(--shadow);
  view-transition-name: leaf-l;
}
/* the double rule of an old printed page */
/* the frame of a page on a wide screen: one heavy line and a hairline within
   it, as old printers ruled a page (none on a phone, where the leather round
   the page does that work) */
.leaf::before, .leaf::after { content: ""; position: absolute; pointer-events: none; border-style: solid; }
.leaf::before { inset: 20px; border-width: 2.2px; border-color: color-mix(in srgb, var(--ink) 58%, transparent); }
.leaf::after { inset: 25.5px; border-width: .7px; border-color: color-mix(in srgb, var(--ink) 45%, transparent); }
.leaf-r::before { left: 32px; } .leaf-r::after { left: 37.5px; }
.leaf-l::before { right: 32px; } .leaf-l::after { right: 37.5px; }
.leaf::before { inset: 16px; border-width: 1.6px; }
.leaf::after { inset: 21px; border-width: .7px; }
.leaf-r::before { left: 28px; } .leaf-r::after { left: 33px; }
.leaf-l::before { right: 28px; } .leaf-l::after { right: 33px; }

/* running head: on continuation pages only, as on a sefer's chapter opening */
.rh { margin: 0 0 18px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); color: var(--ink-3); font: italic 400 13.5px/1.4 var(--en); }
.leaf-r .rh { font: 700 16px/1.3 var(--he-display); letter-spacing: 0; }

/* the title of a source */
.title-row { position: relative; padding-bottom: 16px; margin-bottom: 20px; }
.title-row::after { content: ""; position: absolute; bottom: 0; inset-inline-start: 0; width: 56px; height: 1px; background: var(--ink-3); opacity: .55; }
/* the line that restates a source, in its own row under the title; the short
   rule closes the two together, on both leaves alike */
.title-row.has-heading { padding-bottom: 6px; margin-bottom: 0; }
.title-row.has-heading::after { display: none; }
.heading-row { position: relative; align-self: stretch; padding-bottom: 16px; margin-bottom: 20px; }
.heading-row::after { content: ""; position: absolute; bottom: 0; inset-inline-start: 0; width: 56px; height: 1px; background: var(--ink-3); opacity: .55; }
.heading-row .heading { margin: 0; }
.era-label { margin: 0 0 9px; color: var(--ink-3); font: italic 400 14px/1 var(--en); }
.leaf-r .era-label { font: 700 17px/1 var(--he-display); letter-spacing: .02em; }
.work-en { margin: 0 0 4px; font: 500 clamp(24px, calc(6.2 * var(--u)), 38px)/1.12 var(--en); text-wrap: balance; }
.locus-en { margin: 0 0 10px; color: var(--ink-2); font: 400 clamp(15px, calc(3.3 * var(--u)), 19px)/1.3 var(--en); }
.heading { margin: 0 0 4px; color: var(--ink-2); font: italic 400 clamp(15px, calc(3.4 * var(--u)), 18.5px)/1.45 var(--en); text-wrap: pretty; }
.ref { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.work-he { margin: 0 0 4px; font: 700 clamp(28px, calc(7.2 * var(--u)), 46px)/1.08 var(--he-display); }
.locus-he { margin: 0; color: var(--ink-2); font: 400 clamp(16px, calc(3.3 * var(--u)), 20px)/1.3 var(--he); }

/* the text itself */
.he-text { margin: 0 0 .9em; font: 400 calc(clamp(18px, calc(4.1 * var(--u)), 24px) * var(--ts))/1.8 var(--he); text-align: justify; }
/* English flush left: an even space between words reads more easily than a justified line */
.en-text { margin: 0 0 .9em; font: 400 calc(clamp(14.5px, calc(3.05 * var(--u)), 17.5px) * var(--ts))/1.62 var(--en); text-align: left; hyphens: manual; }
.seg-title { margin: 0 0 1em; }
.leaf-r .seg-title { font: 700 clamp(19px, calc(4.4 * var(--u)), 25px)/1.4 var(--he-display); }
.leaf-l .seg-title { font: italic 400 clamp(19px, calc(4.4 * var(--u)), 25px)/1.3 var(--en-display); }
.cite { color: var(--ink-3); font-size: .8em; white-space: nowrap; }
/* a cited pasuk: tap it to see it */
.cite-v { cursor: pointer; text-decoration: underline dotted; text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); text-underline-offset: 3px; }
.cite-v:hover, .cite-v:focus-visible { color: var(--rubric); outline: none; }
.slip-text { margin: 2px 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.slip-text .slip-he { font-size: calc(20px * var(--ts)); }
/* an amud or a mishnah: the words quoted marked */
.slip-amud .slip-seg { margin-bottom: 10px; }
.slip-amud .slip-he { margin-bottom: 4px; }
.slip-hit { background: color-mix(in srgb, var(--gold) 18%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 18%, transparent); border-radius: 1px; }
.slip-ed { margin: 16px 0 0; color: var(--ink-3); font-size: 12px; }
.slip-onsite { margin: 0 0 16px; }
.slip-onsite a { display: block; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 3px; text-decoration: none; }
.slip-onsite a:hover { border-color: var(--ink-3); }
.slip-onsite b { display: block; font: 500 15px/1.35 var(--en); }
.slip-onsite span { color: var(--ink-3); font-size: 12.5px; }
.leaf-r .cite { font-size: .72em; }
/* A verse number stands beside its verse at reading size, in a narrow
   margin of its own, as a printed Tanach sets it; not raised like a footnote. */
.has-v { --vg: 2.1em; padding-inline-start: var(--vg); text-indent: calc(-1 * var(--vg)); }
.vm { display: inline-block; width: var(--vg); text-indent: 0; color: var(--ink-3); font-weight: 500; font-variant-numeric: lining-nums; }
.leaf-r .vm { font-weight: 700; }
/* a comment's perek and pasuk: a small label before it */
.vl { font: 600 .78em/1 var(--en); color: var(--ink-3); margin-inline-end: .45em; }
.leaf-r .vl { font: 700 .8em/1 var(--he); color: var(--rubric); }
/* the first word of a source: set larger and bolder, in its line, as a printed
   sefer opens a piece; no box round it */
.open-v { display: inline; }
.open { font: 700 1.42em/1 var(--he-display); margin-inline-end: .06em; }
/* as a printer sets it: no word alone on a paragraph's last line, and old-style figures in the English */
.he-text, .en-text, .pb-he, .pb-en, .slip-he, .slip-en { text-wrap: pretty; }
.en-text, .pb-en, .slip-en { font-variant-numeric: oldstyle-nums; }
/* the large first letter sits close to the rest of its word: with room after it,
   "It" read as "I t" */
.leaf-l .lead .en-text::first-letter { float: left; margin: .08em -.035em 0 -.02em; font: 400 3.3em/.8 var(--en); color: var(--ink); }

/* the footnote of a source: its threads and its edition, at the foot of its
   opening page, above its foot, as a sefer prints its notes */
.meta-row { position: absolute; bottom: 56px; z-index: 1; margin: 0; padding-top: 8px; border-top: 1px solid var(--rule); }
.leaf-r .meta-row { left: var(--in); right: var(--out); }
.leaf-l .meta-row { left: var(--out); right: var(--in); }
.meta { margin: 0 0 3px; color: var(--ink-3); font-size: 12px; line-height: 1.45; }
.leaf-r .meta { font: 400 14.5px/1.45 var(--he); }
.meta a { color: var(--ink-2); text-decoration-color: var(--rule); text-underline-offset: 3px; }
.meta a:hover { color: var(--rubric); }
.meta-k { margin-inline-end: 7px; color: var(--ink-2); font: 500 12px/1 var(--en); }
/* a whole source run on beneath a short one: a short rule between them, and
   each one's edition under its own text */
.has-run .meta-row { position: static; margin-top: 12px; }
.run-on-first { margin-top: 10px; padding-top: 14px; background: linear-gradient(var(--frame), var(--frame)) top center / 36% 1px no-repeat; }
/* a piece that runs on is headed a size down from one that opens a page */
.run-on.title-row { padding-bottom: 6px; margin-bottom: 10px; }
.run-on .era-label { display: none; }
.run-on .work-en { font-size: clamp(20px, calc(4.6 * var(--u)), 28px); }
.run-on .work-he { font-size: clamp(23px, calc(5.4 * var(--u)), 33px); }
.run-on .locus-en, .run-on .locus-he { font-size: 15px; }
.run-on .heading { font-size: 15px; }
.run-meta { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--rule); }
/* its threads are on its own page; here only the edition it is taken from */
.run-meta .meta:has(a[href^="/threads/"]) { display: none; }
/* under a piece that runs on, its edition and threads on one line, the draft mark after them */
.run-meta .meta, .has-run .meta-row .meta { display: inline; margin-inline-end: 14px; }
.run-meta .draft, .has-run .meta-row .draft { display: inline-block; margin-top: 4px; }
@media (max-width: 720px) { html:not([data-mode]) .leaf-r .run-meta { display: none; } }
.leaf-r .meta-k { font: 700 13px/1 var(--he-display); letter-spacing: 0; }
.draft { display: inline-block; margin: 4px 0 0; padding: 2px 7px; border: 1px solid currentColor; color: var(--rubric); font-size: 11px; }

/* set a little tighter when that saves a page with only a few lines on it */
.snug .he-text { line-height: 1.62; margin-bottom: .35em; }
.snug .en-text { line-height: 1.5; margin-bottom: .35em; }
.snug .pb-he { line-height: 1.62; } .snug .pb-en { line-height: 1.5; } .snug .pb-row { padding-bottom: 8px; }
.snug .title-row { padding-bottom: 12px; margin-bottom: 14px; }
.snug2 .he-text { font-size: calc(clamp(17px, calc(3.9 * var(--u)), 23px) * var(--ts)); line-height: 1.6; }
.snug2 .en-text { font-size: calc(clamp(14px, calc(2.92 * var(--u)), 16.8px) * var(--ts)); line-height: 1.5; }
.snug2 .title-row { padding-bottom: 10px; margin-bottom: 10px; }
.snug2 .work-en { font-size: clamp(22px, calc(5.6 * var(--u)), 34px); }
.snug2 .work-he { font-size: clamp(25px, calc(6.5 * var(--u)), 41px); }

/* the page count and the catchword, set at the foot of each leaf */
.foot { position: absolute; bottom: 30px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--ink-3); }
.leaf-r .foot { left: var(--in); right: var(--out); }
.leaf-l .foot { left: var(--out); right: var(--in); }
/* no catchword at the foot: the user, 2026-10-08, did not want the next page's word there */
.catch { display: none; }
.pagecount { font: 400 12.5px/1 var(--en); color: var(--ink-3); }

/* the page arrows, beside the book: onward is to the right, where the hand expects it */
.pager {
  position: absolute; top: 50%; z-index: 20; width: 44px; height: 44px; margin-top: -22px; display: grid; place-items: center;
  border-radius: 4px; border: 0; background: transparent; color: var(--ink-3);
  text-decoration: none; font: 400 30px/1 var(--en); transition: color .2s, background .2s;
}
.pager:hover { color: var(--ink); background: rgba(60, 50, 35, .07); }
.pager-next { right: clamp(6px, 1.2vw, 18px); }
.pager-prev { left: clamp(6px, 1.2vw, 18px); }

/* the page corner: lift it to turn the page */
.corner { position: absolute; bottom: 20px; width: 30px; height: 30px; z-index: 5; transition: width .35s var(--ease-turn), height .35s var(--ease-turn); }
.corner-next { right: clamp(56px, 5vw, 76px); background: linear-gradient(-45deg, var(--desk) 0 49.5%, var(--fold) 50%); box-shadow: -3px -3px 8px -3px rgba(0,0,0,.3); }
.corner-prev { left: clamp(56px, 5vw, 76px); background: linear-gradient(45deg, var(--desk) 0 49.5%, var(--fold) 50%); box-shadow: 3px -3px 8px -3px rgba(0,0,0,.3); }
.corner:hover, .corner:focus-visible { width: 64px; height: 64px; outline: none; }

/* the title page */
.is-shaar .spread { grid-template-rows: 1fr; }
.is-shaar .leaf { align-content: center; }
.shaar-row { text-align: center !important; }
.shaar p { margin: 0; }
.shaar .sh-small { font: 700 20px/1.3 var(--he); letter-spacing: .1em; color: var(--ink-2); }
.leaf-l .shaar .sh-small { font: italic 400 17px/1.3 var(--en); letter-spacing: 0; }
.sh-title { font: 700 clamp(52px, calc(18 * var(--u)), 120px)/1 var(--he-display); margin: 4px 0 !important; }
.sh-title-en { font: 400 clamp(32px, calc(10 * var(--u)), 70px)/1 var(--en); letter-spacing: .02em; margin: 8px 0 !important; }
.sh-orn { position: relative; width: 46%; height: 1px; margin: 2.6vh auto !important; background: var(--ink-3); }
.sh-orn i { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; background: var(--ink-2); transform: translate(-50%, -50%) rotate(45deg); }
.sh-mid { font: 700 clamp(24px, calc(6.4 * var(--u)), 40px)/1.2 var(--he-display); margin-top: 4px !important; }
.sh-mid-en { font: italic 400 clamp(19px, calc(5 * var(--u)), 30px)/1.25 var(--en); }
.sh-line { font: 400 clamp(16px, calc(3.6 * var(--u)), 21px)/1.6 var(--he); margin-top: 12px !important; }
.sh-line-en { font: 400 clamp(14px, calc(3 * var(--u)), 17px)/1.6 var(--en); margin-top: 12px !important; }
.sh-quiet { color: var(--ink-3); font-size: clamp(14px, calc(3 * var(--u)), 17px); }
.leaf-l .sh-quiet { font-style: italic; font-size: 14px; }
.sh-motto { font: 400 clamp(18px, calc(4 * var(--u)), 23px)/1.6 var(--he); }
.sh-motto-en { font: italic 400 clamp(16px, calc(3.4 * var(--u)), 20px)/1.5 var(--en); max-width: 26em; margin-inline: auto !important; }
.sh-ref { color: var(--ink-3); font-size: 13px; margin-top: 4px !important; }
.sh-year { margin-top: 3.4vh !important; color: var(--ink-2); font: 400 16px/1 var(--he); letter-spacing: .06em; }
.leaf-l .sh-year { font: 400 14px/1 var(--en); letter-spacing: .04em; }

/* contents and index */
.display { margin: 0 0 10px; font: 400 clamp(30px, calc(8.5 * var(--u)), 54px)/1.05 var(--en); }
.display-he { margin: 0; font: 700 clamp(34px, calc(10 * var(--u)), 66px)/1.05 var(--he-display); }
.sub { margin: 0; color: var(--ink-2); font-style: italic; font-size: 15px; }
.toc { display: flex; align-items: last baseline; gap: .55em; }
.toc-l { min-width: 0; }
.dots { flex: 1 1 2em; min-width: 1.5em; border-bottom: 1.5px dotted var(--ink-3); opacity: .7; transform: translateY(-.32em); }
.toc-r { flex: none; color: var(--ink-2); font: 400 15px/1 var(--en); font-variant-numeric: oldstyle-nums; }
.leaf-r .toc-r { font: 400 19px/1 var(--he); }
.toc a { text-decoration: none; transition: color .2s; }
.toc a:hover, .toc a:hover .toc-ref { color: var(--rubric); }
.toc-row { padding: 5px 0; }
.leaf-l .toc-row .toc-l > a { font: 400 16.5px/1.3 var(--en); }
.leaf-r .toc-row .toc-l > a { font: 400 19px/1.4 var(--he); }
.toc-ref { display: block; margin-top: 2px; color: var(--ink-3); font: 400 12.5px/1.3 var(--en); }
.leaf-r .toc-ref { display: inline; font: 400 17px/1.3 var(--he); margin: 0; }
/* a source's opening words, under its name, as a Hebrew table of contents gives them */
.toc-open { display: block; margin-top: 2px; color: var(--ink-2); font: 400 17px/1.45 var(--he); }
.era-row { padding-top: 22px; padding-bottom: 4px; }
.leaf-l .toc-era .toc-l > a { font: 500 clamp(20px, calc(4.6 * var(--u)), 27px)/1.15 var(--en); }
.leaf-r .toc-era .toc-l > a { font: 700 clamp(24px, calc(5.4 * var(--u)), 32px)/1.1 var(--he-display); }
.leaf-l .toc-front .toc-l > a { font: italic 400 17px/1.3 var(--en); }
.leaf-r .toc-front .toc-l > a { font: 700 19px/1.3 var(--he-display); }
.ix-row { padding: 10px 0; }
.leaf-l .ix { font: 400 19px/1.3 var(--en) !important; }
.leaf-r .ix { font: 700 24px/1.3 var(--he-display) !important; }
.ix-row .toc-r a { text-decoration: none; }
/* a subject, then its folios running on after it and wrapping, as a printed
   index sets them: however many there are, they stay on the page */
.ix-row .toc { display: block; padding-inline-start: 1.4em; text-indent: -1.4em; }
.ix-row .toc-l { display: inline; margin-inline-end: .7em; }
.ix-row .dots { display: none; }
.leaf-l .ix-row .toc-r, .leaf-r .ix-row .toc-r { display: inline; white-space: normal; line-height: 1.75; }

/* an era's divider page: sized to the page, so it can never reach the spine */
.era-title::after { display: none; }
/* the two titles the same size, and each sits just above its list, so the gap below them matches */
.era-title { align-self: end; }
.era-display { margin: 3vh 0 3vh; font: 400 clamp(34px, calc(11 * var(--u)), 92px)/1 var(--en); letter-spacing: .01em; }
.era-sub { margin: -1.5vh 0 3vh; color: var(--ink-3); font: italic 400 15px/1.4 var(--en); }
.leaf-r .era-sub { font: 400 17px/1.4 var(--he); }
.era-display-he { margin: 3vh 0 3vh; font: 700 clamp(38px, calc(12.5 * var(--u)), 104px)/1 var(--he-display); }
.voice { margin: 0; font: 500 clamp(18px, calc(4.1 * var(--u)), 23px)/1.25 var(--en); }
.leaf-r .voice { font: 700 clamp(20px, calc(4.6 * var(--u)), 26px)/1.3 var(--he-display); }
.about { display: block; margin-top: 3px; color: var(--ink-3); font: italic 400 13px/1.4 var(--en); }
.works { list-style: none; margin: 6px 0 22px; padding: 0; }
.works li { padding: 3px 0; }
.works a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.works a:hover { color: var(--rubric); border-color: currentColor; }
/* two passages from one place: a second line tells them apart */
.en-sub { display: none; }
.works .which { display: block; margin-top: 1px; color: var(--ink-3); font: italic 400 13.5px/1.35 var(--en); }
.leaf-r .works .which { font: 400 16px/1.4 var(--he); font-style: normal; }
.leaf-r .works { font: 400 19px/1.5 var(--he); }

/* introduction */
.motto { margin: 0; font: 400 clamp(18px, calc(4 * var(--u)), 24px)/1.65 var(--he); text-align: center; }
.motto-ref { margin: 2px 0 1.2em; color: var(--ink-3); font-size: 14px; text-align: center; }

/* a thread: one source after another */
.in-thread { margin-top: 6px; }
.goto { margin: 8px 0 0; font: 500 13.5px/1 var(--en); }
.leaf-r .goto { font: 700 15px/1 var(--he-display); letter-spacing: 0; }
.goto a { color: var(--ink-2); text-decoration-color: var(--rule); text-underline-offset: 3px; }
.orn { border: 0; height: 24px; margin: 6px 0 26px; text-align: center; overflow: visible; color: var(--ink-3); }
.orn::after { content: "*   *   *"; white-space: pre; font: 400 15px/1 var(--en); }

/* Pesukei Bitachon */
/* the letter of each group, large in the outer margin beside its first pasuk */
.pb-he, .pb-en { position: relative; }
.pb-mark {
  position: absolute; top: -.05em; inset-inline-start: calc(-1 * var(--out) + 26px); width: calc(var(--out) - 36px);
  text-align: center; color: var(--rubric); font: 700 clamp(26px, calc(6 * var(--u)), 36px)/1 var(--he-display);
}
.pb-first { padding-top: 6px; }
.pb-head .pb-he { text-align: center; font-size: calc(clamp(20px, calc(4.8 * var(--u)), 27px) * var(--ts)); }
.pb-head .pb-en { text-align: center; font-style: italic; }
.pb-head { padding-bottom: 20px; margin-bottom: 8px; border-bottom: 1px solid var(--rule); }
.pb-he { margin: 0; font: 400 calc(clamp(17.5px, calc(4 * var(--u)), 22.5px) * var(--ts))/1.75 var(--he); text-align: justify; }
.pb-en { margin: 0; font: 400 calc(clamp(14px, calc(2.95 * var(--u)), 16.5px) * var(--ts))/1.6 var(--en); }
.pb-ref { display: block; margin-top: 2px; color: var(--ink-3); font: 400 12.5px/1.3 var(--en); }
.leaf-r .pb-ref { font: 400 15px/1.3 var(--he); }
.pb-row { padding-bottom: 14px; }
.pb-intro { font: 400 calc(clamp(15.5px, calc(3.3 * var(--u)), 19px) * var(--ts))/1.75 var(--he); text-align: justify; margin: 0; }
.leaf-l .pb-intro { font: 400 calc(clamp(13.5px, calc(2.7 * var(--u)), 16px) * var(--ts))/1.62 var(--en); text-align: left; }

/* One language only: the book stays open on two pages, and the text runs
   across them as columns do in a printed book, Hebrew from the right page to
   the left, English from the left page to the right. The page script slides
   the columns along a spread at a time. */
html[data-mode="he"] .leaf-l, html[data-mode="en"] .leaf-r { display: none; }
/* The Hebrew alone is a Hebrew sefer: onward is to the left. */
html[data-mode="he"] .pager-next { right: auto; left: clamp(6px, 1.2vw, 18px); }
html[data-mode="he"] .pager-prev { left: auto; right: clamp(6px, 1.2vw, 18px); }
html[data-mode="he"] .pager { transform: scaleX(-1); }
html[data-mode="he"] .pager:hover { transform: scale(-1.06, 1.06); }
html[data-mode="he"] .corner-next { right: auto; left: clamp(56px, 5vw, 76px); background: linear-gradient(45deg, var(--desk) 0 49.5%, var(--fold) 50%); box-shadow: 3px -3px 8px -3px rgba(0,0,0,.3); }
html[data-mode="he"] .corner-prev { left: auto; right: clamp(56px, 5vw, 76px); background: linear-gradient(-45deg, var(--desk) 0 49.5%, var(--fold) 50%); box-shadow: -3px -3px 8px -3px rgba(0,0,0,.3); }
@media (min-width: 721px) {
  html[data-mode] .spread { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); position: relative; }
  html[data-mode="he"] .leaf-r, html[data-mode="en"] .leaf-l {
    grid-column: 1; display: block; columns: 2; column-gap: calc(var(--in) * 2); column-fill: auto;
    padding: clamp(34px, 4.2vw, 56px) var(--out) 68px; transform: none; border-radius: 6px; view-transition-name: mono;
    background-image:
      linear-gradient(90deg, transparent 0 calc(50% - 110px), var(--sheen) calc(50% - 70px), rgba(90, 60, 20, .1) calc(50% - 34px), rgba(40, 25, 5, .42) 50%, rgba(90, 60, 20, .1) calc(50% + 34px), var(--sheen) calc(50% + 70px), transparent calc(50% + 110px)),
      var(--paper-grain);
    box-shadow: -1px 1px 0 var(--paper-edge), -3px 2px 0 var(--paper), -4px 2px 0 var(--paper-edge), -6px 3px 0 var(--paper), -7px 4px 0 var(--paper-edge),
      1px 1px 0 var(--paper-edge), 3px 2px 0 var(--paper), 4px 2px 0 var(--paper-edge), 6px 3px 0 var(--paper), 7px 4px 0 var(--paper-edge), 0 26px 44px -18px var(--shadow);
  }
  html[data-mode] .leaf::before, html[data-mode] .leaf::after { display: none; }
  html[data-mode] .spread::before, html[data-mode] .spread::after { content: ""; position: absolute; z-index: 2; pointer-events: none; top: 20px; bottom: 20px;
    border: 2.2px solid color-mix(in srgb, var(--ink) 58%, transparent);
    box-shadow: inset 0 0 0 3.3px var(--paper), inset 0 0 0 4px color-mix(in srgb, var(--ink) 45%, transparent); }
  html[data-mode] .spread::before { left: 20px; right: calc(50% + 26px); }
  html[data-mode] .spread::after { right: 20px; left: calc(50% + 26px); }
  html[data-mode] .spread::before { left: 16px; right: calc(50% + 26px); }
  html[data-mode] .spread::after { right: 16px; left: calc(50% + 26px); }
  html[data-mode="he"] .leaf-r { direction: rtl; }
  html[data-mode] .rh-row { display: none; }
  html[data-mode] .row { break-inside: auto; }
  html[data-mode] .keep { break-inside: avoid; break-after: avoid; }
  html[data-mode="he"] .leaf-r .foot, html[data-mode="en"] .leaf-l .foot { left: var(--out); right: var(--out); }
  /* the footnote follows the text, so the pages fill to the foot */
  html[data-mode] .meta-row { position: static; margin-top: 1.6em; }
  /* the next source, begun on the facing page */
  html[data-mode] .run-on-first { break-before: column; }
}

/* ------------------------------------------------------------ the sefer falls open */

.unfold .cover { animation: settle 1.1s cubic-bezier(.2, .7, .2, 1) backwards; }
.unfold .cover-open, .unfold .home-panel { animation: fade-up 1s ease .5s backwards; }
@keyframes settle { from { transform: translateY(-26px) scale(1.035); opacity: 0; } 40% { opacity: 1; } }
@keyframes fade-up { from { transform: translateY(10px); opacity: 0; } }

/* ------------------------------------------------------------ narrower screens */

@media (max-width: 1100px) {
  :root { --tilt: 1.6deg; }
  .brand-en { display: none; }
  .nav > a.about-link { display: none; }
  .search { flex-basis: 220px; }
}

@media (max-width: 720px) {
  :root { --bar: 56px; }
  .has-v { --vg: 1.7em; }
  /* no blur here: it would hold the floating language switch inside the bar */
  .topbar { gap: 8px; padding: 0 10px; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .brand-he { font-size: 21px; }
  .search { flex: 1 1 auto; }
  /* 16px: a phone zooms in on a text box set any smaller */
  .search input { height: 34px; font-size: 16px; padding-left: 32px; }
  .menu > summary { padding: 0 8px; font-size: 13px; }
  .panel { position: fixed; left: 8px; right: 8px; top: calc(var(--bar) + 6px); width: auto; }
  /* the search results span the screen, as the menus do, not the narrow box */
  .results { position: fixed; left: 8px; right: 8px; top: calc(var(--bar) + 6px); max-height: calc(100dvh - var(--bar) - 90px); }
  .modes {
    position: fixed; z-index: 40; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); margin: 0;
    background: var(--menu); box-shadow: 0 8px 24px var(--shadow); padding: 3px;
  }
  /* thumb-sized: the language and the text size are changed with a thumb here */
  .modes button { min-height: 42px; padding: 0 11px; }
  .modes .ts { min-width: 42px; padding: 0 10px; font-size: 15px; }
  .resume { bottom: auto; top: calc(var(--bar) + 8px); font-size: 12.5px; }
  .theme { display: none; }

  /* One page, the right-hand page of the sefer: its spine shades the left
     edge, the page block shows at the right, and both languages alternate. */
  .book { height: calc(100dvh - var(--bar) - 62px); padding: 10px 14px 8px; }
  .spread, html[data-mode] .spread {
    --u: 1cqw; position: relative; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: auto; perspective: none; overflow: hidden; align-content: start;
    background-color: var(--paper); padding: 34px 26px 50px 30px; border-radius: 1px 5px 5px 1px;
    background-image: linear-gradient(90deg, rgba(40, 25, 5, .38), rgba(80, 55, 15, .14) 12px, var(--sheen) 26px, transparent 46px), var(--paper-grain);
    box-shadow: 1px 1px 0 var(--paper-edge), 3px 2px 0 var(--paper), 4px 2px 0 var(--paper-edge), 6px 3px 0 var(--paper), 7px 4px 0 var(--paper-edge), 0 18px 36px -14px var(--shadow);
    view-transition-name: book;
  }
  .spread::before, .spread::after { content: ""; position: absolute; pointer-events: none; border: 0 solid var(--frame); }
  .spread::before { inset: 11px 11px 11px 17px; border-width: 1.4px; }
  .spread::after { inset: 15px 15px 15px 21px; border-width: .6px; }
  .leaf, html[data-mode] .leaf { display: contents; view-transition-name: none; }
  .spread { will-change: transform; transform-origin: 50% 120%; }
  .book { overflow: hidden; }
  /* the leaves are not boxes here, so their frames would draw over the page's own */
  .leaf::before, .leaf::after { display: none; }
  html[data-mode="he"] .leaf-l, html[data-mode="en"] .leaf-r { display: none; }
  .leaf-r .row { grid-column: 1; grid-row: calc(var(--i) * 2 - 1); }
  .leaf-l .row { grid-column: 1; grid-row: calc(var(--i) * 2); }
  .leaf-l .rh-row, .leaf-l .foot { display: none; }
  .leaf-r .foot { left: 30px; right: 26px; bottom: 18px; }
  .leaf-r .meta-row { display: none !important; }
  .leaf-l .meta-row { left: 30px; right: 26px; bottom: 42px; }
  html[data-mode="he"] .leaf-r .meta-row { display: block !important; left: 26px; right: 30px; bottom: 42px; }
  .meta { font-size: 11px; margin-bottom: 2px; } .meta-k { font-size: 11px; } .draft { font-size: 10px; margin-top: 2px; }
  .title-row { margin-bottom: 0; padding-bottom: 12px; }
  .title-row::after { display: none; }
  .leaf-l .title-row { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
  /* with both languages, the two titles read as one: the English follows the
     Hebrew closely, and the era and author, said in the Hebrew, are not said again */
  html:not([data-mode]) .leaf-r .title-row { padding-bottom: 2px; }
  html[data-mode="he"] .leaf-r .title-row { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
  html:not([data-mode]) .leaf-l .era-label { display: none; }
  /* the counts stand once, after the Hebrew, not again after its English just below */
  html:not([data-mode]) .leaf-l .cms { display: none; }
  /* a list (an era's sources, the contents): the Hebrew and the English side by
     side on one line, read as one list, not the one list and then the other */
  /* the Contents on a phone: each entry one line, the Hebrew place on the right
     and the English place on the left; the opening words and the summaries are
     for a wide screen (the capsule's list gives the summaries here) */
  html:not([data-mode]) .leaf-l .toc-row { grid-row: calc(var(--i) * 2 - 1); justify-self: start; width: 44%; }
  html:not([data-mode]) .leaf-r .toc-row { justify-self: end; width: 54%; }
  html:not([data-mode]) .toc-row { padding: 4px 0; }
  html:not([data-mode]) .toc-row .toc-open, html:not([data-mode]) .leaf-l .toc-row .toc-head { display: none; }
  html:not([data-mode]) .leaf-r .toc-row .toc-l > a { font-size: 17px; }
  html:not([data-mode]) .leaf-r .toc-ref { font-size: 15.5px; }
  html:not([data-mode]) .leaf-l .toc-row .toc-ref { margin-top: 0; padding-top: 2px; color: var(--ink-2); font-size: 13.5px; }
  html:not([data-mode]) .leaf-l .toc-row.era-row .toc-l > a, html:not([data-mode]) .leaf-l .toc-front .toc-l > a { color: var(--ink-3); font-size: 15px; font-style: italic; }
  html:not([data-mode]) .leaf-l .toc-row.era-row { align-self: center; }
  html:not([data-mode]) .toc-row.era-row { padding-top: 14px; }
  html:not([data-mode]) .leaf-l .toc-row .toc-r { display: none; }
  html:not([data-mode]) .leaf-l .voice-row, html:not([data-mode]) .leaf-l .orn-row { display: none !important; }
  html:not([data-mode]) .en-sub { display: block; margin-top: 1px; color: var(--ink-3); font: italic 400 14px/1.35 var(--en); text-align: right; }
  html:not([data-mode]) .voice .en-sub { margin-top: 2px; font: 400 15px/1.3 var(--en); color: var(--ink-2); }
  html:not([data-mode]) :is(.voice-row, .toc-row) .voice { font-size: 18px; }
  html:not([data-mode]) .leaf-l .voice .about { display: none; }
  html:not([data-mode]) .leaf-l .works .which { display: none; } /* the Hebrew opening words beside it tell the two apart */
  .leaf-r .seg, .leaf-r .pb-row { padding-top: 2px; padding-bottom: 0; }
  /* space, not a rule, after each paragraph's English: a rule was drawn at the
     cut where a paragraph went on to the next page, mid-paragraph */
  .leaf-l .seg { padding-bottom: 6px; margin-bottom: 16px; }
  .leaf-l .pb-row { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--rule); }
  .pb-mark { position: static; float: inline-start; width: auto; margin-inline-end: 8px; font-size: 24px; line-height: 1.2; }
  .leaf-l .pb-mark { display: none; }
  .he-text { font-size: calc(20px * var(--ts)); margin-bottom: .35em; }
  .en-text { font-size: calc(17px * var(--ts)); text-align: left; margin-bottom: 0; }
  .open { font-size: 1.32em; }
  /* the title page on a phone: no empty first row from the spread's own layout,
     so each half stands centered on its page; the shaar's own rules divide them */
  .is-shaar .spread, html[data-mode] .is-shaar .spread { grid-template-rows: none; align-content: center; }
  .is-shaar .leaf-l .shaar-row { margin-top: 24px; }
  .pager { top: auto; bottom: max(12px, env(safe-area-inset-bottom)); margin-top: 0; width: 40px; height: 40px; position: fixed; }
  .pager-next { right: 12px; } .pager-prev { left: 12px; }
  html[data-mode="he"] .pager-next { right: auto; left: 12px; } html[data-mode="he"] .pager-prev { left: auto; right: 12px; }
  .corner { display: none; }

  .cover { height: auto; width: min(80vw, 380px); aspect-ratio: .66; }
  body.kind-cover { overflow: auto; }
  .desk-cover { height: auto; min-height: calc(100dvh - var(--bar)); grid-template-columns: minmax(0, 1fr); grid-template-areas: "cover" "open" "panel"; padding: 22px 18px 40px; }
  /* the panel fills the column; centered at its own width it ran past the screen */
  .home-panel { margin-top: 18px; justify-self: stretch; width: 100%; min-width: 0; }
  .hp-eras { grid-template-columns: minmax(0, 1fr); }
  .tooling, .cover-face { inset: 13px 34px 13px 13px; }
  .tooling::before { inset: 4px; }
  .orn-corner { width: 30px; height: 30px; }
  .orn-corner.tl, .orn-corner.tr { top: 4px; } .orn-corner.bl, .orn-corner.br { bottom: 4px; }
  .orn-corner.tl, .orn-corner.bl { left: 4px; } .orn-corner.tr, .orn-corner.br { right: 4px; }
  .cover-panel { width: 80%; outline-offset: 3px; }
  .cover-title { font-size: 21cqw; }
  .cover-pasuk-en { display: none; }
}
}

/* ------------------------------------------------------------ turning the page */

/* on a phone the page itself slides under the finger (site.js), so the browser's
   own turn between pages would only cross it */
@media (min-width: 721px) { @view-transition { navigation: auto; } }

::view-transition-old(root), ::view-transition-new(root) { animation-duration: 250ms; }
::view-transition-group(leaf-l), ::view-transition-group(leaf-r), ::view-transition-group(book), ::view-transition-group(mono), ::view-transition-group(cover) { animation: none; }
::view-transition-old(leaf-l), ::view-transition-new(leaf-l),
::view-transition-old(leaf-r), ::view-transition-new(leaf-r),
::view-transition-old(book), ::view-transition-new(book),
::view-transition-old(mono), ::view-transition-new(mono),
::view-transition-old(cover) {
  animation: none; mix-blend-mode: normal; backface-visibility: hidden;
}

/* Forward is the default, so a turn still plays if the page could not be told
   which way it was going. Onward, the right leaf lifts over the spine to the
   left, and the back of that same leaf comes down as the new left page. */
::view-transition-old(leaf-r),
::view-transition-old(book) {
  transform-origin: left center; z-index: 3; animation: lift-over-left var(--turn) var(--ease-turn) both;
}
::view-transition-new(leaf-r),
::view-transition-new(book) { z-index: 1; }
::view-transition-new(leaf-l) {
  transform-origin: right center; z-index: 3; animation: land-from-right var(--turn) var(--ease-turn) both;
}

/* Back: the left leaf lifts over the spine to the right, and the earlier
   right page comes down. The type selector outranks the defaults, so each is
   reset. */
html:active-view-transition-type(back)::view-transition-old(leaf-r),
html:active-view-transition-type(back)::view-transition-old(book),
html:active-view-transition-type(back)::view-transition-new(leaf-l) { animation: none; z-index: 1; }
html:active-view-transition-type(back)::view-transition-old(leaf-l) {
  transform-origin: right center; z-index: 3; animation: lift-over-right var(--turn) var(--ease-turn) both;
}
html:active-view-transition-type(back)::view-transition-new(leaf-r),
html:active-view-transition-type(back)::view-transition-new(book) {
  transform-origin: left center; z-index: 3; animation: land-from-left var(--turn) var(--ease-turn) both;
}

/* The closed sefer opens over its spine. */
::view-transition-old(cover) { transform-origin: right center; z-index: 3; animation: lift-over-right var(--turn) var(--ease-turn) both; }

/* One language: the spread slides a page's width, the way it was read. */
::view-transition-old(mono) { animation: slide-out var(--turn) var(--ease-turn) both; }
::view-transition-new(mono) { animation: slide-in var(--turn) var(--ease-turn) both; }
html:active-view-transition-type(back)::view-transition-old(mono) { animation-name: slide-out-back; }
html:active-view-transition-type(back)::view-transition-new(mono) { animation-name: slide-in-back; }
@keyframes slide-out { to { transform: translateX(-6%); opacity: 0; } }
@keyframes slide-in { from { transform: translateX(6%); opacity: 0; } }
@keyframes slide-out-back { to { transform: translateX(6%); opacity: 0; } }
@keyframes slide-in-back { from { transform: translateX(-6%); opacity: 0; } }

@keyframes lift-over-right {
  from { transform: perspective(2400px) rotateY(0); filter: brightness(1); }
  50%  { filter: brightness(.85); }
  to   { transform: perspective(2400px) rotateY(180deg); filter: brightness(.75); }
}
@keyframes land-from-left {
  from { transform: perspective(2400px) rotateY(-180deg); filter: brightness(.75); }
  50%  { filter: brightness(.88); }
  to   { transform: perspective(2400px) rotateY(0); filter: brightness(1); }
}
@keyframes lift-over-left {
  from { transform: perspective(2400px) rotateY(0); filter: brightness(1); }
  50%  { filter: brightness(.85); }
  to   { transform: perspective(2400px) rotateY(-180deg); filter: brightness(.75); }
}
@keyframes land-from-right {
  from { transform: perspective(2400px) rotateY(180deg); filter: brightness(.75); }
  50%  { filter: brightness(.88); }
  to   { transform: perspective(2400px) rotateY(0); filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .unfold .leaf-l, .unfold .leaf-r, .unfold .cover, .unfold .cover-open, .unfold .home-panel, .unfold .spread { animation: none; }
  .corner, .pager { transition: none; }
}

/* ------------------------------------------------------------ print: every page, one after another */

@media print {
  body, body.paged { background: #fff; color: #000; overflow: visible; }
  .topbar, .pager, .corner, .meta-row .draft, .leaf::before, .leaf::after { display: none !important; }
  .book { max-width: none; height: auto; padding: 0; }
  .spread { height: auto; grid-template-columns: 1fr; grid-template-rows: none; perspective: none; }
  .leaf { display: contents; }
  .row.off { display: block; }
  .leaf-r .row { grid-row: calc(var(--i) * 2 - 1); }
  .leaf-l .row { grid-row: calc(var(--i) * 2); }
  .leaf-l .rh-row, .foot { display: none; }
}

.nav > a.tab-pb { font-weight: 500; }
@media (max-width: 1100px) { .nav > a.tab-pb { font-size: 13px; padding: 0 9px; } }
@media (max-width: 720px) { .nav > a.tab-pb { display: none; } }

/* ------------------------------------------------------------ commentary on a pasuk */

/* the opening words of a commentary, bold as a sefer prints them */
.dh { font-weight: 700; }

/* small counts on a pasuk: blue for its commentaries, red for the sources that quote it */
.cm {
  display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 .35em; margin-inline-start: .4em;
  border: 0; border-radius: 999px; background: transparent; color: var(--rubric); cursor: pointer; vertical-align: .35em;
  font: 700 10.5px/1 var(--en); letter-spacing: 0; box-shadow: inset 0 0 0 1.3px currentColor; transition: transform .15s, background .15s;
}
.cm:hover, .cm:focus-visible { transform: scale(1.12); outline: none; }
.cm-c { color: var(--blue); }
.cm:hover, .cm:focus-visible { background: color-mix(in srgb, currentColor 13%, transparent); }
.cms { white-space: nowrap; }
.cm-c + .cm-q { margin-inline-start: .25em; }
.pb-ref .cm { vertical-align: 0; margin-inline-start: .6em; }
.pb-ref .cm-c + .cm-q { margin-inline-start: .25em; }

/* the slip: what stands on this pasuk, opened beside the book */
.slip {
  position: fixed; z-index: 70; top: calc(var(--bar) + 14px); bottom: 14px; right: clamp(10px, 2vw, 26px); width: min(470px, 92vw);
  display: flex; flex-direction: column; background-color: var(--paper); background-image: var(--paper-grain);
  border-radius: 3px; box-shadow: 0 0 0 1px var(--paper-edge), 0 18px 40px -20px var(--shadow);
  animation: slip-in .3s cubic-bezier(.2, .7, .2, 1);
}
.slip[hidden] { display: none; }
.slip::before { content: ""; position: absolute; inset: 16px; border: 1.6px solid var(--frame); pointer-events: none; }
.slip::after { content: ""; position: absolute; inset: 21px; border: .7px solid var(--frame); pointer-events: none; }
@keyframes slip-in { from { opacity: 0; } }
/* the page scrolls inside the inner rule: the text never runs over the frame */
.slip-in { position: absolute; inset: 25px 24px; overflow: auto; overscroll-behavior: contain; padding: 14px clamp(12px, 2.6vw, 34px) 20px; scrollbar-width: thin; }
.slip-more { padding: 12px 0 4px; color: var(--ink-3); font: italic 400 13px/1.4 var(--en); cursor: pointer; }
.slip-more:hover { color: var(--rubric); }
/* the slip reads in the language the reader chose: Hebrew alone, English alone, or both */
.slip .he-only { display: none; }
html[data-mode="he"] .slip .he-only { display: revert; }
html[data-mode="he"] .slip :is(.en-only, .slip-en, .slip-name, .slip-about) { display: none !important; }
html[data-mode="en"] .slip :is(.slip-he, .slip-name-he, .slip-ref-he, .slip-sec-h [lang="he"]) { display: none !important; }
html[data-mode="he"] .slip .slip-who { justify-content: flex-start; }
html[data-mode="he"] .slip-in { direction: rtl; }
html[data-mode="he"] .slip .slip-ref-he .slip-k { display: block; margin-bottom: 6px; color: var(--ink-3); font: 400 15px/1 var(--he); }
.slip-quotes .he-only[lang="he"] { font-family: var(--he); }
/* the slip's heading stays at its head while the text scrolls under it */
.slip-head { position: sticky; top: -14px; z-index: 2; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: -14px 0 14px; padding: 14px 36px 12px 0; border-bottom: 1px solid var(--rule); background-color: var(--paper); background-image: var(--paper-grain); }
.slip-k { display: block; color: var(--ink-3); font: italic 400 13.5px/1 var(--en); margin-bottom: 6px; }
.slip-ref { font: 500 19px/1.25 var(--en); }
.slip-ref-he { font: 700 21px/1.2 var(--he-display); }
.slip-x { position: absolute; z-index: 3; top: 30px; right: 30px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: var(--ink-3); font-size: 18px; cursor: pointer; }
.slip-x:hover { background: rgba(60, 50, 35, .08); color: var(--ink); }
.slip-era { margin: 18px 0 8px; color: var(--ink-3); font: italic 400 13.5px/1 var(--en); }
.slip-era [lang="he"] { font: 700 14px/1 var(--he-display); letter-spacing: 0; margin-inline-start: 8px; }
/* two sections: the commentaries, under a blue rule, then the sources that quote it */
.slip-sec { margin-top: 6px; }
.slip-sec + .slip-sec { margin-top: 26px; }
.slip-sec-h { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 4px; padding-bottom: 7px; border-bottom: 2px solid currentColor; font: 500 14.5px/1 var(--en); }
.slip-sec-h [lang="he"] { font: 700 16px/1 var(--he-display); letter-spacing: 0; text-transform: none; }
.slip-com .slip-sec-h { color: var(--blue); }
.slip-quo .slip-sec-h { color: var(--rubric); }
.slip-item { padding: 14px 0 18px; border-bottom: 1px solid var(--rule); }
.slip-item:last-child { border-bottom: 0; }
.slip-who { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; margin-bottom: 10px; }
.slip-name, .slip-name-he { display: grid; gap: 3px; }
.slip-name b { font: 500 17px/1.25 var(--en); }
.slip-about { color: var(--ink-3); font: italic 400 12.5px/1.3 var(--en); }
.slip-name-he { text-align: right; }
.slip-name-he b { font: 700 18px/1.2 var(--he-display); }
.slip-name-he span { color: var(--ink-3); font: 400 13.5px/1.2 var(--he); }
/* the sefer leads; its place follows in a lighter hand */
.slip-name .slip-at { font-weight: 400; color: var(--ink-2); }
.slip-name-he .slip-at { color: var(--ink-2); font: 400 16px/1.2 var(--he); }
.slip-at.own { display: block; margin-top: 2px; font-size: 15px; }
.slip-name-he .slip-at.own { font-size: 15.5px; }
.slip-heading { margin: 0 0 10px; font: italic 400 15px/1.4 var(--en); color: var(--ink-2); }
.slip-he { margin: 0 0 4px; font: 400 calc(18px * var(--ts))/1.7 var(--he); text-align: justify; direction: rtl; }
.slip-en { margin: 0 0 12px; font: 400 calc(15px * var(--ts))/1.55 var(--en); }
.slip-go { display: inline-block; margin-top: 2px; color: var(--ink-2); font: 500 13.5px/1 var(--en); text-decoration-color: var(--rule); text-underline-offset: 3px; }
.slip-go:hover { text-decoration: underline; text-underline-offset: 4px; }
.slip-quotes a { display: grid; gap: 2px; padding: 9px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.slip-quotes a:hover b { color: var(--rubric); }
.slip-quotes b { font: 500 15px/1.3 var(--en); }
.slip-quotes span { color: var(--ink-3); font-size: 12.5px; }
@media (max-width: 720px) {
  .slip-in { inset: 25px 22px; padding: 12px 6px 18px 8px; }
}
@media print { .cm, .slip { display: none !important; } }

/* a short screen: the home panel draws in so the whole page still fits */
@media (min-width: 721px) and (max-height: 800px) {
  .hp-kicker { margin-bottom: 8px; }
  .hp-title { font-size: clamp(21px, 1.85vw, 26px); margin-bottom: 12px; }
  .hp-actions { margin-bottom: 14px; }
  .hp-btn { padding: 9px 16px; }
  .mini { height: 290px; }
  .hp-today .mini { height: 230px; }
  .mini-leaf { padding: 18px 15px 12px; }
  .hp-today { margin-bottom: 12px; }
  .hp-today-t { margin-top: 8px; font-size: 18px; }
  .hp-era { padding: 6px 2px; }
  .hp-eras { margin-bottom: 12px; }
  .chip { padding: 6px 10px; }
}

/* About: outside the sefer, a plain page that scrolls */
.about-page { padding: clamp(24px, 6vh, 60px) 16px 80px; }
.ab { max-width: 760px; margin: 0 auto; padding: clamp(26px, 5vw, 56px); background: var(--menu); border: 1px solid var(--chrome-line); border-radius: 3px; }
.ab-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 0 0 12px; font: 400 clamp(28px, 3.6vw, 38px)/1.1 var(--en); color: var(--ink-2); }
.ab-title [lang="he"] { font: 700 1.5em/1 var(--he-display); color: var(--ink); }
.ab-lede { margin: 0; color: var(--ink-2); font: italic 400 18px/1.5 var(--en); }
.ab h2 { margin: 38px 0 12px; font: 500 22px/1.25 var(--en); }
.ab p { margin: 0 0 14px; font: 400 17px/1.65 var(--en); }
.ab .ab-mottos { margin: 30px 0 0; padding: 20px 0 8px; border-block: 1px solid var(--rule); text-align: center; }
.ab .ab-mottos p { margin: 0 0 14px; font: 400 21px/1.55 var(--he); }
.ab-mottos cite { display: block; color: var(--ink-3); font: 400 15px/1.3 var(--he); font-style: normal; }
.credits, .consulted { list-style: none; margin: 18px 0 0; padding: 0; }
.credits li { display: grid; grid-template-columns: 1fr auto; gap: 3px 16px; padding: 16px 0; border-top: 1px solid var(--rule); }
.cr-name { font: 500 18px/1.3 var(--en); }
.cr-he { font: 400 20px/1.25 var(--he); direction: rtl; }
.cr-by, .cr-ed, .cr-items { grid-column: 1 / -1; }
.cr-by { color: var(--ink-2); font: italic 400 15px/1.4 var(--en); }
.cr-ed { color: var(--ink-2); font: 400 15px/1.5 var(--en); }
.cr-k { margin-inline-end: 6px; color: var(--ink-2); font: 500 12.5px/1 var(--en); }
.cr-items { margin-top: 4px; color: var(--ink-3); font: 400 14px/1.6 var(--en); }
.cr-items a { color: var(--ink-2); text-decoration-color: var(--rule); text-underline-offset: 3px; }
.cr-items a:hover { color: var(--rubric); }
.consulted li { padding: 9px 0; border-top: 1px solid var(--rule); font: 400 15.5px/1.5 var(--en); color: var(--ink-2); }
.consulted i { color: var(--ink); }
.ab .ab-open { margin: 40px 0 0; text-align: center; }

/* ------------------------------------------------------------ reading on a phone */

/* The open sefer in the hand: the page lies on the leather of its binding, its
   leaves showing at the edge. The capsule under it turns the pages and says
   where the reader is; a tap on its middle brings the top bar and the language
   and size buttons. A tap on an edge of the page, or a drag, turns it. */
.capsule { display: none; }
@media (max-width: 720px) {
  body.paged {
    background: radial-gradient(120% 80% at 50% 38%, transparent 45%, rgba(0, 0, 0, .5)), var(--pores),
      linear-gradient(158deg, #4a3829, var(--leather) 46%, #1d1510);
    background-color: #2a2018;
  }
  body.paged .topbar { position: fixed; left: 0; right: 0; top: 0; z-index: 45; transform: translateY(-100%); transition: transform .25s ease; box-shadow: 0 8px 22px -12px var(--shadow); }
  html.controls body.paged .topbar { transform: none; }
  .js body.paged .pager { display: none; }
  body.paged .modes { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 58px); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; transform: translate(-50%, 6px); }
  html.controls body.paged .modes { opacity: 1; pointer-events: auto; transform: translateX(-50%); }
  body.paged .book {
    height: 100dvh; touch-action: pinch-zoom;
    padding: max(12px, env(safe-area-inset-top)) 16px calc(max(10px, env(safe-area-inset-bottom)) + 58px) 10px;
  }
  body.paged .spread, html[data-mode] body.paged .spread {
    padding: 22px 16px 32px 21px;
    box-shadow: 1px 1px 0 var(--paper-edge), 3px 2px 0 var(--paper), 4px 2px 0 var(--paper-edge), 6px 3px 0 var(--paper), 7px 4px 0 var(--paper-edge),
      0 22px 40px -12px rgba(0, 0, 0, .65);
  }
  /* the Hebrew alone is bound at the right, as a Hebrew sefer is */
  html[data-mode="he"] body.paged .spread {
    padding: 22px 21px 32px 16px; border-radius: 5px 1px 1px 5px;
    background-image: linear-gradient(270deg, rgba(40, 25, 5, .38), rgba(80, 55, 15, .14) 12px, var(--sheen) 26px, transparent 46px), var(--paper-grain);
    box-shadow: -1px 1px 0 var(--paper-edge), -3px 2px 0 var(--paper), -4px 2px 0 var(--paper-edge), -6px 3px 0 var(--paper), -7px 4px 0 var(--paper-edge),
      0 22px 40px -12px rgba(0, 0, 0, .65);
  }
  html[data-mode="he"] body.paged .book { padding-left: 16px; padding-right: 10px; }
  body.paged .spread::before { content: none; }
  /* a leaf lifting from the page darkens toward its free edge */
  body.paged .spread::after { display: block; inset: 0; border: 0; z-index: 4; border-radius: inherit;
    background: linear-gradient(to left, rgba(25, 14, 2, var(--shade, 0)), rgba(25, 14, 2, calc(var(--shade, 0) * .2)) 75%); }
  html[data-mode="he"] body.paged .spread::after { background: linear-gradient(to right, rgba(25, 14, 2, var(--shade, 0)), rgba(25, 14, 2, calc(var(--shade, 0) * .2)) 75%); }
  /* the leaf that turns, laid over (or under) the page: out of the flow in every
     language mode (one language's own .spread rule would otherwise put it back in,
     and the page under it would drop below the screen) */
  .sheet, html[data-mode] .sheet { position: absolute !important; margin: 0; pointer-events: none; view-transition-name: none !important; }
  /* the capsule names the source, so no running head over the page as well */
  body.paged .rh-row { display: none !important; }
  body.paged .leaf-r .rh { font-size: 13.5px; }
  body.paged .leaf-r .foot { left: 21px; right: 16px; bottom: 11px; }
  body.paged .leaf-l .meta-row { left: 21px; right: 16px; bottom: 30px; }
  html[data-mode="he"] body.paged .leaf-r .meta-row { left: 16px; right: 21px; bottom: 30px; }
  body.paged .resume { top: max(10px, env(safe-area-inset-top)); }

  /* the capsule: dark leather and gold, as the binding is */
  body.paged .capsule {
    position: fixed; z-index: 41; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%);
    display: flex; align-items: center; gap: 7px; max-width: calc(100vw - 20px);
  }
  body.paged .cap-pill, body.paged .cap-gear {
    height: 46px; border: 1px solid rgba(214, 176, 90, .42); color: #f3e8d2;
    background: rgba(24, 17, 11, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 230, 180, .08);
  }
  body.paged .cap-pill { display: flex; align-items: stretch; min-width: 0; border-radius: 999px; }
  /* the settings, a round button of the same leather beside the capsule */
  /* smaller and quieter than the capsule it stands beside */
  body.paged .capsule .cap-gear { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: rgba(214, 176, 90, .85); border-color: rgba(214, 176, 90, .25); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .6); }
  body.paged .capsule .cap-gear svg { width: 17px; height: 17px; }
  body.paged .capsule .cap-back { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: rgba(214, 176, 90, .85);
    border: 1px solid rgba(214, 176, 90, .25); background: rgba(24, 17, 11, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .6); }
  body.paged .capsule .cap-back[hidden] { display: none; }
  body.paged .modes { display: none; }
  .capsule button { -webkit-appearance: none; appearance: none; border: 0; background: none; color: inherit; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; }
  .capsule button:active { background: rgba(255, 235, 200, .08); }
  .capsule button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(214, 176, 90, .65); }
  .cap-l, .cap-r { width: 50px; display: grid; place-items: center; padding-bottom: 3px; color: #d6b05a; font: 400 30px/1 var(--en); }
  .cap-l { border-radius: 999px 0 0 999px; }
  .cap-r { border-radius: 0 999px 999px 0; }
  .capsule .cap-mid {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-width: 140px; max-width: 190px; padding: 0 10px; border-inline: 1px solid rgba(214, 176, 90, .2);
  }
  .cap-name { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 16px/1.15 var(--he); }
  .cap-name[lang="en"] { font: 500 13.5px/1.15 var(--en); }
  .cap-pages { display: flex; gap: 4px; max-width: 100%; }
  .cap-pages i { flex: 0 1 18px; min-width: 6px; height: 3px; border-radius: 2px; background: rgba(214, 176, 90, .3); }
  .cap-pages i.on { background: #d6b05a; }
  .cap-pages.cap-next { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #d6b05a; font: 400 12.5px/1.1 var(--he); }
  .cap-pages.cap-next[lang="en"] { font: italic 400 12px/1.1 var(--en); }

  /* the opening of a source, set as a sefer sets one: centered, closed by a gold rule */
  body.paged .is-source :is(.title-row, .heading-row) { text-align: center; }
  html:not([data-mode]) body.paged .is-source .leaf-r .title-row { padding-bottom: 12px; }
  body.paged .is-source .leaf-r .era-label { margin-bottom: 8px; font-size: 14px; color: var(--ink-3); }
  body.paged .is-source .work-he { font-size: 34px; margin-bottom: 2px; }
  body.paged .is-source .work-en { font-size: 25px; }
  body.paged .is-source .heading { max-width: 30em; margin-inline: auto; }
  body.paged .is-source .run-on .work-he { font-size: 26px; }
  body.paged .is-source .run-on .work-en { font-size: 21px; }
  /* the summary under the title has a row of its own; its Hebrew side is empty */
  body.paged .leaf-r .heading-row { display: none !important; }
  html:not([data-mode]) body.paged .is-source .leaf-l .title-row.has-heading,
  html[data-mode="en"] body.paged .is-source .leaf-l .title-row.has-heading { border-bottom: 0; padding-bottom: 8px; margin-bottom: 0; }
  body.paged .is-source .heading-row { position: relative; }
  /* the gold rule closes the opening: under the summary where there is one, else under the title */
  html:not([data-mode]) body.paged .is-source .leaf-l .heading-row,
  html:not([data-mode]) body.paged .is-source .leaf-l .title-row:not(.has-heading):not(.side),
  html:not([data-mode]) body.paged .is-source .leaf-r .title-row.side:not(.has-heading),
  html[data-mode="he"] body.paged .is-source .leaf-r .title-row,
  html[data-mode="en"] body.paged .is-source .leaf-l .heading-row,
  html[data-mode="en"] body.paged .is-source .leaf-l .title-row:not(.has-heading) { border-bottom: 0; padding-bottom: 26px; margin-bottom: 16px; }
  html:not([data-mode]) body.paged .is-source .leaf-l .heading-row::before,
  html:not([data-mode]) body.paged .is-source .leaf-l .title-row:not(.has-heading):not(.side)::before,
  html:not([data-mode]) body.paged .is-source .leaf-r .title-row.side:not(.has-heading)::before,
  html[data-mode="he"] body.paged .is-source .leaf-r .title-row::before,
  html[data-mode="en"] body.paged .is-source .leaf-l .heading-row::before,
  html[data-mode="en"] body.paged .is-source .leaf-l .title-row:not(.has-heading)::before {
    content: ""; position: absolute; bottom: 6px; left: 20%; right: 20%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold) 22%, var(--gold) 78%, transparent);
  }
  html:not([data-mode]) body.paged .is-source .leaf-l .heading-row::after,
  html:not([data-mode]) body.paged .is-source .leaf-l .title-row:not(.has-heading):not(.side)::after,
  html:not([data-mode]) body.paged .is-source .leaf-r .title-row.side:not(.has-heading)::after,
  html[data-mode="he"] body.paged .is-source .leaf-r .title-row::after,
  html[data-mode="en"] body.paged .is-source .leaf-l .heading-row::after,
  html[data-mode="en"] body.paged .is-source .leaf-l .title-row:not(.has-heading)::after {
    content: ""; position: absolute; display: block; bottom: 2.5px; inset-inline-start: 50%; inset-inline-end: auto; width: 8px; height: 8px; margin-inline-start: -4px;
    background: var(--gold); opacity: 1; transform: rotate(45deg);
  }
  /* the two titles side by side, where each name fits its half on one line:
     the Hebrew spans the line from the right, the English stands in its left half */
  html:not([data-mode]) body.paged .leaf-r .title-row.side { text-align: right; align-self: stretch; }
  html:not([data-mode]) body.paged .leaf-l .title-row.side { grid-row: calc(var(--i) * 2 - 1); justify-self: start; width: 47%; text-align: left; padding-bottom: 0; margin-bottom: 0; border-bottom: 0; z-index: 2; }
  html:not([data-mode]) body.paged .leaf-l .title-row.side .era-label { display: block; margin-bottom: 8px; font-size: 13px; }
  html:not([data-mode]) body.paged .title-row.side .era-label { font-size: 13px; }
  html:not([data-mode]) body.paged .is-source .title-row.side .work-he { font-size: 28px; }
  html:not([data-mode]) body.paged .is-source .title-row.side .work-en { font-size: 22px; line-height: 1.27; }
  html:not([data-mode]) body.paged .title-row.side.has-heading { padding-bottom: 4px; }

  /* with both languages: a short gold line between a paragraph and its English */
  html:not([data-mode]) body.paged .leaf-r .seg:not(:has(.seg-title))::after {
    content: ""; display: block; width: 28px; height: 1px; margin: 8px auto 10px; background: var(--gold); opacity: .6;
  }
}

/* ------------------------------------------------------------ the capsule on a wide screen */

/* The same capsule as on a phone, under the open book: back, the source and
   its pages, onward. Its middle opens the list of what stands around the page. */
@media (min-width: 721px) {
  .js body.paged .book { padding-bottom: 72px; }
  .js body.paged .corner { bottom: 72px; }
  .js body.paged .pager { display: none; }
  body.paged .capsule { position: fixed; z-index: 30; left: 50%; bottom: 13px; transform: translateX(-50%); display: flex; }
  body.paged .cap-pill {
    display: flex; align-items: stretch; height: 46px;
    border-radius: 999px; border: 1px solid rgba(214, 176, 90, .42); color: #f3e8d2;
    background: rgba(29, 21, 14, .94);
    box-shadow: 0 12px 26px -12px rgba(40, 20, 5, .55), inset 0 1px 0 rgba(255, 230, 180, .08);
  }
  /* the languages and size are in the top bar here */
  .capsule .cap-gear, .capsule .cap-back { display: none; }
  .capsule button { -webkit-appearance: none; appearance: none; border: 0; background: none; color: inherit; cursor: pointer; padding: 0; }
  .capsule button:hover { background: rgba(255, 235, 200, .07); }
  .capsule button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(214, 176, 90, .65); }
  .cap-l, .cap-r { width: 56px; display: grid; place-items: center; padding-bottom: 3px; color: #d6b05a; font: 400 30px/1 var(--en); }
  .cap-l { border-radius: 999px 0 0 999px; }
  .cap-r { border-radius: 0 999px 999px 0; }
  .capsule .cap-mid {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-width: 220px; max-width: 360px; padding: 0 16px; border-inline: 1px solid rgba(214, 176, 90, .2);
  }
  .cap-name { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 16px/1.15 var(--he); }
  .cap-name[lang="en"] { font: 500 14px/1.15 var(--en); }
  .cap-pages { display: flex; gap: 4px; max-width: 100%; }
  .cap-pages i { flex: 0 1 20px; min-width: 6px; height: 3px; border-radius: 2px; background: rgba(214, 176, 90, .3); }
  .cap-pages i.on { background: #d6b05a; }
  .cap-pages.cap-next { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #d6b05a; font: 400 13px/1.1 var(--he); }
  .cap-pages.cap-next[lang="en"] { font: italic 400 12.5px/1.1 var(--en); }
}

/* the landing page on a phone: a smaller cover, so the ways in show at once */
@media (max-width: 720px) {
  .desk-cover .cover { width: min(54vw, 230px); }
  .desk-cover .cover-open { display: none; }
  .desk-cover { gap: 0; padding-top: 18px; }
  .home-panel { margin-top: 20px; }
  .hp-title { margin-bottom: 14px; }
}

/* ------------------------------------------------------------ the capsule's drawers */

/* Above the capsule: the list of what stands around the page (the sources of
   its era or topic, or the parts of the sefer), and on a phone the settings. */
.cap-pages.cap-bar { display: flex; align-items: center; gap: 7px; }
.cap-line { position: relative; width: 74px; height: 3px; border-radius: 2px; background: rgba(214, 176, 90, .3); overflow: hidden; }
.cap-line b { position: absolute; inset-block: 0; inset-inline-start: 0; background: #d6b05a; }
.cap-count { color: #d6b05a; font: 400 11.5px/1 var(--en); font-variant-numeric: lining-nums; }
/* the drawer is of the capsule's own leather and gold, and rises out of it */
.drawer {
  position: fixed; z-index: 44; left: 50%; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 57px);
  width: min(440px, calc(100vw - 20px)); max-height: min(64dvh, 580px); display: flex; flex-direction: column;
  border: 1px solid rgba(214, 176, 90, .42); border-radius: 16px; color: #f3e8d2;
  background: rgba(26, 19, 12, .97); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 230, 180, .07);
  --nx: 50%; transform: translateX(-50%); transform-origin: var(--nx) 100%;
  animation: dr-rise .22s cubic-bezier(.2, .8, .2, 1);
}
/* the notch that joins it to the capsule */
.drawer::after { content: ""; position: absolute; left: var(--nx); bottom: -7px; width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg);
  background: rgb(26, 19, 12); border-right: 1px solid rgba(214, 176, 90, .42); border-bottom: 1px solid rgba(214, 176, 90, .42); }
.drawer.closing { animation: dr-sink .16s ease forwards; pointer-events: none; }
@keyframes dr-rise { from { opacity: 0; transform: translateX(-50%) translateY(16px) scale(.9, .55); } }
@keyframes dr-sink { to { opacity: 0; transform: translateX(-50%) translateY(16px) scale(.9, .55); } }
@media (prefers-reduced-motion: reduce) { .drawer, .drawer.closing { animation: none; } }
@media (min-width: 721px) { .drawer { bottom: 67px; } }
.dr-head { display: flex; align-items: center; gap: 10px; padding: 13px 14px 11px; border-bottom: 1px solid rgba(214, 176, 90, .2); }
.dr-title { flex: 1; min-width: 0; margin: 0; direction: rtl; text-align: right; color: #f3e8d2; font: 700 19px/1.2 var(--he-display); }
.dr-title a { color: inherit; text-decoration: none; }
.dr-title i { margin-right: 10px; color: #bfae8c; font: italic 400 14px/1 var(--en); direction: ltr; unicode-bidi: isolate; }
.dr-search { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(214, 176, 90, .35); border-radius: 50%; background: none; color: #d6b05a; cursor: pointer; }
.dr-pages { display: flex; align-items: center; gap: 10px; padding: 7px 14px; border-bottom: 1px solid rgba(214, 176, 90, .2); direction: rtl; }
.dr-pk { flex: none; color: #bfae8c; font: 400 14px/1 var(--he); }
.dr-chips { display: flex; flex-wrap: wrap; gap: 4px; direction: ltr; }
.dr-chips button { min-width: 28px; height: 26px; padding: 0 6px; border: 1px solid rgba(214, 176, 90, .25); border-radius: 13px; background: none; color: #f3e8d2; cursor: pointer; font: 500 12.5px/1 var(--en); font-variant-numeric: lining-nums; }
.dr-chips button:hover { border-color: #d6b05a; }
.dr-chips button[aria-current="true"] { background: #d6b05a; border-color: #d6b05a; color: #1d150e; }
.dr-slide { flex: 1; display: flex; align-items: center; gap: 10px; direction: ltr; }
.dr-range { flex: 1; accent-color: #d6b05a; }
.dr-pn { flex: none; min-width: 56px; text-align: right; color: #bfae8c; font: 400 13px/1 var(--en); font-variant-numeric: lining-nums; }
.dr-pn b { color: #f3e8d2; font-weight: 500; }
.dr-list { overflow-y: auto; overscroll-behavior: contain; padding: 4px 0 10px; scrollbar-color: rgba(214, 176, 90, .35) transparent; }
.dr-item { display: grid; gap: 2px; width: 100%; padding: 9px 16px; border: 0; border-inline-end: 3px solid transparent; background: none; color: inherit; text-align: right; text-decoration: none; cursor: pointer; font: inherit; }
.dr-item:hover { background: rgba(214, 176, 90, .09); }
.dr-item[aria-current="page"], .dr-item.here { border-inline-end-color: #d6b05a; background: rgba(214, 176, 90, .15); }
.dr-he { direction: rtl; color: #f3e8d2; font: 400 18px/1.3 var(--he); }
.dr-words { color: #bfae8c; font-size: 15px; }
.dr-en { direction: ltr; text-align: right; color: #c9b896; font: 400 13.5px/1.3 var(--en); }
.dr-sub { direction: ltr; text-align: right; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #a8987a; font: italic 400 12.5px/1.3 var(--en); }
.drawer-settings { padding: 6px 16px 16px; }
.dr-k { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; margin: 12px 0 8px; color: #bfae8c; font: italic 400 13px/1 var(--en); }
.dr-k [lang="he"] { order: 2; color: #f3e8d2; font: normal 700 16px/1 var(--he-display); }
.dr-seg { display: flex; border: 1px solid rgba(214, 176, 90, .3); border-radius: 22px; padding: 3px; gap: 3px; }
.dr-seg button { flex: 1; min-height: 40px; border: 0; border-radius: 19px; background: none; color: #e6d8bb; cursor: pointer; font: 500 15px/1 var(--en); }
.dr-seg button[lang="he"] { font: 400 18px/1 var(--he); }
.dr-seg button[aria-pressed="true"] { background: #d6b05a; color: #1d150e; }
.dr-seg button[aria-disabled="true"] { opacity: .35; }
.dr-item:focus-visible, .dr-seg button:focus-visible, .dr-chips button:focus-visible, .dr-search:focus-visible { outline: 2px solid #d6b05a; outline-offset: -2px; }
.capsule .cap-mid[aria-expanded="true"], .capsule .cap-gear[aria-expanded="true"] { background: rgba(214, 176, 90, .14); }

/* the search results: each a line or two, so a screenful shows many */
.results { padding: 2px 0; border-radius: 10px; }
.result { padding: 9px 14px; border-radius: 0; border-bottom: 1px solid var(--rule); }
.result:last-child { border-bottom: 0; }
/* the source on top, in bold, its Hebrew name at the right; the line that restates it under them */
.result .r-src { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.result .r-src b { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 15px/1.3 var(--en); color: var(--chrome-ink); }
.result .r-src [lang="he"] { flex: none; max-width: 48%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 15.5px/1.3 var(--he); color: var(--chrome-ink); }
.result .r-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 2px; color: var(--ink-2); font: 400 14px/1.35 var(--en); }
.result .r-snip { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.result:hover, .result[aria-selected="true"] { background: color-mix(in srgb, var(--gold) 9%, transparent); }
/* the word found, marked in the binding's gold */
.result mark { background: color-mix(in srgb, var(--gold) 30%, transparent); color: inherit; border-radius: 2px; }
@media (max-width: 720px) {
  .result { padding: 8px 12px; }
  .result .r-src b { font-size: 14.5px; }
  .result .r-src [lang="he"] { font-size: 15px; }
  .result .r-line { font-size: 13.5px; }
  .result .r-snip { font-size: 12.5px; }
}
/* with a pointer, the summary cut short in the list unfolds under it */
@media (hover: hover) {
  .dr-item:hover .dr-sub, .dr-item:focus-visible .dr-sub { white-space: normal; overflow: visible; }
}

/* on a phone, a list entry stands on one line where both fit: the Hebrew
   place on the right, the English on the left. Where they do not, the Hebrew
   keeps its line and the English goes whole onto the line under it, never
   squeezed into a narrow column beside it */
@media (max-width: 720px) {
  html:not([data-mode]) .leaf-r .works li, html:not([data-mode]) .leaf-r .voice { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; }
  html:not([data-mode]) .leaf-r .works li > a { flex: 0 1 auto; min-width: 0; }
  html:not([data-mode]) .leaf-r :is(.works li, .voice) .en-sub { flex: 0 0 auto; max-width: 100%; margin: 0 auto 0 0; text-align: left; }
  html:not([data-mode]) .leaf-r .works li .en-sub { font-size: 13.5px; }
  html:not([data-mode]) .leaf-r .works li .which { order: 3; flex-basis: 100%; }
  .fold-in a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; direction: rtl; }
  .fold-in a .p-he { order: -1; flex: 0 1 auto; min-width: 0; }
  .fold-in a .p-en { flex: 0 0 auto; max-width: 100%; margin-right: auto; direction: ltr; text-align: left; }
  .fold-in a .p-sub { flex-basis: 100%; direction: ltr; text-align: left; }
}
/* the Topics menu: a hairline between one letter and the next */
.panel .letter + a, .panel a + .letter { margin-top: 0; }
.panel a + .letter { border-top: 1px solid var(--rule); padding-top: 10px; margin-top: 6px; }
/* on a wide screen the results are never narrower than a line of them needs,
   however narrow the search box itself stands */
@media (min-width: 721px) { .results { right: auto; width: max(100%, 460px); } }

/* pesukim that only open a speech or set the scene: one paragraph, a size
   smaller and lighter, before the pesukim that carry the point */
.lead-in .he-text, .lead-in .en-text { color: var(--ink-3); font-size: calc(.82em * var(--ts)); line-height: 1.6; }
.leaf-r .lead-in .he-text { font-size: calc(clamp(15px, calc(3.4 * var(--u)), 19.5px) * var(--ts)); }
.leaf-l .lead-in .en-text { font-size: calc(clamp(12.5px, calc(2.6 * var(--u)), 15px) * var(--ts)); }
.lead-in .vm { width: auto; margin-inline-end: .35em; font-size: .9em; }
.lead-in .vm ~ .vm { margin-inline-start: .3em; }
.lead-in .has-v, .lead-in p { padding-inline-start: 0; text-indent: 0; }
@media (max-width: 720px) {
  .leaf-r .lead-in .he-text { font-size: calc(16.5px * var(--ts)); }
  .leaf-l .lead-in .en-text { font-size: calc(14px * var(--ts)); }
  html:not([data-mode]) body.paged .leaf-r .seg.lead-in::after { margin: 6px auto 8px; opacity: .4; }
}