.post {
  /* Long code lines scroll instead of wrapping. `pre`, not `nowrap`:
     `nowrap` also collapses the line breaks. */
  pre {
    white-space: pre;
  }
  /* Pygments (`.highlight`) blocks keep their own dark theme. */
  .highlight {
    margin: 1.5em 0;
    padding: 1em 1.25em;
    border-radius: 0.375rem;
    overflow-x: auto;
    font-size: 1em;

    pre, code {
      margin: 0;
      padding: 0;
      background-color: transparent;
      color: inherit;
      border: 0;
    }
  }

  /* Inline code in prose: lighter than Lexxy's default box. */
  :not(pre) > code {
    padding: 0.1em 0.3em;
    font-size: 0.9em;
    color: inherit;
    background-color: #f3f4f6;
  }

  /* Let the `width` attribute of imported images apply. */
  img {
    width: auto;
    max-width: 100%;
    height: auto;
  }

  figure.left {
    float: left;
    margin: 0 1.5rem 1rem 0;
  }
  /* Click to zoom. `site.js` adds `.zoomable` to embedded images that are
     larger than the text column, and toggles `.zoomed` on click. The zoomed
     figure breaks out of the column, centered on the page. */
  figure.zoomable {
    cursor: zoom-in;
  }
  figure.zoomable:focus-visible {
    outline: 2px solid var(--color-link, #0074e8);
    outline-offset: 4px;
  }
  figure.zoomable.zoomed {
    position: relative;
    left: 50%;
    width: min(var(--zoom-width, 1200px), 100vw - 3rem);
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    transform: translateX(-50%);
    cursor: zoom-out;
  }
  figure.zoomable.zoomed img {
    width: 100%;
    max-width: none;
    max-block-size: none;
  }
  figure.zoomable.zoomed::after {
    display: none;
  }
}