/ Design source: https://dribbble.com/shots/3011347-Luminous-Magazine
/ Image source: https://unsplash.com/search/palm?photo=ItGkpXAr8gk

header.site-header
  .split
    .site-title
      .title Luminous
      .sub-title A magazine for Finer Things
    .nr
      span Nr. 
      span.digit 001

article.article
  .title Article
  h1.article-title
    | New person,
    br
    | same old mistakes
  a.article-continue href='https://dribbble.com/shots/3011347-Luminous-Magazine' Read
  img.article-img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/5175/unsplash-palm-trees.jpg'

@import 'https://fonts.googleapis.com/css?family=Cormorant+Garamond'

// Base unit for sizing and spacing
$u: 1.4em

=bp-tabloid
  @media (min-width: 33em)
    @content
  
=bp-broadsheet
  @media (min-width: 62em)
    @content

html
  background: #ECDDE7
  color: mix(#F9F8F9, black, 15%)
  font-size: 1.1em
  line-height: 1
  font-family: 'Cormorant Garamond', serif
  transition: font-size 0.1s
  +bp-broadsheet
    font-size: 1.2em

html,
body
  min-height: 100%
  
body
  margin: 0
  +bp-broadsheet
    display: flex

.site-header,
.article
  padding: 1em
  transition: padding 0.2s
  +bp-tabloid
    padding: (2 * $u)
  
.site-header
  background: #F9F8F9

.site-title
  margin-bottom: 1em
  +bp-broadsheet
    margin-bottom: (18 * $u)

.title
  font-size: $u
  margin-bottom: 0.4em
  white-space: nowrap
  &::after
    content: ''
    display: inline-block
    vertical-align: middle
    width: (2 * $u)
    border-top: 0.06em solid
    margin-left: 0.6em
  
.nr
  font-size: $u
  .digit
    font-size: $u
    +bp-tabloid
      display: block
      font-size: (4 * $u)
      line-height: 0.8
      margin-top: -0.2em

.split
  display: flex
  justify-content: space-between
  +bp-broadsheet
    display: block
  
.article
  +bp-broadsheet
    padding-left: (4 * $u)

.article-title
  font-weight: 400
  font-size: (2 * $u)
  line-height: 0.85
  text-transform: capitalize
  +bp-tabloid
    font-size: calc(#{(2 * $u)} + 1vw)
  +bp-broadsheet
    font-size: (2.5 * $u)
    font-size: calc(#{(1.5 * $u)} + 2.5vw)
    margin-bottom: 0.66em
  
.article-continue
  display: inline-block
  color: inherit
  text-decoration: none
  border: 0.08em solid
  padding: 0.7em 2em
  text-transform: uppercase
  font-family: sans-serif
  font-size: 0.7em
  letter-spacing: 0.5em
  &:hover
    text-decoration: underline

img
  max-width: 100%
  height: auto
  display: block

.article-img
  margin-top: -(4 * $u)
  margin-left: (2 * $u) // undo right padding
  position: relative
  z-index: -1