/* Barlow, self-hosted. Close in character to the Montserrat the books are set
   in, and a little narrower. Latin subset only, 63 KB for four weights.
   SIL Open Font License, see fonts/OFL.txt. */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/barlow-400.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/barlow-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/barlow-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/barlow-700.woff2") format("woff2");
}

/* Neutral greys, barely warm. The originals were tan to sit under a gold
   accent, which reads yellow next to red. */
:root {
  color-scheme: dark light;
  --bg: #121110;
  --panel: #1b1a19;
  --ink: #e7e4e2;
  --dim: #9b9795;
  --line: #2f2d2b;
  --accent: #e0483d;
  --bar-h: 3rem;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f2f1ef;
    --panel: #ffffff;
    --ink: #1c1b1a;
    --dim: #6a6663;
    --line: #dcd9d5;
    --accent: #a3241e;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 "Barlow", system-ui, -apple-system, sans-serif;
}

/* One link convention for the whole site, the search widget included: accent
   colored, underlined only on hover. Components override the resting color
   where a link should read as body text instead. */
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.brand:hover, .pager a:hover, .sidebar a:hover, .crumb a:hover { text-decoration: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Header */

.bar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 0 .75rem;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  z-index: 20;
}

.brand { font-weight: 600; color: var(--ink); }
.spacer { flex: 1; }

.crumb { color: var(--dim); font-size: .875rem; overflow: hidden; white-space: nowrap; }
.crumb > * + *::before { content: " › "; color: var(--dim); }
.crumb a { color: var(--dim); }
.crumb a:hover { color: var(--accent); }

.icon {
  background: none;
  border: 0;
  color: var(--ink);
  font-size: 1.1rem;
  cursor: pointer;
  padding: .35rem .5rem;
  border-radius: .25rem;
}
.icon:hover { background: var(--line); }

.button, .index-link {
  font-size: .875rem;
  white-space: nowrap;
}

.goto { display: flex; align-items: center; gap: .25rem; color: var(--dim); font-size: .875rem; }
.goto input {
  width: 4.5rem;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: .25rem;
  padding: .2rem .4rem;
  font: inherit;
}

/* Sidebar */

.sidebar {
  position: fixed;
  top: var(--bar-h);
  bottom: 0;
  left: 0;
  width: 17rem;
  overflow-y: auto;
  padding: 1rem;
  background: var(--panel);
  border-right: 1px solid var(--line);
  transform: translateX(-100%);
  transition: transform .15s ease;
  z-index: 15;
}
.sidebar.open { transform: none; }
.sidebar ul { list-style: none; margin: 0; padding-left: .85rem; }
.sidebar > ul { padding-left: 0; }
.sidebar a {
  display: block;
  padding: .2rem 0;
  color: var(--ink);
  font-size: .9rem;
}
.sidebar a:hover { color: var(--accent); }
.sidebar a[aria-current="page"] { color: var(--accent); font-weight: 600; }
/* The section you are reading inside, not just the page it opens on. */
.sidebar a[aria-current="true"] { color: var(--accent); }
.sidebar > ul > li > a { font-weight: 600; margin-top: .5rem; }

/* Spread */

.reader { overflow: hidden; }

.spread {
  position: fixed;
  inset: var(--bar-h) 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: .5rem 3rem 1.5rem;
  overflow: auto;
}

.page { position: relative; margin: 0; line-height: 0; }

/* Bounds in viewport units, not percentages: a percentage height would resolve
   against a content-sized flex item and collapse. Two maxima on an image scale
   it without distorting, so the figure still shrink-wraps the pixels and the
   hotspot percentages stay true. */
.page img {
  display: block;
  width: auto;
  height: auto;
  max-height: calc(100dvh - var(--bar-h) - 2rem);
  max-width: calc(50vw - 3.5rem);
  background: var(--panel);
}
.spread.single .page img { max-width: calc(100vw - 7rem); }

.page figcaption {
  position: absolute;
  bottom: -1.15rem;
  width: 100%;
  text-align: center;
  font-size: .7rem;
  line-height: 1;
  color: var(--dim);
}

