/* Article styling shared across views: title block, body text, media, codex layout, print. */
.viewer {
  font-family: var(--font-serif);
  color: var(--text);
  line-height: 1.45;
}

.viewer__head {
  margin-bottom: 16px;
}
/* Page titles in Chicago, like the --font-heading article headings. */
.viewer__title {
  font-family: var(--font-chicago);
  font-size: 32px;
  margin: 0 0 6px 0;
  letter-spacing: 0.5px;
  /* Last resort when even 16px won't fit: two even lines, not a long line and an orphan. */
  text-wrap: balance;
}
.viewer__summary {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--text);
  margin: 8px 0 0 0;
}

.viewer__title-block {
  margin: 0 0 12px 0;
}
.viewer__kicker {
  font-family: var(--font-chicago);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 6px 0;
}
.viewer__title-block .viewer__title {
  margin: 0 0 6px 0;
}
/* Pulls the subtitle up under the title; the subtitle is squeezed to the title's width in JS. */
.viewer__title-frame:has(.viewer__subtitle) .viewer__title {
  margin: 0 0 4px 0;
  line-height: 1;
}
/* viewer-blocks.js fitSubtitle() scales this horizontally (scaleX) to match the title's width. */
.viewer__subtitle {
  font-family: var(--font-chicago);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.5px;
  color: var(--text);
  margin: 0;
  display: inline-block;
  transform-origin: left top;
}
.viewer__subline {
  font-family: var(--font-chicago);
  font-size: 14px;
  color: var(--text);
  letter-spacing: 0.3px;
  margin: 0;
}

.viewer__section {
  margin-top: 16px;
}
.viewer__section-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 8px 0;
  border-bottom: 1px solid var(--platinum-shadow);
  padding-bottom: 4px;
}

.viewer__body {
  font-family: var(--font-serif);
  font-size: 14px;
}
.viewer__body p {
  margin: 0 0 12px 0;
}
.viewer__body ul, .viewer__body ol {
  margin: 0 0 12px 24px;
  padding: 0;
}
.viewer__body li {
  margin: 0 0 4px 0;
}
.viewer__body strong { font-weight: bold; }
.viewer__body em { font-style: italic; }
.viewer__body a,
.viewer__deep-dive-body a {
  color: var(--link);
  text-decoration: underline;
}
.viewer__body h2, .viewer__body h3, .viewer__body h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  margin: 16px 0 6px 0;
}
.viewer__body h2 { font-size: 20px; }
.viewer__body h3 { font-size: 18px; }
.viewer__body h4 { font-size: 16px; }

