/**
    3.00 - Custom styles.
 */
body {
    font-optical-sizing: auto;
    text-justify: inter-character;
}


/**
    3.01 - header.
 */
header {
    --padding: 10px;
}

.masthead {
    --font-size-headline1: 46px;
    --font-family-headline2: var(--font-family-alt);
    --font-size-headline2: 28px;
    justify-self: center;

    b {
        --font-weight: 900;
        left: -3.5px;
        position: relative;
    }

    .h2 {
        position: relative;
        top: -8px;
    }
}

header > section {
    border-bottom: 1px solid var(--color-link);
    padding-bottom: var(--padding);
}

.menu-header {
    section {
        @media (width < 520px) {
            flex-direction: column;
        }
    }

    .flex-item {
        --flex-basis: fit-content;
    }
}


/**
    3.02 - footer.
 */
footer {
    margin-top: 1.5lh;
}


/**
    3.10 - home page.
 */
.template-home-page {
    .top-break {
        border-top: 1px solid var(--color-alpha);
        margin-top: 20px;
        padding-top: 30px;
    }
}


/**
    3.20 - author list page.
 */
.template-author-list {
    .publish-date {
        font-size: smaller;
        text-transform: uppercase;
    }
}


/**
    3.21 - author single page.
 */
.template-author {
    .bio {
        border-bottom: 1px solid var(--color-alpha);
        padding-bottom: var(--padding);
    }
}


/**
    3.30 - story list page.
 */
.template-story-list {
    .author {
        margin-top: -8px;
    }

    .publish-date {
        font-size: smaller;
        text-transform: uppercase;
    }
}


/**
    3.31 - story single page.
 */
.template-story {
    .hero {
        --gap: 6px;

        .publish-date {
            font-size: smaller;
            text-transform: uppercase;
        }

        * {
            margin: 0;
        }
    }

    .content {
        max-width: var(--max-width-sm);

        p {
            text-align: justify;
        }
    }
}


/**
    3.80 - search page.
 */
.form-search {
    border-bottom: 1px solid var(--color-alpha);
    padding: 0 calc(var(--padding) * 2) var(--padding);
}

.results-search {
}


/**
    3.90 - Custom magic classes.
 */
.has-max-width-narrow {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--max-width-sm);
    width: 100%;
}
.is-story {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--max-width-sm);
    width: 100%;
}