/* Supplement to /tb.css. Original tb.css is preserved untouched for
   compatibility with the 5,912 archived pages. This file only adds rules
   needed for new posts authored through Decap CMS. */

.body.blog {
  /* Deliberately no background-color. The cell behind this div tiles
     /graphics/right_bkgd.gif, a 562px strip whose left and right edges are
     the maroon frame. Painting a solid colour here covers those edges, which
     is what removed the border down the content column on new pages while
     the archive kept it. The horizontal insets come from tb.css (.body:
     padding 0 10px 10px 26px, margin 0 10px 10px 0), the same values the
     archived pages use, so text never sits on the frame. */
  padding-top: 16px;
  min-height: 600px;
}

.body.blog p {
  font-family: verdana, arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 14px 0;
}

.body.blog p.title {
  font-family: "times new roman", serif;
  font-size: 18px;
  font-weight: bold;
  color: #000;
  margin: 0 0 8px 0;
}

.body.blog a {
  color: #990000;
  text-decoration: none;
}
.body.blog a:hover { text-decoration: underline; }

.body.blog blockquote {
  margin: 0 24px 14px 24px;
  padding-left: 12px;
  border-left: 3px solid #990000;
  color: #333;
  font-style: italic;
}

.body.blog img {
  max-width: 100%;
  height: auto;
}

.body.blog hr {
  border: 0;
  border-top: 1px solid #990000;
  margin: 24px 0;
}

.body.blog ul, .body.blog ol {
  font-family: verdana, arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
}

.nav a { margin: 0 6px; }

/* ---------------------------------------------------------------------------
   Mobile layout (#001)

   The site is a 2003 design: nested fixed-width tables, 770px overall, with a
   208px sidebar and a 562px content column, and frame graphics cut to those
   exact widths. On a phone that renders as a postage stamp.

   Below 800px the layout tables are unwrapped into blocks so they can reflow,
   and the row is reversed so the writing comes first and the sidebar follows.
   Body text keeps its original size deliberately: this audience is not young,
   and shrinking type to fit a phone would be the wrong trade.

   These rules cannot reach the 2003-2017 archive. Archived pages link only
   /tb.css; tb-extra.css is loaded exclusively by pages built from base.njk.
   Verified: zero files under archive/ reference this stylesheet.
--------------------------------------------------------------------------- */

@media (max-width: 800px) {

  /* Unwrap the nested layout tables. Scoped by class so that a table inside
     a post is left alone. */
  .layout,
  .layout > tbody,
  .layout-inner,
  .layout-inner > tbody,
  .layout-inner > tbody > tr,
  .layout-inner > tbody > tr > td,
  .layout > tbody > tr > td {
    display: block;
    width: auto !important;
    max-width: 100%;
  }

  /* Content above sidebar: the post is what the reader came for. */
  .layout > tbody > tr {
    display: flex;
    flex-direction: column-reverse;
  }

  /* Frame graphics and the masthead are fixed-width bitmaps. Let them scale
     rather than forcing a horizontal scrollbar. */
  .layout img {
    max-width: 100%;
    height: auto;
  }

  /* The microphone is decorative and would otherwise eat a whole screen. */
  .microphone {
    max-width: 40%;
  }

  /* Both columns keep their designed widths as an upper bound, and centre.
     Every frame graphic in this layout is a bitmap cut to an exact width, and
     the tiling background strips carry the maroon border in their left and
     right edges. Let a column grow past its design width and two things break
     at once: the strip tiles, repeating the border as a stripe down the
     middle, while the caps stay at their original size, leaving bars down
     each side. Capping the width means that between these widths and 800px
     the columns look exactly as they do on the desktop, and below them
     everything scales down together. */
  .layout > tbody > tr > td.layout-content {
    max-width: 562px;
    margin-left: auto;
    margin-right: auto;
  }

  .layout-sidebar .layout-inner {
    max-width: 208px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Text size is unchanged; only the gutters shrink. */
  .body.blog {
    padding: 14px 16px;
    /* The desktop minimum keeps the frame tall enough to look right. On a
       phone it is just a screen of empty cream below every short post. */
    min-height: 0;
  }

  .sidebar {
    padding: 0 14px 14px 14px;
  }

  body {
    margin-top: 0;
  }
}