/* 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; }
@font-face { font-family: "Instrument"; src: url(/assets/fonts/instrument-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument"; src: url(/assets/fonts/instrument-italic.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: "Instrument", "Spectral", Georgia, serif;

  --bar: 62px;
  --desk: #ebe4d8;
  --desk-hi: #f6f1e8;
  --chrome: rgba(250, 247, 240, .9);
  --chrome-ink: #2b241b;
  --chrome-line: #d9cfbe;
  --menu: #fffdf8;
  --leather: #3b1f12;
  --gold: #b38b3e;
  --gold-hi: #e9cf88;
  --gold-lo: #a07d36;
  --paper: #fbf6ea;
  --paper-edge: #ded2b8;
  --fold: #ebe0c8;
  --ink: #1c1712;
  --ink-2: #4d4438;
  --ink-3: #7b7060;
  --rule: #ddd0b6;
  --frame: rgba(60, 42, 24, .5);
  --rubric: #962818;
  --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);
  }
}
: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);
}

*, *::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; }
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); }
.brand-en { font: 500 10.5px/1 var(--en); letter-spacing: .28em; text-transform: uppercase; opacity: .6; 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: 999px; 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(--gold); box-shadow: 0 0 0 3px rgba(179, 139, 62, .15); }
.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(179, 139, 62, .12); }
.result b { display: block; font: 400 17px/1.25 var(--en-display); }
.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(179, 139, 62, .3); 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(179, 139, 62, .12); }
.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;
}
.panel h3 { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 12px 4px; color: var(--rubric);
  font: 600 11px/1 var(--en); letter-spacing: .22em; text-transform: uppercase; }
.panel h3:first-child { margin-top: 2px; }
.panel h3 [lang="he"] { font: 700 16px/1 var(--he-display); letter-spacing: 0; text-transform: none; }
.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(179, 139, 62, .12); }
.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: 400 22px/1 var(--en-display); color: var(--gold); }
.modes { display: inline-flex; border: 1px solid var(--chrome-line); border-radius: 999px; padding: 2px; margin-left: 6px; }
.modes button { background: none; border: 0; cursor: pointer; padding: 6px 10px; border-radius: 999px; font: 500 12px/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; }
.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(179, 139, 62, .12); }

/* ------------------------------------------------------------ the landing page */

.kind-home .topbar .search { visibility: hidden; }
.home { max-width: 1180px; margin: 0 auto; padding: clamp(18px, 4vh, 44px) clamp(18px, 4vw, 48px) 40px; }
.hero { text-align: center; margin-bottom: clamp(22px, 4.5vh, 48px); }
.kicker { margin: 0 0 clamp(10px, 2vh, 18px); color: var(--rubric); font: 600 11px/1 var(--en); letter-spacing: .26em; text-transform: uppercase; }
.kicker [lang="he"] { font: 700 16px/1 var(--he-display); letter-spacing: 0; }
.hero-he { margin: 0; font: 400 clamp(30px, 4.6vw, 60px)/1.45 var(--he); color: var(--ink); text-wrap: balance; }
.hero-en { margin: 10px auto 0; max-width: 40em; color: var(--ink-2); font: italic 400 clamp(17px, 1.7vw, 22px)/1.45 var(--en-display); }
.hero-ref { display: inline-block; margin-inline-start: 8px; color: var(--ink-3); font: 400 13px/1 var(--en); font-style: normal; letter-spacing: .04em; }
.search-hero { max-width: 620px; margin: clamp(18px, 3.4vh, 32px) auto 0; }
.search-hero input { height: 52px; font-size: 17px; padding-left: 46px; box-shadow: 0 10px 30px -14px var(--shadow); }
.search-hero svg { left: 18px; width: 18px; height: 18px; }
.search-hero .results { text-align: left; }

.home-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.h-label { margin: 0 0 10px; color: var(--ink-3); font: 600 10.5px/1 var(--en); letter-spacing: .24em; text-transform: uppercase; }

