@import url(http://fonts.lug.ustc.edu.cn/css?family=Arbutus+Slab:400);

@import url(http://fonts.lug.ustc.edu.cn/css?family=Karla:400,400italic,700,700italic);

$sans-serif: Karla, sans-serif; 
$serif: "Arbutus Slab", serif;

body {
  padding: 5%;
  font: 400 18px/1.5 $sans-serif;
  max-width: 40em;
}

img {
  vertical-align: bottom;
}

p {
  margin: 0 0 1.5em;
}

.title {
  margin: 0 0 .2em;
  font: 48px/1.1 $serif;
  letter-spacing: -.017em;
}

.button {
  float: left;
  margin: 0 1.25em 0 0;
  padding: .2em 1.2em;
  border: 1px solid rgba(0, 0, 0, .5);
  color: #000;
  font-style: italic;
  text-transform: uppercase;
  text-decoration: none;
}

.caption {
  padding: 2em 0;
  max-width: 20em;  
  color: rgba(0, 0, 0, .6);
  font: italic 14px/1.3 $sans-serif;
}

.section {
  margin: 0 0 .25em;
  border-bottom: 1px solid #000;
  line-height: 1;
  text-transform: uppercase;
}

.featured {
  color: rgba(0, 0, 0, .7);
  font: 16px $serif;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.alt {
  font-family: $serif;
}

.topic {
  font-size: 14px;
  text-transform: uppercase;
  
  b {
    border: 1px solid rgba(0, 0, 0, .3);
    border-width: 1px 0;
  }
}