@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=Manrope:wght@400;500;600;700&display=swap');


/* ============================================ */
/* RESET */
/* ============================================ */

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    background: #000000;

    color: #ffffff;

    font-family: "DM Sans", sans-serif;

    overflow-x: hidden;

}



/* ============================================ */
/* SIDEBAR */
/* ============================================ */

.sidebar {

    position: fixed;

    top: 0;
    left: 0;

    width: 255px;
    height: 100vh;

    padding: 34px 28px;

    background:

        linear-gradient(
            180deg,
            #080808,
            #020202
        );

    border-right: 1px solid #181818;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    z-index: 100;

}


.sidebar-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.sidebar-logo {
    width: 58px;
    height: 58px;

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

    text-decoration: none;

    border: 1px solid #272727;
    background: #080808;

    border-radius:
        5px
        18px
        18px
        18px;

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease;
}
.sidebar-logo img {
    width: 38px;
    height: 38px;

    object-fit: contain;

    display: block;
}


.sidebar-logo:hover {
    transform: scale(1.08);
    background: #111111;
    border-color: #444444;
}


.sidebar-label {

    color: #3f3f3f;

    font-size: 8px;

    letter-spacing: 2px;

}



/* ============================================ */
/* SIDE NAV */
/* ============================================ */

.sidebar-navigation {

    display: flex;

    flex-direction: column;

    gap: 7px;

}


.side-link {

    color: #555555;

    text-decoration: none;

    padding: 15px 14px;

    border: 1px solid transparent;

    border-radius:
        4px
        18px
        4px
        18px;

    display: flex;

    align-items: center;

    gap: 15px;

    font-size: 12px;

    letter-spacing: .4px;

    transition:

        color .3s ease,
        background .3s ease,
        border-color .3s ease,
        transform .3s cubic-bezier(.2,.8,.2,1);

}


.side-link:hover {

    transform: scale(1.04);

    color: #ffffff;

    border-color: #292929;

    background: #0e0e0e;

}


.side-link.active {

    color: #ffffff;

    border-color: #333333;

    background: #101010;

}


.side-number {

    color: #3d3d3d;

    font-size: 8px;

    letter-spacing: 1px;

}


.side-link.active .side-number {

    color: #8b8b8b;

}



/* ============================================ */
/* SIDEBAR FOOTER */
/* ============================================ */

.sidebar-bottom {

    display: flex;

    flex-direction: column;

    gap: 16px;

}


.back-home {

    color: #858585;

    text-decoration: none;

    font-size: 10px;

    transition:
        color .3s ease,
        transform .3s ease;

}


.back-home:hover {

    color: white;

    transform: translateX(-3px);

}


.sidebar-bottom p {

    color: #303030;

    font-size: 8px;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}



/* ============================================ */
/* MAIN */
/* ============================================ */

.novel-main {

    margin-left: 255px;

}


.page-section {

    min-height: 100vh;

    position: relative;

    border-bottom: 1px solid #181818;

}


.section-inner {

    width: min(1200px, 100%);

    margin: 0 auto;

    padding:
        110px
        7vw;

}



/* ============================================ */
/* NOVEL HERO */
/* ============================================ */

.novel-overview {

    display: flex;

    align-items: center;

    background:

        radial-gradient(
            circle at 70% 40%,
            #151515 0%,
            #080808 30%,
            #000000 65%
        );

}


.section-kicker {

    color: #555555;

    font-size: 9px;

    letter-spacing: 5px;

    margin-bottom: 28px;

}


.novel-title {

    font-family: "Manrope", sans-serif;

    font-size:
        clamp(
            85px,
            14vw,
            210px
        );

    font-weight: 500;

    line-height: .78;

    letter-spacing: -10px;

}


.novel-title-line {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 35px;

}


.novel-title-line span {

    width: 80px;
    height: 1px;

    background: #343434;

}


.novel-title-line p {

    color: #666666;

    font-size: 10px;

    letter-spacing: 1px;

}


.novel-introduction {

    margin-top: 90px;

    display: grid;

    grid-template-columns:

        minmax(0, 1.15fr)

        minmax(260px, .85fr);

    gap: 8vw;

}


.large-intro {

    font-family: "Manrope", sans-serif;

    font-size:

        clamp(
            26px,
            3.5vw,
            50px
        );

    line-height: 1.25;

    letter-spacing: -2px;

    color: #c7c7c7;

}