/* today's source, as a small open sefer */
.mini { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: clamp(190px, 27vh, 260px); text-decoration: none; color: var(--ink); perspective: 1400px; }
.mini-leaf { position: relative; overflow: hidden; padding: 24px 26px; background-color: var(--paper); }
.mini-leaf::before { content: ""; position: absolute; inset: 9px; border: 1px solid var(--frame); pointer-events: none; }
.mini-l { transform-origin: right center; transform: rotateY(2deg); border-radius: 5px 1px 1px 5px;
  background-image: linear-gradient(270deg, rgba(40, 25, 5, .36), rgba(90, 60, 20, .1) 9%, transparent 22%), var(--paper-grain);
  box-shadow: -2px 1px 0 var(--paper-edge), -4px 2px 0 var(--paper), -5px 3px 0 var(--paper-edge), -12px 18px 30px -14px var(--shadow); }
.mini-r { transform-origin: left center; transform: rotateY(-2deg); border-radius: 1px 5px 5px 1px;
  background-image: linear-gradient(90deg, rgba(40, 25, 5, .36), rgba(90, 60, 20, .1) 9%, transparent 22%), var(--paper-grain);
  box-shadow: 2px 1px 0 var(--paper-edge), 4px 2px 0 var(--paper), 5px 3px 0 var(--paper-edge), 12px 18px 30px -14px var(--shadow); }
.mini-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; }
.mini-en { font: 400 14.5px/1.58 var(--en); }
.mini-he { font: 400 18px/1.7 var(--he); text-align: justify; }
.mini:hover .mini-leaf { background-color: color-mix(in srgb, var(--paper) 92%, var(--gold)); }
.today-title { margin: 16px 0 6px; font: 400 clamp(21px, 2vw, 27px)/1.2 var(--en-display); text-wrap: balance; }
.today-ref { margin: 0; color: var(--ink-3); font-size: 13.5px; }
.today-ref [lang="he"] { font-size: 16px; }
.today-go { margin-inline-start: 10px; color: var(--rubric); font-weight: 500; text-decoration: none; }
.today-go:hover { text-decoration: underline; text-underline-offset: 4px; }

/* every way into the book */
.eras { display: grid; margin: 0 0 18px; border-top: 1px solid var(--chrome-line); }
.era { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 14px; padding: 9px 2px; border-bottom: 1px solid var(--chrome-line); text-decoration: none; }
.era:hover .era-en, .era:hover .era-he { color: var(--rubric); }
.era-en { font: 400 21px/1.1 var(--en-display); }
.era-n { color: var(--ink-3); font-size: 12.5px; }
.era-he { min-width: 4.5em; text-align: right; font: 700 20px/1 var(--he-display); }
.pb-tile { display: grid; gap: 4px; margin: 0 0 20px; padding: 13px 16px; border: 1px solid var(--chrome-line); border-radius: 10px; background: var(--menu); text-decoration: none; }
.pb-tile:hover { border-color: var(--gold); }
.pb-tile-he { font: 700 22px/1 var(--he-display); color: var(--rubric); }
.pb-tile-en { color: var(--ink-2); font-size: 13.5px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.chip { 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); }
.chip [lang="he"] { margin-inline-start: 6px; color: var(--ink-3); font: 400 15px/1 var(--he); }
.chip:hover { border-color: var(--gold); color: var(--rubric); }
.open-sefer { margin: 0; }
.open-sefer a { color: var(--ink-2); font: 500 14px/1 var(--en); text-underline-offset: 4px; }
.open-sefer a:hover { color: var(--rubric); }

/* ------------------------------------------------------------ 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;
}
.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 */
.leaf::before, .leaf::after { content: ""; position: absolute; pointer-events: none; border-color: var(--frame); border-style: solid; }
.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: 500 10.5px/1.4 var(--en); letter-spacing: .2em; text-transform: uppercase; }
.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(--gold); }
.era-label { margin: 0 0 9px; color: var(--rubric); font: 600 10.5px/1 var(--en); letter-spacing: .26em; text-transform: uppercase; }
.leaf-r .era-label { font: 700 17px/1 var(--he-display); letter-spacing: .02em; }
.heading { margin: 0 0 9px; font: 400 clamp(24px, calc(6.4 * var(--u)), 38px)/1.1 var(--en-display); letter-spacing: -.005em; text-wrap: balance; }
.ref { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.author { margin: 4px 0 0; color: var(--ink-3); font-size: 13px; }
.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); }
.leaf-r .author { font: 400 16px/1.4 var(--he); }

