/* The Urantia Book -- reader styles.
   Goudy Old Style has a small x-height and long descenders: it wants a larger
   optical size and more leading than a modern face. */

@font-face { font-family: "UB Goudy"; src: url(/static/fonts/UBGoudy.woff2) format("woff2");
             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "UB Goudy"; src: url(/static/fonts/UBGoudy-Italic.woff2) format("woff2");
             font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --paper: oklch(0.972 0.008 85);
  --ink:   oklch(0.24 0.012 60);
  /* The book's own words, black (Tigran, 2026-10-13): its paragraphs, a
     paper's and a section's titles, a part's page, a 1955 reading.  --ink,
     a very dark brown, stays for everything round them. */
  --text:  #000;
  --faint: oklch(0.55 0.010 70);
  --rule:  oklch(0.88 0.010 80);
  --jesus: oklch(0.44 0.15 25);
  --link:  oklch(0.40 0.09 250);
  --flame: oklch(0.65 0.13 76);    /* the mark's flame (#b9821f), and nothing else */
  /* The search box: a cool field on the warm paper, so it is seen at once. */
  --field: oklch(0.935 0.014 245);
  --field-edge: oklch(0.70 0.045 250);
  /* A card raised over the page: a 1955 reading's (ub.js). */
  --card: oklch(0.995 0.004 85);
  --shade: oklch(0.30 0.02 70 / .16);
  /* Goudy Old Style has a small x-height and long descenders, so it reads a
     full step smaller than its nominal size.  19px here looked like 16px of a
     modern face and wanted browser zoom to be comfortable. */
  --size: clamp(1.3rem, 1.1rem + 0.6vw, 1.55rem);
  /* The site is set 1.4 to the line, and the book's text (p.t) at --lead,
     which Settings' Line spacing sets: 1.25 unless a reader chooses otherwise.
     Both were 1.55, which Tigran found too open, worst on a phone (2026-10-12).
     --dl is how far it is from the 1.55 the gutter was placed for, and moves
     the gutter with the lines. */
  --lead: 1.25;
  --dl: calc(var(--lead) - 1.55);
  /* In ch, so the measure follows the type size instead of staying fixed at a
     pixel width and losing characters per line as the text grows.  `ch` is the
     width of "0", which is narrow in Goudy, so 60ch sets about 68 characters --
     the range this face reads best at. */
  --measure: 60ch;
  /* UB Goudy keeps 0.438em under the baseline for its long descenders (hhea
     960/438), so the middle of its line box stands 0.261em above the baseline,
     and its capitals' middle 0.356em: a word centred in a box sits 0.095em high.
     Chrome sets it a further 0.03em high on average, rounding to whole pixels,
     so a one-line control with a box round it moves its text down by .125em,
     chosen by measuring the rendered Settings pills, Done and Listen at every
     text size: 91% of 72 within half a pixel of the middle, against 70% at
     .095em.  The other typefaces are the device's, near enough centred already. */
  --lift: .125em;
  /* The typefaces Settings offers besides UB Goudy: the device's own, so
     choosing one downloads nothing. */
  --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: oklch(0.185 0.008 70); --ink: oklch(0.90 0.010 85); --text: var(--ink);
    --faint: oklch(0.62 0.010 75);  --rule: oklch(0.30 0.010 75);
    --jesus: oklch(0.70 0.12 28);   --link: oklch(0.74 0.08 250);
    --flame: oklch(0.80 0.12 82);
    --field: oklch(0.255 0.016 250); --field-edge: oklch(0.47 0.045 250);
    --card: oklch(0.235 0.010 70);  --shade: oklch(0 0 0 / .45);
  }
}
:root[data-theme="dark"] {
  --paper: oklch(0.185 0.008 70); --ink: oklch(0.90 0.010 85); --text: var(--ink);
  --faint: oklch(0.62 0.010 75);  --rule: oklch(0.30 0.010 75);
  --jesus: oklch(0.70 0.12 28);   --link: oklch(0.74 0.08 250);
  --flame: oklch(0.80 0.12 82);
  --field: oklch(0.255 0.016 250); --field-edge: oklch(0.47 0.045 250);
  --card: oklch(0.235 0.010 70);  --shade: oklch(0 0 0 / .45);
}
:root[data-theme="dark"] body, @media (prefers-color-scheme: dark) { }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Hidden means hidden, whatever display a rule gives the element (a label in
   the dialog is display: block). */
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: "UB Goudy", Georgia, "Times New Roman", serif;
  /* --line is the leading of the text in hand, which a 1955 ring reads
     (a.fn::after): this, or the book's own (p.t). */
  font-size: var(--size); --line: 1.4; line-height: var(--line);
  font-variant-ligatures: common-ligatures contextual;
  font-variant-numeric: lining-nums;
  font-synthesis: none;             /* never fake a weight or a slant */
  text-rendering: optimizeLegibility;
}
@media (prefers-color-scheme: dark) { body { letter-spacing: 0.004em; } }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* ---- chrome ------------------------------------------------------------ */
.top { display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap;
       padding: .8rem 1rem; border-bottom: 1px solid var(--rule); }
.brand { font-weight: 400; font-size: 1.2rem; text-decoration: none; letter-spacing: .02em; }
/* The mark, inline so the name keeps the baseline the header aligns on. */
.brand .logo { display: inline-block; width: 1.55em; height: 1.55em; margin-right: .4em;
               vertical-align: -.36em; }
.top nav { margin-left: auto; display: flex; gap: 1rem; align-items: baseline; }
.top nav a { font-size: .92rem; text-decoration: none; color: var(--faint); }
.top nav a:hover, .top .mode { color: var(--ink); }
/* The search box is the first thing a visitor should find, so it is a field
   of its own tone with a magnifier, not a hairline on the paper (2026-10-09:
   it blended into the background).  --field is a token per theme: blue mixed
   into the warm paper in oklch passes through green on the way. */
.find { flex: 1 1 14rem; max-width: 26rem; position: relative; }
.find input { width: 100%; font: inherit; font-size: 1rem; padding: .38rem .9rem .38rem 2.1rem;
  background: var(--field); color: inherit;
  border: 1px solid var(--field-edge); border-radius: 999px; }
.find input::placeholder { color: var(--faint); opacity: 1; }
.find input:hover { border-color: var(--link); }
.find input:focus { background: var(--paper); border-color: var(--link); outline: 0;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--link) 22%, transparent); }
.find .glass { position: absolute; left: .75rem; top: 50%; width: .95rem; height: .95rem;
  transform: translateY(-50%); pointer-events: none; color: var(--link); }
