/* Traces in the Sand - the Trąbczyn archive, a digital edition.
   System fonts only: nothing is fetched from a CDN, so the site works
   offline and on GitHub Pages identically. */

:root {
  --ink:        #1c1a17;
  --ink-soft:   #55504a;
  --ink-faint:  #857e75;
  --paper:      #fbf9f5;
  --paper-2:    #f2eee6;
  --rule:       #ded7ca;
  --accent:     #7a3b2e;
  --mark:       #ffe9a8;
  --warn:       #8a4b1a;
  --measure:    38rem;
  --serif: Iowan Old Style, Palatino Linotype, Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:       #e8e3da;
    --ink-soft:  #b3aca1;
    --ink-faint: #8b847a;
    --paper:     #171614;
    --paper-2:   #201e1b;
    --rule:      #38342e;
    --accent:    #d99274;
    --mark:      #5c4a1c;
    --warn:      #d9a06a;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.6;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

code { font-family: var(--mono); font-size: 0.9em; }

.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: #fff; padding: .6rem 1rem;
}
.skip:focus { left: .5rem; top: .5rem; z-index: 10; }

/* ---------------------------------------------------------- chrome */

.site-head {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
  align-items: baseline; justify-content: space-between;
  padding: 1.1rem clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.brand {
  font-weight: 600; font-size: 1.05rem; letter-spacing: .01em;
  color: var(--ink); text-decoration: none;
}
.site-head nav { display: flex; flex-wrap: wrap; gap: 1.1rem; font-family: var(--sans); font-size: .85rem; }
.site-head nav a { color: var(--ink-soft); text-decoration: none; }
.site-head nav a:hover { color: var(--accent); text-decoration: underline; }

.site-foot {
  margin-top: 4rem; padding: 1.5rem clamp(1rem, 4vw, 3rem) 3rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans); font-size: .8rem; color: var(--ink-faint);
}
.site-foot p { max-width: 46rem; margin: 0; }

main { padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 3rem); }

h1, h2, h3 { line-height: 1.25; font-weight: 600; }
h1 { font-size: clamp(1.6rem, 3.5vw, 2.1rem); margin: 0 0 .4rem; }
h2 { font-size: 1.2rem; margin: 2rem 0 .6rem; }

.prose { max-width: var(--measure); }
.prose h1 { margin-bottom: .6rem; }
.prose table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.prose th, .prose td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose th { font-family: var(--sans); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }

.standfirst { color: var(--ink-soft); font-size: 1.05rem; max-width: var(--measure); }
.muted { color: var(--ink-faint); }
.eyebrow {
  font-family: var(--sans); font-size: .78rem; text-transform: uppercase;
  letter-spacing: .09em; color: var(--ink-faint); margin: 0 0 .35rem;
}
.eyebrow .sub { text-transform: none; letter-spacing: 0; }

.linkish {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--accent); text-decoration: underline; cursor: pointer;
}

/* ---------------------------------------------------------- home */

.hero { max-width: 44rem; }
.hero h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); }
.hero .lede { font-size: 1.15rem; color: var(--ink-soft); }

.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 2.5rem 0; max-width: 62rem; }
.card {
  border: 1px solid var(--rule); border-radius: 3px; padding: 1.1rem 1.2rem;
  background: var(--paper-2); text-decoration: none; color: inherit; display: block;
}
.card:hover { border-color: var(--accent); }
.card h2 { margin: 0 0 .3rem; font-size: 1.05rem; }
.card p { margin: 0; font-size: .9rem; color: var(--ink-soft); }

.figures { display: flex; flex-wrap: wrap; gap: 2rem; margin: 2rem 0; font-family: var(--sans); }
.figure b { display: block; font-size: 1.7rem; font-weight: 600; font-family: var(--serif); }
.figure span { font-size: .8rem; color: var(--ink-faint); }

/* ---------------------------------------------------------- holdings */

/* Shared by the list of sources and a holding's own page. */
.source-archive { margin: .15rem 0 0; font-family: var(--sans); font-size: .8rem; color: var(--ink-faint); }
.source-facts { display: flex; flex-wrap: wrap; gap: 1.6rem; margin: .9rem 0 0; }
.source-facts div { display: flex; flex-direction: column; }
.source-facts dt { font-family: var(--sans); font-size: .68rem; letter-spacing: .04em;
                   text-transform: uppercase; color: var(--ink-faint); }
