/* Athenaeum — one serif column, near-black on near-white, no chrome to speak of.
   Same register as the Noctis blog: browser defaults where they're already right. */

:root {
  --ink: #111;
  --dim: #555;
  --faint: #767676;
  --paper: #fdfdfc;
  --rule: #d8d5cf;
  --mark: #fbeaa0;
  --link: #21409a;         /* anchor-palette blue */
  --visited: #5a2a7a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e6e3dd;
    --dim: #a7a29a;
    --faint: #8b867e;
    --paper: #14150f;
    --rule: #3a3a33;
    --mark: #5a4a12;
    --link: #9db4ee;
    --visited: #c3a6dd;
  }
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-size: 12pt;
  margin: 40px;
  max-width: 40em;
  color: var(--ink);
  background: var(--paper);
}

@media (max-width: 880px) { body { margin: 18px 14px; } }

a { color: var(--link); }
a:visited { color: var(--visited); }
cite { font-style: italic; }
mark { background: var(--mark); color: inherit; }
small, .meta, .score { color: var(--dim); }
hr { border: 0; border-top: 1px solid var(--rule); }
code, pre { font-family: ui-monospace, Menlo, monospace; font-size: 0.85em; }
button {
  font: inherit; font-size: 0.9em; padding: 0.15em 0.6em;
  color: var(--ink); background: transparent;
  border: 1px solid var(--rule); border-radius: 2px; cursor: pointer;
}
button:active { background: var(--rule); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--link); outline-offset: 2px;
}
.sep { color: var(--faint); }

h1 { font-size: 1.9em; font-weight: normal; margin: 0.2em 0 0.1em; letter-spacing: -0.01em; }
h2 { font-size: 1.15em; margin: 1.8em 0 0.4em; }
h2 small { font-weight: normal; }
.lede { color: var(--dim); margin: 0.3em 0 1.2em; }
.nav { margin: 0 0 1.2em; font-size: 0.85em; }
.nav .home { font-variant: small-caps; letter-spacing: 0.04em; }
.warn { color: #a4402a; }
.count { color: var(--faint); font-size: 0.85em; margin: 1.4em 0 0.4em; }

/* --- lists of books, shelves, hits, notes, refs ------------------------- */
ul.books, ul.shelves, ul.hits, ul.notes, ul.refs, ol.cited {
  list-style: none; padding: 0; margin: 0;
}
ul.books li, ul.shelves li { margin: 0 0 0.9em; }
ul.hits li { margin: 0 0 1.5em; }
ul.hits .hit { margin: 0 0 0.2em; }
ul.hits .hit a { text-decoration: none; }
ul.hits .hit a:hover { text-decoration: underline; }
ul.hits .snip { margin: 0; color: var(--dim); }
ul.notes li { margin: 0 0 1.6em; }
ul.notes blockquote, #composer blockquote {
  margin: 0; padding-left: 0.9em; border-left: 2px solid var(--rule);
}
ul.notes .comment { margin: 0.4em 0 0.2em; }
ul.notes .meta, ul.refs .meta { font-size: 0.85em; margin: 0.25em 0 0; }
ul.refs li { margin: 0 0 1.1em; }
ul.refs .ref { margin: 0; }
ul.refs .kind { display: none; }
ul.refs .raw { color: var(--faint); font-size: 0.85em; margin: 0.2em 0 0; }
ul.refs details summary { color: var(--faint); font-size: 0.8em; cursor: pointer; }
ol.cited { margin-left: 1.4em; list-style: decimal; }
ol.cited li { margin: 0 0 0.5em; }

dl dt { font-weight: bold; margin-top: 0.7em; }
dl dd { margin: 0 0 0 1.4em; color: var(--dim); }