/* Fit-width: fill the columns and scroll down the page instead. */
.reader.fit-width .spread { align-items: flex-start; padding: 0 0 1.5rem; }
.reader.fit-width .page img { max-height: none; max-width: none; width: 50vw; }
.reader.fit-width .spread.single .page img { width: 100vw; }

.hotspot { position: absolute; display: block; border-radius: 2px; }
.hotspot:hover { background: rgb(224 72 61 / .26); }
/* Cyan, not the accent red, so a debug overlay is never mistaken for a hover. */
.debug .hotspot { outline: 1px solid #2bb8c4; background: rgb(43 184 196 / .14); }

/* Pager */

.pager a {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  padding: 1.5rem .6rem;
  color: var(--dim);
  font-size: 1.5rem;
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  border-radius: .3rem;
}
.pager a:hover { color: var(--accent); }
.pager a[rel="prev"] { left: .25rem; }
.pager a[rel="next"] { right: .25rem; }
.pager .narrow { display: none; }

/* Listing pages */

.listing-body { max-width: 46rem; margin: 0 auto; padding: calc(var(--bar-h) + 2rem) 1.25rem 4rem; }
.listing-body h1 { font-size: 1.6rem; }
.listing-body h2 { font-size: 1.3rem; color: var(--accent); border-bottom: 1px solid var(--line); }
.jump { display: flex; flex-wrap: wrap; gap: .5rem; }
.jump a { color: var(--dim); }
.entries { list-style: none; padding: 0; columns: 2; column-gap: 2.5rem; }
.entries li { display: flex; align-items: baseline; gap: .35rem; break-inside: avoid; font-size: .9rem; }
.entries a { color: var(--ink); }
.entries a:hover { color: var(--accent); }
.dots { flex: 1; border-bottom: 1px dotted var(--line); }
.folio { color: var(--dim); font-variant-numeric: tabular-nums; }
.shelf { list-style: none; padding: 0; }
.shelf li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  border-top: 1px solid var(--line);
  padding: 1rem 0;
}
/* The cover repeats the title link, so keep it out of the tab order and off
   the accessibility tree rather than making every book two stops. */
.shelf .cover { flex: none; line-height: 0; }
.shelf .cover img {
  width: 130px;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 2px;
}
.shelf .cover:hover img { border-color: var(--accent); }
/* Same treatment as a search result heading: bold and accent. */
.shelf-text > a { font-size: 1.15rem; font-weight: 700; color: var(--accent); }
.shelf p { color: var(--dim); font-size: .875rem; }
.shelf p a { color: var(--accent); }

@media (max-width: 480px) {
  .shelf .cover img { width: 88px; }
}

/* Reference lists */

.ref-heading { margin: 2rem 0 .35rem; }
h3.ref-heading { font-size: 1.15rem; color: var(--ink); border-bottom: 1px solid var(--line); }
h3.ref-heading .folio { font-weight: 400; font-size: .75em; }
.entries.reference { columns: 1; }
.entries.reference li { padding: .12rem 0; }
.ref-title { color: var(--ink); }
.ref-title:hover { color: var(--accent); }
/* Secondary detail inside a heading or title, same weight as a page number.
   Inside a link it still belongs to the link, so it hovers with it. */
.muted { color: var(--dim); font-weight: 400; font-size: .82em; }
.ref-title:hover .muted { color: var(--accent); }
h1 .muted { font-size: .75em; }
.ref-hits { display: flex; gap: .6rem; white-space: nowrap; }
/* Dimmer than the title: the name is what you scan for, the page is the detail. */
.ref-hits a { color: var(--dim); font-variant-numeric: tabular-nums; font-size: .82rem; }
.ref-hits a:hover { color: var(--accent); }
.ref-hits em { font-style: normal; color: var(--dim); }
.ref-hits a:hover em { color: var(--accent); }

@media (min-width: 640px) {
  .entries.reference { columns: 2; column-gap: 2.5rem; }
}
.note { color: var(--dim); font-size: .875rem; }
kbd { border: 1px solid var(--line); border-radius: .2rem; padding: 0 .25rem; }

