/* 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);
  --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);
  /* 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);
  --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;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: oklch(0.185 0.008 70); --ink: oklch(0.90 0.010 85);
    --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);
  }
}
:root[data-theme="dark"] {
  --paper: oklch(0.185 0.008 70); --ink: oklch(0.90 0.010 85);
  --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);
}
:root[data-theme="dark"] body, @media (prefers-color-scheme: dark) { }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: "UB Goudy", Georgia, "Times New Roman", serif;
  font-size: var(--size); line-height: var(--lead);
  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; }
.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); }
.find { flex: 1 1 14rem; max-width: 26rem; }
.find input { width: 100%; font: inherit; font-size: 1rem; padding: .3rem .5rem;
  background: transparent; color: inherit; border: 1px solid var(--rule); border-radius: 3px; }
.theme { background: none; border: 0; color: var(--faint); cursor: pointer; font-size: 1rem; }

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 -------------------------------------------------------- */
.reader { display: grid; grid-template-columns: 16rem minmax(0,1fr); gap: 2.4rem;
          padding: 2rem 1.2rem 0; max-width: 92rem; margin: 0 auto; }
.rail { font-size: .95rem; line-height: 1.45; position: sticky; top: 1rem;
        align-self: start; max-height: 90vh; overflow: auto; }
.rail ol { list-style: none; margin: .4rem 0 0; padding: 0; }
.rail li { margin: .18rem 0; }
.rail a { color: var(--faint); text-decoration: none; }
.rail .here > a, .rail a:hover { color: var(--ink); }
.railhead a { color: var(--ink); text-decoration: none; }

article { min-width: 0; }
.papertop { margin-bottom: 1.6rem; }
.papernum { font-size: .78rem; 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); }
p.t.pc { margin-top: .85rem; }          /* a 1955 blank-line group starts here */
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); }
.num { float: left; margin-left: -2.2rem; width: 1.7rem; text-align: right;
       font-size: .78rem; color: var(--faint); text-decoration: none;
       position: relative; top: .35rem; }
.num:hover { color: var(--ink); }

.jesus { color: var(--jesus); }
:root[data-redletter="off"] .jesus { color: inherit; }
.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".  The
   row becomes a flex line only when it actually contains a leader, so ordinary
   paragraphs are untouched.  The leader is DRAWN, never typed -- the text is
   "Superuniverses 7", and literal dots copy-paste as garbage. */
p.t:has(.leader) { display: flex; align-items: baseline; }
.leader { display: inline-block; flex: 1; min-width: 2rem; margin: 0 .35rem;
  border-bottom: 1px dotted var(--faint); transform: translateY(-.28em); }

/* Footnote markers are drawn, for the same reason. */
a.fn { text-decoration: none; }
a.fn::after { content: "*"; font-size: .7em; vertical-align: super; color: var(--link); }

.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); }
.thin { font-style: italic; opacity: .6; margin: .25rem 0 0; }
.note { margin: .4rem 0 0; }
.note .lbl { font-variant-caps: small-caps; letter-spacing: .04em; color: var(--link); }

.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; }

/* ---- 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); }
.toc a { flex: 1; text-decoration: none; }
.toc b { display: inline-block; width: 2.2rem; color: var(--faint); font-weight: 400; }
.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; }
.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; }
.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; }
.didyou { color: var(--faint); }

/* ---- 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; }
  .grid { grid-template-columns: 1fr; }
  .num { float: none; margin: 0 .4rem 0 0; top: 0; }
  .a:not(:empty) { margin: -.4rem 0 1rem 1rem; border-left: 2px solid var(--rule);
                   padding-left: .7rem; }
  .blanket ul { columns: 1; }
}

/* ---- print ------------------------------------------------------------- */
@media print {
  @page { margin: 22mm 20mm; }
  .top, footer, .rail, .pager { 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; }
  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; }

/* ---- front page -------------------------------------------------------- */
.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); }