/*
 * ===== GENERATED. DO NOT EDIT THIS FILE =====
 *
 * Written by build-public-library.mjs. Everything in website/library/ is build
 * output and the whole folder is wiped on every run — a hand-edit here
 * survives until the next build and then vanishes, with the pages still
 * rendering, unstyled, and nothing failing. Change it in the generator.
 *
 * ===== WHY THESE PAGES NEED THEIR OWN SHEET AT ALL =====
 *
 * styles.css sets overflow:hidden on html and body so the homepage fits one
 * locked viewport. These pages are long by design — they exist to be read end
 * to end and quoted from. Inheriting that rule cuts every one of them off at
 * the fold with no scrollbar, which is the same failure that clipped the
 * resource rail, applied to a document whose entire purpose is length.
 */
html:has(body.ref-page),
body.ref-page {
  height: auto;
  overflow: visible;
}

.ref-wrap { max-width: 780px; margin: 0 auto; padding: 90px 24px 80px; }

.ref-crumbs { font-size: 13px; color: #6b6354; margin-bottom: 26px; }
.ref-crumbs a { color: var(--gold-dark); text-decoration: none; }
.ref-crumbs a:hover { text-decoration: underline; }

.ref-wrap h1 { font-size: clamp(26px, 4vw, 38px); line-height: 1.15; margin-bottom: 8px; }

.ref-wrap h2 {
  font-size: clamp(19px, 2.6vw, 24px);
  margin: 44px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(201, 165, 74, 0.4);
}

.ref-sub {
  font-size: clamp(14px, 1.7vw, 17px);
  font-style: italic;
  color: #6b6354;
  margin-bottom: 22px;
}

.ref-lede {
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.65;
  margin-bottom: 16px;
  max-width: 66ch; /* a measure, because these are read end to end */
}
.ref-lede a { color: var(--gold-dark); }

/* ===== One entry =====
 *
 * A <dl>, not a list of headings. Each entry genuinely IS a term and its
 * definition, and marking it as one hands an extractor the pairing instead of
 * asking it to infer the relationship from visual proximity.
 */
.ref-list { margin-top: 26px; }

.ref-entry {
  padding: 16px 0;
  border-bottom: 1px solid rgba(20, 16, 8, 0.08);
  /* So a link straight to #bias-210-... does not park the term under the
     fixed nav bar, which reads as landing on the wrong entry. */
  scroll-margin-top: 90px;
}

.ref-entry dt {
  font-size: clamp(15px, 1.9vw, 18px);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 6px;
}

.ref-entry dd {
  margin: 0;
  font-size: clamp(13.5px, 1.6vw, 16px);
  line-height: 1.6;
  color: #3d382e;
  max-width: 66ch;
}

/* The permanent number. Archived journal entries cite by number, so it is part
   of the identity of the entry rather than decoration on it. */
.ref-num {
  display: inline-block;
  min-width: 3.4em;
  margin-right: 6px;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gold-dark);
  vertical-align: 0.12em;
}

.ref-entry:target {
  background: rgba(201, 165, 74, 0.09);
  box-shadow: -14px 0 0 rgba(201, 165, 74, 0.09), 14px 0 0 rgba(201, 165, 74, 0.09);
}

/* ===== The hub index ===== */

.ref-index { list-style: none; padding: 0; }

.ref-index li {
  padding: 12px 0;
  border-bottom: 1px solid rgba(20, 16, 8, 0.08);
  font-size: clamp(14px, 1.7vw, 17px);
}
.ref-index a { color: var(--dark); font-weight: 700; text-decoration: none; }
.ref-index a:hover { color: var(--gold-dark); text-decoration: underline; }

.ref-count {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-dark);
  border: 1px solid rgba(201, 165, 74, 0.5);
  border-radius: 999px;
}

.ref-sub-inline { font-size: 13px; font-style: italic; color: #6b6354; }

.ref-back { margin-top: 40px; }
.ref-back a { color: var(--gold-dark); }