/* Search */

#search-panel {
  width: min(54rem, 94vw);
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: var(--panel);
  color: var(--ink);
  padding: 1rem;
}
#search-panel::backdrop { background: rgb(0 0 0 / .6); }
#search-panel .close { position: absolute; top: .4rem; right: .4rem; z-index: 1; }

/* Pagefind ships a light theme on :root and injects its stylesheet after this
   file, so overriding on :root loses. Setting the variables on the dialog wins
   on inheritance instead of load order. */
#search-panel {
  --pagefind-ui-scale: 1;
  --pagefind-ui-primary: var(--accent);
  --pagefind-ui-text: var(--ink);
  --pagefind-ui-background: var(--panel);
  --pagefind-ui-border: var(--line);
  --pagefind-ui-tag: var(--bg);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: .3rem;
  --pagefind-ui-font: inherit;
}
/* Pagefind resets mark to the browser default, which is black on yellow. */
#search-panel mark {
  background: var(--accent);
  color: var(--bg);
  border-radius: 2px;
  padding: 0 .12em;
}
#search-panel .pagefind-ui__result-title { color: var(--accent); font-size: .95rem; }
#search-panel .pagefind-ui__result-title .pagefind-ui__result-link { color: var(--accent); }
#search-panel .pagefind-ui__result-excerpt { color: var(--dim); font-size: .82rem; margin-top: .15rem; }
#search-panel .pagefind-ui__filter-name,
#search-panel .pagefind-ui__filter-value { color: var(--ink); }

/* Pagefind's defaults run 21px titles and 70px of padding per result, which
   fits four hits on a laptop screen. */
#search-panel .pagefind-ui__result { padding: .6rem 0; }
#search-panel .pagefind-ui__result-inner { margin-top: .1rem; }
#search-panel .pagefind-ui__results-area { margin-top: .25rem; }

/* The drawer is a wrapping flex row with a 60px gap. Once the filter panel
   wraps above the results, that gap becomes a canyon. */
#search-panel .pagefind-ui__drawer { gap: 1rem; }
#search-panel .pagefind-ui__filter-panel { margin-top: .25rem; }
#search-panel .pagefind-ui__filter-group { padding-top: .4rem; gap: .4rem; }
#search-panel .pagefind-ui__filter-block { padding: .4rem 0; }
#search-panel .pagefind-ui__message {
  height: auto;
  padding: .4rem 0;
  font-size: .8rem;
  color: var(--dim);
  font-weight: 400;
}

/* Print. The screen layout pins the spread to the viewport with fixed position
   and vh-based limits, none of which mean anything on paper. */

@media print {
  @page { margin: 8mm; }

  .bar, .sidebar, .pager, #search-panel, .page figcaption { display: none !important; }
  .hotspot { display: none; }

  body { background: #fff; color: #000; }
  .reader { overflow: visible; }

  .spread {
    position: static;
    display: flex;
    gap: 0;
    padding: 0;
    overflow: visible;
  }
  /* Each figure takes half the sheet, or all of it when the page stands alone. */
  .page { flex: 1 1 0; min-width: 0; }
  .page img,
  .spread.single .page img,
  .reader.fit-width .page img {
    max-width: none;
    max-height: none;
    width: 100%;
    height: auto;
  }

  .listing-body { max-width: none; padding: 0; }
  .entries a, .ref-title, .ref-hits a { color: #000; }
  .dots { border-bottom-color: #bbb; }
}

/* One page at a time once a spread no longer fits. */

@media (max-width: 900px) {
  .page.partner { display: none; }
  .spread { padding: 0 0 1.25rem; align-items: flex-start; }
  .page img,
  .spread.single .page img { max-height: none; max-width: none; width: 100vw; }
  .pager .narrow { display: block; }
  .pager .wide { display: none; }
  /* Keep the book link, drop the section steps that follow it. */
  .crumb a ~ a, .goto label { display: none; }
  .entries { columns: 1; }
}