header {
    width: var(--section-width);
    margin-top: 1rem;
    position: relative;

    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.4rem;
    gap: 2rem;

    &::after {
        content: "";
        position: absolute;
        bottom: 0;
        width: 100%;
        border-bottom: 1px solid var(--header-border-color, #ddd);
    }

    .title {
        font-style: italic;
        font-size: 1.7rem;
        flex-shrink: 0;
    }

    nav {
        display: flex;
        column-gap: 0.6rem;
        flex-wrap: wrap;

        a {
            transition: text-underline-offset 0.3s ease;

            &:hover,
            &.active {
                text-underline-offset: 5px;
            }
        }

        &:hover a.active:not(:hover) {
            text-underline-offset: 2.1px;
        }
    }
}