/* --- search form -------------------------------------------------------- */
form.q { margin: 0 0 1.6em; }
form.q input[type=search] {
  font: inherit; padding: 0.3em 0.4em; width: 60%;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 2px;
}
form.q.big input[type=search] { width: 72%; font-size: 1.1em; }
form.q .opts { margin-top: 0.5em; font-size: 0.85em; color: var(--dim); }
form.q .opts label { margin-right: 0.7em; }
form.q select { font: inherit; font-size: 0.95em; max-width: 14em; }
.actions { margin: 1em 0; }
.actions button { margin-right: 0.4em; }
#joblog {
  white-space: pre-wrap; background: color-mix(in srgb, var(--ink) 5%, transparent);
  border: 1px solid var(--rule); padding: 0.6em; max-height: 14em; overflow: auto;
}

/* --- shelf / article ---------------------------------------------------- */
article.shelf table { border-collapse: collapse; font-size: 0.9em; width: 100%; }
article.shelf th, article.shelf td {
  border-bottom: 1px solid var(--rule); padding: 0.3em 0.5em 0.3em 0; text-align: left;
  vertical-align: top;
}
article.shelf table { display: block; overflow-x: auto; }

/* --- broceliande -------------------------------------------------------- */
/* The map wants room: the ring reads as a ring at full width and as a smear in
   a 40em column, so this one page opens out to the viewport. Not fullscreen —
   the nav stays, because the map is a page of the library like any other. */
body.forest { max-width: min(96vw, 78em); }

#plot { margin: 0.6em 0; padding: 0; position: relative; }
#cv {
  width: 100%; height: min(74vh, 900px); display: block; touch-action: none;
  border: 1px solid var(--rule);
}
/* the two corners of the map: where you can go back to, and how close you are */
#plot #steps { position: absolute; top: 0.5em; left: 0.5em; display: flex; gap: 0.4em; }
#plot #steps[hidden] { display: none; }        /* display:flex would outrank [hidden] */
#plot #zoom { position: absolute; top: 0.5em; right: 0.5em; display: flex; gap: 0.4em; }
#plot #steps button, #plot #zoom button {
  font: inherit; font-size: 0.85em; background: var(--paper);
  border: 1px solid var(--rule); padding: 0.2em 0.6em; cursor: pointer;
}
#plot #zoom button {
  width: 2.2em; height: 2.2em; padding: 0; line-height: 1;
  display: grid; place-items: center;
}

#detail { font-size: 0.9em; }
#detail:empty { display: none; }
#detail h3 { margin: 0.2em 0; font-size: 1.05em; }
#detail h4 {
  margin: 1em 0 0.3em; font-size: 0.85em; font-weight: normal;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim);
}
#detail ul { margin: 0.3em 0 0 1.2em; padding: 0; }
#detail li { margin: 0.15em 0; }
#detail .cols { display: grid; grid-template-columns: 1fr; gap: 0 2.5em; }
@media (min-width: 800px) { #detail .cols { grid-template-columns: 1fr 1fr; } }
#detail .times { font-variant-numeric: tabular-nums; color: var(--dim); }
/* a passage: the sentence where one book actually reaches for another */
#detail .psg { margin: 0.9em 0; padding-left: 0.8em; border-left: 2px solid var(--rule); }
#detail .psg .where { font-size: 0.85em; color: var(--dim); }
#detail .psg .ctx { margin: 0.2em 0; }
#detail .psg .ctx mark { background: color-mix(in srgb, var(--ink) 14%, transparent); }
#detail .psg .cite { font-size: 0.85em; color: var(--dim); margin: 0.2em 0 0; }
#route-status { padding: 0.55em 0.7em; border-left: 3px solid var(--rule); color: var(--dim); }
#explorer { margin: 1.5em 0; border-top: 1px solid var(--rule); padding-top: 0.2em; }
#explorer select { font: inherit; max-width: 100%; padding: 0.25em; color: var(--ink); background: var(--paper); }
#explore-relations ul { margin-top: 0.35em; }

/* shelves: the first question, so they sit above the map. Each carries its
   Ankerstein colour, which is the same colour its books take on the ring. */
#shelves { margin: 0.4em 0 0.6em; display: flex; flex-wrap: wrap; gap: 0.4em; align-items: center; }
#shelves .lbl { font-size: 0.85em; color: var(--dim); margin-right: 0.2em; }
button.shelf {
  font: inherit; font-size: 0.85em; cursor: pointer;
  background: none; color: var(--ink);
  border: 1px solid var(--rule); border-left: 4px solid var(--c, var(--rule));
  padding: 0.2em 0.6em; display: inline-flex; align-items: baseline; gap: 0.45em;
  transition: transform 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}
button.shelf.on { background: color-mix(in srgb, var(--c, var(--ink)) 16%, transparent); }
button.shelf:hover { transform: translateY(-1px); box-shadow: 0 2px 0 color-mix(in srgb, var(--c, var(--ink)) 22%, transparent); }
button.shelf:focus-visible { outline: 2px solid var(--c, var(--ink)); outline-offset: 2px; }
button.shelf .n { font-size: 0.85em; color: var(--dim); font-variant-numeric: tabular-nums; }

#plot #tip {
  position: absolute; pointer-events: none; z-index: 5; max-width: 24em;
  background: var(--paper); border: 1px solid var(--rule);
  border-left: 4px solid var(--c, var(--ink));
  padding: 0.3em 0.55em; font-size: 0.82em; line-height: 1.35;
}
#plot #tip[hidden] { display: none; }
#plot #tip .yr { color: var(--dim); }

