*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
    overflow:hidden;
    background:#050505;
}

.hero{
    position:relative;
    width:100vw;
    height:100vh;
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
}

.stage{
    position:relative;
    height:100vh;
    aspect-ratio:16 / 9;
    max-width:100vw;
    max-height:100vh;
}

.background{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:1;
}

.title{
    position:absolute;
    left:0%;
    top:1%;
    width:30%;
    z-index:5;
}

/* Shared button behavior */

.image-button{
    position:absolute;
    left:-5%;
    width:22%;
    z-index:8;
    cursor:pointer;
    display:block;

    transition:
        transform .25s ease,
        filter .25s ease;
}

.image-button:hover{
    transform:translateY(-2px) scale(1.03);
    filter:brightness(1.15) drop-shadow(0 0 10px rgba(255,215,120,.40));
}

/* Individual button positions */

.read-button{
    top:59%;
}

.description-trigger{
    top:70%;
}

/* Description panel */

.description-panel{
    position:absolute;
    right:25%;
    top:10%;
    width:34%;
    max-width:520px;

    padding:28px 32px;

    background: rgba(15,12,8,.95);
    border:1px solid rgba(214,174,92,.65);

    box-shadow:
        0 0 35px rgba(0,0,0,.75),
        0 0 18px rgba(214,174,92,.18);

    color:#f4ead8;
    font-family:Georgia,"Times New Roman",serif;

    z-index:20;

    opacity:0;
    transform:translateY(10px);
    pointer-events:none;

    transition:
        opacity .25s ease,
        transform .25s ease;
}

.description-panel.visible{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}

.description-panel h2{
    margin-bottom:14px;
    color:#d6ae5c;
    font-size:28px;
    font-weight:normal;
    letter-spacing:.04em;
}

.description-panel p{
    font-size:18px;
    line-height:1.5;
}

.description-text div{
    margin-bottom:18px;
    line-height:1.35;
}

.description-text div:last-child{
    margin-bottom:0;
}

.close-panel{
    position:absolute;
    top:8px;
    right:12px;

    border:0;
    background:transparent;

    color:#d6ae5c;
    font-size:28px;
    cursor:pointer;
}

.author{
    position:absolute;
    left:-7%;
    bottom:-2%;
    width:25%;
    z-index:6;
}

.tagline{
    position:absolute;
    right:.5%;
    bottom:7%;
    width:34%;

    color:#ffffff;
    font-family:Georgia,"Times New Roman",serif;
    font-size:27px;
    font-style:italic;
    text-align:right;
    line-height:1.3;

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

    z-index:10;
}

/* Phone */

@media(max-width:700px){

    .stage{
        width:100vw;
        height:100vh;
        aspect-ratio:auto;
    }

    .background{
        object-fit:cover;
        object-position:center center;
        content:url("images/mobile-background.png");
    }

    .title{
        left:8%;
        top:6%;
        width:84%;
    }

    .image-button{
        left:8%;
        width:84%;
    }

    .read-button{
        top:47%;
    }

    .description-trigger{
        top:58%;
    }

    .author{
        left:22%;
        bottom:4%;
        width:56%;
    }

    .tagline{
        right:5%;
        bottom:17%;
        width:90%;
        font-size:28px;
        text-align:center;
        line-height:1.25;
    }

    .description-panel{
        left:5%;
        right:auto;
        top:8%;
        width:90%;
        max-width:none;
        max-height:84vh;
        overflow-y:auto;
        padding:24px 24px;
    }

    .description-panel h2{
        font-size:34px;
        margin-bottom:24px;
    }

    .description-text div{
        font-size:22px;
        line-height:1.35;
        margin-bottom:22px;
    }

    .close-panel{
        font-size:34px;
        top:8px;
        right:16px;
    }
}