/* the text itself */
.he-text { margin: 0 0 .75em; font: 400 clamp(18px, calc(4.1 * var(--u)), 24px)/1.8 var(--he); text-align: justify; }
.en-text { margin: 0 0 .75em; font: 400 clamp(14.5px, calc(3.05 * var(--u)), 17.5px)/1.62 var(--en); text-align: justify; hyphens: auto; }
.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; }
.leaf-r .cite { font-size: .72em; }
.vn { font: 600 .6em/1 var(--en); color: var(--rubric); margin-inline-end: .35em; }
.leaf-r .vn { font: 700 .62em/1 var(--he); }
.open { float: inline-start; margin: .2em 0 .1em .35em; padding: .16em .32em .08em; font: 700 1.8em/1 var(--he-display); border: 1.5px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 3px; }
.leaf-l .lead .en-text::first-letter { float: left; margin: .06em .1em 0 0; font: 400 4.2em/.78 var(--en-display); color: var(--rubric); }

/* the footnote of a source: its threads and its edition, at the foot of its
   opening page, above the folio, 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(--rubric); font: 600 9.5px/1 var(--en); letter-spacing: .2em; text-transform: uppercase; }
.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.47; margin-bottom: .35em; }
.snug .pb-he { line-height: 1.62; } .snug .pb-en { line-height: 1.48; } .snug .pb-row { padding-bottom: 8px; }
.snug .title-row { padding-bottom: 12px; margin-bottom: 14px; }

/* folio, page count and 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); }
.folio { font: 400 14px/1 var(--en); font-variant-numeric: oldstyle-nums; }
.leaf-r .folio { font: 400 18px/1 var(--he); }
.catch { font: 400 18px/1 var(--he); color: var(--ink-2); }
.pagecount { font: 500 10.5px/1 var(--en); letter-spacing: .18em; 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: 50%; border: 1px solid var(--chrome-line); background: var(--menu); color: var(--ink-2);
  box-shadow: 0 6px 16px var(--shadow); text-decoration: none; font: 400 22px/1 var(--en-display); transition: transform .2s, color .2s;
}
.pager:hover { color: var(--rubric); transform: scale(1.06); }
.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: 500 11px/1.3 var(--en); letter-spacing: .4em; text-transform: uppercase; }
.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(38px, calc(12.5 * var(--u)), 88px)/1 var(--en-display); letter-spacing: .04em; 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(--rubric); 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(22px, calc(6 * var(--u)), 38px)/1.2 var(--en-display); }
.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: 500 11px/1 var(--en); letter-spacing: .3em; }

/* contents and index */
.display { margin: 0 0 10px; font: 400 clamp(36px, calc(11 * var(--u)), 72px)/.95 var(--en-display); letter-spacing: -.015em; }
.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 { color: var(--rubric); }
.toc-row { padding: 5px 0; }
.leaf-l .toc-row .toc-l > a { font: 400 18px/1.2 var(--en-display); }
.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; }
.era-row { padding-top: 16px; }
.leaf-l .toc-era .toc-l > a { font: 600 11px/1 var(--en); letter-spacing: .26em; text-transform: uppercase; color: var(--rubric); }
.leaf-r .toc-era .toc-l > a { font: 700 22px/1 var(--he-display); color: var(--rubric); }
.leaf-l .toc-front .toc-l > a { font: italic 400 19px/1.2 var(--en-display); }
.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 23px/1.2 var(--en-display) !important; }
.leaf-r .ix { font: 700 24px/1.3 var(--he-display) !important; }
.ix-row .toc-r a { text-decoration: none; }

