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

:root {
    --navy: #07141d;
    --navy2: #0c202b;
    --cream: #f4eee4;
    --mist: #a9c2d1;
    --blue: #80c5ec;
    --gold: #d8b989
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--navy);
    color: var(--cream);
    font-family: 'DM Sans', sans-serif
}

a {
    color: inherit;
    text-decoration: none
}

button {
    font: inherit
}

header {
    position: relative;
    z-index: 4;
    background: #06131bf0;
    border-bottom: 1px solid #ffffff18
}

.nav {
    max-width: 1380px;
    margin: auto;
    padding: 18px 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px
}

.logo {
    font: 600 clamp(26px, 3vw, 39px)/.8 'Barlow Condensed', sans-serif;
    letter-spacing: .12em;
    white-space: nowrap
}

.logo small {
    display: block;
    font: 500 10px 'DM Sans', sans-serif;
    letter-spacing: .37em;
    margin-top: 13px;
    color: #c7d3d9
}

.menu {
    display: flex;
    gap: 32px;
    align-items: center
}

.menu a {
    font: 500 15px 'Barlow Condensed', sans-serif;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #b8d0dd
}

.menu a:hover,
.menu a.active {
    color: var(--gold)
}

.mobile-toggle {
    display: none;
    color: white;
    background: none;
    border: 1px solid #ffffff50;
    padding: 10px 15px
}

.hero {
    min-height: 610px;
    background: linear-gradient(90deg, rgba(3, 12, 18, .08), rgba(4, 16, 24, .3) 35%, #061520 68%, #061520), url('assets/forest-overlook.webp') left center/auto 100% no-repeat;
    display: flex;
    justify-content: flex-end;
    align-items: center
}

.hero-inner {
    width: min(760px, 55%);
    padding: 76px 7% 78px 4%;
    text-align: center
}

.eyebrow {
    font: 600 13px 'DM Sans', sans-serif;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--blue)
}

h1,
h2,
h3,
p {
    margin-top: 0
}

.hero h1 {
    font: 700 clamp(82px, 10vw, 150px)/.77 'Barlow Condensed', sans-serif;
    letter-spacing: .015em;
    margin: 28px 0 30px;
    color: #e8f1f4;
    text-transform: uppercase;
    text-shadow: 1px 3px 20px #0008
}

.byline {
    font: 400 24px 'Barlow Condensed', sans-serif;
    letter-spacing: .25em;
    text-transform: uppercase
}

.lead {
    font: 400 19px/1.7 'DM Sans', sans-serif;
    color: #bbd1db
}

.hero .lead {
    margin: 28px auto;
    max-width: 480px;
    letter-spacing: .11em;
    text-transform: uppercase;
    font-size: 13px
}

.btn {
    display: inline-block;
    padding: 15px 28px;
    border: 1px solid #86b6d0;
    background: #18557b;
    color: white;
    font: 600 16px 'Barlow Condensed', sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    transition: .2s
}

.btn:hover {
    background: #2d779f;
    transform: translateY(-2px)
}

.btn.secondary {
    background: transparent;
    border-color: #8c9ba4
}

.section {
    max-width: 1340px;
    padding: 82px 30px;
    margin: auto
}

.section-heading {
    text-align: center;
    margin: 0 auto 35px
}

.section-heading h2 {
    font: 500 clamp(34px, 5vw, 57px) 'Barlow Condensed', sans-serif;
    letter-spacing: .09em;
    text-transform: uppercase;
    margin: 0
}

.section-heading p {
    font: 500 11px 'DM Sans', sans-serif;
    letter-spacing: .4em;
    text-transform: uppercase;
    color: var(--blue);
    margin-top: 10px
}

.character-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px
}

.character-card {
    overflow: hidden;
    background: #0b1d27;
    border: 1px solid #ffffff16;
    transition: .22s
}

.character-card:hover {
    transform: translateY(-5px);
    border-color: #8fb6cf
}

.portrait {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: top;
    display: block;
    filter: saturate(.82)
}

.character-card .content {
    padding: 20px 18px 23px
}

.character-card h3 {
    font: 600 26px/1 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    margin: 0 0 10px;
    letter-spacing: .025em
}

.character-card p {
    font-size: 13px;
    line-height: 1.65;
    color: #b1c0c8;
    min-height: 44px
}

.more {
    font: 600 13px 'Barlow Condensed', sans-serif;
    color: var(--blue);
    letter-spacing: .2em;
    text-transform: uppercase
}

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 6vw
}

.split h2,
.page-heading h1 {
    font: 600 clamp(50px, 6vw, 80px)/.96 'Barlow Condensed', sans-serif;
    margin: 18px 0 22px
}

.split p {
    line-height: 1.85;
    color: #c3cbd0
}

.novel-feature {
    background: #0b212e;
    border-top: 1px solid #ffffff16;
    border-bottom: 1px solid #ffffff16
}

.cover {
    width: min(100%, 400px);
    height: 530px;
    object-fit: cover;
    object-position: top;
    box-shadow: 20px 24px 60px #0009;
    display: block;
    margin: auto
}