#controls { margin: 0.8em 0 0; font-size: 0.85em; }
#controls .count { color: var(--dim); margin-left: auto; }
#controls .frow {
  display: flex; flex-wrap: wrap; gap: 0.4em 1.4em; align-items: center;
  padding-bottom: 0.5em; border-bottom: 1px solid var(--rule);
}
#controls .f { display: inline-flex; align-items: center; gap: 0.4em; }
#controls input[type=range] { width: 9em; }
#controls output { font-variant-numeric: tabular-nums; min-width: 1.2em; }
#libraryhead {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 0.5em 1.5em; margin-top: 0.75em;
}
#librarycount { color: var(--dim); font-variant-numeric: tabular-nums; }
#libraryactions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.45em 1.2em; }
#bookorder { display: inline-flex; align-items: baseline; gap: 0.35em; color: var(--dim); }
#bookorder[hidden], #showall[hidden] { display: none; }
button.order {
  border: 0; padding: 0; background: none; color: var(--dim); font: inherit;
  cursor: pointer; text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 0.2em;
}
button.order:hover, button.order:focus-visible { color: var(--ink); text-decoration-color: currentColor; }
button.order.on { color: var(--ink); text-decoration-color: currentColor; }
button.link {
  background: none; border: 0; padding: 0; font: inherit; font-size: 1em;
  color: var(--link, inherit); text-decoration: underline; text-underline-offset: 0.15em;
  cursor: pointer; transition: text-underline-offset 120ms ease, color 120ms ease;
}
button.link:hover { text-underline-offset: 0.28em; }
#books {
  display: grid; gap: 0.25em 1.6em; margin-top: 0.6em;
  grid-template-columns: repeat(auto-fill, minmax(23em, 1fr));
}
#books .bookgroup {
  grid-column: 1 / -1; margin: 0.8em 0 0.1em; padding-bottom: 0.2em;
  border-bottom: 1px solid var(--rule); color: var(--dim);
  font-size: 0.82em; letter-spacing: 0.05em; text-transform: uppercase;
}
#books .bookgroup:first-child { margin-top: 0; }
#books .bk {
  display: flex; align-items: baseline; gap: 0.4em; cursor: pointer;
  padding: 0.12em 0.25em 0.12em 0.45em; border-left: 3px solid var(--c, transparent);
  transition: transform 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}