.novel-copy {

    max-width: 440px;

}


.novel-copy p {

    color: #707070;

    line-height: 1.9;

    font-size: 13px;

    margin-bottom: 20px;

}



/* ============================================ */
/* SCROLL INDICATOR */
/* ============================================ */

.scroll-indicator {

    margin-top: 90px;

    display: flex;

    align-items: center;

    gap: 18px;

}


.scroll-indicator span {

    color: #3f3f3f;

    font-size: 8px;

    letter-spacing: 3px;

}


.scroll-line {

    width: 70px;

    height: 1px;

    background: #252525;

    position: relative;

    overflow: hidden;

}


.scroll-line::after {

    content: "";

    position: absolute;

    left: -50%;
    top: 0;

    width: 50%;
    height: 1px;

    background: #8b8b8b;

    animation: lineMove 2s infinite;

}


@keyframes lineMove {

    0% {

        left: -50%;

    }

    100% {

        left: 100%;

    }

}



/* ============================================ */
/* CHARACTERS */
/* ============================================ */

.characters-section {

    background:

        radial-gradient(
            circle at 20% 20%,
            #101010,
            #030303 45%,
            #000000 80%
        );

}


.characters-heading {

    display: grid;

    grid-template-columns:

        minmax(0, 1.1fr)

        minmax(250px, .6fr);

    align-items: end;

    gap: 8vw;

    margin-bottom: 80px;

}


.characters-heading h2 {

    font-family: "Manrope", sans-serif;

    font-size:

        clamp(
            60px,
            9vw,
            135px
        );

    line-height: .85;

    font-weight: 500;

    letter-spacing: -7px;

}


.characters-intro {

    color: #666666;

    line-height: 1.9;

    font-size: 13px;

    max-width: 400px;

}



/* ============================================ */
/* CHARACTER GRID */
/* ============================================ */

.character-grid {

    display: grid;

    grid-template-columns:

        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:

        70px
        24px;

}


.character-card {

    cursor: pointer;

}


.character-image {

    position: relative;

    overflow: hidden;

    aspect-ratio: 4 / 5;

    background: #090909;

    border-radius:
        5px
        42px
        5px
        42px;

    transition:

        transform .4s cubic-bezier(.2,.8,.2,1),

        border-radius .4s ease;

}


.character-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        grayscale(100%)
        contrast(1.05)
        brightness(.78);

    transition:

        transform .7s cubic-bezier(.2,.8,.2,1),

        filter .5s ease;

}


.character-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            to top,
            rgba(0,0,0,.55),
            transparent 45%
        );

}


.character-number {

    position: absolute;

    top: 20px;
    right: 22px;

    color: rgba(255,255,255,.45);

    font-size: 9px;

    letter-spacing: 2px;

}


.character-card:hover .character-image {

    transform: translateY(-8px);

    border-radius:
        42px
        5px
        42px
        5px;

}


.character-card:hover img {

    transform: scale(1.045);

    filter:
        grayscale(20%)
        contrast(1.05)
        brightness(.9);

}



/* ============================================ */
/* CHARACTER INFO */
/* ============================================ */

.character-info {

    padding:

        22px
        4px
        0;

}


.character-info p {

    color: #454545;

    font-size: 8px;

    letter-spacing: 3px;

    margin-bottom: 8px;

}


.character-info h3 {

    font-family: "Manrope", sans-serif;

    font-size: 32px;

    font-weight: 500;

    letter-spacing: -1.5px;

}


.character-info > span {

    display: block;

    margin-top: 12px;

    color: #555555;

    font-size: 10px;

    transition:

        color .3s ease,

        transform .3s ease;

}


.character-card:hover
.character-info > span {

    color: #ffffff;

    transform: translateX(4px);

}



/* ============================================ */
/* SCROLL REVEAL */
/* ============================================ */





/* ============================================ */
/* MOBILE */
/* ============================================ */

