/*==============================================================

    billaitken.com
    William M Aitken
    Red Rowan Press

==============================================================*/


/***************************************************************
    COLOUR PALETTE
***************************************************************/

:root
{
    --background: #181818;

    --text: #dddddd;

    --heading: #f3e7d1;

    --gold: #c7a768;

    --red: #9b1b22;

    --shadow: rgba(0,0,0,.80);
}


/***************************************************************
    PAGE
***************************************************************/

html
{
    scroll-behavior:smooth;
}

body
{
    margin:0;

    background:var(--background);

    color:var(--text);

    font-family:"Libre Baskerville", serif;
}


/***************************************************************
    HERO
***************************************************************/

.homeHero
{
  position:relative;

  width:100vw;

  height:100vh;

  overflow:hidden;

  background:#111;
}

#heroImage
{
  position:absolute;

  left:0;

  top:0;

  height:100%;

  width:auto;
}

.hero404
{
  position:relative;

  width:100vw;

  height:100vh;

  overflow:hidden;

  background:#111;
}

#image404
{
  position:absolute;

  left:50%;

  top:0;

  height:100%;

  width:auto;

  transform:translateX(-50%);
}

body.homePage
{
    overflow:hidden;
}

body.contentPage
{
    margin:0;

    overflow-x:hidden;

    overflow-y:auto;

    background:var(--background);

    color:var(--text);

    font-family:"Libre Baskerville", serif;
}

.scrollDownContainer
{
    position:absolute;

    left:50%;

    bottom:130px;        /* Above the menu */

    transform:translateX(-50%);

    z-index:1000;
}

.scrollDownContainer a
{
    display:block;

    color:#C7A768;

    font-size:34px;

    text-decoration:none;

    text-shadow:0 0 8px rgba(199,167,104,.45);

    animation:arrowFloat 2.5s ease-in-out infinite;
}

.scrollDownContainer a:hover
{
    color:#D8C7A2;
}

@keyframes arrowFloat
{
    0%
    {
        transform:translateY(0);
        opacity:.65;
    }

    50%
    {
        transform:translateY(6px);
        opacity:1;
    }

    100%
    {
        transform:translateY(0);
        opacity:.65;
    }
}

/* ---------- Page Body ---------- */

.pageContent
{
    background-color: #181818;
    color: #d0d0d0;
}

/* ---------- Article ---------- */

.articleBody
{
    max-width: 850px;
    margin: 0 auto;
    padding: 4rem 2.5rem 6rem;
    font-family: Georgia, "Times New Roman", serif;
}

/* ---------- Headings ---------- */

.article-intelligence {
    background-color: #3B5365;
}

.article-people {
    background-color: #5B654A;
}

.article-military {
    background-color: #655443;
}

.article-mystery {
    background-color: #55435D;
}

