:root{
  --bg:#f3f3f3;
  --ink:#1f1f1f;
  --muted:#6a6a6a;
  --link:#b00000;
  --line:#dddddd;
  --card:#ffffff;

  --serif: "Source Serif Pro", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, Helvetica, Arial, sans-serif;
}

html,body{
  margin:0;
  padding:0;
}

body{
  background:var(--bg);
  color:var(--ink);
  font: 16px/1.7 var(--serif);
}

/* ---------------- Links ---------------- */

a{
  color:var(--link);
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
}

/* ---------------- Layout ---------------- */

.headerbar{
  background:#fafafa;
  border-bottom:1px solid var(--line);
}

.headerinner{
  max-width:1000px;
  margin:0 auto;
  padding:22px 22px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.main{
  max-width:1000px;
  margin:0 auto;
  padding:28px 22px;
}

.content{
  background:var(--card);
  border-radius:6px;
  padding:34px 34px 26px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}

/* ---------------- Branding ---------------- */

.brand a{
  font-family:var(--sans);
  font-size:42px;
  font-weight:600;
  letter-spacing:0.2px;
  color:var(--link);
}

/* ---------------- Nav ---------------- */

.navtabs a{
  font-family:var(--sans);
  font-size:14px;
  margin-left:18px;
  padding-bottom:4px;
  color:#333;
  border-bottom:2px solid transparent;
}

.navtabs a:hover{
  text-decoration:none;
  border-bottom-color:var(--link);
}

/* ---------------- Headings ---------------- */

h1{
  font-size:34px;
  margin:0 0 22px;
  line-height:1.25;
}

h2{
  font-size:22px;
  margin:0 0 6px;
  line-height:1.35;
}

h3{
  font-size:17px;
  margin:18px 0 6px;
}

/* ---------------- Posts ---------------- */

.post{
  padding:22px 0;
  border-bottom:1px solid #ededed;
}

.post:last-child{
  border-bottom:none;
}

.post h2 a{
  color:var(--ink);
}

.post h2 a:hover{
  color:var(--link);
  text-decoration:none;
}

/* ---------------- Meta ---------------- */

.meta{
  color:var(--muted);
  font-family:var(--sans);
  font-size:12px;
  margin-bottom:10px;
}

/* ---------------- Paragraphs ---------------- */

p{
  margin:0 0 14px;
}

/* ---------------- Read More ---------------- */

.readmore{
  display:inline-block;
  margin-top:6px;
  font-family:var(--sans);
  font-size:13px;
}

/* ---------------- Media ---------------- */

img{
  max-width:100%;
  height:auto;
  border-radius:4px;
}

/* ---------------- Footer ---------------- */

footer{
  max-width:1000px;
  margin:40px auto 70px;
  text-align:center;
  font-size:12px;
  font-family:var(--sans);
  color:var(--muted);
}