@media (max-width: 820px) {


    .sidebar {

        width: 100%;
        height: auto;

        padding:
            12px
            16px;

        flex-direction: row;

        align-items: center;

        gap: 15px;

        border-right: none;

        border-bottom:
            1px solid #1c1c1c;

        overflow-x: auto;

    }


    .sidebar-top {

        flex-shrink: 0;

    }


    .sidebar-label {

        display: none;

    }


    .sidebar-navigation {

        flex-direction: row;

        flex: 1;

        justify-content: center;

    }


    .side-link {

        padding:
            11px
            15px;

        white-space: nowrap;

    }


    .sidebar-bottom {

        display: none;

    }


    .novel-main {

        margin-left: 0;

        padding-top: 68px;

    }


    .page-section {

        min-height: auto;

    }


    .section-inner {

        padding:

            85px
            24px;

    }


    .novel-title {

        font-size:
            clamp(
                72px,
                23vw,
                120px
            );

        letter-spacing: -6px;

    }


    .novel-introduction {

        grid-template-columns: 1fr;

        gap: 40px;

        margin-top: 65px;

    }


    .characters-heading {

        grid-template-columns: 1fr;

        gap: 30px;

        margin-bottom: 55px;

    }


    .characters-heading h2 {

        letter-spacing: -4px;

    }


    .character-grid {

        grid-template-columns: 1fr;

        gap: 55px;

    }

}



/* ============================================ */
/* SMALL MOBILE */
/* ============================================ */

@media (max-width: 500px) {


    .side-number {

        display: none;

    }


    .side-link {

        font-size: 10px;

        padding:
            10px
            12px;

    }


    .sidebar-logo {

        font-size: 14px;

        padding:
            9px
            11px;

    }


    .character-info h3 {

        font-size: 28px;

    }

}
/* ============================================ */
/* PANEL SYSTEM */
/* ============================================ */

.page-panel {
    display: none;
    width: 100%;
    min-height: 100vh;
    position: relative;
}


/* Whatever panel has active-panel becomes visible */

.page-panel.active-panel {
    display: block;
}


/* Novel layout */

.novel-overview.active-panel {
    display: flex;
    align-items: center;
}


/* Characters layout */

.characters-section.active-panel {
    display: block;
}


/* ============================================ */
/* CONTENT VISIBILITY */
/* ============================================ */

.page-panel.active-panel .section-inner,
.page-panel.active-panel .reveal,
.page-panel.active-panel .characters-heading,
.page-panel.active-panel .character-grid,
.page-panel.active-panel .character-card {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}


/* ============================================ */
/* SIDEBAR LINKS */
/* ============================================ */

.side-link {
    width: 100%;
    font-family: "DM Sans", sans-serif;
    text-align: left;
    cursor: pointer;
    outline: none;
}


/* ============================================ */
/* CHARACTER HEADING */
/* ============================================ */

.characters-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(260px, 360px);

    gap: 50px;

    align-items: end;

    margin-bottom: 70px;
}


.characters-heading h2 {
    font-family: "Manrope", sans-serif;

    font-size: clamp(55px, 7vw, 105px);

    font-weight: 500;

    line-height: 0.95;

    letter-spacing: -5px;

    margin: 0;
}


.characters-intro {
    color: #666666;

    font-size: 13px;

    line-height: 1.9;

    max-width: 360px;

    margin: 0;

    padding-bottom: 8px;
}


/* ============================================ */
/* MOBILE */
/* ============================================ */

@media (max-width: 820px) {

    .page-panel {
        min-height: calc(100vh - 68px);
    }


    .characters-heading {
        grid-template-columns: 1fr;

        gap: 25px;

        margin-bottom: 50px;
    }


    .characters-heading h2 {
        font-size: clamp(48px, 15vw, 80px);

        letter-spacing: -3px;
    }


    .characters-intro {
        max-width: 100%;
    }


    .character-grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }

}
/* ============================================ */
/* SIDEBAR LOGO SIZE - FINAL */
/* ============================================ */

.sidebar-logo {
    width: 50px !important;
    height: 50px !important;

    min-width: 50px !important;
    min-height: 50px !important;

    max-width: 50px !important;
    max-height: 50px !important;

    padding: 0 !important;

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

    overflow: hidden;

    border: 1px solid #272727;

    border-radius:
        5px
        16px
        16px
        16px;
}


.sidebar-logo img {
    width: 32px !important;
    height: 32px !important;

    max-width: 32px !important;
    max-height: 32px !important;

    object-fit: cover;

    display: block;
}
.sidebar-logo {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;

    padding: 0 !important;

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

    overflow: hidden !important;
}

.sidebar-logo img {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;

    object-fit: contain !important;

    display: block !important;
}
/* ============================================ */
/* THREE LINE SIDEBAR ICON */
/* ============================================ */

