/* Standalone reading pages; deliberately independent of the home-page cards. */
* { box-sizing: border-box; }
html { scroll-padding-top: 5rem; }
body.blog-page {
  margin: 0;
  color: #333;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  line-height: 1.75;
  background: #021533 url('../img/bg1.jpg') no-repeat center center fixed;
  background-size: cover;
}
.blog-home {
  position: fixed;
  z-index: 10;
  top: 16px;
  left: 5%;
  padding: 10px 20px;
  background: #008c8a;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 2px 6px #0004;
}
.blog-home:hover { background: #021533; color: #fff; }
a:focus-visible { outline: 3px solid #d95d39; outline-offset: 4px; }
.blog-article {
  width: 90%;
  margin: 84px auto 40px;
  padding: clamp(20px, 3vw, 56px);
  background: #fafafa;
  box-shadow: 0 2px 10px #0004;
  overflow-wrap: anywhere;
  min-width: 0;
}
.blog-article h1, .blog-article h2, .blog-article h3,
.blog-article h4, .blog-article h5, .blog-article h6 {
  color: #021533;
  line-height: 1.3;
  margin: 1.5em 0 .65em;
}
.blog-article h1, .blog-single-title { font-size: clamp(26px, 2.5vw, 40px); }
.blog-single-title { border-bottom: 1px solid #021533; padding-bottom: .5em; }
.blog-article > :first-child { margin-top: 0; }
.blog-article p, .blog-article ul, .blog-article ol { margin: 0 0 1.2em; }
.blog-article a { color: #007b79; text-underline-offset: .15em; }
.blog-article img, .blog-article video {
  display: block;
  max-width: 100%;
  height: auto !important; /* Some older posts have inline height: 100%. */
  margin: 1em auto;
}
.post-header-image img { width: 100%; }
.blog-article figure { margin: 1.5em 0; }
.blog-article figcaption, .post-header-image-caption {
  font-size: .85em;
  line-height: 1.6;
  margin-top: .5em;
}
.blog-article iframe { max-width: 100%; border: 0; }
.blog-article iframe[src*="youtube.com/embed/"],
.blog-article iframe[src*="youtube-nocookie.com/embed/"] {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 1.5em 0;
}
.blog-article blockquote { margin: 1.5em 0; padding: .5em 1em; border-left: 4px solid #008c8a; }
.blog-article pre, .blog-article .math-display,
.blog-article mjx-container[display="true"], .blog-article .MathJax_Display {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overflow-wrap: normal;
}
.blog-article pre { padding: 1em; background: #eee; line-height: 1.5; }
.blog-article mjx-container:not([display="true"]) {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  vertical-align: middle;
}
.blog-article code { font-size: .9em; }
.blog-article table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.blog-article th, .blog-article td { border: 1px solid #ccc; padding: .5em .8em; }
.blog-article th { background: #eee; }
.footnotes { font-size: .85em; }
@media (max-width: 600px) {
  body.blog-page { font-size: 16px; }
  .blog-home { left: 12px; }
  .blog-article { width: calc(100% - 24px); margin-top: 80px; padding: 20px 16px; }
}