.profile

article
  header
    h1
      .nth-line-1 A piece
      .nth-line-2 of Pierce
    p.lead A short talk with contemporary sculptural artist from Ireland

  hr

  section
    p Sorem ipsum dolor sit amet, consectetur adipisicing elit. Est voluptate et asperiores. Consequatur beatae aperiam, dolore? Amet, a, unde. Accusamus repellat adipisci aut quasi quibusdam voluptate pariatur repellendus distinctio omnis, nulla iste soluta deserunt quae veniam reprehenderit. Ea dignissimos obcaecati dicta aliquam, suscipit maxime atque modi quas asperiores laboriosam assumenda quos deserunt tempore debitis facilis optio itaque autem quidem iusto quaerat nulla perferendis vero veritatis minus delectus! Natus quam ullam porro, blanditiis hic numquam, incidunt eligendi minus ab, soluta animi.
    p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos sit, adipisci tempore molestiae, accusantium praesentium consequatur asperiores facilis ipsum mollitia autem. Aspernatur, reiciendis. Debitis ullam expedita voluptatibus illo sequi, ut cumque eaque quibusdam officiis pariatur, recusandae mollitia illum nostrum optio facere, at quisquam! Repellat adipisci ullam, soluta quo autem officia expedita itaque consectetur id accusantium et beatae animi nisi veniam sed accusamus voluptate necessitatibus maxime minus fugit sint, unde ratione placeat! Iste, possimus magni nihil? Accusantium, porro officia quidem eaque, libero placeat enim ipsa blanditiis quis ea beatae atque, aspernatur cumque quas laborum fugiat minima minus temporibus in deserunt.
    blockquote Could be better, could be worse
    p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque exercitationem delectus ipsam dolor, corporis iusto facere sint mollitia nemo aut. Excepturi rem tempore laborum mollitia explicabo sunt quisquam, ut provident, cum temporibus facere enim, facilis consequuntur nostrum porro corporis. Molestiae quam impedit consectetur facilis architecto nostrum voluptas, ducimus adipisci quos nulla, obcaecati culpa est totam rem harum laborum, asperiores quibusdam. Nam blanditiis ea temporibus delectus, quo officiis reprehenderit quasi illo praesentium magni amet laboriosam deserunt asperiores quidem. Odit, iure.
    p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo officiis ullam error necessitatibus ab non velit vero beatae illum temporibus. Laborum hic neque ut quidem. Consectetur quis, quod tenetur harum dolorem quia unde odit at blanditiis deserunt aspernatur incidunt placeat, magni mollitia similique, velit porro nobis vitae hic possimus. Dolorem, iusto eveniet. Magnam perspiciatis repellendus sequi, explicabo soluta quidem atque ex animi, autem doloremque delectus esse in consequatur. Ipsam in vero minus ad non sequi molestiae impedit a sit dignissimos? Quo repudiandae laborum minus, omnis voluptates praesentium officiis.
    p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium accusamus consectetur consequatur molestias, blanditiis placeat autem fugiat eligendi earum repellendus nihil sed, architecto.
    p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, quaerat, illo. Culpa?
    p Autor Name
    img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5175/unsplash-music-01.jpg" alt="Guitar guy"
    img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5175/unsplash-tank-01.jpg" alt="Tank"
  

@import 'modular-scale'
@import url(https://fonts.googleapis.com/css?family=Old+Standard+TT:400|Lora:400)

$ms-base: 1em
$ms-ratio: $major-third

$yellow: #fcf704
$cement: #ccc
$black: #191919

=mq($w: 55em)
  @media (min-width: $w)
    @content

html
  font: 400 1em/1.33 'Lora', serif
  background-color: $black

body
  padding-bottom: 3em

.profile
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/5175/unsplash-man-01.jpg') center 30%
  height: 50vh
  background-size: cover
  +mq
    width: 40%
    position: fixed
    top: 0
    left: 0
    bottom: 0
    height: auto // reset
  +mq(80em)
    width: 50%

article
  color: $cement
  +mq
    margin-left: 40%
    position: relative
    max-width: 66em
  +mq(80em)
    margin-left: 50%

header
  text-align: center
  padding: 0 2em

h1
  font-family: 'Old Standard TT', serif
  color: $yellow
  text-transform: uppercase
  font-weight: 400

.nth-line-1,
.nth-line-2
  line-height: 1

.nth-line-1
  font-size: 19vw
  +mq
    font-size: 10.5vw

.nth-line-2
  font-size: 14.5vw
  +mq
    font-size: 8vw
  
.lead
  color: $cement
  font-size: ms(2)
  max-width: 20em
  margin: 0 auto
  text-align: center

hr
  border: none
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/5175/hr-01.png') no-repeat center
  height: 40px
  margin: 5em 0

section
  column-width: 14em
  column-gap: 1.33em
  padding: 0 1em
  +mq
    padding: 0 3em

section p:first-of-type:first-letter
  color: $yellow
  float: left
  font-size: 7em
  line-height: 1
  margin-top: -0.2em
  margin-bottom: -0.2em
  margin-right: 0.1em

p
  +mq
    // text-align: justify

img
  max-width: 100%
  margin-bottom: 1.33em
  vertical-align: middle

blockquote
  border-left: 0.2em solid $yellow
  font-size: ms(3)
  padding: 0.1em 0.5em
  line-height: 1.5
  margin-left: 0
  margin-right: 0
  quotes: "“" "”" "‘" "’"
  &::before,
  &::after
    color: $yellow
    font-size: ms(1)
    line-height: 0
  &::before
    content: open-quote
  &::after
    content: close-quote
  +mq
    position: absolute
    right: 100%
    top: 80vh
    width: 9em
    background: $black