Texto fica atrás do inicio-post e com fonte rosa...

Fiz a alteração no HTML, conforme abaixo:

        <section class="secao-inicio blog">
            <h2>Blog</h2>
            <small>Últimos posts</small>
            <ol>
                <li>
                    <a href="blog.html">O essencial de design responsivo</a>
                    <p class="inicio-post">
                    Design responsivo tem ganho cada vez mais atenção como técnica de desenvolvimento de páginas web para dispositivos móveis. Mas como começar?
                    </p> 
                </li>

E a do CSS, dessa forma...

.inicio-post {
        background-color: #fff;
        position: absolute;
        top: 3em;
        right: 3em;
        height: 6em;
        padding: 1em;
}

Não a minha fonte fica rosa, ao invés de preta e atrás do quadrado branco, ao invés de na frente. O que estou fazendo errado?