/* Firebrics Blog contract: shared geometry layered over every article's
   existing Inter/Oswald brand styles. */
#main-content,
#main-content > article {
  min-width: 0;
  overflow-x: clip;
}

#main-content > article > div {
  width: min(900px, calc(100vw - 40px));
  max-width: 900px;
  margin-inline: auto;
}

#main-content > article .article-head h1,
#main-content > article > div:first-of-type h1 {
  max-width: 100%;
  text-wrap: wrap;
}

#main-content > article .sec-img {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

#main-content > article .sec-img img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 380px;
  object-fit: cover;
}

#main-content > article .prose p,
#main-content > article .prose li,
#main-content > article .faq-body {
  text-align: justify;
  text-justify: inter-word;
}

#main-content > article .prose h2,
#main-content > article .prose h3,
#main-content > article .prose h4,
#main-content > article .prose a,
#main-content > article .prose th,
#main-content > article .prose td,
#main-content > article .toc,
#main-content > article .toc-title,
#main-content > article .toc a {
  text-align: left;
}

#main-content > article .table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

#main-content > article .data-table {
  min-width: 640px;
}

/* Older articles place the TOC after the answer in a flat body wrapper.
   Reserve the same left rail as the newer article-reading-layout without
   narrowing the centered prose column. */
@media (min-width: 1360px) {
  #main-content > article > div:last-of-type {
    position: relative;
  }

  #main-content > article > div:last-of-type > .toc {
    position: absolute;
    top: 220px;
    right: calc(100% + 48px);
    width: 200px;
    margin: 0;
  }
}

@media (max-width: 1359px) {
  #main-content > article > div:last-of-type > .toc {
    position: static;
    width: 100%;
    margin-bottom: 40px;
  }
}

@media (max-width: 640px) {
  #main-content > article > div {
    width: min(100% - 28px, 900px);
  }

  #main-content > article .sec-img img {
    height: auto;
    min-height: 220px;
  }

  #main-content > article .article-head h1,
  #main-content > article > div:first-of-type h1 {
    overflow-wrap: anywhere;
  }
}