.novel-feature .cover {
    height: 480px;
    width: 295px
}

.divider {
    height: 1px;
    background: #ffffff24;
    max-width: 1300px;
    margin: auto
}

footer {
    border-top: 1px solid #ffffff26;
    padding: 38px 30px;
    text-align: center;
    font-size: 12px;
    letter-spacing: .13em;
    color: #9fb6c2
}

.page-hero {
    min-height: 310px;
    background: linear-gradient(90deg, #07141de8, #07141db9), url('assets/forest-overlook.webp') center 38%/cover;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 55px 20px
}

.page-heading h1 {
    margin: 12px 0
}

.character-detail {
    display: grid;
    grid-template-columns: minmax(240px, 390px) 1fr;
    gap: 7vw;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto
}

.character-detail img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    object-position: top;
    box-shadow: 20px 25px 50px #0008
}

.character-detail h2 {
    font: 600 clamp(48px, 6vw, 78px)/1 'Barlow Condensed', sans-serif
}

.character-detail p {
    font: 400 17px/1.9 'DM Sans', sans-serif;
    color: #c6d1d6
}

.pullquote {
    font: italic 30px/1.3 'Barlow Condensed', sans-serif;
    color: var(--gold);
    padding: 25px 0;
    border-top: 1px solid #ffffff32;
    border-bottom: 1px solid #ffffff32
}

.subnav {
    margin-top: 35px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap
}

.small-note {
    font-size: 12px;
    color: #9eb1bd
}

.about-block {
    max-width: 850px;
    margin: auto;
    text-align: center
}

.about-block p {
    font-size: 18px;
    line-height: 1.9;
    color: #c3d0d7
}

.story-points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 50px
}

.story-points article {
    border-left: 1px solid var(--gold);
    padding: 12px 22px;
    background: #0c202b
}

.story-points h3 {
    font: 600 27px 'Barlow Condensed', sans-serif
}

.story-points p {
    color: #b0c3cc;
    line-height: 1.7;
    font-size: 14px
}

@media(max-width:950px) {
    .character-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .hero {
        background-position: 30% center
    }

    .hero-inner {
        width: 65%;
        padding-right: 3%
    }

    .split {
        gap: 25px
    }
}

@media(max-width:650px) {
    .nav {
        padding: 18px
    }

    .logo {
        font-size: 26px
    }

    .logo small {
        font-size: 7px
    }

    .mobile-toggle {
        display: block
    }

    .menu {
        display: none;
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        background: #081b27;
        padding: 20px;
        flex-direction: column;
        align-items: stretch;
        gap: 20px
    }

    .menu.open {
        display: flex
    }

    .hero {
        min-height: 660px;
        align-items: end;
        background: linear-gradient(0deg, #061520 2%, #061520df 40%, #06152022 90%), url('assets/forest-overlook.webp') 30% top/auto 70% no-repeat
    }

    .hero-inner {
        width: 100%;
        padding: 100px 24px 50px
    }

    .hero h1 {
        font-size: 83px
    }

    .section {
        padding: 55px 20px
    }

    .character-grid {
        gap: 12px
    }

    .character-card .content {
        padding: 15px 12px
    }

    .character-card h3 {
        font-size: 22px
    }

    .character-card p {
        font-size: 12px
    }

    .split,
    .character-detail,
    .story-points {
        grid-template-columns: 1fr
    }

    .character-detail img {
        height: 360px
    }

    .cover {
        height: 430px
    }

    .page-hero {
        min-height: 220px
    }
}

/* Author-first homepage */
.author-hero {
    min-height: calc(100vh - 120px);
    display: flex;
    align-items: center;
    
}

.author-hero-inner {
    width: 420px;
    margin: 0;
    padding: 100px 20px 120px 0;
    position: relative;
    z-index: 1
}

.author-hero h1 {
    font: 600 clamp(76px, 9vw, 135px)/.82 'Barlow Condensed', sans-serif;
    margin: 30px 0 36px;
    letter-spacing: .018em
}

.author-intro {
    font: 400 clamp(22px, 2.4vw, 33px)/1.32 'Barlow Condensed', sans-serif;
    color: #f4eee4;
    max-width: 550px
}

.author-copy {
    font-size: 15px;
    line-height: 1.8;
    color: #bcd1dd;
    max-width: 450px
}

.debut-link {
    margin-top: 48px;
    padding-top: 26px;
    border-top: 1px solid #d8b98980
}

.debut-link span {
    color: var(--gold);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .26em
}

.debut-link h2 {
    font: 600 52px/1 'Barlow Condensed', sans-serif;
    margin: 15px 0 22px
}

@media(max-width:700px) {
    .author-hero {
        
    }

    .author-hero-inner {
        width: 100%;
        margin: 0;
        padding: 280px 24px 65px
    }

    .author-hero h1 {
        font-size: 75px;
        margin: 18px 0 20px
    }

    .author-intro {
        font-size: 27px
    }

    .debut-link {
        margin-top: 28px
    }

    .debut-link h2 {
        font-size: 43px
    }
}