/* an era's divider page: sized to the page, so it can never reach the spine */
.era-title::after { display: none; }
.era-display { margin: 3vh 0 3vh; font: italic 400 clamp(42px, calc(16 * var(--u)), 140px)/.92 var(--en-display); color: var(--rubric); letter-spacing: -.02em; }
.era-display-he { margin: 3vh 0 3vh; font: 700 clamp(48px, calc(18 * var(--u)), 160px)/.95 var(--he-display); }
.voice { margin: 0; font: 400 clamp(20px, calc(4.6 * var(--u)), 26px)/1.2 var(--en-display); }
.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; }
.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: 600 10.5px/1 var(--en); letter-spacing: .2em; text-transform: uppercase; }
.leaf-r .goto { font: 700 15px/1 var(--he-display); letter-spacing: 0; }
.goto a { color: var(--rubric); text-decoration: none; }
.orn { border: 0; height: 24px; margin: 6px 0 26px; text-align: center; overflow: visible; color: var(--gold); }
.orn::after { content: "◆   ◆   ◆"; white-space: pre; font-size: 9px; letter-spacing: .3em; }

/* 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: clamp(20px, calc(4.8 * var(--u)), 27px); }
.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 { line-height: 1.62; } .snug .pb-en { line-height: 1.48; } .snug .pb-row { padding-bottom: 8px; }
.snug .title-row { padding-bottom: 12px; margin-bottom: 14px; }

/* folio, page count and 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); }
.folio { font: 400 14px/1 var(--en); font-variant-numeric: oldstyle-nums; }
.leaf-r .folio { font: 400 18px/1 var(--he); }
.catch { font: 400 18px/1 var(--he); color: var(--ink-2); }
.pagecount { font: 500 10.5px/1 var(--en); letter-spacing: .18em; 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: 50%; border: 1px solid var(--chrome-line); background: var(--menu); color: var(--ink-2);
  box-shadow: 0 6px 16px var(--shadow); text-decoration: none; font: 400 22px/1 var(--en-display); transition: transform .2s, color .2s;
}
.pager:hover { color: var(--rubric); transform: scale(1.06); }
.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: 500 11px/1.3 var(--en); letter-spacing: .4em; text-transform: uppercase; }
.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(38px, calc(12.5 * var(--u)), 88px)/1 var(--en-display); letter-spacing: .04em; 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(--rubric); 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(22px, calc(6 * var(--u)), 38px)/1.2 var(--en-display); }
.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: 500 11px/1 var(--en); letter-spacing: .3em; }

/* contents and index */
.display { margin: 0 0 10px; font: 400 clamp(36px, calc(11 * var(--u)), 72px)/.95 var(--en-display); letter-spacing: -.015em; }
.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 { color: var(--rubric); }
.toc-row { padding: 5px 0; }
.leaf-l .toc-row .toc-l > a { font: 400 18px/1.2 var(--en-display); }
.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; }
.era-row { padding-top: 16px; }
.leaf-l .toc-era .toc-l > a { font: 600 11px/1 var(--en); letter-spacing: .26em; text-transform: uppercase; color: var(--rubric); }
.leaf-r .toc-era .toc-l > a { font: 700 22px/1 var(--he-display); color: var(--rubric); }
.leaf-l .toc-front .toc-l > a { font: italic 400 19px/1.2 var(--en-display); }
.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 23px/1.2 var(--en-display) !important; }
.leaf-r .ix { font: 700 24px/1.3 var(--he-display) !important; }
.ix-row .toc-r a { text-decoration: none; }

/* an era's divider page: sized to the page, so it can never reach the spine */
.era-title::after { display: none; }
.era-display { margin: 3vh 0 3vh; font: italic 400 clamp(42px, calc(16 * var(--u)), 140px)/.92 var(--en-display); color: var(--rubric); letter-spacing: -.02em; }
.era-display-he { margin: 3vh 0 3vh; font: 700 clamp(48px, calc(18 * var(--u)), 160px)/.95 var(--he-display); }
.voice { margin: 0; font: 400 clamp(20px, calc(4.6 * var(--u)), 26px)/1.2 var(--en-display); }
.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; }
.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: 600 10.5px/1 var(--en); letter-spacing: .2em; text-transform: uppercase; }
.leaf-r .goto { font: 700 15px/1 var(--he-display); letter-spacing: 0; }
.goto a { color: var(--rubric); text-decoration: none; }
.orn { border: 0; height: 24px; margin: 6px 0 26px; text-align: center; overflow: visible; color: var(--gold); }
.orn::after { content: "◆   ◆   ◆"; white-space: pre; font-size: 9px; letter-spacing: .3em; }