.find .glass * { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
/* ◐ is not in UB Goudy, so it is set in the system face on purpose rather
   than left to the browser's fallback (build/fonts.py ELSEWHERE). */
.theme { background: none; border: 0; color: var(--faint); cursor: pointer; font-size: 1rem;
  font-family: system-ui, sans-serif; }
/* Settings: a gear, drawn, not a glyph -- U+2699 turns into an emoji on some
   systems.  It was a row of three sliders until Tigran asked for the usual
   gear (2026-10-14). */
.gear { background: none; border: 0; padding: 0; color: var(--faint); cursor: pointer;
        align-self: center; }
.gear svg { width: 1.1rem; height: 1.1rem; display: block; overflow: visible; }
.gear path, .gear circle { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.gear:hover, .theme:hover, .top .offline:hover { color: var(--ink); }
/* Work offline's icon, at the header's corner: a cloud, struck through while
   offline; a check in it while a copy is kept, an arrow while one downloads,
   and the flame's dot when an update is waiting.  One drawing, its parts shown
   by data-net and data-have (ub.js, static/offline.js). */
.top .offline { background: none; border: 0; padding: 0; color: var(--faint); cursor: pointer;
                align-self: center; }
.top .offline svg { width: 1.3rem; height: 1.04rem; display: block; overflow: visible; }
.top .offline path { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round;
                     stroke-linejoin: round; }
.top .offline .cloud { fill: var(--paper); }
.top .offline :is(.tick, .down, .slash, .dot) { display: none; }
.top .offline[data-net="on"]:is([data-have="kept"], [data-have="stale"]) .tick,
.top .offline[data-net="on"][data-have="busy"] .down,
.top .offline[data-net="off"] .slash { display: inline; }
/* The dot offline too: the copy being read is out of date (Tigran, 2026-10-14). */
.top .offline[data-have="stale"] .dot { display: inline; fill: var(--flame);
                                        stroke: var(--paper); stroke-width: 1.2; }

footer { border-top: 1px solid var(--rule); margin-top: 4rem; padding: 1.2rem 1rem;
  font-size: .88rem; color: var(--faint); }
footer p { margin: .2rem 0; }

/* ---- the reader -------------------------------------------------------- */
/* The gap is the gutter the paragraph references stand in: 118:10.13 is 3.3rem. */
.reader { display: grid; grid-template-columns: 16rem minmax(0,1fr); gap: 4.4rem;
          padding: 2rem 1.2rem 0; max-width: 92rem; margin: 0 auto; }
/* The left rail is the whole book (templates/_rail.html), everything closed but
   the paper being read.  Each level stands in by the chevron's width, so a
   title lines up under its parent's and a wrapped one hangs. */
.rail { font-size: .95rem; line-height: 1.45; position: sticky; top: 1rem;
        align-self: start; max-height: 90vh; overflow: auto; --chev: 1.1em; }
.rail ol { list-style: none; margin: 0; padding: 0; }
.rail details > ol { padding-left: var(--chev); }
/* A section has no chevron, but keeps its place: otherwise section 2 of the
   paper being read stands level with Paper 2 below it. */
.rail li:not(.part) > details > ol { padding-left: calc(2 * var(--chev)); }
.rail li { margin: .18rem 0; }
.rail a { color: var(--faint); text-decoration: none; }
.rail .here > a, .rail .here > details > summary a, .rail a:hover { color: var(--ink); }
.rail summary { list-style: none; cursor: pointer;
                padding-left: var(--chev); text-indent: calc(-1 * var(--chev)); }
.rail summary::-webkit-details-marker { display: none; }
/* Drawn, not a glyph: two sides of a square, turned to point right, and down
   when open.  Its box and margins come to --chev. */
.rail summary::before { content: ""; display: inline-block; width: .34em; height: .34em;
  margin: 0 .5em .1em .26em; border: solid var(--faint); border-width: 0 1.5px 1.5px 0;
  transform: rotate(-45deg); transition: transform .12s; }
.rail details[open] > summary::before { transform: rotate(45deg); }
.rail summary:hover::before { border-color: var(--ink); }
/* The top level -- the Foreword and the four parts -- is set in ink. */
.rail .part > details > summary, .rail > ol > li > details > summary a { color: var(--ink); }
.rail .part { margin-top: .5rem; }
/* A paper whose sections come from /rail/N opens only with JavaScript; without
   it the title is a link and nothing more (base.html sets .js). */
:root:not(.js) .rail .lazy > details > summary { cursor: auto; }
:root:not(.js) .rail .lazy > details > summary::before { visibility: hidden; }
/* The button at the rail's head folds it (templates/_rail.html, ub.js): away to
   the left on a wide screen, up to this one line on a phone (below, and the
   phone's block).  Its chevron is drawn as the summaries' are, at their size,
   so on a phone it stands in their column.  It stays at the top of the rail as
   the rail scrolls, on the paper, and is not drawn without JavaScript, which
   alone can work it. */
.railfold { display: flex; align-items: baseline; width: 100%; padding: 0 0 .3rem;
  font: inherit; color: var(--faint); background: var(--paper); border: 0; cursor: pointer;
  position: sticky; top: 0; z-index: 1; text-align: left;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.railfold span { font-size: .8em; letter-spacing: .12em; text-transform: uppercase; }
/* The chevron of every fold button (the rail's, the index's, a box's), pointing
   down: the way an open summary's does. */
:is(.railfold, .indexfold, .afold)::before { content: ""; display: inline-block; flex: none;
  width: .34em; height: .34em; margin: 0 .5em .1em .26em; border: solid currentColor;
  border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .12s; }
@media (hover: hover) { .railfold:hover { color: var(--ink); } }
:root:not(.js) .railfold { display: none; }
@media (min-width: 62.01rem) {
  /* Open: the word, and the chevron at the row's end pointing left, the way
     the rail goes. */
  .railfold { justify-content: space-between; }
  .railfold::before { order: 1; transform: rotate(135deg); margin: 0 .3em .1em .5em; }
}
/* The index folds as the rail does, to the right (templates/_fold.html): the
   margin, the box of what a whole section cites, and a reading path's captions.
   Its button is its only control, kept as data-margin (settings.py KEPT).  On a
   wide screen it stands at the margin's head, level with the rail's, and stays
   there as the page scrolls, on the paper, which hides the entries passing
   under it as the rail's hides the rail's: the paper reaches up to the top of
   the window.  On a phone it is a line at the page's head, and each box of
   entries folds to a line of its own, opened by itself for that page (.shown).
   Neither is drawn without JavaScript. */
.marginhead, .afold { display: none; }
:root.js .marginhead { display: block; }
.indexfold, .afold { align-items: baseline; font: inherit; color: var(--faint);
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.indexfold { display: flex; font-size: .95rem; background: var(--paper); padding: 0 0 .3rem; }
.indexfold span { font-size: .8em; letter-spacing: .12em; text-transform: uppercase; }
@media (hover: hover) { :is(.indexfold, .afold):hover { color: var(--ink); } }
@media (min-width: 62.01rem) {
  :root.js .marginhead { position: sticky; top: 1rem; z-index: 3; height: 0; }
  .indexfold { position: absolute; top: 0; right: -.2rem; padding-left: .6rem;
               box-shadow: 0 -1rem 0 var(--paper); }
  .indexfold::before { order: 1; transform: rotate(-45deg); margin: 0 0 .1em .5em; }
}

article { min-width: 0; position: relative; }      /* the 1955 card's frame */
/* A part's own page (part.html), as the book's divider sets it: centred, the
   title larger than a paper's, the sponsors' note in italic beneath. */
.partpage { width: 100%; max-width: 40rem; margin: 0 auto; padding-top: 3rem; }
.partpage header { text-align: center; }
.partpage :is(h1, .sponsor) { color: var(--text); }
.partpage h1 { font-size: 2.6rem; margin: .5rem 0 1.6rem; }
.partpage .papernum { font-size: 1.25rem; }       /* as PAPER N is to its title */
.partpage .sponsor { font-style: italic; margin: 0 auto; max-width: 32em; text-wrap: balance; }
.partpage .transport { justify-content: flex-end; max-width: none; margin-top: 3.5rem; }
/* A paper's head is centred over the text column, as the book sets it: the
   paper's number, title and author, the section's title, and the Listen button
   under them.  It is as wide as the column: the measure here, and on a wide
   screen what the margin leaves, if less (below). */
.papertop { margin-bottom: 1.6rem; max-width: var(--measure); text-align: center; }
.papertop :is(h1, h2) { text-wrap: balance; color: var(--text); }
.papertop .listenrow { justify-content: center; }
.papernum { font-size: 1rem; letter-spacing: .12em; text-transform: uppercase;
            color: var(--faint); margin: 0; }
h1 { font-size: 2.1rem; font-weight: 400; line-height: 1.15; margin: .2rem 0 .3rem; }
h2 { font-size: 1.3rem; font-weight: 400; margin: 1.6rem 0 .6rem;
     font-variant-caps: small-caps; letter-spacing: .03em; }
.author { color: var(--faint); font-style: italic; margin: 0 0 .4rem; }

/* Each paragraph emits TWO grid cells -- text and apparatus.  The browser
   aligns them for free, a paragraph with nine chips simply makes its row
   taller, and there is no JS position-syncing to break on resize. */
.grid { display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(0, 26ch);
        gap: 0 2rem; }
p.t { margin: 0 0 .85rem; text-wrap: pretty; max-width: var(--measure); color: var(--text);
      --line: var(--lead); line-height: var(--line); }
/* Justified, as the book is set, and hyphenated where the book hyphenates: the
   paragraph carries a soft hyphen (U+00AD) at every break the press allows
   (build/hyphen.py), and `manual` breaks there and nowhere else.  The hyphen
   drawn is the hyphen-minus, as TeX's.  A browser fills each line greedily and
   has no penalty for two hyphens running; Safari alone can be told so. */
p.t { text-align: justify; hyphens: manual; -webkit-hyphens: manual;
      hyphenate-character: "-"; -webkit-hyphenate-character: "-";
      -webkit-hyphenate-limit-lines: 1; }
/* A paper opens as the book opens it, the Foreword too: its first letter
   dropped two lines, and nothing after it set otherwise (the press's
   \lettrine{T}{}, ubook.sty).  A pseudo-element, so a copy takes the letter
   as text.  Chrome, Edge and Safari; Firefox sets it as the rest.  Not the
   device faces' font-size-adjust: under it Chrome (154) sets the letter at
   the text's size, at the start of the second line.  The bottom margin lets
   Goudy's J (ten papers) hang its tail into the space above the third line,
   as the press does, instead of pushing that line in; at -.3em every letter
   still clears the second line, and the tail the third, at every spacing. */
p.t.opening::first-letter { -webkit-initial-letter: 2; initial-letter: 2;
      font-size-adjust: none; margin: 0 .06em -.3em 0; }
/* A verse, one to a line (48:6, 122:9, 144:5), is a line, not a paragraph to
   fill: when one wraps, its first line keeps its own spaces. */
p.t.verse { text-align: start; }
/* Ragged right.  The soft hyphens are in the page either way: `none` is what
   silences them, and `manual`, the initial value, would break at them still.
   Not the heading, which this would outrank and un-centre. */
:root[data-align="ragged"] p.t:not(.head) { text-align: start; hyphens: none; -webkit-hyphens: none; }
/* A heading within the text, 0:12.10 ACKNOWLEDGMENT, centred as a section's
   title is (paragraph.heading). */
p.t.head { text-align: center; }
/* \pc: a 1955 blank-line group starts here.  It was extra space above the
   paragraph, which nobody could see; now a pilcrow before the first word, as the
   British edition prints it.  The typeface's own ¶ (U+00B6), so it is UB Goudy's
   with Goudy and the device's with the other faces, and it prints, as a drawn
   mask did not.  Generated content of an empty span: no character is in the
   text, so copying the paragraph still returns it exactly, and the "" after the
   slash keeps a screen reader from reading it out. */
.pcm::before { content: "¶"; content: "¶" / ""; color: var(--faint); margin-right: .3em; }
/* A separator between two paragraphs, its stars as printed: `* * *`, or the five
   of \separatorline set wider, as the press sets them (paragraph.sep_before).  A
   row of its own across the grid, laid on the grid's own columns, so the stars
   stand centred over the text, not over the text and the margin.  Generated
   content, like the pilcrow: copying the paragraphs around it never takes the
   stars, and the "" after the slash keeps a screen reader to the role. */
.stars { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid;
         margin: 0 0 .85rem; }
.stars::before { content: attr(data-stars); content: attr(data-stars) / "";
                 grid-column: 1; text-align: center; line-height: var(--lead); }
.stars[data-stars="* * * * *"]::before { word-spacing: .45em; }
/* A block of verse (paragraph.verse_start): the psalm in 48:6, the song in 122:9,
   the prayers of 144:3 and 144:5.  Set as the book sets it: indented as one,
   a blank line above and below, its lines close, a line's wrapped part hanging
   further in, and a line the press sets in (\hsetoff, the Lord's Prayer's
   second lines) further still -- measured off the press's own page, in --size,
   not em, so that the gutter's smaller face keeps the same lengths.  Ragged,
   not justified: a browser justifies one short line at a time, and badly.
   Each line keeps its reference in the gutter, which has no second line to
   hold the play button, so the button stands in the indent, before the line. */
.verse { --vin: calc(var(--size) * 1.05); --hang: calc(var(--size) * .7);
         margin: .6rem 0 1.45rem; }
.verse + .a { margin-top: .6rem; }
.verse p.t { margin: 0; padding: 0 calc(var(--size) * .5) 0 calc(var(--vin) + var(--hang));
             text-indent: calc(-1 * var(--hang)); }
.verse p.t.setoff { text-indent: calc(var(--size) * .6 - var(--hang)); }
.verse .num { margin-left: calc(-4rem - var(--vin) - var(--hang)); }
.verse :is(.num, .playp, .pg) { text-indent: 0; }     /* not the line's hang */
.verse p.t > .playp { left: calc(var(--vin) - 1.3rem);
                      top: calc((var(--line) * var(--size) - 1.15rem) / 2); }
/* The 1955 page stands under the reference, so with it shown the lines part a
   little, or it would run into the next line's reference. */
:root[data-pages="true"] .verse p.t { margin-bottom: .6rem; }
/* A range of lines in a block, /144:3.9-10.  A paragraph's tint reaches past it
   by a shadow, which the space between paragraphs takes up; lines of verse
   touch, so two shadows would lie over each other and darken the strip between
   them (Tigran, 2026-10-13).  So a run of lines is one band, drawn behind each
   line edge to edge, which only its first line takes up and its last down. */
.verse p.t.hit { background: none; box-shadow: none; border-radius: 0; isolation: isolate; }
.verse p.t.hit::before { content: ""; position: absolute; z-index: -1; inset: 0 -.35rem;
  background: color-mix(in oklch, var(--link) 12%, transparent); }
.verse p.t.hit:not(.hit + .hit)::before { top: -.35rem; border-radius: 3px 3px 0 0; }
.verse p.t.hit:not(:has(+ .hit))::before { bottom: -.35rem; border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px; }
/* The entries citing a block's lines, each line's under its reference. */
.a .at { margin: .7rem 0 0; font-size: .78rem; line-height: 1.2; }
.a .at:first-child { margin-top: .3rem; }
.a .at a { color: var(--faint); text-decoration: none; }
.a .at a:hover { color: var(--ink); }
/* Scrolled to on arrival (ub.js): a little of the paragraph before shows above it. */
p.t.hit, p.t.now, .tree li:target { scroll-margin-top: 3rem; }
p.t.hit { background: color-mix(in oklch, var(--link) 12%, transparent);
          border-radius: 3px; box-shadow: 0 0 0 .35rem color-mix(in oklch, var(--link) 12%, transparent); }
/* The paragraph's full reference, so the reader always knows which one this is;
   Settings can turn it off.  The gutter was placed for a line spacing of 1.55.
   At another, the first baseline moves by half the change in a text line, and
   the reference's own by half the change in its smaller one: --ref is the
   difference, which keeps the reference on the first line. */
p.t { --ref: calc(var(--dl) * (var(--size) - .78rem) / 2); }
.num { float: left; margin-left: -4rem; width: 3.5rem; text-align: right; white-space: nowrap;
       font-size: .78rem; color: var(--faint); text-decoration: none;
       position: relative; top: calc(.35rem + var(--ref)); }
.num:hover { color: var(--ink); }
/* The 1955 page, only if a reader asks (Settings): where the paragraph begins
   in the first printing.  Drawn from data-pg, as the pilcrow is drawn, so
   copying a paragraph never takes it along.  In the gutter it stands on the
   reference's second line with the play button beside it, which moves up to
   meet it: the gutter stays two lines tall, or a one-line paragraph's would run
   into the next one's.  Both move with the reference, and its second line with
   the line spacing; without the reference the page stands on the first line. */
.pg { display: none; }
.pg::before { content: "(" attr(data-pg) ")"; }
:root[data-pages="true"] .pg { display: block; position: absolute; right: calc(100% + 1.75rem);
       top: calc(1.45rem + var(--ref) + var(--dl) * .78rem);
       white-space: nowrap; font-size: .72rem; color: var(--faint); }
:root[data-pages="true"] .playp { top: calc(1.35rem + var(--ref) + var(--dl) * .78rem); }
:root[data-pages="true"][data-paranum="off"] .pg {
       top: calc(.45rem + var(--dl) * (var(--size) - .72rem) / 2); }

.jesus { color: var(--jesus); }

/* Settings (ubsite/settings.py), set on <html> before first paint. */
:root[data-redletter="off"] .jesus { color: inherit; }
:root[data-paranum="off"] .num { display: none; }
:root[data-pilcrow="off"] p.t .pcm { display: none; }
:root[data-notes="off"] :is(a.fn, .notes, .pop) { display: none; }
:root[data-margin="off"] .grid { grid-template-columns: minmax(0, var(--measure)); }
/* Text size scales the root, so everything set in rem follows, as with the
   browser's zoom.  Standard is 112.5% (settings.py); "largest" was the step
   above "larger" until 2026-10-14, and is its size still. */
:root { font-size: 112.5%; }
:root[data-size="smaller"] { font-size: 100%; }
:root:is([data-size="larger"], [data-size="largest"]) { font-size: 125%; }
/* Line spacing: the book's text (p.t) and a 1955 reading's card and endnote,
   which are read as the text is, wherever they open; never the site around
   them, the lists, search or the margin (Tigran, 2026-10-12: "only to the text,
   not to the whole site's UI").  The space between paragraphs stays too.
   Tighter is the printed book's own, 10 on 11 points.  At 1.05 the closest
   letters of two lines, a parenthesis under a parenthesis, still keep .06em
   apart; a 1955 reading's ring comes down to keep clear of the line above
   (a.fn::after). */
:root[data-lead="tightest"] { --lead: 1.05; }
:root[data-lead="tighter"]  { --lead: 1.1; }
:root[data-lead="looser"]   { --lead: 1.45; }
/* A modern face has a larger x-height than Goudy, which --size makes up for:
   measured at 100px, Goudy's "x" stands 43px, a system serif's 47, a sans's 54.
   font-size-adjust scales whichever face the device supplies to Goudy's 0.43,
   so the typeface changes the letters and Text size alone changes the size.
   Small capitals may be synthesised there: these faces have none of their own. */
:root[data-face="serif"] body { font-family: var(--serif); font-size-adjust: .43;
                                font-synthesis: small-caps; }
:root[data-face="sans"] body  { font-family: var(--sans); font-size-adjust: .43;
                                font-synthesis: small-caps; }
/* Their figures are wider for their letters than Goudy's, so 60ch held 64
   characters to a line where Goudy holds 58: a narrower measure keeps the line. */
:root:is([data-face="serif"], [data-face="sans"]) { --measure: 54ch; --lift: 0em; }
/* Width: Full.  No frame and no measure: the rail is wide enough that a paper's
   title stands on one line (the longest, 9's, is 50 characters), the text takes
   what the margin leaves, and lists take as many columns as fit.  The rail's
   width is fixed by the window, not by its content, so that opening a paper with
   a long title never moves the text.  The columns only where the phone layout
   (max-width: 62rem, below) has not already made one. */
:root[data-width="full"] .reader { max-width: none; }
@media (min-width: 62.01rem) {
  /* The text column is the measure, or what the margin's 26ch and the gap leave;
     the head above it is as wide, so that it is centred over the text. */
  :root:not([data-margin="off"]) .papertop { max-width: min(var(--measure), 100% - 26ch - 2rem); }
  :root[data-width="full"]:not([data-margin="off"]) .papertop { max-width: calc(100% - 26ch - 2rem); }
  :root[data-width="full"] .reader { grid-template-columns: clamp(16rem, 20vw, 24rem) minmax(0, 1fr); }
  :root[data-width="full"] .grid { grid-template-columns: minmax(0, 1fr) minmax(0, 26ch); }
  :root[data-width="full"][data-margin="off"] .grid { grid-template-columns: minmax(0, 1fr); }
}
/* The rail folded away: no column at all, and the text takes the rest.  The
   gap stays, being the gutter the references stand in, and the chevron, which
   points back the way the rail went, stands at its outer edge, level with the
   header's mark: the widest reference (118:10.10) reaches 3.8rem into it of
   4.4.  A 1955 page, if shown, can be wider than the gutter (2094.10 is 4.7rem),
   so then the chevron is given .9rem of its own.  Its box is no wider than it,
   and clear, so that nothing is hidden as it scrolls past.  Measured, the frame
   gives up what the rail did, so the page stays centred in the window.  After
   Full's columns, so as to win over them. */
@media (min-width: 62.01rem) {
  :root[data-rail="folded"] .reader { grid-template-columns: 0 minmax(0, 1fr);
                                      max-width: calc(92rem - 16rem); }
  :root[data-rail="folded"][data-pages="true"] .reader { grid-template-columns: .9rem minmax(0, 1fr); }
  :root[data-rail="folded"][data-width="full"] .reader { max-width: none; }
  :root[data-rail="folded"] .rail { overflow: visible; }
  :root[data-rail="folded"] .rail > ol, :root[data-rail="folded"] .railfold span { display: none; }
  :root[data-rail="folded"] .railfold { width: .8rem; margin-left: -.2rem; padding: 0 0 .9rem;
                                        background: none; }
  :root[data-rail="folded"] .railfold::before { transform: rotate(-45deg); margin: 0 0 .1em; }
}
/* The index folded away: the margin and what stands with it are gone, and the
   text takes their room but for 2rem kept at its right, where the chevron
   stands, pointing back the way the index went, level with the header's last
   icon.
   Measured, the frame gives up what the index did, as for the rail, so the page
   stays centred.  A section page's frame is .reader, a reading path's .path. */
@media (min-width: 62.01rem) {
  :root[data-margin="off"] :is(.a, .blanket, .path .row > .cites) { display: none; }
  :root[data-margin="off"] .indexfold { right: -2.2rem; width: .8rem; padding: 0 0 .9rem;
                                        justify-content: flex-end; background: none; box-shadow: none; }
  :root[data-margin="off"] .indexfold span { display: none; }
  :root[data-margin="off"] .indexfold::before { transform: rotate(135deg); margin: 0 0 .1em; }
  :root[data-margin="off"] .reader > article:has(> .marginhead) { padding-right: 2rem; }
  :root[data-margin="off"]:not([data-width="full"]) .reader:has(> article > .marginhead) {
         max-width: calc(92rem - 26ch); }
  :root[data-margin="off"][data-rail="folded"]:not([data-width="full"]) .reader:has(> article > .marginhead) {
         max-width: calc(92rem - 16rem - 26ch); }
  :root[data-margin="off"] .path { max-width: calc(4.4rem + var(--measure) + 2rem + 2.4rem);
                                   padding-right: 3.2rem; }
  :root[data-margin="off"][data-width="full"] .path { max-width: none; }
  :root[data-margin="off"] :is(.path .row, details.gap > summary, button.foldup) {
         grid-template-columns: minmax(0, var(--measure)); }
  :root[data-margin="off"][data-width="full"] :is(.path .row, details.gap > summary, button.foldup) {
         grid-template-columns: minmax(0, 1fr); }
}
:root[data-width="full"] :is(p.t, .papertop, .blanket, .pager, .transport, .prose) { max-width: none; }
:root[data-width="full"] .blanket ul { columns: 16rem; }
:root[data-width="full"] .applist { columns: 24rem; }
/* A superscript (28,012th, a card's "11th edition") raised above its line's
   box pushed that line apart from the one above when the lines were close: of
   no height, it cannot. */
sup, sub { line-height: 0; }
.mark { font-variant-numeric: lining-nums; }
.sc { font-variant-caps: small-caps; }
.supplied { font-style: italic; }
.nobreak { white-space: nowrap; }

/* A dot-leader row is the book's pseudo-table: "Superuniverses .... 7".  Its
   words (.lab) and its figure (.fig, which begins with the leader) are a flex
   line of their own, .leadrow (section.html), and the paragraph around it is a
   paragraph like any other: its reference and play button stand where every
   other paragraph's do.  A row too long for its line breaks before the figure,
   which takes its dots along: "One universe (100 constellations)", then
   ".... 10,000,000 worlds".  A label squeezed beside its figure would wrap,
   and leave a gap the width of its longest line.  Words that do wrap are a
   table's: ragged, unhyphenated.  The leader is DRAWN, never typed -- the text
   is "Superuniverses 7", and literal dots copy-paste as garbage. */
.leadrow { display: flex; flex-wrap: wrap; align-items: baseline;
           text-align: start; hyphens: none; -webkit-hyphens: none; }
.leadrow > .fig { display: flex; align-items: baseline; flex: 1 0 auto; white-space: nowrap; }
.leader { display: inline-block; flex: 1; min-width: 2rem; margin: 0 .35rem;
  border-bottom: 1px dotted var(--faint); transform: translateY(-.28em); }

/* A 1955 reading's mark is drawn, for the same reason: a small ring above the
   words that changed.  The link is padded to a finger's size and pulled back
   by as much, so the words around it do not move.  Filled while its card is
   open.
   The ring's top stands 1.03em above its baseline, in the line above's
   descenders, which reach .207em below that line's (UB Goudy's g).  So when the
   lines are close it comes down, as far as keeps it .05em, about a pixel, clear
   of the deepest of them: not at all at 1.45, by .24em at 1.05, where its foot
   stands about at the height of a lowercase letter (Tigran, 2026-10-12).
   It is no box in the line.  A browser may break a line before an inline-block
   wherever it stands, and eight rings stood alone at the start of a line, apart
   from the words they mark ("en route", 30:3.12).  So the ring is an inline of
   no font size, a word joiner (U+2060) that draws nothing and that no line may
   break beside, and its padding and border make the circle; it keeps to its
   word, and the line breaks before the word instead.  Its sizes are in --ring,
   the text's em, kept as a length (@property) because the ring's own em is 0.
   The link is an inline too, with no padding below, so that its box ends where
   the inline-block it was ended and the card (ub.js place()) opens where it did.
   A copy takes neither: both are drawn by CSS. */
@property --ring { syntax: "<length>"; inherits: true; initial-value: 0px; }
a.fn { display: inline; padding: .45em .3em 0; margin: 0 -.3em; line-height: 0; --ring: 1em;
       text-decoration: none; color: var(--link); }
a.fn::after { content: "\2060"; position: relative; font-size: 0;
              top: calc(var(--ring) * (-.855 + max(0, 1.29 - var(--line))));
              padding: calc(var(--ring) * .11); margin-left: calc(var(--ring) * .05);
              border: calc(var(--ring) * .065) solid currentColor; border-radius: 50%; }
a.fn.on::after { background: currentColor; }
@media (hover: hover) { a.fn:hover::after { background: currentColor; } }

.a { font-size: 1rem; line-height: 1.45; color: var(--faint); }
.chips { list-style: none; margin: .25rem 0 0; padding: 0; }
.chips li { margin: 0 0 .3rem; }
.chips a { color: var(--faint); text-decoration: none; display: block;
  border-left: 2px solid var(--rule); padding-left: .5rem; }
.chips a:hover { color: var(--ink); border-left-color: var(--link); }
/* An appendix entry: led by its appendix's name, in small caps. */
.app .lbl { font-variant-caps: small-caps; letter-spacing: .04em; }
.blanket .app { color: var(--faint); }
/* The 1955 readings (section.html): the section's endnotes without JavaScript
   and in print; with it, hidden, and each opened as a card at its ring (ub.js),
   which carries the same words. */
.notes { border-top: 1px solid var(--rule); margin: 2rem 0 0; padding-top: .7rem;
         max-width: var(--measure); font-size: 1rem; line-height: var(--lead); }
.notes h3 { margin: 0 0 .6rem; font-size: .82rem; font-weight: 400; font-variant-caps: small-caps;
            letter-spacing: .06em; color: var(--faint); }
.js .notes { display: none; }
.note { margin: 0 0 1rem; color: var(--text); }
:is(.note, .pop) p { margin: 0; }
:is(.note, .pop) p + p { margin-top: .5rem; }
:is(.note, .pop) .lbl { font-variant-caps: small-caps; letter-spacing: .04em; color: var(--link);
                        text-decoration: none; margin-right: .3em; }
/* The words the committee changed, as it underlines them. */
:is(.note, .pop) .chg { color: inherit; background: color-mix(in oklch, var(--flame) 32%, transparent);
                        border-radius: 2px; padding: 0 .1em; }
:is(.note, .pop) .dec { font-variant-caps: small-caps; letter-spacing: .04em; }
:is(.note, .pop) .why { font-size: .95em; }
:is(.note, .pop) .src { font-family: var(--sans); font-size: .78rem; color: var(--faint); }
:is(.note, .pop) .src a { color: var(--faint); }
/* The card: under the line, a pointer to the ring, scrolling with the text. */
.pop { position: absolute; z-index: 5; width: min(25rem, calc(100% - 1rem));
       font-size: 1.05rem; line-height: var(--lead); color: var(--text); font-variant-numeric: lining-nums;
       background: var(--card); border: 1px solid color-mix(in oklch, var(--ink) 22%, transparent);
       border-radius: 8px; box-shadow: 0 .6rem 2rem var(--shade), 0 .1rem .3rem var(--shade); }
.pop:focus { outline: none; }
.pop .body { padding: .85rem 1rem .8rem; max-height: min(55vh, 28rem); overflow-y: auto;
             overscroll-behavior: contain; }
.pop .then { padding-right: 1.6rem; }
.pop .at { display: none; }                     /* the card stands at its paragraph */
.pop .lbl { pointer-events: none; }
.pop .src { border-top: 1px solid var(--rule); padding-top: .45rem; margin-top: .7rem; }
.pop .arrow { position: absolute; top: -7px; width: 12px; height: 12px; background: var(--card);
              border: solid color-mix(in oklch, var(--ink) 22%, transparent); border-width: 1px 0 0 1px;
              transform: rotate(45deg); }
.pop .x { position: absolute; top: .35rem; right: .35rem; width: 1.9rem; height: 1.9rem; border: 0;
          border-radius: 50%; background: transparent; color: var(--faint); cursor: pointer;
          font: 1.2rem/1 var(--sans); }
@media (hover: hover) {
  .pop .x:hover { background: color-mix(in oklch, var(--faint) 15%, transparent); color: var(--ink); }
}

.blanket { border: 1px solid var(--rule); border-radius: 4px; padding: .7rem .9rem;
  margin: 0 0 1.6rem; font-size: .9rem; max-width: var(--measure); }
.blanket h3 { margin: 0 0 .4rem; font-size: .82rem; font-variant-caps: small-caps;
  letter-spacing: .06em; color: var(--faint); font-weight: 400; }
.blanket ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.4rem; }
/* One entry must not be split down the middle by the column break. */
.blanket li { break-inside: avoid; margin-bottom: .2rem; }
.blanket a { color: var(--faint); text-decoration: none; }
.blanket a:hover { color: var(--ink); }

.pager { display: flex; margin: 2.5rem 0 1rem; max-width: var(--measure); font-size: .95rem; }
.pager .next { margin-left: auto; }
/* A section's transport bar: ⏪ ⏮ ⏭ ⏩, centred over the text column, each
   a round target a thumb's width, blue as a link that goes somewhere is
   (section.html).  At the book's ends an icon stands greyed in its place. */
.transport { display: flex; justify-content: center; gap: .5rem; margin: 2.5rem 0 1rem;
  max-width: var(--measure); }
.transport :is(a, .off) { display: grid; place-items: center; width: 2.6rem; height: 2.6rem;
  border-radius: 50%; color: var(--link); -webkit-tap-highlight-color: transparent; }
.transport svg { width: 1.15rem; height: 1.15rem; fill: currentColor; display: block; }
.transport .off { color: var(--rule); }
.transport a:active { background: color-mix(in oklch, var(--link) 18%, transparent); }
@media (hover: hover) {
  .transport a:hover { background: color-mix(in oklch, var(--link) 10%, transparent); }
}

/* ---- listening (listen.js) --------------------------------------------- */
button svg { width: 1em; height: 1em; fill: currentColor; display: block; }
button svg .stroke { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.listenrow { display: flex; align-items: center; gap: .7rem; margin: -.1rem 0 1.1rem;
             font-size: .9rem; color: var(--faint); }
button.listen { display: inline-flex; align-items: center; gap: .45rem; font: inherit;
  font-size: .95rem; color: var(--link); background: none; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 999px; padding: .2rem .85rem .2rem .65rem; }

/* Boson's acknowledgment for the AI voice, which its licence requires beside the audio. */
.listenrow .credit { color: inherit; text-decoration-color: var(--rule); }
.listenrow .credit:hover { color: var(--link); }
button.listen svg { width: .8em; height: .8em; }
button.listen span { position: relative; top: var(--lift); }
/* A paragraph's own play button sits under its number, always there and faint
   like the number, full only on hover or while its paragraph is read.  It was
   once shown on hover alone, which a phone or tablet does not have (Tigran,
   2026-10-08).  It is outside the stored text and has no text of its own, so
   copying a paragraph still returns its words.  At another line spacing it moves
   as far as the next paragraph's reference does after a paragraph of one line,
   a verse or a leader row: a text line's change, and the reference's. */
p.t { position: relative; }
.playp { position: absolute; left: -1.6rem; width: 1.15rem; height: 1.15rem;
  top: calc(2.3rem + var(--dl) * var(--size) + var(--ref));
  padding: .22rem; border: 0; border-radius: 50%; background: none; color: var(--link);
  cursor: pointer; opacity: .45; transition: opacity .15s; }
.playp:focus-visible, p.t.now .playp { opacity: 1; }
:root[data-voice="off"] :is(.listenrow, .playp) { display: none; }
/* What is being read, tinted as a search hit is; listen.js clears .hit when
   playing starts, so only one thing on the page is marked. */
p.t.now, .papertop :is(h1, h2).now { background: color-mix(in oklch, var(--link) 11%, transparent);
  border-radius: 3px; box-shadow: 0 0 0 .35rem color-mix(in oklch, var(--link) 11%, transparent);
  transition: background .3s, box-shadow .3s; }
.player { position: fixed; z-index: 10; left: 50%; transform: translateX(-50%);
  bottom: max(1rem, env(safe-area-inset-bottom)); max-width: calc(100vw - 2rem);
  display: flex; align-items: center; gap: .15rem; padding: .3rem .45rem;
  background: var(--paper); color: var(--ink); border: 1px solid var(--rule);
  border-radius: 999px; box-shadow: 0 6px 24px rgb(0 0 0 / .18); font-size: .92rem; }
/* No tap highlight and no double-tap zoom: ⏮ is pressed twice for the paragraph
   before. */
.player button { display: grid; place-items: center; padding: .4rem; border: 0;
  border-radius: 50%; background: none; color: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.player button:active { background: color-mix(in oklch, var(--link) 18%, transparent); }
.player .toggle { width: 2.3rem; height: 2.3rem; color: var(--paper); background: var(--link); }
.player .toggle:active { background: color-mix(in oklch, var(--link) 80%, var(--ink)); }
.player .where { min-width: 0; padding: 0 .55rem; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; color: var(--faint); }
/* The reference being read: a tap brings its paragraph into view. */
.player .where .at { display: inline; padding: 0; border-radius: 0; font: inherit;
  color: var(--link); }
.player .where .at:active { background: none; text-decoration: underline; }
/* × is not in the UB Goudy subset -- it is not in the book -- so the speed is
   set in the system face, like ◐. */
.player .rate { min-width: 2.9rem; border-radius: 3px; font: .8rem system-ui, sans-serif;
  color: var(--faint); }
/* The speeds, a small list rising from the speed. */
.player .ratebox { position: relative; }
.player .speeds { position: absolute; bottom: calc(100% + .7rem); left: 50%;
  transform: translateX(-50%); display: flex; flex-direction: column; padding: .25rem;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 6px;
  box-shadow: 0 6px 24px rgb(0 0 0 / .18); }
.player .speeds button { display: block; min-width: 3.6rem; padding: .3rem .7rem;
  border-radius: 3px; font: .85rem system-ui, sans-serif; color: var(--ink); text-align: center; }
.player .speeds [aria-checked="true"] { color: var(--paper); background: var(--link); }
.player .onward { white-space: nowrap; text-decoration: none; padding: 0 .5rem; }
.player .close { color: var(--faint); }
/* A touch screen keeps :hover on whatever was tapped last, so ⏮ and ⏭ stayed
   lit after a tap on Android.  Hover is drawn only where there is a pointer that
   hovers; a tap shows by :active instead. */
@media (hover: hover) {
  button.listen:hover { border-color: var(--link); }
  p.t:hover .playp { opacity: 1; }
  .playp:hover { background: color-mix(in oklch, var(--link) 14%, transparent); }
  .player button:hover { background: color-mix(in oklch, var(--link) 12%, transparent); }
  .player .toggle:hover { background: color-mix(in oklch, var(--link) 85%, var(--ink)); }
  .player .where .at:hover { background: none; text-decoration: underline; }
}
body.listening footer { padding-bottom: 5.5rem; }

/* ---- Settings ---------------------------------------------------------- */
dialog.settings { width: min(29rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem);
  overflow-y: auto; padding: 0; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 6px;
  box-shadow: 0 12px 40px rgb(0 0 0 / .28); }
dialog.settings::backdrop { background: rgb(0 0 0 / .35); }
dialog.settings form { display: flex; flex-direction: column; padding: 0 1.4rem 1rem; }
/* The title, ↺ and ×, in view however far the dialog scrolls: the dialog is
   the scroll box, and on a phone it is taller than the screen. */
dialog.settings .bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center;
  gap: .6rem; margin: 0 -1.4rem; padding: .75rem .8rem .45rem 1.4rem; background: var(--paper); }
dialog.settings h2 { margin: 0 auto 0 0; }
dialog.settings .bar button { display: grid; place-items: center; width: 2.2rem; height: 2.2rem;
  padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--faint);
  cursor: pointer; }
dialog.settings .bar svg { width: 1.1rem; height: 1.1rem; overflow: visible; }
dialog.settings .bar path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round;
  stroke-linejoin: round; }
/* Greyed while every setting is its default: there is nothing to restore. */
dialog.settings .reset:disabled { opacity: .35; cursor: default; }
@media (hover: hover) {
  dialog.settings .bar button:not(:disabled):hover {
    background: color-mix(in oklch, var(--faint) 15%, transparent); color: var(--ink); }
}
dialog.settings fieldset { border: 0; border-top: 1px solid var(--rule); margin: 0;
  padding: .55rem 0 .7rem; }
dialog.settings legend { padding: 0 .4rem 0 0; font-size: .82rem; letter-spacing: .06em;
  font-variant-caps: small-caps; color: var(--faint); }
dialog.settings label { display: block; padding: .16rem 0; font-size: 1.02rem; cursor: pointer; }
dialog.settings small { color: var(--faint); font-size: .85rem; }
dialog.settings input { margin: 0 .45rem 0 0; accent-color: var(--link); }
dialog.settings select { margin-left: .5rem; font: .9rem system-ui, sans-serif; color: inherit;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 3px; }
dialog.settings .kept { margin: .3rem 0 .7rem; font-size: .85rem; color: var(--faint); }
dialog.settings .row { display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; padding: .2rem 0; font-size: 1.02rem; }
dialog.settings .sub { margin: .35rem 0 .05rem; font-size: 1.02rem; }
dialog.settings .face-serif { font-family: var(--serif); font-size-adjust: .43; }
dialog.settings .face-sans { font-family: var(--sans); font-size-adjust: .43; }
dialog.settings label.face-serif, dialog.settings label.face-sans { padding-left: 0; }
dialog.settings :is(.face-goudy, .face-serif, .face-sans) small { font-family: "UB Goudy", Georgia, serif; }
dialog.settings .pcm { margin: 0 0 0 .1em; }
/* Greyed while the setting it needs is off: Speed, with Listening off. */
dialog.settings .idle { opacity: .45; cursor: default; }
/* Which of the browser's voices, only while that voice is chosen. */
:root:not([data-voice="browser"]) dialog.settings .set-bvoice { display: none; }
dialog.settings .set-bvoice select { max-width: 16rem; }
/* A row of radio buttons drawn as one control: Theme, Text size. */
.seg { display: inline-flex; flex-shrink: 0; border: 1px solid var(--rule); border-radius: 999px;
  overflow: hidden; }
dialog.settings .seg label { display: grid; place-items: center; min-width: 2.4rem;
  padding: .12rem .7rem; font-size: .92rem; line-height: 1.5; }
.seg label + label { border-left: 1px solid var(--rule); }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.seg label:hover { background: color-mix(in oklch, var(--link) 10%, transparent); }
.seg label:has(input:checked) { color: var(--paper); background: var(--link); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--link); outline-offset: -3px; }
.seg span { position: relative; top: var(--lift); }      /* in its own size: the A's differ */
.seg .a2 span { font-size: .92rem; }
.seg .a3 span { font-size: 1.08rem; } .seg .a4 span { font-size: 1.25rem; }
/* Line spacing: three bars as far apart as the choice's lines, the gaps drawn
   wider than the leadings differ, or the four would look alike.  A drawing, so
   not lifted as a letter is. */
.seg :is(.sp1, .sp2, .sp3, .sp4) span { top: 0; width: 1.1rem; height: .8rem;
  background: linear-gradient(currentColor 0 0) top / 100% 1.5px no-repeat,
              linear-gradient(currentColor 0 0) center / 100% 1.5px no-repeat,
              linear-gradient(currentColor 0 0) bottom / 100% 1.5px no-repeat; }
.seg .sp1 span { height: .5rem; } .seg .sp2 span { height: .65rem; }
.seg .sp4 span { height: .95rem; }
/* As tall as a row of words, Theme's: a drawing has no line of its own. */
dialog.settings .seg :is(.sp1, .sp2, .sp3, .sp4) { min-height: calc(.92rem * 1.5 + .24rem); }

/* Work offline's menu, opened by its icon (static/offline.js): online or
   offline, the switch, what the copy is, and installing the site as an app.
   A popover, in the top layer, placed by ub.js under the icon in the page's
   coordinates, so that it scrolls away with the header. */
.offmenu { position: absolute; inset: auto; margin: 0; width: min(22rem, calc(100vw - 2rem));
  padding: .7rem 1rem .85rem; color: var(--ink); font-size: 1rem; line-height: 1.4;
  background: var(--card); border: 1px solid color-mix(in oklch, var(--ink) 22%, transparent);
  border-radius: 8px; box-shadow: 0 .6rem 2rem var(--shade), 0 .1rem .3rem var(--shade); }
.offmenu .net { margin: 0 0 .45rem; font-size: .82rem; letter-spacing: .06em;
  font-variant-caps: small-caps; color: var(--faint); }
.offmenu .what { margin: 0; font-size: 1.02rem; }
.offmenu small { color: var(--faint); font-size: .85rem; }
.offmenu .state { margin: .45rem 0 0; font-size: .85rem; color: var(--faint); }
.offmenu .state:empty { display: none; }
.offmenu .state button { margin-top: .3rem; }
.offmenu .install { margin: .65rem 0 0; padding-top: .6rem; border-top: 1px solid var(--rule); }
.offmenu button { padding: .05rem .55rem; font: inherit; font-size: .85rem;
  color: var(--link); background: none; border: 1px solid var(--rule); border-radius: 3px; cursor: pointer; }
/* Each label in a span of its own (offline.js), set level with its box as
   the Settings pills are (--lift): Goudy, centred, sits high. */
.offmenu button > span { position: relative; top: var(--lift); }
/* Removing the copy is apart from the rest, and quieter. */
.offmenu .remove { margin: .5rem 0 0; }
.offmenu button.drop { padding: 0; border: 0; color: var(--faint); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 2px; }
/* What's new (static/offline.js): a popup over the menu, which stays open
   beneath it, centred where the browser puts a popover, and scrolling within
   with its title row in view, as Settings does. */
.offnews { width: min(30rem, calc(100vw - 2rem)); max-height: min(38rem, calc(100dvh - 3rem));
  overflow-y: auto; padding: 0 1.2rem 1rem; color: var(--ink); font-size: .95rem; line-height: 1.4;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 6px;
  box-shadow: 0 12px 40px rgb(0 0 0 / .28); }
.offnews .bar { position: sticky; top: 0; display: flex; align-items: center; margin: 0 -1.2rem;
  padding: .7rem .6rem .3rem 1.2rem; background: var(--paper); }
.offnews h2 { margin: 0 auto 0 0; font-size: 1.15rem; }
.offnews .x { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; padding: 0; border: 0;
  border-radius: 50%; color: var(--faint); }
.offnews .x svg { width: 1.1rem; height: 1.1rem; }
.offnews .x path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
@media (hover: hover) {
  .offnews .x:hover { background: color-mix(in oklch, var(--faint) 15%, transparent); color: var(--ink); }
}
.offnews .since { margin: 0 0 .2rem; color: var(--faint); font-size: .88rem; }
.offnews h3 { margin: .8rem 0 .2rem; font-size: .82rem; font-weight: 400; letter-spacing: .06em;
  font-variant-caps: small-caps; color: var(--faint); }
.offnews ul { margin: 0; padding-left: 1.1rem; }
.offnews li { margin: .2rem 0; }
.offnews .earlier, .offnews .days > p { margin: .8rem 0 0; color: var(--faint); font-size: .88rem; }
/* A page the offline copy answered (static/sw.js) says so, and of when. */
footer[data-copy]::before { content: "This page is from the offline copy of " attr(data-copy) ".";
  display: block; margin-bottom: .3rem; }

/* ---- prose pages ------------------------------------------------------- */
.prose { max-width: 62ch; margin: 0 auto; padding: 2rem 1rem 0; }
.concept { max-width: 86ch; }
.lead { font-size: 1.05rem; }
.cta { display: inline-block; margin: .4rem 1rem .4rem 0; }
.counts { display: flex; gap: 2rem; flex-wrap: wrap; margin: 1.6rem 0; }
.counts dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); }
.counts dd { margin: 0; font-size: 1.3rem; }
.toc, .parts, .heads { list-style: none; padding: 0; }
.toc li { display: flex; gap: .8rem; padding: .18rem 0; border-bottom: 1px solid var(--rule); }
/* The number in a column of its own, set to the right as a book's contents
   sets it: 3ch holds 196 in any face, the book's lining figures being
   tabular. A title too long for its line hangs clear of the number. */