.source-facts dd { margin: .1rem 0 0; font-size: 1.05rem; }

.unit-head { max-width: var(--measure); }
.unit-head .eyebrow a { color: inherit; }
.unit-head .standfirst { margin: .7rem 0 0; }
.unit-tabs { margin: 1.8rem 0 1.4rem; padding-bottom: .9rem; border-bottom: 1px solid var(--rule); }
.unit-tabs .vbtn { text-decoration: none; font-size: .85rem; padding: .4rem 1rem; }
.unit-panel { margin-top: 2rem; }
/* With the tabs working, the tab says what the section is. */
.tabs-on .unit-panel { margin-top: 0; }
.tabs-on .unit-panel-h { display: none; }
.unit-panel .filters { margin-top: 0; }
.unit-panel h3 { font-size: 1.1rem; margin: 2rem 0 .5rem; }
.unit-panel h4 { font-size: .95rem; margin: 1.4rem 0 .3rem; font-style: italic; font-weight: 600; }
/* The documents a statement rests on. */
.cite { font-family: var(--sans); font-size: .72rem; color: var(--ink-faint); white-space: nowrap; }
.cite a { color: inherit; }

/* ---------------------------------------------------------- browse */

.browse-head { max-width: var(--measure); }

.filters {
  margin: 1.75rem 0 1rem; padding: 1rem 1.1rem;
  border: 1px solid var(--rule); border-radius: 3px; background: var(--paper-2);
  max-width: 62rem;
}
.f-row { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: .75rem; }
.f-row:last-of-type { margin-bottom: .25rem; }
.filters label { display: flex; flex-direction: column; gap: .25rem; font-family: var(--sans); font-size: .78rem; color: var(--ink-faint); }
.filters label span { text-transform: uppercase; letter-spacing: .05em; }
.f-search { flex: 1 1 18rem; }
.filters input, .filters select {
  font: inherit; font-size: .95rem; font-family: var(--sans);
  padding: .42rem .55rem; border: 1px solid var(--rule); border-radius: 2px;
  background: var(--paper); color: var(--ink); min-width: 8rem;
}
.filters input:focus, .filters select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.f-status { margin: .4rem 0 0; font-family: var(--sans); font-size: .82rem; color: var(--ink-faint); display: flex; gap: 1rem; }
.f-term { margin: .4rem 0 0; font-family: var(--sans); font-size: .82rem; color: var(--ink-soft); }

