/* ============================================================
   Britannica CD 2000 — article & content typography
   Serif reader, fact boxes, inline media, related links,
   cross-references, misc content states.
   ============================================================ */

.article-page { max-width: 720px; margin: 0 auto; padding: 18px 28px 40px; font: 16px/1.5 var(--serif); color: #111; -webkit-user-select: text; user-select: text; }
.article-page.tight { max-width: none; }

.art-eyebrow { font: bold 10px var(--ui-font); letter-spacing: 0.14em; color: #7a621a; text-transform: uppercase; margin-bottom: 6px; display: flex; gap: 8px; align-items: center; }
.art-eyebrow .eyebrow-rule { flex: 1; height: 1px; background: linear-gradient(90deg, #c9a227, transparent); }
.art-title { font: bold 30px/1.15 var(--serif); margin: 0 0 4px; color: #10214b; letter-spacing: 0.01em; }
.art-pron { font: italic 13px var(--serif); color: #555; margin-bottom: 10px; }
.art-lead { font: italic 16.5px/1.55 var(--serif); margin: 8px 0 14px; color: #222; }

.art-body h2 { font: bold 19px var(--serif); margin: 22px 0 8px; color: #10214b; border-bottom: 1px solid #d8dce8; padding-bottom: 3px; }
.art-body h3 { font: bold italic 15.5px var(--serif); margin: 14px 0 6px; color: #1a2a5e; }
.art-body p { margin: 0 0 11px; text-align: justify; hyphens: auto; }
.art-body ul, .art-body ol { margin: 0 0 11px 24px; padding: 0; }
.art-body li { margin-bottom: 4px; }
.art-body dl.fact-list { margin: 0 0 11px; }
.art-body dt { font-weight: bold; font-style: italic; margin-top: 6px; }
.art-body dd { margin-left: 18px; }

/* cross-reference links */
.article-page a.xref { color: var(--link); text-decoration: underline; cursor: pointer; }
.article-page a.xref:visited { color: var(--visited); }
.article-page a.xref:hover { color: #c00; }

/* fact box */
.factbox {
  float: right;
  width: 218px;
  margin: 6px 0 12px 18px;
  border: 1px solid;
  border-color: #fff #808080 #808080 #fff;
  background: linear-gradient(180deg, #f2f4fa, #e8ebf4);
  box-shadow: 1px 1px 0 #ccc;
  font-family: var(--ui-font);
}
.factbox .fb-head {
  background: linear-gradient(90deg, #10214b, #2a4383);
  color: #f2dfa0;
  font: bold 11px var(--ui-font);
  letter-spacing: 0.06em;
  padding: 5px 8px;
}
.factbox table { border-collapse: collapse; width: 100%; font: 11px/1.45 var(--ui-font); }
.factbox td { padding: 3px 8px; border-bottom: 1px solid #dfe3ec; vertical-align: top; }
.factbox td.k { color: #555; width: 42%; font-weight: bold; }
.factbox td.v { color: #111; }
.factbox .fb-note { font: italic 10px/1.4 var(--ui-font); color: #666; padding: 5px 8px; }

/* inline media */
.media-inline { display: block; margin: 14px auto 6px; text-align: center; clear: both; }
.media-inline .mi-thumb {
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
  background: #eef1f8;
  box-shadow: 1px 1px 0 #ccc;
  padding: 3px;
  cursor: pointer;
  display: inline-block;
  max-width: 100%;
}
.media-inline .mi-thumb:hover { outline: 2px solid var(--eb-gold); }
.media-inline .mi-thumb svg { display: block; max-width: 100%; height: auto; }
.media-inline .mi-cap { font: italic 11.5px/1.45 var(--serif); color: #444; margin: 4px auto 0; max-width: 480px; }
.media-inline .mi-cap .mi-view { font: 10px var(--ui-font); color: #7a621a; }
.media-inline .mi-type { font: bold 9px var(--ui-font); color: #7a621a; letter-spacing: 0.08em; display: block; margin-bottom: 2px; }

/* article footer */
.art-footer { clear: both; margin-top: 26px; border-top: 3px double var(--eb-gold); padding-top: 10px; font-family: var(--ui-font); }
.art-also { font: 11px var(--ui-font); margin-bottom: 10px; }
.art-also b { color: #10214b; letter-spacing: 0.05em; }
.art-also a { color: var(--link); text-decoration: underline; cursor: pointer; }
.art-also a:visited { color: var(--visited); }
.art-prevnext { display: flex; justify-content: space-between; gap: 10px; font: 11px var(--ui-font); }
.art-prevnext a { color: var(--link); }
.art-actions { display: flex; gap: 6px; margin: 12px 0 4px; flex-wrap: wrap; }
.art-actions .btn95 { min-height: 0; padding: 3px 10px; }

/* article not found */
.art-notfound { text-align: center; padding: 40px 20px; font-family: var(--ui-font); }
.art-notfound .anf-code { font: bold 46px var(--serif); color: #10214b; }
.art-notfound h3 { font: bold 14px var(--ui-font); margin: 6px 0 10px; }
.art-notfound p { font: 12px/1.6 var(--serif); color: #333; max-width: 420px; margin: 4px auto; }

/* contributor line (period touch) */
.art-contrib { font: italic 11px var(--serif); color: #666; margin-top: 18px; border-top: 1px solid #e5e5e5; padding-top: 6px; }

/* text size variants (View > Text Size) */
body.txt-lg .article-page { font-size: 18px; }
body.txt-lg .art-lead { font-size: 19px; }
body.txt-sm .article-page { font-size: 14px; }
body.txt-sm .art-lead { font-size: 15px; }

/* keyboard focus helper */
:focus-visible { outline: 1px dotted #000; }

/* small screens: shrink left panel */
@media (max-width: 860px) {
  .eb-left { width: 190px; }
  .article-page { padding: 12px 14px 30px; }
  .factbox { width: 180px; margin-left: 12px; }
}