/* 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; }

/* generated section indexes */
body.themed .section-index { list-style: none; padding-left: 0; }
body.themed .section-index li { margin: 0 0 13px; }
body.themed .section-index a { font-weight: 600; }
body.themed .section-sum { color: #57524a; font-size: 13.5px; }

/* The nav bar moved out of the duplicate header into the sidebar.
   Its original rules lay the items out as a horizontal blue bar with floated
   list items, so those have to be undone explicitly rather than merely
   restyled. */
body.themed .top_menu.moved-to-sidebar,
body.themed .top_menu.moved-to-sidebar .menu3 {
  background: none !important; float: none !important; position: static !important;
  width: auto !important; height: auto !important; margin: 0 0 16px !important;
  padding: 0 !important; border: 0 !important;
}
body.themed .top_menu.moved-to-sidebar ul,
body.themed .top_menu.moved-to-sidebar ul ul {
  list-style: none !important; margin: 0 !important; padding: 0 !important;
  position: static !important; display: block !important; width: auto !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
}
body.themed .top_menu.moved-to-sidebar li {
  float: none !important; display: block !important; width: auto !important;
  position: static !important; margin: 0 !important; background: none !important;
  border: 0 !important;
}
body.themed .top_menu.moved-to-sidebar a {
  display: block !important; color: #1c5f8a !important; background: none !important;
  padding: 5px 0 !important; text-decoration: none;
  font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
body.themed .top_menu.moved-to-sidebar > div > ul > li > a {
  font-weight: 600 !important; border-bottom: 1px solid #e2e5e9;
  margin-top: 8px; text-transform: none;
}
body.themed .top_menu.moved-to-sidebar ul ul { padding-left: 12px !important; }
body.themed .top_menu.moved-to-sidebar ul ul a { font-size: 13px !important; color: #3a6ea5 !important; }
body.themed .top_menu.moved-to-sidebar a:hover { text-decoration: underline; }

/* the header shell is empty now that the second logo has gone */
body.themed #header:empty,
body.themed #header { min-height: 0; height: auto; }
body.themed #header > .logo:empty { display: none; }

/* ---------------------------------------------------------------------------
   Narrow screens on the WhyGo-era template (#page / #container / #content_box).
   It is built on fixed pixel widths - 1002px containers, a 677px floated
   article and a 300px sidebar - so on a phone the text simply runs off the
   side. Everything here just lets those containers be as wide as the screen
   and stacks the two columns.
   --------------------------------------------------------------------------- */
@media (max-width: 1040px) {
  body.themed #container,
  body.themed #content_box,
  body.themed #page,
  body.themed #header,
  body.themed #footer,
  body.themed .footer,
  body.themed #content,
  body.themed .hfeed,
  body.themed .breadcrumb,
  body.themed .related,
  body.themed .related_title,
  body.themed .tags,
  body.themed .entry-content,
  body.themed .main_content_interior {
    width: auto !important; max-width: 100% !important;
    float: none !important; margin-left: 0 !important; margin-right: 0 !important;
    box-sizing: border-box;
  }
  body.themed #sidebars,
  body.themed .sidebar,
  body.themed [id^="sidebar_"] {
    width: auto !important; float: none !important; margin: 24px 0 0 !important;
  }
  body.themed img, body.themed iframe, body.themed table { max-width: 100% !important; height: auto; }
  body.themed pre, body.themed code { white-space: pre-wrap; word-break: break-word; }
}
@media (max-width: 700px) {
  body.themed #container, body.themed #page, body.themed #content_box { padding-left: 12px !important; padding-right: 12px !important; }
}

/* ---------------------------------------------------------------------------
   The front page: the guide presented as a book's contents.
   --------------------------------------------------------------------------- */
body.home-page { background: #f4f3ef; }
.home { max-width: 1080px; margin: 0 auto; padding: 8px 22px 60px; box-sizing: border-box; }
.home-hero { padding: 30px 0 18px; border-bottom: 3px solid #17356b; margin-bottom: 28px; }
.home-hero h1 {
  font: 700 clamp(30px, 5vw, 46px)/1.1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0 0 12px; letter-spacing: -0.02em; color: #17356b;
}
.home .lede { font-size: 19px; line-height: 1.55; max-width: 46rem; margin: 0 0 12px; color: #23211e; }
.home .provenance {
  font-size: 14.5px; line-height: 1.55; max-width: 46rem; color: #6b665e;
  border-left: 3px solid #d8d5cd; padding-left: 14px; margin: 0;
}
.section-head {
  font: 600 13px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase; letter-spacing: .14em; color: #6b665e;
  margin: 40px 0 6px; padding-bottom: 8px; border-bottom: 1px solid #ddd9d1;
}
.section-sub { color: #6b665e; font-size: 15px; margin: 0 0 18px; }

.chapters {
  display: grid; gap: 26px 34px; margin-top: 22px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.chapter h3 {
  font: 600 18px/1.25 "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0 0 4px; color: #17356b;
}
.chapter-blurb { color: #6b665e; font-size: 14px; margin: 0 0 10px; line-height: 1.5; }
.chapter ul { list-style: none; margin: 0; padding: 0; }
.chapter li { margin: 0 0 7px; line-height: 1.4; }
.chapter a { color: #1c5f8a; text-decoration: none; font-size: 15.5px; }
.chapter a:hover { text-decoration: underline; }
.gw { display: block; font-size: 12px; color: #948e84; }

.more-grid {
  list-style: none; padding: 0; margin: 18px 0 0;
  display: grid; gap: 10px 26px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.more-grid li { margin: 0; }
.more-grid a { color: #1c5f8a; text-decoration: none; font-size: 16px; }
.more-grid a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .home { padding: 4px 16px 44px; }
  .home .lede { font-size: 17px; }
  .chapters { gap: 22px; }
}

/* The #head nav has white link text and got its dark ground from the header
   shell that held the duplicate logo. With that gone the bar was white on
   white, so it carries its own background now. */
body.themed #head {
  background: #17356b; border-radius: 3px; padding: 8px 14px; margin: 0 auto 14px;
  max-width: 1080px; box-sizing: border-box;
}
body.themed #head a { color: #fff !important; text-decoration: none; }
body.themed #head a:hover { text-decoration: underline; }
body.themed #head li { display: inline-block; margin: 0 16px 2px 0; }
@media (max-width: 700px) {
  body.themed #head { padding: 8px 12px; }
  body.themed #head li { margin-right: 12px; font-size: 14px; }
}

/* rebuilt 2004 guide articles */
body.article-page .art-byline {
  font: 13px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #6b665e; margin: 0 0 20px; padding-bottom: 12px;
  border-bottom: 1px solid #e2e5e9;
}
body.article-page .art-body { max-width: 44rem; font-size: 16.5px; line-height: 1.65; }
body.article-page .art-body h3,
body.article-page .art-body h4 { margin: 26px 0 6px; font-size: 17px; color: #17356b; }
body.article-page .art-body p { margin: 0 0 15px; }
body.article-page .art-nav {
  margin: 30px 0 0; padding-top: 14px; border-top: 1px solid #e2e5e9;
  font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body.article-page h1 { max-width: 44rem; }
body.chapter-page .ch-toc {
  background: #f4f6f8; border: 1px solid #e2e5e9; border-radius: 3px;
  padding: 14px 18px; margin: 22px 0 30px;
}
body.chapter-page .ch-toc h3 { margin: 0 0 8px; font-size: 15px; }
body.chapter-page .ch-toc ul { margin: 0; padding-left: 18px; columns: 2; }
body.chapter-page .ch-sec { max-width: 44rem; margin: 0 0 34px; }
body.chapter-page .ch-sec h2 {
  margin: 30px 0 10px; padding-top: 10px; border-top: 2px solid #17356b;
  scroll-margin-top: 16px; font-size: 22px; color: #17356b;
}
body.themed .stub-note {
  background: #fdf6e3; border-left: 3px solid #d8c98a; padding: 12px 16px;
  max-width: 44rem; border-radius: 3px;
}
@media (max-width: 640px) { body.chapter-page .ch-toc ul { columns: 1; } }

/* archive and pagination listings */
.ix-list { list-style: none; margin: 26px 0 0; padding: 0; }
.ix-list li { padding: 11px 0; border-bottom: 1px solid var(--rule, #ddd8cf); }
.ix-list li:last-child { border-bottom: none; }
.ix-list a { font-weight: 600; }
.ix-meta { display: block; font-size: 13px; opacity: .7; margin-top: 3px; }