/* Readable headings, intrinsic image sizing and narrow-screen wrapping. */
img { max-width: 100%; height: auto; }
#main, #main .row > * { min-width: 0; }
#main p, #main li, #main h1, #main h2, #main h3 { overflow-wrap: anywhere; }
.post h1 { font-size: 1.5em; }
section { scroll-margin-top: 6em; }
@media screen and (max-width: 480px) {
  .post h1 { font-size: 1.15em; letter-spacing: .12em; }
  #main .button.large { max-width: 100%; padding: 0 1.5em; }
}
@media screen and (max-width: 360px) {
  #main .image.left { float: none; display: block; margin: 0 0 1.5em; max-width: 100%; }
}
#header > img { width: auto; height: calc(100% - 1em); max-width: calc(100% - 5em); object-fit: contain; align-self: center; }