@font-face {
  font-family: "Junicode";
  src: url("/fonts/JunicodeVF-Roman.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "Junicode";
  src: url("/fonts/JunicodeVF-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --background: #faf9f6;
  --text: #242421;
  --muted: #706f69;
  --border: #d9d7d0;
  --reading-size: 1.15rem;
  font-family: Arial, Helvetica, sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #1d1d1b;
  --text: #e8e7e2;
  --muted: #aaa8a0;
  --border: #44433e;
}

:root[data-text-size="large"] { --reading-size: 1.3rem; }
:root[data-text-size="largest"] { --reading-size: 1.5rem; }

* { box-sizing: border-box; }
html { background: var(--background); }
body { margin: 0; color: var(--text); background: var(--background); }
a { color: inherit; text-underline-offset: 3px; }
button, select { color: inherit; font: inherit; }
button { cursor: pointer; }
button:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.skip-link { position: fixed; left: 1rem; top: -4rem; padding: .65rem .85rem; background: var(--text); color: var(--background); z-index: 10; }
.skip-link:focus { top: 1rem; }

.site-header {
  width: min(100% - 2rem, 72rem);
  min-height: 4.25rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 2rem;
  border-bottom: 1px solid var(--border);
}

.wordmark { margin-right: auto; font: 600 1.1rem Junicode, serif; text-decoration: none; }
.wordmark span { font-weight: 400; }
.site-header nav { display: flex; gap: 1.25rem; }
.site-header nav a { color: var(--muted); font-size: .85rem; text-decoration: none; }
.site-header nav a[aria-current="page"] { color: var(--text); text-decoration: underline; }
.preferences { display: flex; gap: .25rem; }
.preferences button, .question-pager button, .author-tabs button, .state-message button {
  padding: .4rem .55rem;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: .8rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.reader-layout { width: min(100% - 2rem, 46rem); margin: 0 auto; }
.question-nav { padding-top: 2.5rem; }
.question-nav details { border-block: 1px solid var(--border); }
.question-nav summary { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; color: var(--muted); cursor: pointer; font-size: .8rem; list-style: none; }
.question-nav summary::-webkit-details-marker { display: none; }
.question-nav summary span:first-child { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.question-nav ol { max-height: min(28rem, 60vh); overflow-y: auto; list-style: none; margin: 0; padding: .5rem 0 1rem; border-top: 1px solid var(--border); }
.question-nav li { margin: 0; }
.question-nav a { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: .5rem; padding: .48rem 0; color: var(--text); text-decoration: none; font-size: .82rem; }
.question-nav a span:first-child { color: var(--muted); font-variant-numeric: tabular-nums; }
.question-nav a span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.question-nav a:hover span:last-child, .question-nav a:focus-visible span:last-child, .question-nav a[aria-current="page"] span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.question-nav a[aria-current="page"] span:first-child { color: var(--text); font-weight: 700; }
.filter-row select {
  width: 100%;
  padding: .65rem .75rem;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--background);
}
.reading-pane { padding: 3.75rem 0 6rem; }
.eyebrow { margin: 0 0 .75rem; color: var(--muted); font-size: .75rem; }
.reading-pane h1 {
  max-width: 42rem;
  margin: 0;
  font: 600 clamp(1.75rem, 5vw, 2.35rem)/1.25 Junicode, serif;
  letter-spacing: -.015em;
}
.answer { margin: 1.5rem 0 0; font: var(--reading-size)/1.7 Junicode, serif; }
.question-pager { display: flex; justify-content: space-between; margin-top: 2rem; }
.question-pager button { padding: .35rem 0; }
.question-pager button:disabled { visibility: hidden; }

.commentary-section { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.section-heading { margin-bottom: 1rem; }
.section-heading h2 { margin: 0; font: 600 1.3rem Junicode, serif; }
.state-message { margin: 2rem 0; color: var(--muted); font-size: .9rem; }
.state-message[hidden] { display: none; }
.commentary-work { border-top: 1px solid var(--border); }
.commentary-work:last-child { border-bottom: 1px solid var(--border); }
.commentary-work summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 1rem; align-items: center; padding: 1rem 0; cursor: pointer; list-style: none; }
.commentary-work summary::-webkit-details-marker { display: none; }
.commentary-identity { display: grid; gap: .2rem; font-size: .85rem; }
.commentary-identity strong { font-family: Junicode, serif; font-size: 1.05rem; }
.commentary-date, .commentary-action { color: var(--muted); font-size: .75rem; }
.commentary-action { text-decoration: underline; text-underline-offset: 3px; }
.commentary-body { padding: .5rem 0 2rem; color: var(--muted); font-size: .85rem; }
.commentary-body button { border: 0; background: none; color: inherit; text-decoration: underline; }
.passage { margin-top: 1rem; color: var(--text); }
.passage + .passage { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--border); }
.passage-label { margin: 0 0 1.5rem; color: var(--muted); font-size: .75rem; }
.scope { margin-left: .5rem; }
.passage-text p { margin: 0 0 1.15em; font: var(--reading-size)/1.72 Junicode, serif; }
.passage-meta { margin-top: 2rem; color: var(--muted); font-size: .75rem; line-height: 1.6; }
.issue-report { margin-top: 4rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.issue-report summary { width: fit-content; color: var(--muted); cursor: pointer; font-size: .8rem; text-decoration: underline; text-underline-offset: 3px; }
.issue-report form { display: grid; gap: .5rem; margin-top: 1rem; }
.issue-report label { margin-top: .5rem; color: var(--muted); font-size: .75rem; }
.issue-report select, .issue-report textarea { width: 100%; padding: .6rem; border: 1px solid var(--border); border-radius: 0; background: var(--background); color: var(--text); font: inherit; }
.issue-report button { width: fit-content; margin-top: .75rem; padding: .5rem .7rem; border: 1px solid var(--border); background: var(--background); color: var(--text); }
#issue-report-status { margin: .5rem 0 0; color: var(--muted); font-size: .8rem; white-space: pre-wrap; }

.library-page, .prose-page { width: min(100% - 2rem, 58rem); margin: 0 auto; padding: 4rem 0 6rem; }
.page-intro, .prose-page { max-width: 44rem; }
.page-intro h1, .prose-page h1 { margin: 0; font: 600 2.25rem/1.2 Junicode, serif; }
.page-intro > p:last-child { color: var(--muted); line-height: 1.6; }
.totals { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; margin: 2.5rem 0; padding: 1rem 0; border-block: 1px solid var(--border); }
.total { color: var(--muted); font-size: .8rem; }
.total strong { margin-right: .3rem; color: var(--text); }
.total span { color: inherit; }
.filter-row { max-width: 18rem; margin: 0 0 1.5rem; }
.filter-row label { display: block; margin-bottom: .4rem; color: var(--muted); font-size: .75rem; }
.works-list { border-top: 1px solid var(--border); }
.work-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(10rem, 1fr) 8rem; gap: 2rem; padding: 1.75rem 0; border-bottom: 1px solid var(--border); }
.work-row h2 { margin: .25rem 0 .4rem; font: 600 1.15rem/1.35 Junicode, serif; }
.work-author, .work-edition, .work-detail { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.source-link { display: inline-block; margin-top: .5rem; color: var(--muted); font-size: .75rem; }
.status { width: fit-content; margin: 0 0 .5rem; font-size: .8rem; }
.coverage strong { display: block; font-size: 1rem; }
.coverage span { color: var(--muted); font-size: .75rem; }
.work-link { display: block; margin-top: .75rem; font-size: .78rem; }
.prose-page h2 { margin: 2.5rem 0 .75rem; font: 600 1.3rem Junicode, serif; }
.prose-page p { font: 1.05rem/1.7 Junicode, serif; }

@media (max-width: 650px) {
  .site-header { min-height: 0; padding: 1rem 0; flex-wrap: wrap; gap: .8rem 1.25rem; }
  .wordmark { width: 100%; }
  .site-header nav { margin-right: auto; }
  .question-nav { padding-top: 1.5rem; }
  .reading-pane { padding-top: 2.75rem; }
  .section-heading { display: block; }
  .commentary-work summary { grid-template-columns: 1fr auto; }
  .commentary-date { grid-row: 2; }
  .commentary-action { grid-column: 2; grid-row: 1 / 3; }
  .work-row { grid-template-columns: 1fr; gap: .9rem; }
}