.toc a { flex: 1; text-decoration: none; display: grid;
  grid-template-columns: 3ch 1fr; column-gap: .65em; }
.toc b { text-align: right; color: var(--faint); font-weight: 400; }
.apps a { grid-template-columns: 1em 1fr; }
.apps b { text-align: left; }
.toc i { color: var(--faint); font-size: .9rem; }
.letters { display: flex; flex-wrap: wrap; gap: .5rem; }
.letters a { border: 1px solid var(--rule); border-radius: 3px; padding: .5rem .7rem;
  text-decoration: none; text-align: center; min-width: 3.2rem; }
.letters span { display: block; font-size: .82rem; color: var(--faint); }
.heads li { padding: .12rem 0; }
.heads span { color: var(--faint); font-size: .85rem; }
.readpath { margin: -.6rem 0 1.2rem; font-size: 1.05rem; color: var(--faint); }
.tree { list-style: none; padding: 0; }
.tree li { padding: .1rem 0; }
.tree li { padding: .12rem 0; text-indent: -1.4em; padding-left: 1.4em; }
.tree .l2 { margin-left: 1.5em; } .tree .l3 { margin-left: 3em; }
.tree .l4 { margin-left: 4.5em; } .tree .l5 { margin-left: 6em; }
/* A search hit on a subentry lands here: /i/<headword>#<anchor>. */
.tree li:target { background: color-mix(in oklch, var(--link) 12%, transparent);
  border-radius: 3px; box-shadow: 0 0 0 .3rem color-mix(in oklch, var(--link) 12%, transparent); }
