/* Shared readability rules for the modern archive pages only. */
:root {
  --family-display: "Iowan Old Style", Palatino, "Palatino Linotype",
    "Book Antiqua", Georgia, serif;
  --family-ui: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  --family-label: "Josefin Sans", "Avenir Next", Avenir, sans-serif;
}
@font-face {
  font-family: "Josefin Sans";
  src: url("fonts/josefin-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}
html { overflow-wrap: break-word; }
body {
  font-family: var(--family-ui) !important;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: var(--family-display) !important;
  font-weight: 700;
  text-wrap: balance;
  overflow-wrap: normal;
}
.lead, .deck {
  font-family: var(--family-ui) !important;
  font-weight: 400 !important;
  text-wrap: pretty;
}
.era, .year, .timeline-year, .display-type {
  font-family: var(--family-display) !important;
}
p, li, td, dd, figcaption {
  text-wrap: pretty;
  orphans: 3;
  widows: 3;
}
nav a {
  white-space: nowrap;
  font-family: var(--family-label);
  font-weight: 700;
  letter-spacing: .055em;
}
.eyebrow, .kicker, .section-kicker, .type, .role, small, .label,
.controls label {
  font-family: var(--family-label) !important;
  font-weight: 700 !important;
}
button, input, select, textarea {
  font-family: var(--family-ui);
}
figcaption {
  font-family: var(--family-ui) !important;
}
.links a, .card-links a, .course-table a, .source-card .links a {
  font-family: var(--family-ui) !important;
  font-weight: 600 !important;
}
@media (max-width: 680px) {
  nav { column-gap: 16px !important; row-gap: 10px !important; }
  nav a { font-size: .78rem; }
}

/* One controlled reader for archival photographs and document previews. */
body.archive-viewer-open { overflow: hidden; }
.archive-media-trigger { cursor: zoom-in; }
.archive-media-trigger:focus-visible { outline: 3px solid #e0ac3f; outline-offset: 4px; }
.archive-media-viewer {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 12px;
  border: 0;
  background: rgba(0, 7, 10, .94);
  color: #f3eee3;
}
.archive-media-viewer::backdrop { background: rgba(0, 7, 10, .94); }
.archive-viewer-shell {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid #806d43;
  background: #03131a;
}
.archive-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 16px;
  border-bottom: 1px solid #5e5033;
}
.archive-viewer-header span {
  display: block;
  color: #dcb95f;
  font: 700 .68rem/1.2 var(--family-label);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.archive-viewer-header h2 {
  max-width: 70ch;
  margin: 3px 0 0;
  color: #fff;
  font: 600 clamp(1rem, 2vw, 1.35rem)/1.25 var(--family-display) !important;
  text-wrap: pretty;
}
.archive-viewer-close {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 1px solid #8b7648;
  background: #09232d;
  color: #f4d683;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}
.archive-viewer-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  padding: 8px 14px;
  border-bottom: 1px solid #51452e;
  background: #061b23;
}
.archive-viewer-toolbar :is(button, a), .archive-viewer-toolbar output {
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid #75643f;
  background: #0a2732;
  color: #ecd18b;
  font: 650 .72rem/1.15 var(--family-label);
  text-decoration: none;
}
.archive-viewer-toolbar button { cursor: pointer; }
.archive-viewer-toolbar output { display: inline-grid; place-items: center; min-width: 58px; }
.archive-viewer-toolbar [data-viewer-source] { margin-left: auto; }
.archive-viewer-canvas {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: auto;
  touch-action: none;
  cursor: grab;
  background: #01080c;
}
.archive-viewer-canvas.dragging { cursor: grabbing; }
.archive-viewer-canvas img {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  transform-origin: center;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  object-fit: contain !important;
  user-select: none;
  pointer-events: none;
}
.archive-viewer-caption {
  max-height: 22dvh;
  overflow: auto;
  padding: 11px 16px;
  border-top: 1px solid #51452e;
  color: #c9d6d7;
  font: 400 .8rem/1.45 var(--family-ui);
}
@media (max-width: 650px) {
  .archive-media-viewer { padding: 0; }
  .archive-viewer-shell { border: 0; }
  .archive-viewer-toolbar { gap: 5px; padding: 7px; }
  .archive-viewer-toolbar :is(button, a), .archive-viewer-toolbar output { padding: 7px; font-size: .66rem; }
  .archive-viewer-toolbar [data-viewer-actual] { display: none; }
  .archive-viewer-toolbar [data-viewer-source] { margin-left: 0; }
  .archive-viewer-caption { max-height: 27dvh; }
}

/* Shared exhibit diagram: consistent structure, page-specific content. */
.story-diagram {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 28px 0 34px;
  padding: 1px;
  border: 1px solid rgba(136, 197, 199, .34);
  background: rgba(136, 197, 199, .24);
}
.story-diagram > div {
  position: relative;
  min-width: 0;
  padding: 20px;
  background: #0a2029;
  color: #d8e7e7;
}
.story-diagram > div:not(:last-child)::after {
  content: "→";
  position: absolute;
  z-index: 1;
  top: 50%;
  right: -12px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: #d3a84e;
  color: #07151b;
  font-weight: 900;
}
.story-diagram strong,
.story-diagram span {
  display: block;
}
.story-diagram strong {
  margin-bottom: 5px;
  color: #f2cd78;
  font: 650 1.02rem/1.25 var(--family-display);
}
.story-diagram span {
  color: #b8cdcf;
  font: 500 .77rem/1.45 var(--family-ui);
}
.story-diagram[data-steps="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.story-diagram.compact > div { padding: 15px; }
.story-diagram.lost-track > div:nth-child(2) { border-top: 3px dashed #d3a84e; }
@media (max-width: 680px) {
  .story-diagram,
  .story-diagram[data-steps="4"] { grid-template-columns: 1fr; }
  .story-diagram > div:not(:last-child)::after {
    top: auto;
    right: 18px;
    bottom: -12px;
    transform: rotate(90deg);
  }
}