.menu-logo {
    width: 48px !important;
    height: 48px !important;

    min-width: 48px !important;
    min-height: 48px !important;

    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 5px;

    background: #080808;

    border: 1px solid #272727;

    border-radius:
        5px
        16px
        16px
        16px;

    overflow: hidden;

    text-decoration: none;
}


.menu-logo span {
    display: block;

    width: 18px;
    height: 1px;

    background: #bdbdbd;

    border-radius: 10px;

    transition:
        width .25s ease,
        background .25s ease,
        transform .25s ease;
}


.menu-logo:hover {
    transform: scale(1.07);

    background: #111111;
}


.menu-logo:hover span {
    background: #ffffff;
}


/* Slight asymmetry */

.menu-logo span:nth-child(2) {
    width: 13px;
}


.menu-logo:hover span:nth-child(2) {
    width: 18px;
}
/* ========================================================== */
/* CHAPTER READER */
/* ========================================================== */

.chapter-section {
    background:
        radial-gradient(
            circle at 50% 0%,
            #101010 0%,
            #050505 35%,
            #000000 75%
        );

    min-height: 100vh;
}


.chapter-container {
    width: min(100%, 900px);

    margin: 0 auto;

    padding:
        110px
        70px
        140px;
}


/* ========================================================== */
/* CHAPTER HEADER */
/* ========================================================== */

.chapter-header {
    text-align: center;

    margin-bottom: 90px;
}


.chapter-book {
    color: #484848;

    font-size: 9px;

    letter-spacing: 6px;

    margin-bottom: 32px;
}


.chapter-number-title {
    color: #777777;

    font-size: 10px;

    letter-spacing: 4px;

    margin-bottom: 16px;
}


.chapter-header h2 {
    margin: 0;

    color: #ffffff;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            50px,
            8vw,
            94px
        );

    font-weight: 500;

    letter-spacing: -5px;

    line-height: 1;
}


.chapter-divider {
    width: 45px;

    height: 1px;

    margin:
        38px
        auto
        0;

    background: #343434;
}


/* ========================================================== */
/* CHAPTER TEXT */
/* ========================================================== */

.chapter-text {
    width: 100%;

    max-width: 720px;

    margin: 0 auto;
}


.chapter-text p {
    color: #b8b8b8;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 17px;

    line-height: 1.95;

    margin-bottom: 30px;

    letter-spacing: .05px;
}


/* ========================================================== */
/* OPENING QUOTE */
/* ========================================================== */

.chapter-opening {
    margin:
        0
        0
        65px;

    padding:
        0
        0
        0
        28px;

    border-left:
        1px solid
        #3f3f3f;

    color: #ffffff;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            24px,
            3vw,
            34px
        );

    line-height: 1.5;

    font-weight: 400;

    letter-spacing: -1px;
}


/* ========================================================== */
/* DIALOGUE */
/* ========================================================== */

.chapter-text .dialogue {
    color: #eeeeee;

    font-weight: 500;

    padding-left: 22px;

    border-left:
        1px solid
        #252525;

    margin-top: -10px;

    margin-bottom: 34px;
}


/* ========================================================== */
/* FINAL WORD */
/* ========================================================== */

.chapter-text .chapter-final-word {
    color: #ffffff;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 32px;

    font-weight: 500;

    letter-spacing: -1px;

    margin:
        55px
        0
        40px;
}


/* ========================================================== */
/* END OF CHAPTER */
/* ========================================================== */

.chapter-end {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 22px;

    margin-top: 100px;
}


.chapter-end span {
    width: 45px;

    height: 1px;

    background: #252525;
}


.chapter-end p {
    margin: 0;

    color: #444444;

    font-size: 8px;

    letter-spacing: 3px;

    white-space: nowrap;
}


/* ========================================================== */
/* MOBILE CHAPTER READER */
/* ========================================================== */

@media (max-width: 820px) {

    .chapter-container {
        width: 100%;

        padding:
            80px
            26px
            100px;
    }


    .chapter-header {
        margin-bottom: 65px;
    }


    .chapter-header h2 {
        font-size:
            clamp(
                50px,
                18vw,
                76px
            );

        letter-spacing: -3px;
    }


    .chapter-text p {
        font-size: 16px;

        line-height: 1.9;
    }


    .chapter-opening {
        font-size: 24px;

        margin-bottom: 55px;
    }

}