/* - - - Element - - - */

/* article */
article figure + figure {
  margin-top:20px;
}
article a + p {
  margin-top:25px;
}
article p + p {
  margin-top:30px;
}
article blockquote + blockquote, article blockquote + h2, article blockquote + p,
article figure + blockquote, article figure + h2, article figure + p,
article h2 + blockquote, article h2 + h2, article h2 + p,
article p + a, article p + blockquote, article p + h2 {
  margin-top:35px;
}
article blockquote + figure,
article h2 + figure,
article p + figure {
  margin-top:40px;
}
article a + a {
  margin-top:45px;
}
article blockquote {
  width:100%;
    position:relative;
    margin:0; padding:0;
}
blockquote p {
  text-align:left;
    width:90%;
      margin-left:5%;
}
article blockquote:after, article blockquote:before {
  color:rgba(0, 0, 0, 0.2);
  font-size:60px;
  line-height:15px;
    position:absolute;
}
article blockquote:after {
  content:'\201D';
    right:0; bottom:-9px;
}
article blockquote:before {
  content:'\201C';
    top:23px; left:0;
}
article figcaption {
  color:rgba(0, 0, 0, 0.3);
  font-style:italic;
  line-height:30px;
    margin:7px 0 -10px;
}

/* article header */
article header {
  margin-bottom:30px;
}
article header h1 {
  padding-bottom:30px;
}
article header p {
  font-size:30px;
  line-height:40px;
    margin-top:30px;
}
article header .audio {
  margin:60px 0 75px;
}

/* article main */
article main, article aside {
  display:inline-block;
  vertical-align:top;
}
article main {
  width:65%; width:calc(100% - 400px);
}
article main > p:first-of-type:first-letter,
article.head > p:first-of-type:first-letter {
  font-size:110px;
  line-height:77px;
    float:left;
    padding:7px 20px 0 0;
}

/* article aside */
article aside {
  color:rgba(0, 0, 0, 0.4);
  font-style:italic;
    width:25%; width:calc(300px);
      margin-left:10%; margin-left:calc(100px);
}
article aside a {
  display:block;
  border:1px solid #1777ff;
  border-radius:5px;
  padding:5px 15px 10px;
}

/* article.head */
article.head {
  margin:45px 0;
}

/* - - - Responsive - - - */

/* tablet */
@media screen and (max-width:1079px) {

  /* article */
  article main, article aside {display:block; width:100%; margin:0;}

  /* article aside */
  article aside {margin-top:20px;}
  article aside a {padding:0 10px 5px;}

  /* article.head */
  article.head {border-top:none;}

}

/* mobile */
@media screen and (max-width:799px) {

  /* article */
  article figure + figure {
    margin-top:10px;
  }
  article a + p {
    margin-top:15px;
  }
  article p + p {
    margin-top:20px;
  }
  article blockquote + blockquote, article blockquote + h2, article blockquote + p,
  article figure + blockquote, article figure + h2, article figure + p,
  article h2 + blockquote, article h2 + h2, article h2 + p,
  article p + a, article p + blockquote, article p + h2 {
    margin-top:25px;
  }
  article blockquote + figure,
  article h2 + figure,
  article p + figure {
    margin-top:30px;
  }
  article a + a {
    margin-top:35px;
  }
  article blockquote:after, article blockquote:before {
    font-size:50px;
  }
  article blockquote:after {
    bottom:-8px;
  }
  article blockquote:before {
    top:18px;
  }
  article blockquote p {
    width:80%;
      margin-left:10%;
  }
  article figcaption {
    line-height:25px;
      margin:5px 0 -4px;
  }

  /* article header */
  article header {
    margin-bottom:15px;
  }
  article main > p:first-of-type:first-letter,
  article.head > p:first-of-type:first-letter {
    font-size:90px;
    line-height:62px;
  }
  article header h1 {
    padding-bottom:15px;
  }
  article header p {
    font-size:16px;
    line-height:25px;
      margin-top:10px;
  }
  article header .audio {
    margin:27px 0 35px;
  }

  /* article.head */
  article.head {
    margin:20px 0;
  }

}

/* - - - Exception - - - */

/* desktop */
@media screen and (pointer:fine) and (min-width:1080px) {

  /* article aside */
  article aside a:hover {
    border:1px solid rgba(0, 0, 0, 0.25);
  }

}
