.preface {
  background-color: ghostwhite;
  border-bottom: 1px dotted dimgray;
  border-top: 1px dotted dimgray;
  box-sizing: border-box;
  font-size: 0.95em;
  line-height: calc(0.95em * 1.5);
  margin: 0 auto;
  margin-bottom: 4em;
  /*top, right, bottom, left*/
  padding: 0.5em 0.75em 0.5em 0.75em;
  text-align: justify;
  width: 600px; /*ruler*/
}
section .br, .preface .br, .model .br { display: block } /*BR replacement*/
ol, ul, p, pre, .model, .model p, .model .br, .equation, table.form { margin-bottom: 1em } /*skip-a-doodle*/
dfn {
  font-family: Vollkorn-italic, serif;
  font-style: normal;
  letter-spacing: 0.062em;
}
/*general settings for tooltips START*/
.title, .photo, abbr {
  text-decoration: underline;
  text-decoration-color: rgba(255, 140, 0, 0.5); /*darkorange*/
  text-decoration-skip-ink: none;
  text-decoration-style: solid;
  text-decoration-thickness: 0.125em;
  text-underline-offset: 0.125em;
}
.title:hover, .photo:hover, abbr:hover {
  background-image: linear-gradient( transparent, rgba(255, 215, 0, calc(1.0 / 3)) ); /*gold*/
  cursor: help;
  text-decoration-color: darkorange; /*looks better*/
  text-decoration-skip-ink: auto; /*looks better*/
  text-decoration-style: solid; /*looks better*/
}
/*general settings for tooltips END*/
p {
  padding-left: 1em;
  padding-right: 1em;
}
ol, ul, p { line-height: 2.0 } /*double space*/
sup, sub { font-size: calc(0.5em + 4px) } /*https://css-tricks.com/fluid-superscripts-and-subscripts/*/
sup { vertical-align: super }
sub { vertical-align: sub }
output { /*same as INPUT*/
  font-family: Inconsolata, monospace;
  letter-spacing: 0.062em;
}
.inline { font-family: Vollkorn, serif } /*OUTPUT*/
canvas { margin-right: 1em }
.hue-rotate { filter: hue-rotate(90deg) } /*make it more blue*/

@media only screen and (max-width: 600px) { /*ruler breakpoint*/
  .preface { width: inherit }
  dfn { font-family: Vollkorn, serif }
  /*general settings for tooltips START*/
  .title, .photo, abbr { /*copy to PRINT.CSS*/
    pointer-events: none; /*prevent TITLE from showing on hover*/
    text-decoration: none;
  }
  .title:hover, .photo:hover, abbr:hover {
    background-image: none;
    cursor: text;
  }
  /*general settings for tooltips END*/
}