.near, .xrefs { list-style: none; padding: 0; }
.near span { color: var(--faint); font-size: .88rem; }
.results section { margin: 1.6rem 0; }
.results h2 span { color: var(--faint); font-size: .9rem; }
.hits { list-style: none; padding: 0; }
.hits li { padding: .22rem 0; border-bottom: 1px solid var(--rule); }
.hits mark { background: color-mix(in oklch, var(--link) 22%, transparent); color: inherit; }
.none { color: var(--faint); font-style: italic; }
.more { margin: .6rem 0 0; }
.results .pager { margin: 1.2rem 0 0; }
.didyou { color: var(--faint); }
/* The 1955 readings among the results: only when Settings asks (off by
   default), and never while the readings themselves are off.  Each hit is its
   reading, today's words around its ring, and the committee's reasons where
   the search found something in them. */
.by1955 { display: none; }
:root[data-notesearch="true"]:not([data-notes="off"]) .by1955 { display: block; }
.old .lbl { font-variant-caps: small-caps; letter-spacing: .04em; color: var(--faint); margin-right: .2em; }
.old .then { margin: 0 .6rem 0 .3rem; }
.old .today { color: var(--faint); }
.old .dec { font-variant-caps: small-caps; letter-spacing: .04em; color: var(--faint);
            font-size: .92em; margin-left: .4rem; }
