:root {
  --post-header-font: 'DejaVu Sans Mono', Monospace;
}

@media only screen 
  and (max-width: var(--mobile-threshold))
  and (-webkit-min-device-pixel-ratio: 3), (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {

  .title {
    line-height: 1.1em !important;
  }

  section.blog_section {
    line-height: 1.3em;
  }

  section.blog_section .post_title {
    display: block !important;
    margin-top: 1.2em !important;
  }

  section.blog_section p.description {
    margin-block-start: 2px !important;
  }

  .article_heading .title {
    display: block !important;
    line-height: 1.1em !important;
  }

  .metadata {
    font-size: xx-small !important;
    display: inline !important;
    padding: 0.2em !important;
  }

  blockquote {
    padding: 5px 0px 5px 15px !important;
  }
}

section.blog_section .post_title {
  display: inline-block;
  margin: 2px;
}

section.blog_section p.description {
  margin-block-start: 0px;
}

/* When using the article-heading macro for blog posts, it places a <p> </p> tag (not quite empty) before the article_heading element; hiding this. */
main > p:first-child {
  display: none;
}

.article_heading .title {
  display: inline-block;
  margin-bottom: 5px;
}

.article_heading {
  margin-bottom: 15px;
}

.metadata {
  font-size: small;
  display: inline-block;
}

.metadata .date {
  font-family: var(--post-header-font);
  color: var(--c2);
}

.metadata .author {
  font-family: var(--post-header-font);
  color: var(--c2);
}

/* For #+begin_blockquote */
blockquote {
  display: block;
  padding: 5px 20px 5px 45px;
  margin: 0 0 20px;
  position: relative;
  text-align: justify;
  border-left: 15px solid var(--c2);
  border-right: 2px solid var(--c2);
}

blockquote > p {
  margin: 0em 1em;
}

/* https://css-tricks.com/snippets/css/prevent-superscripts-and-subscripts-from-affecting-line-height/ */
sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}

sub {
  top: 0.4em;
}