.results { list-style: none; margin: 0; padding: 0; max-width: 62rem; }
.result { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.loading { padding: 1.5rem 0; color: var(--ink-faint); font-family: var(--sans); font-size: .9rem; }
.r-head { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: baseline; text-decoration: none; }
.r-id {
  font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .06em;
  background: var(--paper-2); border: 1px solid var(--rule); color: var(--ink-soft);
  padding: .1rem .45rem; border-radius: 2px;
}
.r-date { font-weight: 600; color: var(--ink); }
.r-head:hover .r-date { color: var(--accent); }
.r-place { font-size: .85rem; color: var(--ink-faint); font-style: italic; }
.r-flags { margin: .45rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.chip {
  font-family: var(--sans); font-size: .68rem; letter-spacing: .04em;
  padding: .1rem .45rem; border-radius: 999px;
  background: var(--paper-2); border: 1px solid var(--rule); color: var(--ink-faint);
}
.chip.warn { color: var(--warn); border-color: var(--warn); }
.r-snip { margin: .5rem 0 0; font-size: .92rem; color: var(--ink-soft); line-height: 1.55; }
.r-people { margin: .4rem 0 0; font-family: var(--sans); font-size: .75rem; color: var(--ink-faint); }

/* Summary in the browse list. Clamped to three lines so a long summary cannot
   push the next result off the screen; the whole paragraph is on the letter
   page itself. */
.r-summary {
  margin: .5rem 0 0; font-size: .92rem; color: var(--ink-soft); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.r-corr {
  margin: .3rem 0 0; font-family: var(--sans); font-size: .75rem;
  color: var(--ink-faint);
}
.r-corr .c-arrow, .correspondents .c-arrow { opacity: .6; padding: 0 .15em; }
mark { background: var(--mark); color: inherit; padding: 0 .1em; }
.empty { color: var(--ink-faint); font-family: var(--sans); }

/* ---------------------------------------------------------- letter */

.letter {
  display: grid; gap: 2rem 2.5rem; max-width: 96rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 64rem) {
  .letter { grid-template-columns: minmax(0, 1fr) 15rem; }
  .letter-nav, .letter-head { grid-column: 1 / -1; }
  .meta { grid-column: 2; grid-row: 3; }
  .letter-body { grid-column: 1; grid-row: 3; }
}

/* Two panes: the manuscript on the left, its text on the right. They stack on
   narrow screens, and the image sticks while you scroll its page's text. */
.pane-pair { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) {
  .pane-pair { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }
  .pane-scan { position: sticky; top: 4.5rem; align-self: start; }
}
body.no-scans .pane-scan { display: none; }
body.no-scans .pane-pair { grid-template-columns: minmax(0, 1fr); }
.noscan {
  font-family: var(--sans); font-size: .8rem;
  border: 1px dashed var(--rule); padding: 1rem; text-align: center; border-radius: 2px;
}

.letter-nav {
  display: flex; flex-wrap: wrap; gap: .6rem 2rem;
  font-family: var(--sans); font-size: .8rem;
  padding-bottom: .9rem; border-bottom: 1px solid var(--rule);
}
.nav-group { display: flex; gap: .7rem; align-items: baseline; }
.nav-label { color: var(--ink-faint); text-transform: uppercase; letter-spacing: .05em; font-size: .7rem; }
.nav-group .disabled { color: var(--rule); }
.nav-holding { flex-basis: 100%; margin: 0; display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: baseline; }
.nav-holding .nav-archive { color: var(--ink-faint); }

.letter-head h1 { display: flex; flex-wrap: wrap; gap: .6rem; align-items: baseline; }
.letter-head .place { margin: 0; color: var(--ink-soft); font-style: italic; }
.letter-head .correspondents {
  margin: .35rem 0 0; font-family: var(--sans); font-size: .8rem; color: var(--ink-faint);
}
.letter-head .correspondents .c-from, .letter-head .correspondents .c-to { color: var(--ink-soft); }
/* Why a document is related ("Answers Letter 6"): the note goes on a line of
   its own under the link, so it does not run on from the link text. */
.letter-head .rel-note { display: block; margin: .15rem 0 .45rem; color: var(--ink-soft); }

/* The one-paragraph summary. It sits inside the letter header, because it
   describes the document rather than forming part of it. Set in the sans face
   and muted, so it is never mistaken for something the letter itself says; no
   rule above it, since it now belongs to the header block rather than dividing
   the header from the text. */
.letter-head .letter-summary {
  margin: .9rem 0 0;
  font-family: var(--sans); font-size: .92rem; line-height: 1.6; color: var(--ink-soft);
  max-width: 62ch;
}
.badge {
  font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; padding: .15rem .5rem; border-radius: 2px;
  background: var(--paper-2); border: 1px solid var(--rule); color: var(--ink-faint);
}
.notice {
  border-left: 3px solid var(--warn); padding: .6rem .9rem;
  background: var(--paper-2); color: var(--ink-soft); font-size: .92rem;
}

.viewbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.vbtn {
  font-family: var(--sans); font-size: .78rem; cursor: pointer;
  padding: .3rem .8rem; border: 1px solid var(--rule); border-radius: 2px;
  background: var(--paper); color: var(--ink-soft);
}
.vbtn.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.viewhint { font-family: var(--sans); font-size: .75rem; color: var(--ink-faint); flex: 1 1 14rem; }
/* The view preferences: "hide scans", "glossary terms". Unstyled, they took
   the body's large serif and crowded the hint on a phone. */
.chk {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--sans); font-size: .78rem; color: var(--ink-soft);
  cursor: pointer; white-space: nowrap;
}
.chk input { margin: 0; accent-color: var(--accent); }
@media (max-width: 40rem) {
  .viewhint { flex-basis: 100%; }
}

/* ---- the reader's glossary (assets/glossary.js) ---- */
/* A marked word: a faint dotted underline, solid while its box is open. */
.gl {
  cursor: pointer; border-radius: 2px;
  text-decoration: underline dotted;
  text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
  text-decoration-thickness: 1.5px; text-underline-offset: .22em;
}
.gl:hover, .gl[aria-expanded="true"] {
  text-decoration-style: solid;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.gl:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.gl-off .gl { text-decoration: none; cursor: inherit; background: none; }

.gl-box {
  position: absolute; z-index: 50; width: min(22rem, calc(100vw - 2rem));
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
  padding: .9rem 1rem .8rem;
  font-family: var(--sans); font-size: .9rem; line-height: 1.45;
}
.gl-box p { margin: 0 0 .55rem; }
.gl-box .gl-h { margin: 0 2rem .15rem 0; font-family: var(--serif); font-size: 1.08rem; font-weight: 700; }
.gl-box .gl-orig { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.gl-box .gl-more { font-size: .82rem; }
.gl-box .gl-x {
  all: unset; position: absolute; top: .4rem; right: .5rem;
  width: 2.2rem; height: 2.2rem; text-align: center; line-height: 2.2rem;
  font-size: 1.35rem; color: var(--ink-faint); cursor: pointer; border-radius: 50%;
}
.gl-box .gl-x:hover, .gl-box .gl-x:focus-visible { color: var(--ink); background: var(--paper-2); }
/* On a phone the box is a sheet from the bottom of the screen, so the text
   it explains stays visible above it. */
@media (max-width: 40rem) {
  .gl-box {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: auto; max-height: 60vh; overflow: auto;
    border-radius: 14px 14px 0 0; border-bottom: 0;
    padding: 1.1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 30px rgba(0, 0, 0, .2);
    font-size: .95rem;
  }
  .gl-box::before {
    content: ""; display: block; width: 2.4rem; height: 4px; border-radius: 2px;
    background: var(--rule); margin: -.35rem auto .8rem;
  }
}

/* ---- manuscript pages within a letter ---- */
.ms-page { margin: 0 0 1.6rem; }
.page-rule {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: baseline;
  margin: 1.8rem 0 .7rem; padding-top: .5rem;
  border-top: 1px dashed var(--rule);
  font-family: var(--sans);
}
.ms-page:first-of-type .page-rule { margin-top: 0; border-top: 0; padding-top: 0; }
.page-no {
  font-size: .7rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-soft);
}
.page-lines { font-size: .7rem; color: var(--ink-faint); }

/* Diplomatic view: one item per manuscript line, numbered to the archival file. */
ol.dip {
  margin: 0; padding: 0 0 0 3.2rem; list-style: decimal;
  font-size: 1rem; line-height: 1.75;
}
ol.dip li {
  padding-left: .35rem;
  white-space: pre-wrap; word-wrap: break-word;
}
ol.dip li::marker {
  font-family: var(--sans); font-size: .68rem; color: var(--ink-faint);
}
/* Line numbers are reference furniture - keep them out of copied text. */
@media print { ol.dip { list-style: none; padding-left: 0; } }

.text-view[data-view="reading"] p,
.text-view[data-view="translation"] p { max-width: var(--measure); }

/* Paragraphs in the reading view. The reading text never crosses a page break,
   so a paragraph that began on the previous page starts again here; .runs-on
   marks that and drops the opening indent, so the page turn does not read as a
   new paragraph. */
.text-view[data-view="reading"] p + p { margin-top: 0; text-indent: 1.4em; }
.text-view[data-view="reading"] p.runs-on { text-indent: 0; }
/* The English follows the same paragraphs, set the same way. A line break
   inside a paragraph (a dateline, an address) is kept. */
.text-view[data-view="translation"] p { white-space: pre-line; }
.text-view[data-view="translation"] p + p { margin-top: 0; text-indent: 1.4em; }
.text-view[data-view="translation"] p.runs-on { text-indent: 0; }

/* Text written sideways on the page (units/<slug>/sideways.yml): set apart
   under a label so it does not read as if it ran on in order with the lines
   around it. The line numbering carries straight through. Text the receiving
   office wrote on a letter (office_notes.yml) is set apart the same way. */
.sideways { border-left: 3px solid var(--rule); padding-left: .8em; margin: .6em 0; }
.sideways-note { font-family: var(--sans); font-size: .8em; font-style: italic; color: var(--ink-soft); }
/* footnotes of a printed edition (units/<slug>/footnotes.yml) */
sup.fn { font-size: .7em; line-height: 0; vertical-align: super; color: var(--ink-soft); padding: 0 .05em; }
.fn-note { font-size: .88em; color: var(--ink-soft); }
.sideways ol.dip { margin-top: .2em; margin-bottom: 0; }
.text-view[data-view="reading"] .sideways p,
.text-view[data-view="translation"] .sideways p { text-indent: 0; margin-top: .2em; }

/* A document laid out as a table (a register of creditors): entry number,
   name, then amounts grouped by currency. Scrolls sideways on its own rather
   than widening the page. */
.ledger-wrap { overflow-x: auto; }
table.ledger {
  border-collapse: collapse; font-size: .92rem; line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
table.ledger caption {
  caption-side: top; text-align: left; font-style: italic;
  padding-bottom: .5rem; color: var(--ink-soft);
}
table.ledger th, table.ledger td { padding: .2rem .5rem; vertical-align: top; }
table.ledger thead th {
  font-family: var(--sans); font-size: .7rem; font-weight: 600;
  color: var(--ink-soft); border-bottom: 1px solid var(--rule);
}
table.ledger th.grp { text-align: center; border-bottom: 1px solid var(--rule); }
table.ledger .no { text-align: right; color: var(--ink-faint); font-family: var(--sans); font-size: .75rem; }
table.ledger .name { text-align: left; }
table.ledger .num { text-align: right; white-space: nowrap; }
table.ledger tbody tr:nth-child(even) { background: var(--paper-2); }
table.ledger tfoot td { border-top: 2px solid var(--rule); font-weight: 600; }
/* A page's own total, between the entries. */
table.ledger tbody tr.sum td { border-top: 2px solid var(--rule); font-weight: 600; }
/* The page image itself. */
.scan-link { display: block; text-decoration: none; }
img.scan {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--rule); background: #fff; border-radius: 2px;
}
.scan-link:hover img.scan { border-color: var(--accent); }
.scan-cap {
  display: block; margin-top: .35rem;
  font-family: var(--sans); font-size: .72rem; color: var(--ink-faint);
  word-break: break-all;
}
.scan-link:hover .scan-cap { color: var(--accent); }

.translation { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); }
.translation h2 { margin-top: 0; }
.translation p { max-width: var(--measure); }
.status-draft { color: var(--warn); border-color: var(--warn); }

.meta { font-family: var(--sans); font-size: .82rem; }
.meta h2 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-faint); margin: 0 0 .7rem; padding-bottom: .4rem;
  border-bottom: 1px solid var(--rule);
}
.meta dl { margin: 0; }
.meta dt { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); margin-top: .85rem; }
.meta dd { margin: .15rem 0 0; color: var(--ink-soft); }
.meta .taglist { display: flex; flex-wrap: wrap; gap: .3rem .6rem; }

