/* Modernisation layer, 2026.
 *
 * Two page types survive in this archive and they need opposite treatment:
 *
 *   body.themed  pages that still load the original WordPress theme. These
 *                have a real float-based layout, so imposing a container on
 *                them breaks it. They get responsive behaviour only.
 *   body.plain   pages that only ever had styles-site.css and no layout at
 *                all, so text ran the full width of the window. These get a
 *                readable measure.
 *
 * An earlier version of this file applied the container to everything and
 * broke the themed pages, which is why the split exists.
 */
html { -webkit-text-size-adjust: 100%; }
img { max-width: 100%; height: auto; }
body { overflow-wrap: break-word; }

/* bare pages only: give the text a readable measure */
body.plain > p, body.plain > h1, body.plain > h2, body.plain > h3,
body.plain > ul, body.plain > ol, body.plain > blockquote {
  max-width: 44rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 18px;
  padding-right: 18px;
  box-sizing: border-box;
}

@media (max-width: 760px) {
  body { font-size: 16px; line-height: 1.6; }
  body.themed table, body.themed td { display: block; width: auto !important; height: auto !important; }
  body.themed #wrapper, body.themed .wrapper, body.themed .content { width: auto !important; }
}

/* .contentwrapper floats inside .wrapper, which has no clearing of its own, so
   the white panel collapsed to 1px and the article rendered on the dark page
   background instead of inside the page. */
body.themed .wrapper,
body.themed .wrapper_single,
body.themed .wrapper_topcolumns { overflow: hidden; }

/* ---------------------------------------------------------------------------
   One consistent shell over four site generations.

   The archive mixes Movable Type (2005), a WordPress theme (2006-07), the
   five-column rebuild (2008) and a late Gatsby version (2016+) whose styles
   only ever existed inside a JS bundle we do not have. Rather than force one
   generation's markup onto another, this gives every page the same masthead,
   the same measure and the same type, whatever markup it came with.
   --------------------------------------------------------------------------- */

.site-mast {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  max-width: 1100px; margin: 0 auto; padding: 14px 22px 10px;
  background: #fff; border-bottom: 3px solid #17356b;
}
.site-mast-logo img { display: block; width: 225px; height: auto; }
.site-mast-tag {
  font: 600 13px/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #17356b; letter-spacing: .02em; margin-right: auto;
}
.site-mast-banner { flex: 1 1 380px; min-width: 0; }
.site-mast-banner img { display: block; width: 100%; height: auto; max-height: 96px; object-fit: cover; }
@media (max-width: 700px) {
  .site-mast { gap: 12px; padding: 12px 16px 8px; }
  .site-mast-banner { display: none; }
}

/* The late Gatsby pages arrive with no stylesheet at all, and the 2005 pages
   with a reconstructed one. Give both the same readable measure. */
body.themed > div:not([class]),
body.plain .wrapper_single,
body.plain .content {
  max-width: 1100px; margin: 0 auto; padding: 0 22px; box-sizing: border-box;
}