.lists h2 a { color: inherit; text-decoration: none; }
.lists h2 a:hover { color: var(--link); text-decoration: underline; }
.old .reason { display: block; font-size: .92em; color: var(--faint); margin: .1rem 0 .1rem 1.2rem; }
.old .nw { white-space: nowrap; }
/* A list's rings are the text's (a.fn) and open the same card, framed by the
   list's <main> (ub.js).  The List of 1955 readings keeps them, and their
   cards, with the readings turned off in the text: it was asked for. */
main.results { position: relative; }
:root[data-notes="off"] .lists a.fn { display: inline; }
:root[data-notes="off"] .lists .pop { display: block; }

/* ---- appendices -------------------------------------------------------- */
.listed { color: var(--faint); font-size: 1.02rem; margin: -.2rem 0 .3rem; }
.listed a { color: inherit; text-decoration: none; }
.listed a:hover { color: var(--link); text-decoration: underline; }
.appnav { font-size: .9rem; color: var(--faint); margin: 0 0 1.2rem; }
/* Blue, unlike the header and the rail: a short row read once on arriving, whose job is
   to go somewhere, like "next ›". A letter is padded to be big enough for a thumb. */
.appnav a { text-decoration: none; padding: 0 .1rem; }
.appnav a:hover { text-decoration: underline; }
.appnav .l { padding: .25rem .4rem; }
.appnav [aria-current] { color: var(--ink); }
.appendix { max-width: 80ch; }
.jump { display: flex; flex-wrap: wrap; gap: .2rem .7rem; margin: 0 0 1.2rem; }
.jump a { text-decoration: none; }
/* B-F: short lines, two columns where there is room for them, as printed. */
.applist { list-style: none; padding: 0; columns: 2 24rem; column-gap: 2.5rem; }
.applist li { break-inside: avoid; padding: .1rem 0 .1rem 1.2em; text-indent: -1.2em; }
.applist a.hw, .events a.hw { text-decoration: none; }
.applist a.hw:hover, .events a.hw:hover { text-decoration: underline; }
/* A: the date in a column of its own, its months and events beside it. */
.bands { margin: 0 0 1.8rem; }
.bands a { padding: .45rem .8rem; }
.bands b { font-size: 1.05rem; font-weight: 400; }
.year { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); column-gap: 1.5rem;
  border-top: 1px solid var(--rule); padding: .45rem 0 .5rem; }