/* ---------------------------------------------------------- indexes */

.index-list { list-style: none; padding: 0; max-width: 62rem; column-gap: 2.5rem; }
@media (min-width: 40rem) { .index-list { columns: 2; } }
@media (min-width: 62rem) { .index-list { columns: 3; } }
.index-list li { break-inside: avoid; margin-bottom: .45rem; font-size: .95rem; }
.index-list .n { color: var(--ink-faint); font-family: var(--sans); font-size: .78rem; }

.person { max-width: var(--measure); padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
.person h2 { margin: 0 0 .2rem; }
.person h2 .life { font-family: var(--sans); font-size: .8rem; font-weight: 400; color: var(--ink-faint); margin-left: .35rem; }
.person .bio { margin: .25rem 0 .45rem; font-size: .95rem; color: var(--ink-soft); }
.person .refs { font-family: var(--sans); font-size: .8rem; color: var(--ink-faint); }
.person .refs a { margin-right: .4rem; }

/* --- People / Places sort controls -------------------------------------- */
.sortbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  max-width: 62rem; margin: 0 0 1.4rem;
  padding-bottom: .9rem; border-bottom: 1px solid var(--rule);
}
.sortbar-label {
  font-family: var(--sans); font-size: .75rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint); margin-right: .3rem;
}
.sortbar button {
  font-family: var(--sans); font-size: .8rem; line-height: 1;
  padding: .42rem .7rem; cursor: pointer;
  color: var(--ink-soft); background: transparent;
  border: 1px solid var(--rule); border-radius: 3px;
}
.sortbar button:hover { color: var(--ink); border-color: var(--ink-faint); }
.sortbar button[aria-pressed="true"] {
  color: var(--paper); background: var(--ink); border-color: var(--ink);
}
/* Every reference is a link - no truncation, so a long list has to wrap
   readably rather than run off the measure. */
