.premain {
  width: var(--width);
  margin: 25px auto;

  .callout {

    /* For proper rounded corners on the left stripe */
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: -1px;
      bottom: -1px;
      width: 5px;
      background-color: #78B159;
      border-radius: 3px 0 0 3px;
    }
    position: relative;
    border: 1px solid #E5F2DC;
    border-left: none;
    border-radius: 3px;
    background: #F8FDF6;
    color: #182C0B;
    font: var(--body-weight) 14px AbitareSans;
    display: flex;
    width: fit-content;
    align-items: center;
    padding-right: 15px;
    text-wrap: pretty;

    svg {
      color: #579F32;
      margin: 5px 10px 5px 15px;
    }
  }
}
main {
  margin: 30px 0;

  .post {
    line-height: var(--text-line-height);
    width: var(--width);
    margin: 0 auto;

    h1, h2, h3, h4, h5, h6 {
      font-family: Scorekard;
      font-weight: bold;
      text-box-trim: trim-both;
      text-wrap: pretty;
      line-height: 1.1;

      &:not(.title) {
        margin-top: 0.35em;
      }
    }
    h1 {
      font-size: 42px;
    }
    h2 {
      font-size: 28px;
    }
    h3 {
      font-size: 24px;
    }
    img {
      max-width: 100%
    }
    pre.z-code {
      font-size: 16px;
      overflow: auto;
      scrollbar-width: thin;
      scrollbar-color: #74798E99 transparent;
      font-feature-settings: 'frac' 0;
      background: #f7f7f7;
      padding: 0.5em;
      margin: -0.5em;
    }
    code {
      word-wrap: break-word;
      -webkit-font-smoothing: auto;
      -moz-osx-font-smoothing: auto;
      font-size: calc(round(0.95 * 1em, 1px)); /* hack to visually match abitare sizing */
    }
    pre, code {
      font-family: PragmataPro
    }
    blockquote {
      font-style: italic;
      font-size: 18px;
      padding: 0.25em 1em;
      display: flex;
      flex-direction: column;
      gap: 0.5em;
      line-height: 1.3;

      /* attempt to detect attribution lines like 
         — [Yuri Vishnevsky](https://yuri.is) */
      p:last-child:has(a) {
        text-align: right;
      }
    }
    ul, ol {
      padding-inline-start: 40px;

      li {
        margin-bottom: 0.5em;
      }
      li > ul {

        /* nested list */
        margin-top: 0.5em;
      }
    }
    p {
      .katex-display {

        /*margin: 0 0; /* the gap around the p provides the desired padding */*/
      }
    }
    & > .topline {
      color: #959595;
      font: normal 16px Cartridge;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      text-box-trim: trim-both;

      a {
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }
    }
    & > .title {
      margin-bottom: 25px;
    }
    & > .content {
      color: #333;
      display: flex;
      flex-direction: column;
      gap: 1em;
    }
  }
}
.postmain {
  margin: 30px auto;
  max-width: var(--width);
  font-size: 16px;

  a {
    color: var(--light-text-color);
    text-decoration: none;

    &:hover {
      text-decoration: underline
    }
  }
}