@import url(http://fonts.lug.ustc.edu.cn/css?family=Cinzel+Decorative:400,700,900);

*,:before,:after{ box-sizing:border-box; margin:0; padding:0; outline:0; }



@function pow($val, $pow) {
  $ret: 1;
  @if $pow > 0 { @for $i from 1 through $pow { $ret: $ret * $val; }
  } @else {  @for $i from $pow to 0 { $ret: $ret / $val; } }
  @return $ret;
}

// Colors
$heading-color: #201D16;
$credit-color : #8C9040;
$note-color   : #999;
$base-line-color:#ddd;  


// Typo settings
$base-font-size:   20px;
$base-font-scale:  1.618;
$base-line-height: 1.5;
$base-line-height: round($base-font-size * $base-line-height) / $base-font-size !global;

@function base-lines($length){
  @return ceil($length / line-height());
}
@function line-height($lines:1){
  @return $base-font-size * $base-line-height * $lines;
}


@mixin typesetter($scale-index, $line-height:$base-line-height){

  // Round font size to nearest pixel
  $font-size  : round(pow($base-font-scale, $scale-index) * $base-font-size);
  font-size:$font-size; 

  // Convert line-height to rounded pixels based on font-size 
  $line-height: round($font-size * $line-height);
  line-height : $line-height / $font-size;
  
  // Line break loop – 10 ought to be more than enough
  $min-height:0;

  // Element queries - JavaScript needed
  // https://github.com/marcj/css-element-queries
  @for $i from 1 to 10 {
    // Calculate baseline row span
    $base-lines : base-lines( $line-height * $i );
    $base-line-height : line-height( $base-lines ); 

    // Find the missing height to match base-line-height
    $missing-height : $base-line-height - ($line-height * $i);

    // 
    @if($min-height > 0){
      &[min-height~="#{$min-height}"]{ 
        border-bottom:$missing-height solid transparent;
      }
    } @else {
      border-bottom:$missing-height solid transparent;
    }
    $min-height: round($base-line-height + $line-height / 3); 
  }
  @content;
}



html,body { width:100%; overflow-x:hidden; }
body {
  font-size: $base-font-size;
  line-height: $base-line-height;
  background-color:#fff;
  background-image: linear-gradient(transparent, transparent line-height() - 1px, $base-line-color 1px);
  background-size : auto line-height();
  padding:line-height(2) line-height(1) 0;
}





h1 { 
  @include typesetter(3, 0.90){ 
    $tweak : 4px; 
    margin-top: - $tweak;
    margin-bottom:$tweak;
    
  } 
}
h2 { @include typesetter(2, 1)   { margin-bottom:line-height(); } }
h3 { @include typesetter(1)      { margin-bottom:line-height(); } }
h4 { @include typesetter(0)      { margin-bottom:line-height(); } }
p  { @include typesetter(0)      { margin-bottom:line-height(); } }


h1 { color:$heading-color; font-weight:700; font-family:'Cinzel Decorative'; }
h2 { color:$heading-color; font-weight:400; font-family:Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif; }
p  { font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif; }

p.byline { 
  @include typesetter(0){ 
    $tweak : 10px; 
    margin-top:line-height(-1)   + $tweak; // Tweak and fix
    margin-bottom:line-height(3) - $tweak;  // baseline flow
    margin-left:14px; 
  };
  font-family:'Cinzel Decorative'; 
  color:$credit-color;
  &:before { content :' By: '}

  @media (max-width:619px){
    $tweak : 10px; 
    margin-top:line-height(-5) + $tweak; 
    margin-bottom:line-height(6) - $tweak;
    margin-left:215px;
    &:before { 
      position:absolute; 
      margin-top:-20px;
    }
  }
}





.hero      { @include typesetter(-1){ color:$note-color; } }
footer li  { 
  // list-style-type: lower-greek;
  position:relative;
  @include typesetter(-1){ 
    color:$note-color; 
	} 
}
footer p   { color:$note-color; text-align:center; margin-bottom:0;}
footer p + p { font-family:sans-serif; 
  margin-bottom:line-height(); }
article    { max-width:660px; display:block; margin:0 auto; }
img        { width:120%; top:50%; left:45%; position:relative; transform:translateY(-49%) translateX(-50%);}
figcaption { @include typesetter(-1){ text-align:right; color:$credit-color; display:block; } }
figure div { height: line-height(14); overflow:hidden; }
figure     { display:block; margin-bottom:line-height();}
footer     { display:block; padding:line-height(1) line-height(2); background:rgba(128,128,128,.1); margin-top:line-height(3)}


// Show blocks
// h1,h2,p,li { background:gold;}