body {margin:0;}
body > * {float:left;}
body > section {width:calc(75% - 10em);margin:5em;}
header {width:calc(25% - 5em);margin-top: 5em;padding:2.5em;background-color:black;color:white;border-radius:0 .5em .5em 0;}
header h1 {margin:0; font-size: 1.25em;}
header h1 + p {margin-top:1em!important;}
header h3 {margin-top:1em;}
header a {color: white;}
header p, footer nav {text-align:left;}
header p + p, footer p + p {text-indent:0;}
header nav > p:before {content:"> ";}
section p {text-align: left;}
section h1 {margin-bottom:0;}
footer {border-top: 1px dashed black; width:calc(100% - 2em); margin: 1em;}
footer {font-size: .75em;}
footer p {text-align: center;}
footer p + p {margin-top:.25em;}
footer > *:first-child {margin-top: 1em;}
@media screen and (max-width: 768px) {
  body > * {float:none;}
  body > section {width:calc(100% - 5em);margin:2.5em;}
  header {width:calc(100% - 5em);margin-top:0;border-radius:0;}
  header > p:first-of-type {display:inline;}
  header nav {margin-top:1em;}
  header nav > * {display:inline;}
  header nav > p:before {content:"| ";}
  header h3 {display: none;}
  header h3 + p:before {content: none;}
  footer {word-wrap: break-word;}
}

div {margin-bottom:1em;padding-bottom:1em;border-bottom: 1px solid #ddd;}
div:last-child {border:none;}
div .meta {margin-bottom: 0;}