.person .reflist { line-height: 1.9; max-width: 62rem; }
.person .reflist a {
  display: inline-block; margin: 0 .35rem .15rem 0;
  padding: .05rem .3rem; border: 1px solid var(--rule); border-radius: 3px;
  text-decoration: none;
}
.person .reflist a:hover { border-color: var(--ink-faint); text-decoration: none; }

/* A person's or place's documents (_includes/doc-list.html): the Browse card,
   opened on demand, with the summary cut to two lines. */
.person .counts { margin: .1rem 0 0; }
.doclist { margin-top: .5rem; }
.doclist > summary {
  cursor: pointer; font-family: var(--sans); font-size: .85rem; color: var(--accent);
  padding: .2rem 0; width: fit-content;
}
.doclist > summary:hover { text-decoration: underline; }
.doclist[open] > summary { margin-bottom: .2rem; }
/* Indented under the entry, with a rule down the side, so the cards read as
   that person's or place's and not as the next entry (editor, 2026-10-04). */
.doclist-body {
  margin-left: .35rem; padding-left: 1.1rem;
  border-left: 2px solid var(--rule);
}
.doclist .doclist-order { border-bottom: 0; margin: .4rem 0 0; padding-bottom: 0; }
.doclist .results { max-width: var(--measure); }
.doclist .result { padding: .8rem 0; }
.doclist .result:last-child { border-bottom: 0; }
.doclist .r-summary { -webkit-line-clamp: 2; }
.doclist-group {
  font-family: var(--sans); font-size: .8rem; font-weight: 600; color: var(--ink-soft);
  padding: 1rem 0 .3rem; border-bottom: 1px solid var(--rule);
}
.doclist-group span { font-weight: 400; }
.r-unit { font-family: var(--sans); font-size: .75rem; color: var(--ink-faint); }
.chip.chip-n { color: var(--accent); border-color: var(--accent); }

