/* ==========================================================================
   Letters of Junius — the original letters (1772 Woodfall edition) and their index.
   Light pages. The article shell comes from loj-single-post.css; this file adds the
   period typography inside the text and the index list.
   ========================================================================== */

body.loj-letters{
  --loj-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --loj-sans: var(--text-font-family, Figtree, Inter, sans-serif);
  --loj-ink:#111110; --loj-text:#31302d; --loj-muted:#5f5e59; --loj-rule:rgba(17,17,16,.12);
  --loj-measure:680px;
}
html:has(body.loj-letters){background:#fff}
body.loj-letters{background:#fff;color:var(--loj-text)}
body.loj-letters #brx-header .loj-header-alpha,body.loj-letters #brx-footer .loj-footer-alpha{background:#fff}
body.loj-letters #brx-footer .loj-footer-alpha__copy,body.loj-letters #brx-footer .loj-footer-alpha__link{color:var(--loj-muted)}
body.loj-letters #brx-footer .loj-footer-alpha__link:hover{color:var(--loj-ink)}

/* ---------- Single letter ---------- */
body.loj-letters .loj-letter-alpha{padding:0 0 96px;background:#fff}
body.loj-letters .brxe-container.loj-letter-alpha__inner{max-width:none;width:100%;padding-inline:clamp(20px,3.9vw,80px)}
body.loj-letters .loj-letter-alpha__wrap{display:flex;flex-direction:column;width:100%;max-width:var(--loj-measure);margin:0 auto}
body.loj-letters .loj-letter-alpha__kicker{font-family:var(--loj-sans);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--loj-muted);text-decoration:none;margin:32px 0 0;align-self:flex-start}
body.loj-letters .loj-letter-alpha__kicker:hover{color:var(--loj-ink)}
body.loj-letters .loj-letter-alpha__title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* the H1 is kept for search engines; the printed heading is in the text */

/* The text itself, set exactly as Wikisource renders the 1772 transcription:
   sans-serif 16px / 26px, left-aligned, 2em paragraph indent, inline large initial, 880px column */
body.loj-letters .loj-letter-alpha__wrap{max-width:880px}
body.loj-letters .loj-letter-alpha__body{font-family:var(--loj-sans);font-size:16px;line-height:26px;color:#202122;margin-top:32px;width:100%;text-align:left;hyphens:manual;-webkit-hyphens:manual}
body.loj-letters .loj-letter-alpha__body p{margin:6.4px 0 8px;text-indent:2em;text-align:left;hyphens:manual}
body.loj-letters .loj-letter-alpha__body .loj-center p,
body.loj-letters .loj-letter-alpha__body .loj-right p,
body.loj-letters .loj-letter-alpha__body .loj-block-center p{text-indent:0;text-align:inherit}
body.loj-letters .loj-letter-alpha__body i,body.loj-letters .loj-letter-alpha__body em{font-style:italic}
body.loj-letters .loj-letter-alpha__body .loj-center{text-align:center;margin:0 auto}
body.loj-letters .loj-letter-alpha__body .loj-center p{margin:6.4px 0 8px;line-height:26px;color:#202122}
body.loj-letters .loj-letter-alpha__body .loj-center p + p{margin-top:26px}
body.loj-letters .loj-letter-alpha__body .loj-right{text-align:right}
body.loj-letters .loj-letter-alpha__body .loj-right p{margin:6.4px 0 8px;text-indent:0}
body.loj-letters .loj-letter-alpha__body .loj-block-center{margin:0 auto;text-align:center;max-width:max-content}
body.loj-letters .loj-letter-alpha__body .loj-size-xl{font-size:207%}
body.loj-letters .loj-letter-alpha__body .loj-size-l{font-size:144%}
body.loj-letters .loj-letter-alpha__body .loj-size-m{font-size:120%}
body.loj-letters .loj-letter-alpha__body .loj-size-s{font-size:83%}
body.loj-letters .loj-letter-alpha__body .loj-sc{font-variant:small-caps}
body.loj-letters .loj-letter-alpha__body .loj-upper{text-transform:uppercase}
body.loj-letters .loj-letter-alpha__body .loj-initial{font-size:3em;line-height:1em;margin-right:.05em}
body.loj-letters .loj-letter-alpha__body .loj-hanging{padding-left:2em;text-indent:-2em}
body.loj-letters .loj-letter-alpha__body hr.loj-break{border:0;border-top:1px solid #a2a9b1;width:100%;margin:16px 0}
body.loj-letters .loj-letter-alpha__body dl{margin:6.4px 0 8px 0}
body.loj-letters .loj-letter-alpha__body dd{margin:0 0 0 2em}
body.loj-letters .loj-letter-alpha__body sup.loj-ref{font-size:13.28px;line-height:1;vertical-align:super}
body.loj-letters .loj-letter-alpha__body sup.loj-ref a{color:#3366cc;text-decoration:none}
body.loj-letters .loj-letter-alpha__body sup.loj-ref a:hover{text-decoration:underline}
body.loj-letters .loj-letter-alpha__body sup.loj-ref a::before{content:"["}
body.loj-letters .loj-letter-alpha__body sup.loj-ref a::after{content:"]"}
body.loj-letters .loj-letter-alpha__body .loj-notes-wrap{margin-top:16px;font-size:83%;line-height:1.25;clear:both}
body.loj-letters .loj-letter-alpha__body ol.loj-notes{margin:0;padding-left:3.2em;color:#202122}
body.loj-letters .loj-letter-alpha__body ol.loj-notes li{margin:0 0 .3em;text-indent:0;text-align:left}
body.loj-letters .loj-letter-alpha__body ol.loj-notes li:target{background:#eaf3ff}

/* previous / next */
body.loj-letters .loj-letter-alpha__nav{display:flex;flex-direction:row;justify-content:space-between;gap:16px;width:100%;margin-top:56px;padding-top:20px;border-top:1px solid var(--loj-rule);font-family:var(--loj-sans);font-size:15px}
body.loj-letters .loj-letter-alpha__nav a{color:var(--loj-muted);text-decoration:none}
body.loj-letters .loj-letter-alpha__nav a:hover{color:var(--loj-ink)}
body.loj-letters .loj-letter-alpha__nav .post-next{margin-left:auto;text-align:right}
body.loj-letters .loj-letter-alpha__nav .post-prev{margin-right:auto;text-align:left}

/* ---------- Index (archive) ---------- */
body.loj-letters .loj-index-alpha{padding:0 0 96px;background:#fff}
body.loj-letters .brxe-container.loj-index-alpha__inner{max-width:none;width:100%;padding-inline:clamp(20px,3.9vw,80px)}
body.loj-letters .loj-index-alpha__wrap{display:flex;flex-direction:column;width:100%;max-width:var(--loj-measure);margin:0 auto}
body.loj-letters .loj-index-alpha__title{font-family:var(--loj-serif);font-size:clamp(32px,3.4vw,48px);font-weight:600;line-height:1.05;letter-spacing:-.01em;color:var(--loj-ink);margin:40px 0 0}
body.loj-letters .loj-index-alpha__lede{font-family:var(--loj-sans);font-size:17px;line-height:1.6;color:var(--loj-muted);margin:16px 0 0;max-width:38em}
body.loj-letters .loj-index-alpha__lede p{margin:0 0 .8em}
body.loj-letters .loj-index-alpha__list{display:flex;flex-direction:column;width:100%;margin-top:36px;border-top:1px solid var(--loj-rule)}
body.loj-letters .loj-index-alpha__item{display:flex;flex-direction:row;align-items:baseline;gap:20px;width:100%;padding:14px 0;border-bottom:1px solid var(--loj-rule);text-decoration:none;color:var(--loj-ink)}
body.loj-letters .loj-index-alpha__item:hover .loj-index-alpha__name{text-decoration:underline;text-underline-offset:.18em;text-decoration-color:var(--loj-rule)}
body.loj-letters .loj-index-alpha__name{font-family:var(--loj-serif);font-size:19px;font-weight:600;color:var(--loj-ink);margin:0;flex:0 0 9.5em;width:auto}
body.loj-letters .loj-index-alpha__meta{font-family:var(--loj-sans);font-size:14px;line-height:1.4;color:var(--loj-muted);flex:1 1 auto;width:auto;min-width:0}
@media (max-width:600px){
  body.loj-letters .loj-index-alpha__item{flex-direction:column;gap:4px}
  body.loj-letters .loj-index-alpha__name{flex:0 0 auto}
}

/* ---------- Light-mode menu panel on every white page ---------- */
body.loj-light .loj-menu-alpha .brx-offcanvas-inner,body.loj-light .loj-menu-alpha__inner{background:#fff;color:#111110;border-left-color:rgba(17,17,16,.12);box-shadow:-20px 0 60px rgba(0,0,0,.12)}
body.loj-light .loj-menu-alpha__link{color:#111110}
body.loj-light .loj-menu-alpha__link:hover,body.loj-light .loj-menu-alpha__link:focus-visible{color:#5f5e59}
body.loj-light .loj-menu-alpha__label{color:#5f5e59}
body.loj-light .loj-menu-alpha__topic{color:#5f5e59}
body.loj-light .loj-menu-alpha__topic:hover{color:#111110}
body.loj-light .loj-menu-alpha__cta{background:transparent;color:#111110;border-color:rgba(17,17,16,.35)}
body.loj-light .loj-menu-alpha__cta:hover,body.loj-light .loj-menu-alpha__cta:focus-visible{color:#5f5e59}
body.loj-light .brx-offcanvas-backdrop{background:rgba(0,0,0,.35)}
body.loj-light .loj-header-alpha__toggle .brxa-inner,body.loj-light .loj-header-alpha__toggle .brxa-inner::before,body.loj-light .loj-header-alpha__toggle .brxa-inner::after{background:#111110}
body.loj-light .loj-header-alpha__link{color:#5f5e59}
body.loj-light .loj-header-alpha__link:hover{color:#111110}