*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  background-color: hsl(0, 0%, 100%);
}

body {
  font-family: "Fedra Serif Screen", Georgia, serif;
  font-kerning: normal;
  font-size: 100%;
  font-variant-ligatures: common-ligatures;
  line-height: 1.5;
  margin: 0 auto;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

[tabindex="-1"]:focus {
  outline: 0;
}

h1 {
  font-size: 3rem;
  font-style: italic;
  margin: 0 0 1.5rem;
  padding: 1rem 0 0;
}

h1,
h2 {
  font-weight: normal;
  line-height: 1;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.25rem;
  font-weight: normal;
  line-height: calc(1.5/1.25);
  margin: 0;
}

a {
  text-decoration: none;
}

h2, p, ul {
  margin: 0 0 1.5rem;
}

li > h3 + p {
  padding-top: .5rem;
  margin: 0 0 1rem;
}

ul {
  padding: 0;
}

figure {
  display: none;
  margin: 0;
}

footer {
  font-size: 0.75rem;
  line-height: 2;
}

[aria-hidden="true"] {
  display: none;
}

.when {
  font-style: italic;
}

@media screen {
  body > h1 {
    grid-area: header;
  }

  #credo {
    grid-area: credo;
  }

  #current {
    grid-area: current;
  }

  #portfolio {
    grid-area: portfolio;
  }

  #talks {
    grid-area: talks;
  }

  #social {
    grid-area: social;
  }

  body > figure {
    grid-area: pic;
  }

  body > footer {
    grid-area: footer;
  }

  body {
    color: hsl(0, 0%, 7%);
    display: grid;
    grid-gap: 3rem;
    grid-template-areas:
      "header"
      "credo"
      "current"
      "portfolio"
      "talks"
      "social"
      "pic"
      "footer";
    grid-template-columns: 1fr;
    padding: 0 2rem 1rem;
    max-width: 65ch;
  }

  body > * {
    margin-bottom: 3rem;
  }

  @supports (display: grid) {
    body {
      max-width: 100%;
    }

    body > * {
      margin-bottom: 0;
    }

    #fb-root {
      position: absolute;
    }
  }

  @media (min-width: 600px) {
    body {
      align-items: start;
      grid-template-areas:
        "pic header"
        "pic credo"
        ". current"
        ". portfolio"
        ". talks"
        ". social"
        ". footer";
      grid-template-columns: 200px minmax(auto, 65ch);
    }

    h1::before,
    h1::after {
      color: hsla(0, 0%, 7%, .7);
    }

    h1::before {
      content: "Hello. I’m ";
    }

    h1::after {
      content: ".";
    }

    @supports (display: grid) {
      h1 {
        padding-top: 3rem;
      }
    }

    @supports (display: grid) and (transform: rotate(1turn)) {
      figure {
        border-top-left-radius: 0;
        border-top-right-radius: 100%;
        border-bottom-right-radius: 100%;
        border-bottom-left-radius: 100%;
        overflow: hidden;
        transform: rotate(.125turn);
      }

      figure img {
        transform: rotate(.875turn);
      }
    }
  }

  @media (min-width: 1200px) {
    body {
      grid-template-areas:
        "pic header header header header"
        "pic credo credo current current"
        ". portfolio portfolio talks talks"
        ". social social social social"
        ". footer footer footer footer";
      grid-template-columns: 200px repeat(4, minmax(auto, 65ch));
    }
  }

  @media (min-width: 1200px) and (max-width: 1849px) {
    #social ul {
      display: flex;
      list-style-type: none;
    }

    #social li {
      margin-right: 1.5rem;
    }
  }

  @media (min-width: 1850px) {
    body {
      grid-template-areas:
        "pic header header header header header header header"
        "pic credo current portfolio portfolio talks talks social"
        ". footer footer footer footer footer footer footer";
        grid-template-columns: 200px repeat(7, minmax(auto, 65ch));
      }
  }

  a {
    border-bottom-style: dashed;
    border-bottom-width: 1px;
    padding-bottom: 1px;
  }

  a:focus,
  a:hover,
  a:active {
    border-bottom-style: solid;
  }

  figure {
    display: block;
  }

  figure img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
  }

  :target h2 {
    position: relative;
    z-index: 2;
  }

  :target h2::before {
    color: hsla(271, 68%, 32%, 0.25);
    content: '§';
    left: -1.333rem;
    position: absolute;
    z-index: 1;
  }
}

@media speech {
  :target h2::before {
    content: "";
    display: none;
    speak: none;
  }
}

@media aural {
  :target h2::before {
    content: "";
    display: none;
    speak: none;
  }
}

@media print {
  body {
    color: hsl(0, 0%, 0%);
    font-size: 10pt;
  }

  a {
    color: inherit;
  }

  a[href^="http"]::after {
    color: hsl(0, 0%, 40%);
    content: " <" attr(href) ">";
  }

  a[href^="/"]::after {
    color: hsl(0, 0%, 40%);
    content: " <http://erikanderica.org" attr(href) ">";
  }

  h2 {
    page-break-after: avoid;
  }

  li {
    page-break-inside: avoid;
  }

  #fb-root {
    display: none;
  }
}

@page {
  size: 8.5in 11in;
  margin: .5in;
}