body.themed { background: #f4f3ef; }
body.themed img { max-width: 100%; height: auto; }
body.themed table { max-width: 100%; }

/* Nothing may force a horizontal scrollbar, whichever generation set it. */
body.themed .wrapper_single,
body.themed .box_header,
body.themed .header,
body.themed .brand { max-width: 100%; }


/* the masthead now carries the network line the old one did */
.site-mast-id { margin-right: auto; }
.site-mast-net { font: 12px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; margin-top: 3px; }
.site-mast-net a { color: #3a6ea5; text-decoration: none; }
.site-mast-net a:hover { text-decoration: underline; }

/* the generations disagree on body size (13px vs 16px); settle on one */
body.themed, body.themed p, body.themed li, body.themed td {
  font-size: 15px; line-height: 1.6;
}
body.themed .article_details, body.themed .category_article_details,
body.themed .breadcrumb, body.themed .tags { font-size: 12.5px; }

/* The masthead is now a single in-flow block on every page, so the old
   compensations for the absolutely positioned one are gone. What remains is
   making sure the archive's own header shell reserves no space. */
body.themed .main_header,
body.themed .box_header,
body.themed .header { position: static; height: auto; overflow: visible; }
body.themed.hdr-bottom .wrapper_single,
body.themed.hdr-bottom .wrapper { margin-top: 0; }
body.themed .wrapper,
body.themed .wrapper_single,
body.themed .wrapper_topcolumns { overflow: hidden; }

/* Narrow screens.
   set3 builds its two columns with a negative margin: .rightcolumn_single is
   350px wide pulled left by -350px, and .contentcolumn_single reserves that
   350px on its right. Below ~900px there is no room for both, so the reserved
   gutter has to go or the article collapses to a few characters wide. */
@media (max-width: 900px) {
  body.themed .wrapper_single,
  body.themed .wrapper,
  body.themed .box_header,
  body.themed .header,
  body.themed .brand { width: auto !important; max-width: 100% !important; }

  body.themed .contentwrapper_single,
  body.themed .contentwrapper { float: none !important; width: auto !important; }

  body.themed .contentcolumn_single,
  body.themed .contentcolumn {
    margin-right: 0 !important; float: none !important; width: auto !important;
  }
  body.themed .rightcolumn_single,
  body.themed .rightcolumn {
    float: none !important; width: auto !important; margin-left: 0 !important;
    border-top: 1px solid #d8d5cd; margin-top: 18px; padding-top: 10px;
  }
  body.themed .five_columns { display: block; }
  body.themed .column_top { float: none; width: auto; }

  /* the two-column look is painted by a repeating background on the wrapper;
     with the columns stacked it is just a stripe down the page */
  body.themed .wrapper_single,
  body.themed .wrapper,
  body.themed .contentwrapper_single,
  body.themed .contentwrapper { background-image: none !important; }
}

/* ---------------------------------------------------------------------------
   The "interior" template (main_content_interior / interior_right_column).
   Its own stylesheets were never captured - only the theme's style.css, which
   sets a dark page background and nothing else - so the page rendered as white
   text furniture on navy with the sidebar stacked underneath the article.
   These rules give it the two-column layout it was built for.
   --------------------------------------------------------------------------- */
body.themed .main_content_interior {
  max-width: 1100px; margin: 0 auto; padding: 22px;
  background: #fff; box-sizing: border-box; overflow: hidden;
}
body.themed .main_content_interior,
body.themed .main_content_interior p,
body.themed .main_content_interior li,
body.themed .main_content_interior td { color: #23211e; }
body.themed .main_content_interior a { color: #1c5f8a; }

body.themed .interior_right_column {
  float: right; width: 300px; margin: 0 0 20px 28px;
  background: #f4f6f8; border: 1px solid #e2e5e9; border-radius: 3px;
  padding: 14px 16px; box-sizing: border-box;
  font: 14px/1.55 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body.themed .interior_right_column ul { list-style: none; padding-left: 0; margin: 6px 0 14px; }
body.themed .interior_right_column li { margin: 3px 0; }
body.themed .interior_right_column .head_column {
  font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  font-size: 11.5px; color: #6b665e; margin: 16px 0 4px;
  border-bottom: 1px solid #e2e5e9; padding-bottom: 4px;
}
body.themed .interior_right_column br { display: none; }

body.themed #head { max-width: 1100px; margin: 0 auto; padding: 0 22px; }
body.themed #head ul { list-style: none; padding-left: 0; margin: 8px 0; }
body.themed #head li { display: inline-block; margin: 0 14px 4px 0; }

@media (max-width: 900px) {
  body.themed .interior_right_column {
    float: none; width: auto; margin: 20px 0 0;
  }
}

/* the rebuilt section index */
body.themed .gear-index { list-style: none; padding-left: 0; }
body.themed .gear-index li { margin: 0 0 14px; }
body.themed .gear-index a { font-weight: 600; }
body.themed .gear-sum { color: #57524a; font-size: 14px; }