.articleBody h1
{
    color: #9FB7D8;
    font-size: 2.4rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.articleBody h2
{
    color: #88A5CB;
    font-size: 1.7rem;
    font-weight: 400;
    margin-top: 3rem;
    margin-bottom: 1rem;
}

.articleBody h3
{
    color: #7293BD;
    font-size: 1.3rem;
    font-weight: 500;
    margin-top: 2rem;
    margin-bottom: 0.8rem;
}

/* ---------- Paragraphs ---------- */

.articleBody p
{
    line-height: 1.8;
    margin-bottom: 1.4rem;
}

.articleBody a
{
    color: #9FB7D8;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid rgba(159,183,216,0.35);
    transition: color 0.25s ease,
                border-color 0.25s ease;
}

.articleBody a:hover
{
    color: #C4D7EC;
    border-bottom-color: #C4D7EC;
}

.articleBody a:visited
{
    color: #8FA9C9;
}

.articleBody a:focus
{
    outline: none;
    border-bottom: 1px solid #C4D7EC;
}

.articleBody blockquote
{
    margin: 2rem 3rem;
    padding-left: 1.5rem;
    border-left: 3px solid #556B84;
    color: #b8c4d2;
    font-style: italic;
}

.newArticleDot {

    position:absolute;

    width:6px;
    height:6px;

    background:#d00000;

    border-radius:50%;

    box-shadow:
        0 0 6px rgba(255,0,0,.8);

    animation:pulse 1.3s infinite;
}

@keyframes pulse {

    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.4);
        opacity: .2;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

#returnToHero
{
    position: fixed;

    right: 40px;

    bottom: 40px;

    width: 48px;

    height: 48px;

    display: flex;

    justify-content: center;

    align-items: center;

    background: rgba(24,24,24,.75);

    border: 1px solid rgba(199,167,104,.45);

    border-radius: 50%;

    color: var(--gold);

    font-size: 1.3rem;

    text-decoration: none;

    z-index: 5000;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity .3s ease,
        visibility .3s ease,
        background .25s ease,
        color .25s ease;
}

#returnToHero:hover
{
    background: rgba(40,40,40,.9);

    color: #E6D3A8;
}

#returnToHero.visible
{
    opacity: 1;

    visibility: visible;
}

.bookFigure
{
    float: left;

    width: 260px;

    margin: 0 2rem 1.5rem -6.0rem;

    text-align: center;
}

.bookFigure img
{
    display: block;

    width: 100%;

    height: auto;

    border: none;

    outline: none;

}

.bookFigure figcaption
{
    margin-top: .75rem;

    font-size: .9rem;

    line-height: 1.4;

    color: #a8a8a8;
}

.bookFigureRight
{
    float: right;

    width: 260px;

    margin: 0 -6.0rem 1.5rem 1.0rem;

    text-align: center;
}

.bookFigureRight img
{
    display: block;

    width: 100%;

    height: auto;

    border: none;

    outline: none;

}

.bookFigureRight figcaption
{
    margin-top: .75rem;

    font-size: .9rem;

    line-height: 1.4;

    color: #a8a8a8;
}

/***************************************************************
    ARTICLE FIGURES
***************************************************************/

.articleFigure
{
    margin: 2.5rem auto;

    text-align: center;
}

.articleFigure img
{
    display: block;

    width: 100%;

    max-width: 700px;

    height: auto;

    margin: 0 auto;

    border: none;

    outline: none;

}

.articleFigure figcaption
{
    margin-top: .8rem;

    color: #a8a8a8;

    font-size: .92rem;

    line-height: 1.5;

    font-style: italic;
}

/***************************************************************
    ARTICLE VIDEOS
***************************************************************/

.articleVideo
{
    clear: both;

    max-width: 720px;

    margin: 2rem auto;

    aspect-ratio: 16 / 9;

    border: none;

    box-shadow: 0 8px 24px rgba(0,0,0,.45);

    overflow: hidden;
}

.articleVideo iframe
{
    width: 100%;

    height: 100%;

    border: none;
}

.videoWrapper
{
    clear: both;

    display: flex;

    justify-content: center;

    margin: 2rem 0;
}

.videoCaption
{
    text-align: center;

    font-size: .9rem;

    color: #a8a8a8;

    font-style: italic;

    margin-bottom: 2rem;

/***************************************************************

    MAIN NAVIGATION

***************************************************************/

.mainNav
{
    background:#161616;

    border-top:1px solid #303030;

    border-bottom:1px solid #303030;

    box-shadow:0px 5px 18px rgba(0,0,0,.45);
}


.navContainer
{
    max-width:1400px;

    margin:auto;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:60px;

    height:70px;
}


.navContainer a
{
    font-family:"Cormorant Garamond", serif;

    font-size:1.25rem;

    letter-spacing:2px;

    text-transform:uppercase;

    text-decoration:none;

    color:#E7D9C2;

    padding:6px 0;

    border-bottom:2px solid transparent;

    transition:.25s;
}


.navContainer a:hover
{
    color:white;

    border-bottom:2px solid #9B1B22;
}


.navContainer a.active
{
    color:#FFFFFF;

    border-bottom:2px solid #9B1B22;

/***************************************************************
    MOBILE
***************************************************************/

@media screen and (max-width:1000px)
{

.hero
{
    height:auto;

    min-height:900px;

    background-position:65% center;
}

.heroText
{
    width:85%;

    margin:auto;

    margin-top:90px;
}

.heroTitle
{
    font-size:3rem;
}

.heroTagline
{
    font-size:1.7rem;
}

.heroBody
{
    width:100%;
}

@media (max-width: 900px)
{
    .bookFigure
    {
        float: none;

        width: min(280px, 100%);

        margin: 2rem auto;

        display: block;
    }
}

}