/* Ashlar: a stone-grey reading room with a lapis accent. A contents rail on wide screens, one
   66ch text column, examples set in from the measure like a manual's specimen lines. */
:root {
  --bg: #eef0f2;
  --page: #f8f9fa;
  --ink: #1a1e26;
  --muted: #5a6170;
  --rule: #d3d7de;
  --accent: #23468c;
  --accent-soft: #e2e8f4;
  --field: #7f8692;
  /* Noto Sans Symbols sets the planetary and zodiacal glyphs (4.53), in every face, as text. */
  --f-body: "Gentium Book Plus", "Noto Serif Hebrew", "Noto Sans Math", "Noto Sans Symbols", "Noto Sans Symbols 2", Georgia, "Times New Roman", serif;
  --f-display: "Marcellus SC", "Gentium Book Plus", "Noto Sans Symbols", Georgia, serif;
  --f-ui: "IBM Plex Sans", "Noto Sans Symbols", "Noto Sans Symbols 2", system-ui, -apple-system, "Segoe UI", sans-serif;
  --measure: 72ch;
  --card: calc(var(--measure) + 114px); /* the measure, the card's padding and its border */
  --rail: 300px;
  --foot-h: 44px;
  /* The footer's real height, measured by app.js; until then, its height in normal use. */
  --foot-total: var(--foot-real, calc(var(--foot-h) + 1px + env(safe-area-inset-bottom, 0px)));
  /* The same for the header, which takes a second row on phones. */
  --head-h: 57px;
  --head-total: var(--head-real, calc(var(--head-h) + env(safe-area-inset-top, 0px)));
  color-scheme: light;
}
@media (max-width: 999px) { :root { --head-h: 53px; } }
@media (max-width: 599px) { :root { --head-h: 87px; } }
/* Dark follows the system unless the reader has chosen Light; a chosen Dark wins either way. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111419; --page: #171b21; --ink: #e4e7ec; --muted: #9ba3b2; --rule: #2b313b;
    --accent: #93acdf; --accent-soft: #1e2940; --field: #6d7584;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111419; --page: #171b21; --ink: #e4e7ec; --muted: #9ba3b2; --rule: #2b313b;
  --accent: #93acdf; --accent-soft: #1e2940; --field: #6d7584;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--head-total) + 8px); scroll-padding-bottom: calc(var(--foot-total) + 8px); -webkit-text-size-adjust: 100%; }
body { margin: 0; padding-bottom: var(--foot-total); background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 18px; line-height: 1.55; }
/* A glyph that also has a color emoji form is shown as text (4.54); build.mjs adds U+FE0E too. */
html { font-variant-emoji: text; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
code { font-size: .88em; overflow-wrap: anywhere; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 16px; top: 12px; z-index: 20; background: var(--page); padding: 6px 10px; }

/* Shell */
.shell { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 1220px; margin: 0 auto; padding-inline: 16px; }
@media (min-width: 1000px) { .shell { grid-template-columns: var(--rail) minmax(0, 1fr); gap: 48px; padding-inline: 32px; } }

/* Site header, sticky on every page: the wordmark, the subtitle where it fits, the three parts of
   the site, and (below the desktop width) the Contents button. */
.sitehead { position: sticky; top: 0; z-index: 10; background: var(--page); border-bottom: 1px solid var(--rule); padding-top: env(safe-area-inset-top, 0px); font-family: var(--f-ui); }
.sh-in { max-width: 1220px; min-height: 56px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand sub nav"; align-items: center; column-gap: 20px; }
.sh-brand { grid-area: brand; font-family: var(--f-display); font-size: 24px; line-height: 1; letter-spacing: .14em; margin-right: -.14em; color: var(--ink); text-decoration: none; padding-block: 6px; }
.sh-brand:hover { color: var(--accent); }
/* The subtitle is shown only where its whole line fits. The box is one line high and clips what
   overflows it; a zero-width first item fills that line, so a subtitle too long for the space left
   wraps whole onto the clipped second line. It never shows on two lines, and never in part. */
.sh-fit { grid-area: sub; display: flex; flex-wrap: wrap; height: 18px; margin: 0; overflow: hidden; font-size: 13px; line-height: 18px; color: var(--muted); }
.sh-fit::before { content: ""; width: 0; height: 18px; }
.sh-sub { white-space: nowrap; padding-left: 16px; border-left: 1px solid var(--rule); }
.homepage .sh-fit { visibility: hidden; } /* the masthead below carries it */
.sitenav { grid-area: nav; align-self: stretch; display: flex; gap: 24px; }
.sitenav a { display: flex; align-items: center; font-size: 14px; font-weight: 500; white-space: nowrap; color: var(--muted); text-decoration: none; box-shadow: inset 0 -2px 0 transparent; }
.sitenav a:hover { color: var(--ink); }
.sitenav a[aria-current] { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.sitenav a:focus-visible { outline-offset: -2px; }
.menu { grid-area: menu; display: none; font: 500 14px var(--f-ui); color: var(--ink); background: transparent; border: 1px solid var(--field); border-radius: 4px; padding: 6px 12px; cursor: pointer; }
@media (max-width: 999px) {
  .sh-in { min-height: 52px; padding-inline: 16px; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "brand sub nav menu"; column-gap: 16px; }
  .sh-brand { font-size: 20px; }
  .sitenav { gap: 18px; }
  /* A label wraps, and the header grows, before the row can run off the screen. */
  .sitenav a { white-space: normal; text-align: center; line-height: 1.25; }
  .menu { display: block; }
}
/* "Citation" leaves the Quick Reference's visible label; its accessible name keeps the whole. */
@media (max-width: 679px) {
  .nx { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Phones: the wordmark and the Contents button, with the three parts on a row of their own. */
@media (max-width: 599px) {
  .sh-in { min-height: 0; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand menu" "nav nav"; row-gap: 0; }
  .sh-brand { justify-self: start; padding-block: 15px; }
  .sh-fit { display: none; }
  .sitenav { min-height: 36px; gap: 8px; justify-content: space-between; margin-inline: -16px; padding-inline: 16px; border-top: 1px solid var(--rule); }
  .sitenav a { flex: 1 1 auto; justify-content: center; font-size: 13.5px; }
}

/* Rail */
.rail { font-family: var(--f-ui); font-size: 14px; padding-block: 24px 8px; }
@media (max-width: 999px) {
  .rail { display: none; }
  .rail.open { display: block; position: fixed; inset: var(--head-total) 0 0 0; z-index: 9; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); padding: 16px 16px calc(32px + env(safe-area-inset-bottom, 0px)); }
  .rail .paras a { padding: 7px 0; font-size: 14px; }
  .chapters > li > a { padding: 5px 0; }
  body.menu-open { overflow: hidden; }
  .chapter td:first-child { white-space: normal; }
}
@media (min-width: 1000px) { .rail { position: sticky; top: var(--head-total); height: calc(100vh - var(--head-total) - var(--foot-total)); overflow-y: auto; padding-block: 28px 40px; overscroll-behavior: contain; } }
.search { position: relative; margin-block: 0 18px; }
.search label { display: block; margin-bottom: 6px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.search input { width: 100%; font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--field); border-radius: 4px; background: var(--page); color: var(--ink); }
.results { position: absolute; z-index: 15; left: 0; right: 0; top: calc(100% + 4px); background: var(--page); border: 1px solid var(--rule); border-radius: 4px; max-height: 62vh; overflow-y: auto; box-shadow: 0 10px 28px rgb(0 0 0 / .14); }
@media (min-width: 1000px) { .results { max-height: calc(62vh - var(--foot-total)); } }
.results a { display: block; padding: 8px 10px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.results a:last-child { border-bottom: 0; }
.search input::placeholder { color: var(--muted); opacity: 1; }
.results a:hover, .results a:focus-visible { background: var(--accent-soft); }
.results a.on { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.results .rn { font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 600; margin-right: 6px; }
.results .rs { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; }
.results.msg { margin: 0; padding: 10px; color: var(--muted); }
.chapters, .chapters ol { list-style: none; margin: 0; padding: 0; }
.chapters { display: grid; gap: 9px; }
.chapters > li > a { display: flex; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 500; }
.chapters > li > a:hover { color: var(--accent); }
.chapters > li.here > a { color: var(--accent); }
.cn { width: 1.2em; flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.paras { margin: 8px 0 4px calc(1.2em + 10px) !important; display: grid; gap: 1px; border-left: 1px solid var(--rule); padding-left: 10px !important; }
.paras a { display: block; color: var(--muted); text-decoration: none; font-size: 13px; line-height: 1.35; padding: 2px 0; }
.paras a:hover, .paras a.on { color: var(--accent); }
.paras .n { font-variant-numeric: tabular-nums; }
.paras .g a { margin-top: 8px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
/* A page assembled from the guide: its name, and its own outline under it. */
.rail-page { margin: 0; font-weight: 500; }
.rail-page a { color: var(--accent); text-decoration: none; }
.rail-page a:hover { text-decoration: underline; }
.paras.solo { margin-left: 0 !important; list-style: none; }
/* Rail links on wide screens: each target nearly 24px high, and neighbors' centers at least 24px apart. */
@media (min-width: 1000px) { .paras a { padding-block: 3px; } .paras .g a { padding-block: 5px; } }

/* Main column */
main { padding-block: 24px 64px; min-width: 0; outline: none; }
@media (min-width: 1000px) { main { padding-block: 40px 96px; } }
.chapter { background: var(--page); border: 1px solid var(--rule); border-radius: 2px; padding: 28px 20px 36px; }
@media (min-width: 640px) { .chapter { padding: 48px 56px 56px; max-width: var(--card); } }
.chapter > * { max-width: var(--measure); }
.chap-head { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--rule); }
.eyebrow { font-family: var(--f-ui); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.chap-head h1 { font-family: var(--f-display); font-weight: 400; font-size: clamp(28px, 4vw, 40px); line-height: 1.15; letter-spacing: .03em; margin: 6px 0 0; text-wrap: balance; }
h2.group { font-family: var(--f-ui); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 48px 0 4px; scroll-margin-top: 16px; }
/* Anchors land below the sticky header: html's scroll-padding-top holds its height. */
.para { margin-top: 26px; scroll-margin-top: 16px; position: relative; }
.para:target { background: var(--accent-soft); box-shadow: 0 0 0 10px var(--accent-soft); border-radius: 1px; }
.para .ph { font-size: 18px; font-weight: 700; line-height: 1.35; margin: 0 0 6px; text-wrap: balance; }
.pn { font-variant-numeric: tabular-nums lining-nums; margin-right: .35em; text-underline-offset: 3px; }
.pn:hover { text-decoration-thickness: 2px; }
.ptools { display: flex; gap: 16px; margin: -4px 0 2px; font: 500 12px/24px var(--f-ui); }
.ptools .ico { display: none; }
@media (hover: hover) and (min-width: 640px) {
  .ptools { position: absolute; top: 1px; left: -48px; gap: 4px; margin: 0; opacity: 0; transition: opacity .12s; }
  .para:hover .ptools, .ptools:focus-within { opacity: 1; }
  .ptools .ico { display: block; }
  .ptools .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ptools button, .ptools a { display: grid; place-items: center; width: 22px; height: 24px; border-radius: 3px; }
  .ptools button:hover, .ptools a:hover, .ptools button:focus-visible, .ptools a:focus-visible { background: var(--accent-soft); }
}
.ptools button, .ptools a { font: inherit; color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.ptools button:hover, .ptools a:hover { color: var(--accent); }
.ptools .copy.ok { color: var(--accent); }
.para p, .chapter > p { margin: 0 0 .7em; hyphens: manual; }
.chapter ul, .chapter ol { padding-left: 1.3em; }
/* The square of a grade notation, raised to the degree sign's height (3.31). */
.sq { font-size: .52em; vertical-align: .68em; line-height: 0; margin-left: .04em; }
.ex { margin: .2em 0 .9em 1.6em; padding-left: 14px; border-left: 2px solid var(--rule); }
.ex p { margin: 0; line-height: 1.5; }
.ex p + p { margin-top: 2px; }
/* A new set of examples in a block (a full note after another's short note and bibliography
   entry, say) begins a little apart; the lines of one set stay close. */
.ex p.set { margin-top: .75em; }
.ex .not { font-style: italic; color: var(--muted); }
/* An address in an example breaks between the pieces build.mjs marks (5.29), never just after a
   mark inside one. Only a piece longer than the whole line breaks within itself. */
.url { overflow-wrap: anywhere; }
.url > span { white-space: nowrap; }
.ex .d1 { padding-left: 1.2em; } .ex .d2 { padding-left: 2.4em; } .ex .d3 { padding-left: 3.6em; }
.tw { overflow-x: auto; margin: .4em 0 1.1em; max-width: 100%; }
table { border-collapse: collapse; font-size: 15.5px; line-height: 1.4; min-width: 100%; }
th, td { text-align: left; vertical-align: top; padding: 6px 12px 6px 0; border-bottom: 1px solid var(--rule); }
th { font-family: var(--f-ui); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
td:first-child { white-space: nowrap; }

/* Word List */
ul.wl { list-style: none; padding: 0 !important; margin: 0 0 .6em; }
ul.wl li { padding-left: 1.4em; text-indent: -1.4em; margin: .3em 0; line-height: 1.45; scroll-margin-top: 16px; }
ul.wl li:target { background: var(--accent-soft); }
h2.letter { font-family: var(--f-display); font-size: 24px; letter-spacing: .06em; text-transform: none; color: var(--accent); margin-top: 30px; }

/* Pager and footer */
.pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 24px; font-family: var(--f-ui); max-width: var(--card); }
.pager a { display: block; max-width: 48%; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 3px; background: var(--page); color: var(--ink); text-decoration: none; font-size: 14px; line-height: 1.35; }
.pager a:hover { border-color: var(--accent); }
.pager span { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pager .next { text-align: right; margin-left: auto; }

/* Site footer: fixed to the bottom of the screen */
.sitefoot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; background: var(--page); border-top: 1px solid var(--rule); font: 12.5px/1.3 var(--f-ui); color: var(--muted); padding-bottom: env(safe-area-inset-bottom, 0px); }
.sf-in { max-width: 1220px; min-height: var(--foot-h); margin: 0 auto; padding: 4px 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 2px 16px; }
@media (min-width: 1000px) { .sf-in { padding-inline: 32px; } }
.sf-in p { margin: 0; }
.sf-copy { min-width: 0; }
.sf-mail { justify-self: center; white-space: nowrap; }
.sf-tools { justify-self: end; min-width: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; row-gap: 2px; }
.sitefoot a { color: var(--ink); text-decoration: none; }
.sitefoot a:hover { color: var(--accent); text-decoration: underline; }
.sitefoot .ico { display: none; flex: none; }
.theme-form { display: contents; }
/* The switch appears once app.js has wired it, and its divider goes with it. */
.theme { display: flex; align-items: center; margin: 0 14px 0 0; padding: 0; border: 0; border-right: 1px solid var(--rule); min-width: 0; }
html:not(.theme-ready) .theme { display: none; }
.theme label { position: relative; display: flex; align-items: center; gap: 5px; padding: 2px 9px; cursor: pointer; border-left: 1px solid var(--rule); border-radius: 3px; }
.theme label:first-of-type { border-left: 0; }
.theme label:hover { color: var(--ink); }
.theme input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.theme label:has(input:checked) { color: var(--accent); font-weight: 600; }
.theme label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.sf-admin { display: flex; align-items: center; gap: 5px; padding: 2px 0; }
/* Below the full width, "All rights reserved." and the address's label go first, then (phones) the
   words give way to one row of icons. Hidden words stay for screen readers. */
@media (max-width: 1099px) {
  .sf-long, .sf-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 759px) {
  .sf-in { grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px; }
  .sf-copy { font-size: 12px; line-height: 1.2; }
  .theme { margin: 0; border: 0; }
  .sf-addr, .theme .t, .sf-admin .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sitefoot .ico { display: block; }
  .sf-mail a, .theme label, .sf-admin { display: grid; place-items: center; width: 32px; height: 34px; padding: 0; border: 0; margin: 0; border-radius: 4px; color: var(--muted); }
  .theme label:has(input:checked) { color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 -2px 0 var(--accent); }
  .sitefoot .sf-admin { margin-left: 2px; color: var(--muted); }
}
@media (forced-colors: active) {
  .theme label:has(input:checked) { forced-color-adjust: none; background: SelectedItem; color: SelectedItemText; }
  .theme label:has(input:focus-visible) { outline-color: CanvasText; }
  .sitenav a[aria-current] > span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
}
/* Short screens (a phone on its side, high zoom): the footer ends the page and the header scrolls
   away with it, instead of both staying on screen. The header holds still while the drawer is open. */
@media (max-height: 480px) {
  :root { --foot-total: 0px; }
  html { scroll-padding-top: 8px; }
  .sitefoot { position: static; }
  .sitehead { position: relative; }
  body.menu-open .sitehead { position: sticky; }
}
@media (min-width: 1000px) and (max-height: 480px) { .rail { top: 0; height: 100vh; } }

/* Contents page */
.home { padding-block: 8px 24px; }
.masthead { font-family: var(--f-display); font-weight: 400; font-size: clamp(48px, 9vw, 92px); letter-spacing: .16em; line-height: 1; margin: 12px 0 10px; }
/* The subtitle's size follows the screen down to 11px, which holds it to one line from about
   350px up. Narrower than that, or with larger spacing, it breaks into two even lines; it is never
   hidden. */
.home .sub { font-family: var(--f-ui); color: var(--muted); font-size: clamp(11px, calc((100vw - 32px) / 30.5), 16px); line-height: 1.4; margin: 0 0 24px; text-wrap: balance; }
.home .lede { font-size: 20px; max-width: var(--measure); margin: 0 0 12px; }
.toc { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.toc > li { padding: 16px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 6px; }
@media (min-width: 760px) { .toc > li { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 24px; } }
.toc .ct { display: flex; gap: 12px; font-family: var(--f-display); font-size: 21px; color: var(--ink); text-decoration: none; line-height: 1.25; }
.toc .ct:hover { color: var(--accent); }
.toc .cn { font-family: var(--f-ui); font-size: 14px; padding-top: 4px; }
.toc ul { list-style: none; margin: 0; padding: 4px 0 0; font: 15px/1.35 var(--f-ui); display: grid; gap: 1px; }
.toc ul a { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; color: var(--ink); text-decoration: none; }
.toc ul .tt { min-width: 0; }
.toc ul .ld { flex: 1 1 auto; min-width: 16px; border-bottom: 1px dotted var(--field); transform: translateY(-4px); }
.toc ul .range { flex: none; font-size: 13px; }
.toc ul a:hover .tt, .toc ul a:focus-visible .tt { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.toc ul a:hover .ld { border-bottom-color: var(--accent); }
.range { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }
.notfound { padding-block: 24px; max-width: var(--measure); }
.notfound h1 { font-family: var(--f-display); font-weight: 400; font-size: 40px; margin: 0 0 12px; }

/* Pages assembled from the guide. A section's number links to it in its chapter. */
.extra .chap-head .eyebrow + h1 { margin-top: 4px; }
/* Print, and the two PDFs, on a line of their own under the title. */
.qr-titlerow { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 6px; }
.qr-titlerow h1 { margin: 0; flex: 1 1 auto; min-width: 0; }
.qr-titlerow .print { flex: none; }
.qr-dl { display: flex; align-items: center; gap: 6px; margin: 14px 0 0; font: 14px/1.4 var(--f-ui); color: var(--muted); }
.qr-dl .ico { flex: none; }
.print { display: inline-flex; align-items: center; gap: 7px; font: 500 14px var(--f-ui); color: var(--ink); background: transparent; border: 1px solid var(--field); border-radius: 4px; padding: 6px 12px; cursor: pointer; }
.print:hover { color: var(--accent); border-color: var(--accent); }
.print[hidden] { display: none; }
.qr-sheet h2.group { font-family: var(--f-display); font-weight: 400; font-size: 21px; letter-spacing: .03em; text-transform: none; color: var(--accent); margin: 36px 0 12px; padding-bottom: 5px; border-bottom: 1px solid var(--rule); }
.qr-head + .qr-sheet > .qcol:first-child > .qkeep:first-child > h2.group { margin-top: 0; }
/* A printed side's two columns (see the print rules); on screen the sheet reads as one column. */
.qcol { display: contents; }
/* The Zotero page (csl/README.md): its sections, the Extra lines it gives in code blocks, and tables
   whose first column holds prose. */
.zdoc h3 { font-family: var(--f-display); font-weight: 400; font-size: 21px; letter-spacing: .03em; color: var(--accent); margin: 32px 0 10px; padding-bottom: 5px; border-bottom: 1px solid var(--rule); scroll-margin-top: 16px; }
.zdoc h2.group + h3 { margin-top: 12px; }
.zdoc pre { overflow-x: auto; margin: .4em 0 1.1em; padding: 10px 14px; background: var(--accent-soft); border-radius: 4px; line-height: 1.45; }
.zdoc pre code { font-size: 14px; overflow-wrap: normal; }
.zdoc td:first-child { white-space: normal; }
.zdoc td code { white-space: nowrap; overflow-wrap: normal; }
.zdoc .ex p + p { margin-top: 6px; }
.qx, .qset { margin: 0 0 18px; }
.qx { display: flow-root; }
/* The lines of one set (a note, its short form, its bibliography entry) stay close, though they
   are taken from different sections. */
.qset > .qx { margin-bottom: 3px; }
.qset > .qx:last-child { margin-bottom: 0; }
.qx-src { float: right; margin-left: 16px; font: 500 12px/27px var(--f-ui); font-variant-numeric: tabular-nums; color: var(--muted); }
.qx:has(.qx-lab) .qx-src { line-height: 19px; }
.qx-src a { color: inherit; text-decoration: none; }
.qx-src a:hover { color: var(--accent); text-decoration: underline; }
.qx-lab { margin: 0 0 2px; font: 600 11px/19px var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.qx .ex { margin: 0; }
/* Lines hang. */
.qx .ex p { padding-left: 1.4em; text-indent: -1.4em; overflow-wrap: anywhere; }
.qtab .tw { margin: 2px 0 0; }
.qtab table { font-size: 15px; }
.qtab td:nth-child(3) { white-space: nowrap; }
@media (max-width: 599px) { .qtab table { font-size: 14px; } .qtab th, .qtab td { padding-right: 9px; } }
.qnote p { margin: 0 0 12px; font: 13px/1.45 var(--f-ui); color: var(--muted); }
.rail .paras .q a { color: var(--ink); }

:lang(he), [dir="rtl"] { font-family: "Noto Serif Hebrew", var(--f-body); }
/* Script is never slanted, even inside an italic title (4.9). */
:lang(he), :lang(grc), :lang(cop) { font-style: normal; }
@media (prefers-reduced-motion: no-preference) { html.smooth { scroll-behavior: smooth; } }

/* Print: the text alone, for proofing on paper */
@media print {
  :root[data-theme], :root:not([data-theme]) { --bg: #fff; --page: #fff; --ink: #000; --muted: #444; --rule: #bbb; --accent: #000; --accent-soft: #fff; color-scheme: light; }
  body { font-size: 11pt; }
  .sitehead, .rail, .ptools, .pager, .skip, .sitefoot, .vh, .print, .qr-dl { display: none !important; }
  body { padding-bottom: 0; }
  .shell { display: block; padding: 0; }
  main { padding: 0; }
  .chapter { border: 0; padding: 0; }
  a { color: inherit; text-decoration: none; }
  .para { break-inside: avoid-page; }
  h2.group, .para .ph { break-after: avoid-page; }
  .para .ph { padding-right: 0; }
}
/* Every printed page has half-inch margins. The Quick Reference prints as one sheet, a side to a
   page, in two columns of compact type, 7.27in wide and centered: the width of A4 inside those
   margins, which Letter also holds. A4 has 0.69in more height, which each side leaves empty. The
   columns are a grid of the two the manifest names, not CSS columns, which Safari does not print.
   Safari lays a printed page out at 1.25px to the point, not 4/3, and places its page breaks
   there before it shrinks the page to fit the paper, so a Letter side must stay within
   720pt x 1.25 = 900px, where the other browsers give 960px. site/pdf.mjs checks it. A side never
   breaks across a page, so nothing in it asks to be kept together. */
@page { margin: .5in; }
@media print {
  body.qr { font-size: 8.25pt; line-height: 1.15; }
  body.qr main { width: 7.27in; margin: 0 auto; }
  .qr .chapter { max-width: none; }
  .qr .chapter > * { max-width: none; }
  .qr .chap-head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 9pt; margin: 0 0 5pt; padding-bottom: 3pt; }
  .qr .chap-head h1 { font-size: 12pt; margin: 0; }
  .qr .eyebrow { font-size: 8pt; letter-spacing: .14em; }
  .qr-titlerow { display: contents; }
  .qr-sheet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: .28in; align-items: start; }
  .qcol { display: block; }
  .qr-sheet + .qr-sheet { break-before: page; }
  .qr-sheet h2.group { font-size: 10pt; margin: 5pt 0 2.5pt; padding-bottom: 1.5pt; }
  .qcol > .qkeep:first-child > h2.group { margin-top: 0; }
  .qx, .qset { margin: 0 0 2.5pt; }
  .qset > .qx { margin-bottom: .5pt; }
  .qset > .qx:last-child { margin-bottom: 0; }
  .qx-src, .qx:has(.qx-lab) .qx-src { margin-left: 6pt; font-size: 6.5pt; line-height: 11pt; }
  .qx-lab { margin: 0; font-size: 6.5pt; line-height: 9pt; letter-spacing: .06em; }
  .qx .ex { padding-left: 6pt; border-left-width: 1pt; }
  .qx .ex p { line-height: 1.15; }
  .qx .ex p + p { margin-top: .5pt; }
  .qx .ex p.set { margin-top: 2pt; }
  .qnote p { margin: 0 0 3pt; font-size: 7pt; }
  .qtab .tw { overflow: visible; margin: 0; }
  .qtab table { font-size: 8pt; line-height: 1.15; }
  .qtab th { font-size: 6pt; padding: 0 5pt 1pt 0; }
  .qtab td { padding: .4pt 5pt .4pt 0; }
}