/* Pesukei Bitachon */
.pb-letter { font: 700 clamp(30px, calc(8 * var(--u)), 46px)/1 var(--he-display); color: var(--rubric); margin: 6px 0 8px; }
.leaf-l .pb-letter { font: italic 400 clamp(15px, calc(3.4 * var(--u)), 19px)/1 var(--en-display); color: var(--ink-3); padding-top: clamp(14px, calc(4 * var(--u)), 22px); }
.pb-he { margin: 0; font: 400 clamp(17.5px, calc(4 * var(--u)), 22.5px)/1.75 var(--he); text-align: justify; }
.pb-en { margin: 0; font: 400 clamp(14px, calc(2.95 * var(--u)), 16.5px)/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-note { margin: 5px 0 0; padding-inline-start: 10px; border-inline-start: 2px solid var(--rubric); color: var(--ink-2); font: 400 12.5px/1.45 var(--en); }
.leaf-r .pb-note { font: 400 15.5px/1.5 var(--he); }
.pb-note [lang="he"] { font: 400 1.15em/1 var(--he); }
.pb-row { padding-bottom: 14px; }
.pb-intro { font: 400 clamp(15.5px, calc(3.3 * var(--u)), 19px)/1.75 var(--he); text-align: justify; margin: 0; }
.leaf-l .pb-intro { font: 400 clamp(13.5px, calc(2.7 * var(--u)), 16px)/1.62 var(--en); }

/* 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; }
@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; border: 1.6px solid var(--frame); top: 16px; bottom: 16px; }
  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); }
  html[data-mode] .is-source .leaf-r, html[data-mode] .is-source .leaf-l { padding-bottom: 150px; }
  html[data-mode="he"] .leaf-r .meta-row { left: calc(50% + 30px); right: var(--out); }
  html[data-mode="en"] .leaf-l .meta-row { left: var(--out); right: calc(50% + 30px); }
}

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

.unfold .leaf-l { animation: unfold-l 1.15s var(--ease-turn) backwards; }
.unfold .leaf-r { animation: unfold-r 1.15s var(--ease-turn) backwards; }
.unfold .hero, .unfold .home-grid { animation: fade-up .9s ease backwards; }
.unfold .home-grid { animation-delay: .15s; }
@keyframes unfold-l { from { transform: rotateY(84deg); opacity: 0; } 25% { opacity: 1; } }
@keyframes unfold-r { from { transform: rotateY(-84deg); opacity: 0; } 25% { opacity: 1; } }
@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; }
  .topbar { gap: 8px; padding: 0 10px; }
  .brand-he { font-size: 21px; }
  .search { flex: 1 1 auto; }
  .search input { height: 34px; font-size: 14px; 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; }
  .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;
  }
  .modes button { padding: 8px 13px; }
  .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; }
  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; }
  .meta { font-size: 11px; margin-bottom: 2px; } .meta-k { font-size: 8.5px; } .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); }
  .leaf-r .seg, .leaf-r .pb-row { padding-top: 2px; padding-bottom: 0; }
  .leaf-l .seg, .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: 20px; margin-bottom: .35em; }
  .en-text { font-size: 16px; text-align: left; margin-bottom: 0; }
  .open { font-size: 1.4em; margin-inline-end: .25em; outline-offset: 2px; }
  .is-shaar .spread { align-content: center; }
  .is-shaar .leaf-l .shaar-row { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--rule); }
  .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; }
  .corner { display: none; }
  .unfold .spread { animation: settle .9s cubic-bezier(.2, .7, .2, 1) backwards; }
  .unfold .leaf-l, .unfold .leaf-r { animation: none; }

  .home-grid { grid-template-columns: minmax(0, 1fr); }
  .kind-home .topbar .search { visibility: visible; }
  .kind-home .modes { display: none; }
  .mini { height: 200px; }
  .mini-leaf { padding: 18px 16px; }
  .mini-he { font-size: 16px; } .mini-en { font-size: 13px; }
}
}

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

@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) { 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) {
  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;
}

/* 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 .hero, .unfold .home-grid, .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; } }