/* Applies across all pages */

/* Fonts */

@font-face {
    font-family: 'Broadsheet';
    src: url('f/broadsheet_regular-webfont.woff2') format('woff2'),
         url('f/broadsheet_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Broadsheet Italic';
    src: url('f/broadsheet_italic-webfont.woff2') format('woff2'),
         url('f/broadsheet_italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/* Base Elements */

html {
    font-family:'Broadsheet',serif;
    color: rgba(128,31,24,1); /* period blood red */
    cursor: url('i/cursor_arrow.png') 8 0, auto;
}

@media (min-width: 1601px) {
    html {
        font-size:17px;
        size:17px;
    }
}

@media (max-width: 1600px) and (min-width: 1301px) {
    html {
        font-size:16px;
        size:16px;
    }
}

@media (max-width: 1300px) and (min-width: 1001px) {
    html {
        font-size:15px;
        size:15px;
    }
}

@media (max-width: 1000px) and (min-width: 801px) {
    html {
        font-size:14px;
        size:14px;
    }
}

@media (max-width: 800px) and (min-width: 601px) {
    html {
        font-size:13px;
        size:13px;
    }
}

@media (max-width: 600px) {
    html {
        font-size:12px;
        size:12px;
    }
}

body {
    margin:0;
    border:0;
    padding:0;
    animation-name: fadeIn;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-duration: 2s;
    background-image:url('i/bg_00.png');
    background-size: cover;
    background-position:center;
}

/* animation for fading in opacity */
@-webkit-keyframes fadeIn {
      0% {opacity:0;}
    100% {opacity:1;}
}

@keyframes fadeIn {
      0% {opacity:0;}
    100% {opacity:1;}
}

@-webkit-keyframes fadeOut {
      0% {opacity:1;}
    100% {opacity:0;}
}

@keyframes fadeOut {
      0% {opacity:1;}
    100% {opacity:0;}
}


div, span {
    color: rgba(128,31,24,1); /* period blood red */
}

  p
, h1
, h2
, h3
, h4
, h5
, h6
, ol
, ul
, blockquote
, table {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    border:0;
    padding:0;
    color: rgba(128,31,24,1); /* period blood red */
    line-height: 130%;
}

  p::selection
, h1::selection
, h2::selection
, h3::selection
, h4::selection
, h5::selection
, h6::selection
, ol::selection
, ul::selection
, blockquote::selection
, table::selection
, a::selection
, td::selection
, li::selection
, em::selection
, div::selection
, span::selection
, br::selection
, .ender::selection {
    color: rgba(228,186,126,1); /* vellum yellow */
    background-color: rgba(128,31,24,1); /* period blood red */
    /*background-color: rgba(112,181,150,1); /* copper oxide */
}

  iframe::selection
, img::selection {
    background-color: rgba(128,31,24,1); /* period blood red */
    box-shadow: 0px 0px 15px 5px rgba(228,186,126,1); /* vellum yellow */
    /*box-shadow: 0px 0px 15px 5px rgba(112,181,150,1); /* copper oxide */
}

  .em
, .italic
, .italics {
    font-family: 'Broadsheet Italic';
}

.nowrap {
    white-space: nowrap;
}

/* Specific HTML Tags */
/* Links */

a {
    text-decoration: underline;
    text-decoration-color: rgba(12,103,110,1); /* dirty teal */
    text-decoration-thickness: 0.25rem;
    color: rgba(128,31,24,1); /* period blood red */
    transition: 0.0s ease-out;
}

a:hover {
    text-decoration: none;
    color: rgba(12,103,110,1); /* dirty teal */
    cursor: url('i/cursor_pointer.png') 8 0, pointer;
}

a:active {
    text-decoration: none;
    color: rgba(12,103,110,1); /* dirty teal */
    cursor: url('i/cursor_pointer.png') 8 0, pointer;
}

p {
    font-size:2rem;
}

ul {
    list-style: none;
}
li {
    position:relative;
    margin-left: 2rem;
    text-indent: -2rem;
    padding-left: 2rem;
}
li:before {
    position:absolute;
    content:"+";
    left: 0.66rem;
}

table, blockquote, ul, li, .sidenote, .postscript p, .postscript ul, .list {
    line-height:125%;
}

@media screen and (min-width: 1601px) {
    p {
        font-size: 1.4rem;
    }
    table, blockquote, ul, li {
        font-size:1.3rem;
    }
}

@media screen and (max-width: 1600px) and (min-width: 1301px) {
    p {
        font-size: 1.4rem;
    }
    table, blockquote, ul, li {
        font-size:1.3rem;
    }
}

@media screen and (max-width: 1300px) and (min-width: 1001px) {
    p {
        font-size: 1.6rem;
    }
    table, blockquote, ul, li {
        font-size:1.4rem;
    }
}

@media screen and (max-width: 1000px) and (min-width: 801px) {
    p {
        font-size: 1.6rem;
    }
    table, blockquote, ul, li {
        font-size:1.4rem;
    }
}

@media screen and (max-width: 800px) and (min-width: 601px) {
    p {
        font-size: 1.8rem;
    }
    table, blockquote, ul, li {
        font-size:1.6rem;
    }
}

@media screen and (max-width: 600px) {
    p {
        font-size: 1.8rem;
        text-align:left;
    }
    table, blockquote, ul, li {
        font-size:1.6rem;
    }
}

tr.header {
    font-weight: bold;
    font-size: 120%;
    text-align: center;
}

td {
    padding:1rem;
    vertical-align: top;
}


/* Spacing and Framing */

.page-underlay {
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    /*background: url(i/babel.jpg);*/
    background-size: cover;
    z-index:-1;
}

.page-frame {
    position: relative;
}

.page-content {
    margin-top:5rem;
    margin-bottom:5rem;
}

.navigation {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-box;
        display: -webkit-flex;
    display: flex;
    flex-wrap:nowrap;
    flex-direction:column;
    justify-content: center;
    align-items:center;
    align-content:center;
    text-align:center;
}

.page-content {
    /*background-color:rgba(240,255,255,1);*/
}

@media (min-width: 1601px) {
    .navigation {
        width:20%;
    }
    .navigation.mobile {
        display:none;
    }
    .page-content {
        margin-left:20%;
    }
    .page-content > * {
        margin-left:20%;
        margin-right:25%;
    }
}

@media (max-width: 1600px) and (min-width: 1301px) {
    .navigation {
        width:25%;
    }
    .navigation.mobile {
        display:none;
    }
    .page-content {
        margin-left:25%;
    }
    .page-content > * {
        margin-left: 15%;
        margin-right:20%;
    }
}

@media (max-width: 1300px) and (min-width: 1001px) {
    .navigation {
        width:30%;
    }
    .navigation.mobile {
        display:none;
    }
    .page-content {
        margin-left:30%;
    }
    .page-content > * {
        margin-left:10%;
        margin-right:15%;
    }
}

@media (max-width: 1000px) and (min-width: 801px) {
    .navigation {
        width:40%;
    }
    .navigation.mobile {
        display:none;
    }
    .page-content {
        margin-left:40%;
    }
    .page-content > * {
        margin-left:10%;
        margin-right:10%;
    }
}

@media (max-width: 800px) and (min-width: 601px) {
    .navigation {
        display: none;
    }
    .navigation.mobile {
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-box;
            display: -webkit-flex;
        display: flex;
        flex-wrap:nowrap;
        flex-direction:column;
        justify-content:flex-start;
        align-items:center;
        align-content:center;
        text-align:center;
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:8rem;
        padding-top:2rem;
        padding-bottom:2rem;
        background: linear-gradient(180deg, rgba(228,186,126,1) 75%
                                          , rgba(228,186,126,0) 100%);
        z-index:1;
    }
    .navigation.mobile img {
        height: 4rem;
    }
    .page-content {
        margin-top:12rem; /* to accomodate for mobile header */
    }
    .page-content > * {
        margin-left:15%;
        margin-right:15%;
    }
}

@media (max-width: 600px) {
    .navigation {
        display: none;
    }
    .navigation.mobile {
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-box;
            display: -webkit-flex;
        display: flex;
        flex-wrap:nowrap;
        flex-direction:column;
        justify-content:flex-start;
        align-items:center;
        align-content:center;
        text-align:center;
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:8rem;
        padding-top:2rem;
        padding-bottom:2rem;
        background: linear-gradient(180deg, rgba(228,186,126,1) 75%
                                          , rgba(228,186,126,0) 100%);
        z-index:1;
    }
    .navigation.mobile img {
        height: 4rem;
    }
    .page-content {
        margin-top:12rem; /* to accomodate for mobile header */
    }
    .page-content > * {
        margin-left:7.5%;
        margin-right:7.5%;
    }
}


.navigation > * {
    width:60%;
    margin-left:20%;
    margin-right:20%;
}

.navigation img {
    max-width:100%;
    margin-top:0.33rem;
    margin-bottom:0.33rem;
    transition:0.05s;
}

.logo {
    width:50%;
    margin-left:25%;
    margin-right:25%;
    margin-bottom:1rem;
    transition:0.4s ease-out;
}

.logo:hover {
    transform:scale(1.1);
    cursor: url('i/cursor_pointer.png') 8 0, pointer;
}

.navigation .pages {

}

.navigation .socials {
    width:40%;
    margin-left:30%;
    margin-right:30%;
    margin-top:2rem;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-box;
        display: -webkit-flex;
    display: flex;
    flex-wrap:nowrap;
    flex-direction:row;
    justify-content: center;
    align-items:center;
    align-content:center;
    text-align:center;
}

.navigation .pages img:hover {
    filter: hue-rotate(180deg);
    cursor: url('i/cursor_pointer.png') 8 0, pointer;
}

.navigation .pages img:active {
    filter: hue-rotate(180deg);
    box-shadow: -2px -2px 5px 2px rgba(255,255,255,0.2)
              ,  2px  2px 5px 2px rgba(255,255,255,0.2);
    cursor: url('i/cursor_pointer.png') 8 0, pointer;
}

.navigation .pages .current img {
    filter: hue-rotate(180deg);
    box-shadow: -2px -2px 5px 2px rgba(255,255,255,0.2)
              ,  2px  2px 5px 2px rgba(255,255,255,0.2);
    cursor: url('i/cursor_pointer.png') 8 0, pointer;
}

.copyright {
    bottom:0;
    margin-bottom:1rem;
}

.index .copyright {
    position: fixed;
}

.navigation .copyright {
    position: absolute;
}



.page-end {
    display:none;
}

.ender {
    text-align: center;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.ender img {
    width:6rem;
}

.book .ender {
    transition:0.2s ease-out;
}

.book .ender:hover {
    cursor: url('i/cursor_pointer.png') 8 0, pointer;
    transform:scale(1.1);
}


/* EVENTS & PRESS pages */


.date-unit {
    margin-top:1rem;
    margin-bottom:1rem;
}

    /* Shared Spacing (mobile) */

    .date-unit .contents
  , .date-unit .contents {
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-box;
            display: -webkit-flex;
        display: flex;
        flex-direction:column;
    }
    .date-unit img {
        width:100%;
    }
    .date-unit .text
  , .date-unit .titles {
        width:100%;
    }

    /* Event Spacing */

@media (min-width: 1000px)  {

    .date-unit.event .contents {
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-box;
            display: -webkit-flex;
        display: flex;
        flex-wrap:nowrap;
        flex-direction: row;
        justify-content: center;
        align-items:flex-start;
        align-content:center;
        text-align: left;
    }

    .date-unit.event img {
        display:inline-block;
        width:45%;
        margin-top:0.5rem;
        margin-bottom:4%;
    }

    .date-unit.event .text {
        width:50%;
    }

}

    /* Press Spacing */

@media (min-width: 1000px)  {

    .date-unit.press .contents {
        display: block;
    }

    .date-unit.press img {
        display:inline-block;
        width:45%;
        margin-top:0.5rem;        
        margin-bottom:4%;        
        float: left;
    }

    .date-unit.press .text {
        width:100%;
    }

    .date-unit.press .titles {
        width:50%;
        margin-left:50%;
    }

}

.date-unit.text-left .contents {
    flex-direction: row-reverse;
}

  .date-unit img
, .date-unit.text-right img {
    margin-right: 5%;
    transition:0.2s ease-out;
}

.date-unit.text-left img {
    margin-left: 5%;
}

.date-unit.press img {
    filter:sepia(0.5);
}

@media (min-width: 1601px) {
    .date-unit {
        font-size:1.1rem;
    }
}

@media (max-width: 1600px) and (min-width: 1301px) {
    .date-unit {
        font-size:1.1rem;
    }
}

@media (max-width: 1300px) and (min-width: 1001px) {
    .date-unit {
        font-size:1.1rem;
    }
}

@media (max-width: 1000px) and (min-width: 801px) {
    .date-unit {
        font-size:1.1rem;
    }
        .date-unit img {
            margin-bottom:1rem;
        }
    .date-unit .text {
        
        }
}

@media (max-width: 800px) and (min-width: 601px) {  
    .date-unit {
        font-size:1.1rem;
    }
        .date-unit img {
                margin-bottom: 1rem;
        }
        .date-unit .text {
                
        }
}

@media (max-width: 600px) {
    .date-unit {
        font-size:1.1rem;
    }
        .date-unit img {
                margin-bottom:1rem;
        }
        .date-unit .text {
                
        }
}


.date-unit .title {
    font-size:125%;
    text-transform:uppercase;
}

.date-unit .subtitle {
    font-size:125%;
}

.date-unit .subtitle .date {
    white-space:nowrap;
}

.date-unit .body {
    font-size:120%;
    margin-top:1rem;
    margin-bottom:1rem;
}

.date-unit .body .line {
    display:inline-block;
    width:100%;
    margin-left:1rem;
    text-indent:-1rem;
}

.date-unit .footer {
    font-size:110%;
}

.date-unit.hidden {
    display:none;
}

.date-unit.visible {
    display:block;
    animation-name:fadeIn;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-duration: 2s;
}

  .section-divider
, .load-more {
    font-size:2rem;
    font-family:'Broadsheet';
    color: rgba(128,31,24,1); /* period blood red */
    margin-top:2rem;
    margin-bottom:2.25rem; /* need bonus 0.25 rem because hyphens aren't centered within text but a little low */
    text-align:center;
} /* look to generalize this across pages after the fact */

.section-divider.hidden {
    display:none;
}

.magic {
    font-size:1.5rem;
}

.magic.left {
    margin-right:1rem;
}

.magic.right {
    margin-left:1rem;
}

.load-more:hover {
    cursor: url('i/cursor_pointer.png') 8 0, pointer;
}


/* Links for Press page */

.date-unit.hovered {
    cursor: url('i/cursor_pointer.png') 8 0, pointer;
}

.date-unit.hovered img {
    box-shadow: 0px 0px 6px 2px rgba(128,31,24,1); /* period blood red */
}


/* INDIVIDUAL BOOK PAGES */

.book {

}

.book .section-divider {
    font-size:3rem;
    font-family:'Broadsheet';
    margin-top:2rem;
    margin-bottom:2rem;
    text-align:center;
}

/* Section - Title */

.book h1 {
    padding-left: 2rem;
    text-indent: -2rem;
}

.book h1 .title {
    text-transform:uppercase;
}

.book h1 .divider {
    text-transform:uppercase;
}

.book h1 .author {
    white-space:nowrap;
}

.book .specs {
    margin-top: -1.5rem;
    font-size: 1.25rem;
}


/* Section - Synopsis */

.book .synopsis {

}

.book .synopsis img {
    float:right;
    width:35%;
    margin-left:2rem;
    margin-top: 1rem;
    margin-bottom:1rem;
    transform:translate(0.5rem,-0.5rem);
    box-shadow:-0.5rem 0.5rem 0.5rem 0rem rgba(0,0,0,0.1);
    transition:2s ease-out;
}

.book .synopsis img:hover {
    box-shadow: -0.5rem 0.5rem 0.5rem 0rem rgba(128,31,24,0.8);
}

/* Mobile Book Cover */


@media screen and (min-width: 1001px) {
    .cover-mobile {
        display:none;
    }
}

@media screen and (max-width: 1000px) {
    .book .synopsis img {
        display:none;
    }
}

.cover-mobile img {
    width:100%;
    box-shadow: 0rem 0rem 1.5rem 0rem rgba(0,0,0,0.66);
    transition: 2s ease-out;
}

.cover-mobile img:hover {
    box-shadow: 0rem 0rem 1.5rem 0rem rgba(128,31,24,1);
}


/* Section - Blurbs */

.book .blurbs {
    
}

.blurb {
    margin-top:2.5rem;
    margin-bottom:2.5rem;
}

.blurb.left {
    text-align:left;
}

.blurb.right {
    text-align:right;
}

.blurb .quote {

}

.blurb .attribution {
    display:inline-block;
}

.blurb.left .attribution {
    text-indent:2rem;
}

/* Section - Features */

.book .features {

}

.book .feature {
    display:inline-block;
    width:100%;
}

.book .feature a {
    font-family: "Broadsheet Italic";
}

/* Section - Bio */

.book .bio {
    
}

.book .bio .author-name {
    font-weight:bold;
    white-space: nowrap;
}

.book .bio .photo-box {
    display:inline-block;
    float: left;
    width:35%;
    margin-right:2rem;
    margin-bottom:1rem;
    padding-top: 0.4rem;
    text-align: right;
    line-height:100%;
}

.book .bio .photo-box img {
    width:100%;
    filter: sepia(0.8);
}

.book .bio .photo-box .caption {
    font-size:1rem;
    margin-top:0rem;
    margin-bottom:0rem;
}

.book .bio .photo-box .caption.none {
    display:none;
}


/* TESTING */

                .example
, .book .feature.example {
    display:none; /* toggle off to test */
}