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

    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
***************************************************************/

/* =========================================================
   RESPONSIVE INDEX HERO
   ========================================================= */

.homeHero
{
    position:relative;

    width:100vw;
    height:100vh;

    overflow:hidden;
    background:#111;


    display:flex;
    flex-direction:column;
    justify-content:flex-end;

}

.hero picture {
    display: block;
}

.heroHotspot
{
    position:absolute;

    display:block;

    z-index:50;

    cursor:pointer;

    /* Invisible clickable rectangle */
    background:transparent;
}

.hero-bg {
    width: 100%;
    height: auto;
    display: block;
}

#heroImage
{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center center;
}

.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%);
}

.heroScrollArrow
{
    position: absolute;

    left: 50%;
    bottom: 85px;

    transform: translateX(-50%);

    width: 68px;
    height: 68px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(20,20,20,.10);

    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);

    border: 1px solid rgba(255,255,255,.10);

    box-shadow:
        0 12px 30px rgba(0,0,0,.45),
        inset 0 1px 1px rgba(255,255,255,.15);

    text-decoration: none;

    transition: all .25s ease;

    cursor: pointer;
}

.heroScrollArrow i
{
    color: #f4f4f4;

    font-size: 34px;

    text-shadow:
        0 1px 3px rgba(0,0,0,.8);

    animation: arrowBounce 2s infinite;
}

@keyframes arrowBounce
{
  0%, 20%, 50%, 80%, 100%
  {
      transform: translateY(0);
  }

  40%
  {
      transform: translateY(6px);
  }

  60%
  {
      transform: translateY(3px);
  }
}

.heroScrollArrow:hover
{
    background: rgba(20,20,20,.75);

    transform: translateX(-50%) scale(1.08);
}


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;
    z-index:5000;

    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 (max-width: 900px)
    {
        .bookFigure
        {
            float: none;

            width: min(280px, 100%);

            margin: 2rem auto;

            display: block;
        }
    }

/* =========================================================
   HISTORICAL IMAGE GALLERY
   ========================================================= */

.historicalGallery
{
    width: 100%;
    max-width: 1200px;
    margin: 2.5rem auto;
}