/* ------------------------------------------------------ language switch */
.langswitch {
  margin-left: auto; font-family: var(--sans); font-size: .78rem;
  padding: .2rem .55rem; border: 1px solid var(--rule); border-radius: 2px;
  background: var(--paper-2); color: var(--ink-soft); cursor: pointer;
  text-decoration: none; line-height: 1.6; white-space: nowrap;
}
.langswitch:hover { color: var(--ink); border-color: var(--ink-faint); }
.site-head { flex-wrap: wrap; }

/* In-text references to a letter, in the narrative page. Deliberately quieter
   than an ordinary link: the prose should read as prose, with the citation
   available rather than insistent. */
.prose a[href*="/documents/"] {
  text-decoration-color: var(--rule);
  text-underline-offset: .18em;
}
.prose a[href*="/documents/"]:hover { text-decoration-color: currentColor; }
.prose blockquote {
  margin: 1.2rem 0; padding: .1rem 0 .1rem 1.1rem;
  border-left: 2px solid var(--rule); color: var(--ink-soft);
}
.prose blockquote p { margin: .3rem 0; }

/* Pull-quote. Short lines lifted out of the letters to break up the narrative
   and let the correspondents speak in their own voice. Larger and set on a
   narrower measure than the body text, with no left rule, so it reads as a
   held-up phrase rather than as a block citation. */