.viewer__body .md-image img,
.viewer__body .md-figure img,
.viewer__deep-dive-body .md-figure img,
.viewer__deep-dive-body .md-figure video {
  max-width: 100%;
  border: 1px solid #000;
  box-shadow: 1px 1px 0 var(--platinum-shadow);
}
.viewer__body .md-figure,
.viewer__deep-dive-body .md-figure {
  margin: 12px 0;
  display: block;
}
.viewer__deep-dive-body > .md-figure {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.viewer__deep-dive-body > .md-figure img,
.viewer__deep-dive-body > .md-figure video {
  display: block;
  max-height: 520px;
}
/* Diagrams span the full width; other deep-dive figures shrink-wrap and centre. */
.viewer__deep-dive-body > .md-figure.md-diagram { width: 100%; }
.md-diagram svg {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--text);
  box-shadow: 1px 1px 0 var(--platinum-shadow);
}
/* Class vocabulary for inlined SVG diagrams (e.g. halo_weapons/*.svg); most colours follow the theme. */
.md-diagram .dg-bg            { fill: var(--window-body-bg); }
.md-diagram .dg-h             { font-family: var(--font-chicago); font-size: 12px; fill: var(--text); }
.md-diagram .dg-t             { font-family: var(--font-serif); font-size: 13px; fill: var(--text); }
.md-diagram .dg-s             { font-family: var(--font-serif); font-size: 11.5px; fill: var(--text); }
.md-diagram .dg-box           { stroke: var(--text); stroke-width: 1; }
.md-diagram .dg-box-plat      { fill: var(--platinum); }
.md-diagram .dg-box-accent    { fill: var(--window-body-bg); stroke: var(--link); stroke-width: 2; }
.md-diagram .dg-shadow        { fill: var(--platinum-shadow); }
.md-diagram .dg-line          { stroke: var(--text); stroke-width: 1.3; }
.md-diagram .dg-mark          { fill: var(--text); }
/* Stand-in scope frames (fr) for the night-vision chain: dark, amplified, green. Fixed colours, */
/* because they depict image content, not UI. */
.md-diagram .dg-fr0           { fill: #1E1E1E; }
.md-diagram .dg-fr1           { fill: #8A8A8A; }
.md-diagram .dg-fr2           { fill: #3E8E3E; }
.md-diagram .dg-scan          { stroke: #000; stroke-opacity: 0.3; }
.md-diagram .dg-hostile       { fill: none; stroke: #E04040; stroke-width: 2; }

.md-aside {
  display: grid;
  grid-template-columns: 1fr 28%;
  gap: 20px;
  margin: 16px 0;
}
.md-aside > p { margin: 0; }
.md-aside > .md-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.md-aside > .md-figure img {
  flex: 1 1 0;
  min-height: 160px;
  width: 100%;
  object-fit: cover;
  border: 1px solid #000;
  box-shadow: 1px 1px 0 var(--platinum-shadow);
}

.md-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 12px 0;
}
/* Exactly four items lay out 2x2 instead of whatever auto-fit gives. */
.md-gallery:has(> .md-figure:nth-child(4):last-child) {
  grid-template-columns: repeat(2, 1fr);
}
.md-gallery .md-figure { margin: 0; }
.md-gallery .md-figure img,
.md-gallery .md-figure video {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.viewer__body .md-figure__caption,
.viewer__deep-dive-body .md-figure__caption {
  font-family: var(--font-chicago);
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 4px;
  display: block;
}

.viewer__hero {
  margin: 0 0 16px 0;
}
.viewer__hero img,
.viewer__hero video,
.viewer__hero .viewer__youtube {
  width: 100%;
  display: block;
  box-sizing: border-box;
  border: 1px solid #000;
  box-shadow: 2px 2px 0 var(--platinum-shadow);
}
.viewer__hero-caption {
  font-family: var(--font-chicago);
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 4px;
}

.viewer__bullet-list {
  margin: 0;
  padding: 0 0 0 20px;
  font-family: var(--font-serif);
  font-size: 14px;
}
.viewer__bullet-list li {
  margin-bottom: 4px;
}

.viewer__specs {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 12px;
  row-gap: 2px;
  font-family: var(--font-chicago);
  font-size: 12px;
  border: 1px solid var(--platinum-shadow);
  padding: 8px 10px;
  background: var(--surface-subtle);
  margin: 0;
}
.viewer__specs dt {
  color: var(--text-dim);
}
.viewer__specs dd {
  margin: 0;
  color: var(--text);
}

.viewer__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.viewer__gallery-thumb {
  margin: 0;
}
.viewer__gallery-thumb img,
.viewer__gallery-thumb video {
  width: 100%;
  display: block;
  border: 1px solid #000;
  box-shadow: 1px 1px 0 var(--platinum-shadow);
  aspect-ratio: 16/9;
  object-fit: cover;
}
.viewer__gallery-caption {
  font-family: var(--font-chicago);
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 3px;
  display: block;
}

.viewer__deep-dive {
  margin: 18px 0;
}
.viewer__deep-dive-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 21px;
  margin: 0 0 8px 0;
}
.viewer__deep-dive-body {
  font-family: var(--font-serif);
  font-size: 14px;
}
.viewer__deep-dive-body p {
  margin: 0 0 10px 0;
}
.viewer__deep-dive-media {
  display: grid;
  /* min() so a column narrower than 360px gets one full-width track instead of overflowing. */
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 12px;
  margin: 4px 0 14px 0;
}
.viewer__deep-dive-media img,
.viewer__deep-dive-media video {
  width: 100%;
  display: block;
  border: 1px solid #000;
  box-shadow: 2px 2px 0 var(--platinum-shadow);
  aspect-ratio: 16/9;
  object-fit: cover;
}
.viewer__deep-dive-media img:not(a img) { cursor: zoom-in; }
.viewer__deep-dive-media a img { cursor: pointer; }
.viewer__deep-dive-media figcaption {
  font-family: var(--font-chicago);
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 4px;
}

.viewer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.viewer__link {
  text-decoration: none;
  font-family: var(--font-chicago);
}

.viewer__divider {
  height: 1px;
  background: #000;
  margin: 18px 0;
  box-shadow: 0 1px 0 var(--platinum-highlight);
}

.viewer__youtube {
  display: block;
  padding: 12px 14px;
  background: var(--surface-subtle);
  border: 1px solid #000;
  color: var(--text);
  font-family: var(--font-chicago);
  font-size: 12px;
  text-decoration: none;
}
.viewer__youtube:hover {
  background: var(--surface-strong);
}

.viewer__youtube--poster {
  padding: 0;
  background: transparent;
  position: relative;
  overflow: hidden;
}
.viewer__youtube-frame {
  display: block;
  position: relative;
}
.viewer__youtube-thumb {
  display: block;
  width: 100%;
  height: auto;
}
.viewer__youtube-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  pointer-events: none;
}
.viewer__youtube-play svg {
  display: block;
}
.viewer__youtube--poster:hover .viewer__youtube-play {
  background: rgba(0, 0, 0, 0.75);
}
.viewer__youtube--poster .viewer__youtube-label {
  display: block;
  padding: 8px 12px;
  background: var(--surface-subtle);
  border-top: 1px solid #000;
}

/* Hatched placeholder for any article media that fails to load (class set by error handlers). */
.viewer__media-img.is-broken,
.viewer__media-video.is-broken,
.md-figure img.is-broken,
.viewer__youtube-thumb.is-broken,
.md-diagram.is-broken {
  display: block;
  width: 100%;
  height: 80px;
  background:
    repeating-linear-gradient(45deg,
      var(--platinum-mid) 0 4px, var(--platinum) 4px 8px);
  border: 1px solid var(--platinum-shadow);
}

.codex {
  --codex-pad-y: 24px;
  --codex-pad-x: 32px;
  padding: var(--codex-pad-y) var(--codex-pad-x);
  max-width: 760px;
  margin: 0 auto;
  user-select: text;
}
.codex .viewer__title {
  font-size: 32px;
}
.codex .viewer__title-frame {
  border-bottom: 2px solid var(--text);
  padding-bottom: 6px;
  margin-bottom: 6px;
}

/* Drop cap; the class is added to the entry body by lite.js selectEntry, not the landing text. */
.codex .viewer__body--codex-top > p:first-child::first-letter {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 3em;
  float: left;
  line-height: 0.9;
  padding: 4px 8px 0 0;
  color: var(--text);
}

.codex__toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  position: sticky;
  top: 0;
  z-index: var(--z-toolbar);
  /* Negative margins cancel .codex padding so the sticky bar spans the full width, flush to the top. */
  margin:
    calc(-1 * var(--codex-pad-y))
    calc(-1 * var(--codex-pad-x))
    14px
    calc(-1 * var(--codex-pad-x));
  padding: 6px 16px;
  border-bottom: 1px solid var(--platinum-shadow);
  background: var(--platinum);
  user-select: none;
}
.codex__wordmark {
  flex: 1;
  font-family: var(--font-chicago);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* min-width:0 lets this flex child shrink so the ellipsis can apply. */
  min-width: 0;
}
.codex__toolbar-tools {
  display: inline-flex;
  gap: 4px;
}
.codex__toolbar-btn {
  width: 26px;
  height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Symbol fonts first for the sun/moon glyphs set in lite.js. */
  font-family: "Apple Symbols", "Segoe UI Symbol", "Symbola", var(--font-chicago);
  font-size: 14px;
  line-height: 1;
  color: var(--text);
  background: var(--platinum);
  border: 1px solid var(--platinum-shadow);
  box-shadow:
    inset 1px 1px 0 var(--platinum-highlight),
    inset -1px -1px 0 var(--platinum-mid);
  cursor: pointer;
}
.codex__toolbar-btn:hover {
  background: var(--surface-strong);
}
.codex__toolbar-btn:active {
  box-shadow:
    inset -1px -1px 0 var(--platinum-highlight),
    inset 1px 1px 0 var(--platinum-mid);
}

/* Print the open article only, always in light colours, with figures kept whole. */
@media print {
  :root, :root.theme-dark {
    --text: #000;
    --text-dim: #333;
    --link: #0000B5;
    --window-body-bg: #fff;
    --surface-subtle: #fff;
    --surface-strong: #fff;
    --platinum: #eee;
    --platinum-mid: #ccc;
    --platinum-highlight: #fff;
    --platinum-shadow: #888;
    --border-strong: #000;
  }
  html, body {
    height: auto !important;
    overflow: visible !important;
    background: #fff !important;
  }
  .lite-sidebar,
  .codex__toolbar,
  .lite-modal,
  .viewer__youtube-play { display: none !important; }
  .lite-main { margin: 0 !important; padding: 0 !important; min-height: 0 !important; }
  .lite-article, .codex { padding: 0 !important; min-height: 0 !important; }
  /* Icons are inverted for the dark theme; print is always light, so undo it. */
  :root.theme-dark .lite-sidebar__icon,
  :root.theme-dark .lite-landing__tile-icon { filter: none; }
  figure, .md-gallery, .md-aside, .md-diagram, .viewer__youtube { break-inside: avoid; }
  h2, h3, h4 { break-after: avoid; }
  img, video, svg { box-shadow: none !important; max-width: 100%; }
  @page { margin: 12mm; }
}