/* The year stays in view beside its events, so that an event reached by a link
   -- 26 A.D. has seventeen -- is never read without its date. */
.year h2 { margin: 0; font-size: inherit; line-height: inherit; font-variant-caps: normal;
  letter-spacing: 0; position: sticky; top: 1rem; align-self: start;
  /* A little bolder than its events, as the printed index sets its years.  UB
     Goudy has no bold, so the glyph's own outline is stroked: the way the 2019
     printing made all its bold, and the one weight faked on purpose here
     (body: font-synthesis: none).  .02em puts 20 on a stem of 71/1000, chosen
     by eye against .012-.03em; a stroke changes no advance, so nothing reflows. */
  -webkit-text-stroke: .02em currentColor; }
.events { list-style: none; margin: 0; padding: 0; }
.events li { padding: .08rem 0 .08rem 1.2em; text-indent: -1.2em; }
.events li.month { padding: 0; text-indent: 0; }
.month h3 { margin: .3rem 0 .05rem; font-size: .95rem; font-weight: 400;
  font-variant-caps: small-caps; letter-spacing: .04em; color: var(--faint); }
.month .events { margin-left: 1em; }
.applist li:target, .events li:target {
  background: color-mix(in oklch, var(--link) 12%, transparent); border-radius: 3px;
  box-shadow: 0 0 0 .3rem color-mix(in oklch, var(--link) 12%, transparent); }