.historicalGalleryFour
{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.historicalGalleryTwo
{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
}

.historicalGalleryItem
{
    margin: 0;
    min-width: 0;
}

.historicalGalleryImage
{
    display: block;
    width: 100%;
    height: 210px;

    object-fit: cover;
    object-position: center;

    cursor: pointer;
}

.historicalGalleryItem figcaption
{
    padding-top: 0.65rem;
    text-align: center;
    line-height: 1.3;
}

.historicalGalleryItem figcaption strong
{
    display: block;
    color: #ddd;
    font-size: 0.95rem;
    font-weight: normal;
}

.historicalGalleryItem figcaption span
{
    display: block;
    margin-top: 0.15rem;
    color: #999;
    font-size: 0.8rem;
}

.historicalArticle figure
{
    margin: 2rem auto;
}


/* Tablet / mobile */

@media (max-width: 768px)
{
    .historicalGalleryFour
    {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .historicalGalleryTwo
    {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .historicalGalleryImage
    {
        height: 180px;
    }
}


/* Small phones */

@media (max-width: 420px)
{
    .historicalGalleryImage
    {
        height: 150px;
    }
}

.youtubeEmbed
{
    width: 100%;
    max-width: 900px;
    margin: 2.5rem auto;
    aspect-ratio: 16 / 9;
}

.youtubeEmbed iframe
{
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.characterPortrait
{
    float: left;
    width: 220px;
    margin: 0.35rem 1.5rem 1rem 0;
}

.characterPortrait img
{
    display: block;
    width: 100%;
    height: auto;
}

.characterPortrait figcaption
{
    margin-top: 0.4rem;
    text-align: center;
    color: #999;
    font-size: 0.8rem;
    line-height: 1.3;
}

.characterPortraitLeft
{
    float: left;
    width: 220px;
    margin: 0.35rem 1.5rem 1rem 0;
}

.characterPortraitLeft img
{
    display: block;
    width: 100%;
    height: auto;
}

.characterPortraitLeft figcaption
{
    margin-top: 0.4rem;
    text-align: center;
    color: #999;
    font-size: 0.8rem;
    line-height: 1.3;
}

.characterPortraitRight
{
    float: right;
    width: 220px;
    margin: 0.35rem 1.5rem 1rem 0;
}

.characterPortraitRight img
{
    display: block;
    width: 100%;
    height: auto;
}

.characterPortraitRight figcaption
{
    margin-top: 0.4rem;
    text-align: center;
    color: #999;
    font-size: 0.8rem;
    line-height: 1.3;
}

/***************************************************************
    ARTICLE CALLOUT
***************************************************************/

.articleCallout
{
    margin: 2.5rem 0;
    padding: 1.5rem 1.75rem;

    background: rgba(59,83,101,.22);

    border-left: 4px solid #7293BD;

    box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

.articleCallout h4
{
    margin: 0 0 .75rem 0;

    color: #9FB7D8;

    font-size: 1.15rem;
    font-weight: 500;
}

.articleCallout p
{
    margin: 0;

    color: #d0d0d0;

    line-height: 1.7;
}

.bookPurchase
{
    width: 80%;
    margin: 3rem auto;
}
.seriesCarousel
{
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    width: 320px;

    z-index: 300;

    text-align: center;

}


.seriesCarouselHeader
{
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 1rem;

    margin-bottom: 0.8rem;

    min-height: 70px;
}

.seriesCarouselTitle
{
    min-width: 220px;

    color: #f3e7d1;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.45rem;
    line-height: 1.25;

    text-align: center;

    text-shadow: 0 2px 5px rgba(0,0,0,.75);
}

.seriesArrow
{
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 2px solid #c7a768;
    border-radius: 50%;

    background: rgba(10, 10, 10, 0.78);

    color: #f3e7d1;

    font-size: 1.35rem;
    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 3px 8px rgba(0,0,0,.75),
        inset 0 0 5px rgba(199,167,104,.18);

    text-shadow:
        0 1px 3px rgba(0,0,0,.8);

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.seriesArrow:hover
{
    background: rgba(199,167,104,.22);
    border-color: #f3e7d1;

    transform: scale(1.08);
}


.seriesArrow:active
{
    transform: scale(.96);
}


.seriesArrow:focus-visible
{
    outline: 2px solid #f3e7d1;
    outline-offset: 3px;
}

.seriesCarouselTile
{
    display: block;
    width: 220px;
    margin: 0 auto;
    text-decoration: none;
}


.seriesImageCrossfade
{
    position: relative;
    width: 100%;

    transition: transform .25s ease;
}


.seriesImage
{
    display: block;
    width: 100%;
    height: auto;

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

    box-shadow:
        0 10px 30px rgba(0,0,0,.55);

    opacity: 0;

    transition: opacity .45s ease;
}


/*
 * The second image occupies exactly the same
 * position as the first.
 */
.seriesImage + .seriesImage
{
    position: absolute;
    left: 0;
    top: 0;
}


.seriesImage.active
{
    opacity: 1;
}


.seriesCarouselTile:hover .seriesImageCrossfade
{
    transform: scale(1.025);
}

@media (max-width: 768px)
{
    .seriesCarouselHeader
    {
        gap: 0.65rem;
    }

    .seriesCarouselTitle
    {
        min-width: 0;
        flex: 1;

        font-size: 1.1rem;
    }

    .seriesArrow
    {
        width: 46px;
        height: 46px;
        flex: 0 0 46px;

        font-size: 1.25rem;
    }

    .seriesCarousel
    {
        width: 90%;
        max-width: 320px;
    }

    .seriesCarouselTile
    {
        width: 170px;
        max-width: 170px;
    }
}