*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

html, body {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    font-family: fira;
}

section.x-article {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    font-size: 12pt;
    font-family: fira;
    background-color: #f2f2d9;
}

section.x-article h1,
section.x-article h2,
section.x-article h3 {
    border-bottom: 1px solid rgba(0,0,0,.5);
    color: #420;
    font-weight: 900;
    font-variant: small-caps;
}

section.x-article h1 {
    font-size: 150%;
}

section.x-article h2 {
    font-size: 135%;
}

section.x-article h3 {
    font-size: 120%;
}

section.x-article  a[href] {
    color: #a50;
    text-decoration: none;
}

section.x-article  a[href]:hover {
    text-decoration: underline;
}

section.x-article > header {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    width: 100%;
    height: 2em;
    line-height: 2em;
    background-color: #420;
    color: orange;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 .5em 0 0;
    box-shadow: 0 2px 1em #000;
    border-bottom: 1px solid #000;
}

section.x-article > header > a[href] {
    display: inline-block;
    width: 2em;
    text-align: center;
    margin: 0 1em 0 0;
    color: orange;
    border-right: 1px solid rgba(255,128,0,.6);
    text-shadow: 1px 1px #000;
}

section.x-article > header > a[href]:hover {
    background-color: orange;
    text-decoration: none;
    color: #420;
}



section.x-article > article {
    position: absolute;
    left: 0;
    top: 2em;
    right: 0;
    bottom: 0;
    width: 100%;
    overflow: auto;
    padding: 1em;
    max-width: 60em;
    background-image: url(com/x-article/grain.png);
    margin: 0;
}

section.x-article > article p {
    font-size: 120%;
    line-height: 125%;
    font-weight: 300;
}

@media screen and (min-width : 60em) {
    section.x-article > article {
        top: 3em;
        bottom: 1em;
        width: 60em;
        left: 50%;
        margin-left: -30em;
        box-shadow: 0 0 10px #000;
    }
}

section.x-article footer {
  border-top: 1px solid;
  padding: 1em
}

section.x-article footer span {
  display: inline-block;
  text-align: center;
  width: 32px;
  font-weight: 700;
}

section.x-article blockquote {
    border-left: .5em solid darkorange;
    padding-left: .5em;
    margin-left: .5em;
    font-size: 100%;
    font-weight: 300;
    line-height: 150%;
    font-style: oblique;
}

strong, b {
    font-weight: 900;
}