/*
Generally, I prefer BEM syntax for class names. I prefer styles to hook
into a single class, with an additional psuedo class as required.

However, since this is a website maintained by a single author, I'm
hooking directly into semantic tags. When this doesn't make sense, I
use BEM syntax.

I also use a few class prefixes:
- `u-`: Denotes a shared utility class
- `_-`: Denots a hack
*/

/* RESET */
/* ==== */
* {
  margin: 0;
  padding: 0;
}

/* LAYOUT */
/* ==== */
html {
  min-width: 320px; /* px instead of rem, since this represents generally the narrowest phones */
}

/* HEADER AND NAV */
.header {
  position: relative;
  font-size: 0.875rem;
  font-weight: bold;
  line-height: 1.75rem;
}

.header a {
  text-decoration: none;
}

.header__links {
  list-style: none;
}

.header__item {
  display: inline-block;
  margin: 0.5rem 1.25rem 0.5rem 0;
  padding-right: 1.25rem;
  line-height: 0.75rem;
  height: 0.75rem;
  border-right: 2px solid #aaa;
}

.header__item:last-of-type {
  margin-right: 0;
  padding-right: 0;
  border-right: 0;
}

/* Pull logo left on large monitors */
/* 52.5rem is the width of the article, side column, and padding: 30 + 20 + 2.5 */
@media (min-width: 52.5rem) {
  .header__logo {
    position: absolute;
    left: -17.5rem;
    width: 15rem;
    text-align: right;
  }
}

/* MAIN CONTENT */

/* The basic layout of the site is a single-column responsive layout.
   The content column is heavily padded to allow for side notes and
   margins. */
body {
  margin: 0 auto; /* Center within the column */
  padding: 0 2.5rem;
  max-width: 32.5rem; /* Short text lines assist readability */
}

main {
  margin-top: 4rem;
}

/* On smaller displays, narrow the padding */
@media (max-width: 25rem) {
  body {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }
}

/* On large monitors, pad the left lopsided */
@media (min-width: 25rem) {
  body {
    padding-left: 5rem;
  }

  main {
    margin-top: 6rem;
  }
}

@media (min-width: 35rem) {
  body {
    padding-left: 7rem;
  }

  main {
    margin-top: 8rem;
  }
}

@media (min-width: 55rem) {
  body {
    padding-left: 20rem;
  }

  main {
    margin-top: 10rem;
  }
}

@media (min-width: 70rem) {
  body {
    padding-left: 20rem;
    padding-right: 20rem;
  }
}

/* GENERAL TYPOGRAPHY */
/* ==== */
body {
  font-family: 'helvetica neue', helvetica, sans-serif;
  color: #223;
  background: #f4f4f4;
}

main {
  font-size: 0.9375rem; /* 15/16 */
  line-height: 1.75rem;
}

main header {
  margin-bottom: 2.625rem;
}

main h1 {
  font-size: 2.25rem; /* 36/16 */
  font-weight: normal;
  line-height: 2.625rem;
}

/* Dek: Used throughout the site; */

/* Pull dek left on large monitors */
/* 52.5rem is the width of the article, side column, and padding: 30 + 20 + 2.5 */
@media (min-width: 55rem) {
  main {
    position: relative;
  }

  .dek {
    position: absolute;
    left: -17.5rem;
    width: 15rem;
    text-align: right;
  }
}

a {
  color: #00a;
}

a:hover,
a:focus {
  color: #55d;
  text-decoration: none;
}

a:active {
  color: #00a;
}

h2 a {
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

/* FOOTER */
/* ==== */

footer {
}

footer ul {
  border-top: 1px solid #aaa;
  margin: 2.5rem 0 0;
  padding: 1.25rem 0 2.5rem;
  color: #555;
  font-size: 0.6875rem;
  text-align: right;
  list-style: none;
  line-height: 1.75rem;
}

footer li {
  padding-left: 0;
}

/* On larger screens, show the footer horizontally */
@media (min-width: 35rem) {
  footer ul {
    display: flex;
  }

  footer li {
    padding-left: 1rem;
  }

  footer li:first-of-type {
    flex-grow: 1;
    padding-left: 0;
  }
}