.prose blockquote.pull {
  margin: 1.8rem 0; padding: 0; border-left: 0;
  max-width: 44ch; color: var(--ink);
  font-size: 1.2rem; line-height: 1.45; font-style: italic;
}
.prose blockquote.pull p { margin: 0; }
.prose blockquote.pull cite {
  display: block; margin-top: .5rem;
  font-family: var(--sans); font-size: .74rem; font-style: normal;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint);
}
.prose blockquote.pull cite a { color: inherit; text-decoration-color: var(--rule); }
.prose blockquote.pull cite a:hover { color: var(--ink-soft); }

@media (min-width: 60rem) {
  .prose blockquote.pull { margin-left: 1.5rem; }
}

/* The contact address on the rights page, reversed in the source (see
   _includes/email.html) and shown the right way round. */
.mail-rev { unicode-bidi: bidi-override; direction: rtl; }
.credits dd { margin: .2rem 0 1rem; }
.credits dd ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.credits .credit-line { font-family: var(--sans); font-size: .85rem; color: var(--ink-soft); }

/* ---- the glossary page (_includes/glossary.html) ---- */
.gl-note { font-family: var(--sans); font-size: .82rem; color: var(--ink-faint); }
.gl-tools { max-width: var(--measure); margin: 1.4rem 0 .6rem; }
.gl-tools input[type="search"] {
  width: 100%; font: inherit; font-size: 1rem; padding: .55rem .7rem;
  border: 1px solid var(--rule); border-radius: 4px; background: var(--paper); color: var(--ink);
}
.gl-kinds { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.gl-chip {
  font-family: var(--sans); font-size: .78rem; cursor: pointer;
  padding: .3rem .75rem; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--paper); color: var(--ink-soft);
}
.gl-chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
/* The A-Z bar stays at the top while the list scrolls; on a phone it is one
   row, scrolled sideways. */
.gl-az {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-wrap: wrap; gap: .1rem;
  max-width: var(--measure); padding: .5rem 0; margin-bottom: .5rem;
  background: var(--paper); border-bottom: 1px solid var(--rule);
  font-family: var(--sans); font-size: .85rem;
}
.gl-az a {
  min-width: 1.9rem; padding: .25rem .35rem; text-align: center;
  text-decoration: none; color: var(--accent); border-radius: 3px;
}
.gl-az a:hover { background: var(--paper-2); }
.gl-az a.is-empty { color: var(--ink-faint); opacity: .45; pointer-events: none; }
@media (max-width: 40rem) {
  .gl-kinds { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -1rem; padding-right: 1rem; }
  .gl-kinds::-webkit-scrollbar, .gl-az::-webkit-scrollbar { display: none; }
  .gl-chip { flex: none; }
  .gl-az { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -1rem; padding-right: 1rem; }
  .gl-az a { flex: none; min-width: 2.4rem; padding: .45rem .4rem; }
}
.glossary { max-width: var(--measure); margin-bottom: 3rem; }
.gl-letter > h2 {
  font-size: 1.3rem; margin: 1.6rem 0 .2rem; color: var(--ink-faint);
  scroll-margin-top: 3.5rem;
}
.gl-entry { padding: .9rem 0 1rem; border-bottom: 1px solid var(--rule); scroll-margin-top: 3.5rem; }
.gl-entry h3 { margin: 0; font-size: 1.12rem; }
.gl-entry p { margin: .45rem 0 0; }
.gl-entry .gl-orig {
  margin-top: .15rem; font-family: var(--sans); font-size: .75rem;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint);
}
.gl-entry .gl-orig i { text-transform: none; letter-spacing: 0; font-size: .85rem; }
.gl-entry .gl-meta { font-family: var(--sans); font-size: .78rem; color: var(--ink-faint); }
.gl-entry:target { background: color-mix(in srgb, var(--accent) 8%, transparent); box-shadow: -.8rem 0 0 color-mix(in srgb, var(--accent) 8%, transparent); }
.gl-none { font-family: var(--sans); color: var(--ink-faint); }