#books .bk[hidden] { display: none; }
#books .bk:hover {
  transform: translateX(2px);
  background: color-mix(in srgb, var(--c, var(--ink)) 7%, transparent);
  box-shadow: -1px 0 0 color-mix(in srgb, var(--c, var(--ink)) 25%, transparent);
}
#books .bk:focus-within {
  outline: 1px solid color-mix(in srgb, var(--c, var(--ink)) 55%, transparent);
  outline-offset: 1px;
}
#books .bk.off { color: var(--dim); }
#books .bk.off cite { font-style: italic; }
#books .bk .who { flex: 1 1 auto; }
#books .bk .n { font-variant-numeric: tabular-nums; color: var(--dim); font-size: 0.9em; }
#foot[hidden] { display: none; }
.findbox {
  margin: 0.65em 0 1em; padding: 0.65em 0.8em;
  border: 1px solid var(--rule); border-left: 3px solid var(--ink);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.findbox[hidden] { display: none; }
.findbox h4 { margin-top: 0; }
.findbox p { margin: 0.35em 0; }

@media (prefers-reduced-motion: reduce) {
  button.shelf, button.link, #books .bk { transition: none; }
  button.shelf:hover, #books .bk:hover { transform: none; }
}

/* ======================================================================== */
/* the reader — the point of the whole thing. Text edge to edge on a phone.  */
/* ======================================================================== */
body.reader {
  margin: 0;
  max-width: none;
  font-size: var(--rsize, 12pt);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Charter, Georgia, serif;
  text-rendering: optimizeLegibility;
}

body.reader #bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; gap: 0.5em; align-items: baseline;
  padding: 0.35em 0.6em;
  font-size: 0.72em; color: var(--dim);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule);
  padding-top: max(0.35em, env(safe-area-inset-top));
}
body.reader #bar .who {
  flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
body.reader #bar .back { text-decoration: none; font-size: 1.3em; line-height: 1; }
body.reader #bar .where { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
body.reader #bar button { border: 0; padding: 0 0.2em; font-size: 1em; }

body.reader #panel {
  position: sticky; top: 2em; z-index: 29;
  padding: 0.4em 0.6em; font-size: 0.8em;
  background: var(--paper); border-bottom: 1px solid var(--rule);
}
body.reader #panel p { margin: 0.3em 0; }
body.reader #panel input#jump {
  font: inherit; width: 4em; border: 1px solid var(--rule); background: var(--paper);
  color: var(--ink);
}

body.reader main#text {
  padding: 0.5em 0.7em 6em;            /* the small margins Owen asked for */
  max-width: var(--rwidth, 34em);
  margin: 0 auto;
  line-height: 1.5;
  hyphens: auto;
}
@media (min-width: 700px) {
  body.reader main#text { padding: 1.2em 1.5em 8em; line-height: 1.55; }
}
body.reader.wide main#text { max-width: none; }
body.reader.justify main#text p { text-align: justify; }

body.reader .pg { margin: 0 0 0.2em; }
body.reader .pg p { margin: 0 0 0.65em; }
body.reader .pg h2.reading-heading {
  font-size: 1.35em; font-weight: normal; text-align: center;
  margin: 2.2em 0 1.5em; letter-spacing: -0.01em;
}
body.reader .pg blockquote.reading-quote {
  margin: 0.9em 1.35em 1.1em; font-size: 0.94em; line-height: 1.48;
}
body.reader .pg p.reading-verse {
  margin: 1.05em 0 1.15em clamp(1.1em, 10%, 4em);
  font-size: 0.94em; line-height: 1.42;
}
body.reader .pg aside.reading-note {
  margin: 1.2em 0 1em; padding-top: 0.65em;
  border-top: 1px solid var(--rule); color: var(--dim);
  font-size: 0.82em; line-height: 1.42;
}
body.reader .pg .reading-citation {
  margin: -0.75em 1.5em 1em 0; text-align: right;
  color: var(--dim); font-size: 0.78em;
}
body.reader .pg em { font-style: italic; }
body.reader .pg p.verse {
  white-space: pre-wrap; margin-left: 1em; font-size: 0.97em;
}
body.reader .folio {
  display: block; margin: 1.4em 0 1em; text-align: center;
  font-size: 0.68em; color: var(--faint); letter-spacing: 0.08em;
  border-top: 1px solid var(--rule); padding-top: 0.5em;
  font-variant-numeric: tabular-nums;
}
body.reader .pg:first-child .folio { border-top: 0; margin-top: 0.2em; }
body.reader .loading { color: var(--faint); font-size: 0.85em; text-align: center; padding: 1.5em 0; }
body.reader mark.note {
  background: var(--mark); cursor: pointer;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
}
body.reader mark.note.commented { border-bottom-style: dashed; }
body.reader mark.flash { background: color-mix(in srgb, var(--link) 25%, transparent); }

