postscript.css

/* POSTSCRIPT */

/* A "postscript" is useful for adding things after the main text, such as a
 * footnotes section, feedback section, etc.
 *
 * It doesn't need to be at the end of the document, and also fits well at the
 * end of a chapter.
 */
.postscript {
  margin-top: 3em;                     /* Clear a bit from regular content. */
  border-top: 1px solid var(--color-border); /* Border to separate. */
  font-size: .9em;                     /* Slightly smaller text. */
  position: relative;                  /* So we can place the header. */

}
.postscript + .postscript {
  margin-top: 2em;                     /* Less margin for subsequent footnotes. */
}

.postscript > strong {
  font-style: normal;                  /* Override the italics. */
  position: absolute;                  /* Move to the to align with the border. */
  top: -1em;
  left: 1em;
  background-color: var(--color-bg);   /* Add background colour and padding to hide the border. */
  padding: 0 .5em;
}

.postscript > p {
  margin: 1em 2em                      /* Make margin same as list. */
}

/* Make the border take up the page padding if the screen is wide enough. */
@media (min-width: 54rem) {
  .postscript {
    margin-left: calc(-1 * var(--pad-x));           /* Put the div in the margin too, so the border is wider. */
    width: calc(100% + var(--pad-x) * 2);
    padding: 0 var(--pad-x);              /* Add page margin. */
  }

  .postscript > strong {
    left: calc(var(--pad-x) * 1.5);
  }
}