.applist li, .events li, .year { scroll-margin-top: 3rem; }
@media (max-width: 40rem) {
  .year { grid-template-columns: minmax(0, 1fr); }
  .year h2 { margin-bottom: .2rem; position: static; }
}

/* ---- phone ------------------------------------------------------------- */
@media (max-width: 62rem) {
  .reader { grid-template-columns: 1fr; gap: 0; }
  .rail { position: static; max-height: none; border-bottom: 1px solid var(--rule);
          padding-bottom: .8rem; margin-bottom: 1.4rem; }
  /* Folded on every page, to its one line, a tap's height: opened, for that
     page only (ub.js .shown), its chevron points down, as an open summary's. */
  .railfold { position: static; padding: .35rem 0; }
  :root.js .rail:not(.shown) > ol { display: none; }
  :root.js .rail:not(.shown) { padding-bottom: .2rem; }
  .rail:not(.shown) .railfold::before { transform: rotate(-45deg); }
  /* The index's line, and each box of entries folded to a line saying how many
     it holds, its chevron pointing right until it is opened. */
  :root.js .marginhead { margin: 0 0 1rem; }
  .indexfold { width: 100%; padding: .35rem 0; }
  :root[data-margin="off"] .indexfold::before { transform: rotate(-45deg); }
  :root[data-margin="off"] .afold { display: flex; width: 100%; font-size: .9rem; padding: .15rem 0; }
  :root[data-margin="off"] :is(.a, .blanket):not(.shown) > :not(.afold),
  :root[data-margin="off"] .path .row:not(.shown) > .cites { display: none; }
  :is(.a, .blanket, .path .row):not(.shown) > .afold::before { transform: rotate(-45deg); }
  :root[data-margin="off"] .blanket:not(.shown) { padding-block: .35rem; }
  :root[data-margin="off"] .path .afold { border-left: 2px solid var(--rule); padding-left: .5rem;
                                          margin-bottom: .3rem; }
  /* Never wider than the screen, whatever one paragraph asks: a `1fr` track
     grows to its widest item's least width, and one long dot-leader row once
     pushed all of 15:2 off the side. */
  .grid { grid-template-columns: minmax(0, 1fr); }
  /* No gutter on a phone: the reference and the play button under it stand at
     the start of the paragraph, as a drop capital does, and the text runs
     beside them for two lines and then the full width.  The reference is as wide
     as the section's longest (--refw characters, section.html), so the text
     stands at one indent all down the page.  The button is set in the
     reference's font and size, so that 1ch is the same in both. */
  .num { float: left; clear: left; width: calc(var(--refw, 9) * 1ch + .4rem); margin: 0;
         text-align: left; top: calc(.2rem + var(--ref)); }
  /* At another line spacing the button keeps its place against the end of the
     first line: the reference above it moves by its own line's change, and the
     margin by the rest of a text line's, which is twice --ref. */
  .playp { position: static; float: left; clear: left; display: grid; place-items: center;
           font-family: inherit; font-size: .78rem;
           /* as wide as .num: the lines align */
           margin: calc(.15rem + 2 * var(--ref)) calc(var(--refw, 9) * 1ch + .4rem - .9rem) 0 -.25rem; }
  .playp svg { width: .83rem; height: .83rem; }
  :root[data-paranum="off"] .playp { margin-right: .8rem; }
  /* On a phone it floats under the reference and the play button, a third
     line of the stack beside the paragraph's first words. */
  :root[data-pages="true"] .pg { position: relative; right: auto; float: left; clear: left;
         width: calc(var(--refw, 9) * 1ch + .4rem); top: .2rem; font-size: .78rem; }
  :root[data-pages="true"][data-paranum="off"] .pg { top: .2rem; }
  /* The heading in the text is centred on the column, not on what the stack of
     reference and play button floated beside it leaves: an empty float as wide
     as that stack balances it on the right.  Without references the stack is
     the button alone, if there is one. */
  p.t.head::before { content: ""; float: right; height: 1px; font-size: .78rem;
                     width: calc(var(--refw, 9) * 1ch + .4rem); }
  :root[data-paranum="off"] p.t.head::before { width: 0; }
  :root[data-paranum="off"]:not([data-voice="off"]) p.t.head:has(> .playp)::before { width: 1.7rem; }
  .a:not(:empty) { margin: -.4rem 0 1rem 1rem; border-left: 2px solid var(--rule);
                   padding-left: .7rem; }
  /* A line of verse would carry its reference as a drop capital, two lines
     tall.  So only a block's first line shows it, as the book numbers only a
     block's first line: with its play button and its 1955 page, in a line of
     their own above the block.  The other lines are still there to land on. */
  .verse p.t:not(:first-child) :is(.num, .playp, .pg) { display: none; }
  .verse .num { margin: 0; }
  :root:not([data-paranum="off"]) .verse p.t:first-child { margin-top: 1.5rem; }
  :root:not([data-paranum="off"]) .verse p.t:first-child :is(.num, .playp, .pg) {
         position: absolute; float: none; margin: 0; width: auto; right: auto; }
  :root:not([data-paranum="off"]) .verse p.t:first-child .num { top: -1.25rem; left: var(--vin); }
  :root:not([data-paranum="off"]) .verse p.t:first-child > .playp {
         top: -1.45rem; left: calc(var(--vin) + (var(--refw, 9) + 1) * 1ch); }
  :root:not([data-paranum="off"])[data-pages="true"] .verse p.t:first-child .pg {
         top: -1.25rem; left: calc(var(--vin) + (var(--refw, 9) + 1) * 1ch + 1.6rem); }
  :root[data-pages="true"] .verse p.t { margin-bottom: 0; }
  .verse + .a:not(:empty) { margin-top: -.4rem; }
  /* A paper's opening paragraph gives its corner to the dropped letter: the
     stack floated there would take the first two lines' start, and the second
     line would run into the letter.  So its reference, play button and 1955
     page stand in a line of their own above it, as a verse block's do; the
     book prints no number at a paper's first paragraph either. */
  p.t.opening { margin-top: 1.5rem; }
  p.t.opening :is(.num, .playp, .pg) { position: absolute; float: none; margin: 0;
         width: auto; right: auto; }
  p.t.opening .num { top: -1.25rem; left: 0; }
  p.t.opening > .playp { top: -1.45rem; left: calc((var(--refw, 9) + 1) * 1ch); }
  :root[data-pages="true"] p.t.opening .pg { top: -1.25rem;
         left: calc((var(--refw, 9) + 1) * 1ch + 1.6rem); }
  :root[data-paranum="off"] p.t.opening > .playp { left: -.25rem; }
  :root[data-paranum="off"][data-pages="true"] p.t.opening .pg { left: 1.6rem; }
  :root[data-paranum="off"][data-voice="off"][data-pages="true"] p.t.opening .pg { left: 0; }
  .blanket ul { columns: 1; }
}