/* floating selection toolbar */
body.reader #tools {
  position: absolute; z-index: 40;
  display: flex; gap: 1px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
body.reader #tools[hidden] { display: none; }   /* display:flex would outrank [hidden] */
body.reader #tools button { border: 0; border-radius: 0; padding: 0.35em 0.7em; font-size: 0.85em; }
body.reader #tools button + button { border-left: 1px solid var(--rule); }

/* the note composer — a sheet on the phone, a card on the desktop */
body.reader #composer {
  position: fixed; z-index: 50; left: 0; right: 0; bottom: 0;
  padding: 0.7em 0.8em max(0.7em, env(safe-area-inset-bottom));
  background: var(--paper); border-top: 1px solid var(--rule);
  box-shadow: 0 -3px 14px rgba(0,0,0,0.16);
  font-size: 0.92em;
}
body.reader #composer blockquote {
  margin: 0 0 0.5em; max-height: 6em; overflow: auto; color: var(--dim);
  font-size: 0.9em;
}
body.reader #composer textarea {
  font: inherit; width: 100%; box-sizing: border-box; padding: 0.35em;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 2px; resize: vertical;
}
body.reader #composer .row { display: flex; gap: 0.4em; align-items: center; margin: 0.5em 0 0; }
body.reader #composer #cwhere { margin-left: auto; color: var(--faint); font-size: 0.8em; }
@media (min-width: 700px) {
  body.reader #composer {
    left: auto; right: 1.5em; bottom: 1.5em; width: 26em;
    border: 1px solid var(--rule); border-radius: 3px;
  }
}

details.aside { margin: 2em 0 0; }
details.aside summary { color: var(--faint); font-size: 0.85em; cursor: pointer; }
details.aside .refs { margin-top: 0.6em; }
details.aside .refs li { margin: 0 0 0.35em; }
details.aside .raw { color: var(--faint); font-size: 0.85em; }

/* --- reference lists: filter, order, and a quieter row -------------------- */
form.reffilter { margin: 1.2em 0 1em; display: flex; flex-wrap: wrap;
  gap: 0.5em 0.8em; align-items: baseline; }
form.reffilter input[type=search] {
  font: inherit; padding: 0.25em 0.4em; flex: 1 1 14em; min-width: 10em;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 2px;
}
form.reffilter label, form.reffilter .count { font-size: 0.85em; color: var(--dim); }
form.reffilter select { font: inherit; font-size: 0.9em; }
ul.refs .ref { margin: 0; }
ul.refs .meta:empty { display: none; }
ul.refs details { margin-top: 0.15em; }
ul.refs details summary { list-style: none; }
ul.refs details summary::-webkit-details-marker { display: none; }
ul.refs details summary::before { content: "\2026 "; }

/* --- catalogue rows: a column that reads, not a stack of cards ------------ */
ul.tight { list-style: none; padding: 0; margin: 0.6em 0 1.4em; font-size: 0.92em; }
ul.tight li { margin: 0 0 0.3em; line-height: 1.35; }
ul.tight small { white-space: nowrap; }
.lede.small { font-size: 0.85em; margin: 0 0 1em; }
h2 { margin: 1.4em 0 0.3em; }