/* ---- print ------------------------------------------------------------- */
@media print {
  @page { margin: 22mm 20mm; }
  .top, footer, .rail, .pager, .transport, .listenrow, .playp, .player, dialog, .offmenu { display: none; }
  :root.js .marginhead, :root[data-margin="off"] .afold,
  :root[data-margin="off"] :is(.a, .blanket, .path .row > .cites) { display: none; }
  body { font-size: 11pt; background: #fff; color: #000; }
  .reader, .grid { display: block; }
  p.t { orphans: 3; widows: 3; max-width: none; }
  /* A margin column does not survive a page break, so the apparatus prints as
     notes after its paragraph instead. */
  .a { font-size: 8.5pt; margin: .2rem 0 .8rem 1.5rem; color: #444; }
  .jesus { print-color-adjust: exact; }
  .js .notes { display: block; }
  .pop { display: none; }
  a { color: inherit; text-decoration: none; }
}

.hint { color: var(--faint); font-size: 1.02rem; margin: -.2rem 0 1.2rem; }
.heads-hit a { font-size: 1.05rem; }
.heads-hit span { color: var(--faint); font-size: .88rem; margin-left: .5rem; }
.near span { cursor: help; }

/* A citation in an index entry is a place in the book, not a string. */
a.cit { color: var(--faint); text-decoration: none; white-space: nowrap; }
a.cit:hover { color: var(--link); text-decoration: underline; }
.tree i, .hits i { font-style: italic; }

/* ---- reading paths (path.html) ----------------------------------------- */
/* A headword's citations read as one text, /i/<slug>/read.  The paragraphs are
   the reader's own (p.t, .num, .verse), so every Setting holds for them; each
   stands in a row with what brings it in beside it, in the margin's column on
   a wide screen and above it on a phone.  The gutter is the reader's. */
.path { max-width: calc(4.4rem + var(--measure) + 2rem + 26ch + 2.4rem); margin: 0 auto;
        padding: 2rem 1.2rem 0 calc(1.2rem + 4.4rem); }
.path .row, details.gap > summary, button.foldup {
        display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(0, 26ch); gap: 0 2rem; }
.path .row > :not(.cites) { grid-column: 1; grid-row: 1; min-width: 0; }
.path .row > .cites { grid-column: 2; grid-row: 1; }
.pathtop { max-width: var(--measure); margin-bottom: 1.6rem; }
.pathtop .kicker { font-size: 1rem; letter-spacing: .12em; text-transform: uppercase;
                   color: var(--faint); margin: 0; }
.pathtop h1 a { color: inherit; text-decoration: none; }
.pathtop h1 a:hover { color: var(--link); }
.pathtop .stat { color: var(--faint); font-size: .95rem; margin: 0 0 .9rem; }
.pathtop .desc { font-size: 1.02rem; margin: .9rem 0 0; }
/* Book order or By theme: two links, the one being read on the field. */
.orders { display: inline-flex; border: 1px solid var(--field-edge); border-radius: 999px;
          overflow: hidden; font-size: .95rem; line-height: 1.2; }
.orders a { padding: .35rem 1rem .3rem; text-decoration: none; }
.orders a + a { border-left: 1px solid var(--field-edge); }
.orders a[aria-current] { background: var(--field); color: var(--ink); }
.orders a:not([aria-current]):hover { text-decoration: underline; }
.orders span { position: relative; top: var(--lift); }
/* The entries bringing a paragraph in, as the margin index draws its chips. */
.path .cites { list-style: none; margin: .25rem 0 0; padding: 0; font-size: 1rem;
               line-height: 1.45; color: var(--faint); }
.path .cites li { margin: 0 0 .3rem; }
.path .cites a { color: var(--faint); text-decoration: none; display: block;
                 border-left: 2px solid var(--rule); padding-left: .5rem; }
.path .cites a:hover { color: var(--ink); border-left-color: var(--link); }
.path .cites .at { margin: .5rem 0 .15rem; font-size: .78rem; line-height: 1.2; }
.path .cites .at:first-child { margin-top: .3rem; }
.path .cites .cites { margin: 0; }
/* Running heads: where in the book the next paragraphs stand. */
.path .rh { margin-top: 2.1rem; }
.path .rh p { margin: 0; }
.path .rh a { color: inherit; text-decoration: none; }
.path .rh a:hover { color: var(--link); text-decoration: underline; }
.rh-paper { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.path .rh .rh-sec { font-size: 1.2rem; font-variant-caps: small-caps; letter-spacing: .03em;
                    margin: .1rem 0 .7rem; color: var(--text); }
/* A paragraph drawn above, in one line, and a paper cited whole. */
.path .again p.t { text-align: start; color: var(--faint); font-size: .95rem; }
.path .again .num { font-size: .82rem; top: .1rem; }
.signpost { margin: 0 0 1rem; padding: .5rem .8rem; border: 1px solid var(--rule);
            border-radius: 4px; font-size: 1.02rem; }
.path p.t[id] { scroll-margin-top: 3rem; }
.path p.t:target { background: color-mix(in oklch, var(--link) 12%, transparent); border-radius: 3px;
                   box-shadow: 0 0 0 .35rem color-mix(in oklch, var(--link) 12%, transparent); }
/* What a section has between two paragraphs drawn, folded.  Its rows are the
   text's own; the line that shows or folds them stands in the text column,
   above them and, once they are open, below them too (ub.js).  Set off from
   the path by measure alone, a tenth narrower, never by tone (Tigran,
   2026-10-13: "I hate reading greyed out text"). */
details.gap { margin: -.25rem 0 .9rem; }
details.gap > summary { list-style: none; cursor: pointer; }
details.gap > summary::-webkit-details-marker { display: none; }
details.gap[open] > summary { margin-bottom: .7rem; }
.gl { display: flex; align-items: center; gap: .7rem; color: var(--faint); min-width: 0; }
.gl::before, .gl::after { content: ""; flex: 1 1 1rem; border-top: 1px dashed var(--rule); }
.gl .lbl { font-size: .86rem; text-align: center; }
.gl .act { color: var(--link); }
.gl .act::after { content: "show"; }
details.gap[open] .gl .act::after { content: "fold away"; }
summary:hover .gl, .foldup:hover .gl { color: var(--ink); }
summary:hover .act, .foldup:hover .act { text-decoration: underline; }
button.foldup { width: 100%; font: inherit; line-height: inherit; color: inherit; text-align: inherit;
                background: none; border: 0; padding: 0; margin: .15rem 0 .2rem; cursor: pointer; }
:root:not(.js) button.foldup { display: none; }
.gap .row:not(.again) > :is(p.t, .verse) { width: 90%; }
/* By theme: its chapters, listed and headed. */
.chapters { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
            padding: .6rem 0 .4rem; margin: 0 0 1rem; max-width: calc(var(--measure) + 2rem + 26ch); }
.chapters ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2rem; font-size: 1rem; }
.chapters li { break-inside: avoid; margin: 0 0 .2rem; }
.chapters a { text-decoration: none; }
.chapters a:hover { text-decoration: underline; }
.path .count { color: var(--faint); font-size: .85rem; font-variant-numeric: lining-nums tabular-nums;
               white-space: nowrap; }
h2.chap { font-size: 1.9rem; line-height: 1.2; font-variant-caps: normal; letter-spacing: 0;
          margin: 3rem 0 0; padding-top: 1rem; border-top: 1px solid var(--rule);
          max-width: var(--measure); text-wrap: balance; }
h2.chap a { color: inherit; text-decoration: none; }
h2.chap a:hover { color: var(--link); }
h2.chap .own { color: var(--faint); font-size: .9rem; font-style: italic; }
h2.chap .count { font-size: .95rem; }
.chapters + h2.chap { border-top: 0; padding-top: 0; margin-top: 1.6rem; }
h2.chap + .rh { margin-top: 1rem; }
.path .onward { margin-top: 3.5rem; border-top: 1px solid var(--rule); max-width: var(--measure); }
.path .onward h2 { margin: 1rem 0 .4rem; }
.path .onward p { margin: 0 0 .4rem; }
:root[data-width="full"] .path { max-width: none; }
:root[data-width="full"] :is(.path .row, details.gap > summary, button.foldup) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 26ch); }
@media (max-width: 62rem) {
  .path { padding: 1.4rem 1.2rem 0; }
  .path .row, details.gap > summary, button.foldup { display: block; }
  .path .row > .cites { margin: 0 0 .3rem; font-size: .92rem; }
  .path .again .num { top: .05rem; }
  .chapters ol { columns: 1; }
}
@media print {
  .path .row, details.gap > summary { display: block; }
  .orders, button.foldup { display: none; }
}

/* ---- front page -------------------------------------------------------- */
/* The mark, inline from static/favicon.svg (app.py _mark), coloured by the theme. */
.logo .book { fill: var(--link); }
.logo .edge { fill: none; stroke: var(--link); }
.logo .flame { fill: var(--flame); }
.masthead { display: flex; align-items: flex-start; gap: 1.4rem; }
.masthead > div { min-width: 0; }
.masthead .logo { flex: none; width: 7.5rem; height: 7.5rem; margin-top: -.4rem; }
@media (max-width: 34rem) {
  /* At the end of a section, "Next" needs the room "End of the section" had. */
  .player:has(.onward:not([hidden])) .where { display: none; }
  .masthead { flex-direction: column; gap: .4rem; }
  .masthead .logo { width: 4.5rem; height: 4.5rem; margin-top: 0; }
}
.front h1 { font-size: 2.6rem; margin-bottom: .6rem; }
.front .lead { font-size: 1.12rem; margin-bottom: 2.2rem; }
.front h2 { margin-top: 2.6rem; }
.front-toc { list-style: none; padding: 0; margin: 0; }
.front-toc li { border-top: 1px solid var(--rule); }
.front-toc li:last-child { border-bottom: 1px solid var(--rule); }
.front-toc a { display: flex; align-items: baseline; gap: 1rem;
  padding: .7rem .2rem; text-decoration: none; color: inherit; }
.front-toc a:hover { background: color-mix(in oklch, var(--link) 7%, transparent); }
.front-toc .lbl { flex: 1; font-size: 1.25rem; }
.front-toc a:hover .lbl { color: var(--link); }
.front-toc .range { color: var(--faint); font-size: .9rem; white-space: nowrap; }
.front-toc .foreword .lbl { font-variant-caps: small-caps; letter-spacing: .04em; }
.ways { list-style: none; padding: 0; }
.ways li { padding: .3rem 0; }
.ways code { font-family: inherit; font-style: italic; color: var(--faint); }