/* ==========================================================
   MASTHEAD THIN

   Permanent narrow TomBeaverBooks site masthead.

   Goals:
   - one consistent strip across the site
   - dark charcoal rather than absolute black
   - white literary wordmark
   - single navigation row
   - theme picker near right
   - account/avatar at absolute far right
   - quiet enough to coexist with radically different pages
   ========================================================== */


/* ==========================================================
   VARIABLES
   ========================================================== */

.fr-masthead-thin {
    --fr-masthead-thin-bg: #25282a;
    --fr-masthead-thin-bg-deep: #202325;

    --fr-masthead-thin-text: #f7f5ef;
    --fr-masthead-thin-text-muted: #d8d7d2;

    --fr-masthead-thin-rule: rgb(255 255 255 / 42%);
    --fr-masthead-thin-hover: rgb(255 255 255 / 9%);
    --fr-masthead-thin-active: rgb(255 255 255 / 16%);

    --fr-masthead-thin-height: 7.2rem;

    position: relative;

    z-index: 100;

    width: 100%;

    color:
            var(--fr-masthead-thin-text);

    background:
            linear-gradient(
                    180deg,
                    var(--fr-masthead-thin-bg) 0%,
                    var(--fr-masthead-thin-bg-deep) 100%
            );

    box-shadow:
            0 1px 0 rgb(0 0 0 / 42%);
}


/* ==========================================================
   INNER FRAME
   ========================================================== */

.fr-masthead-thin__inner {
    display: grid;

    grid-template-columns:
            auto
            minmax(0, 1fr)
            auto;

    align-items: center;

    gap: 3rem;

    box-sizing: border-box;

    width: 100%;
    max-width: 120rem;

    min-height:
            var(--fr-masthead-thin-height);

    margin:
            0
            auto;

    padding:
            0
            3.6rem;
}


/* ==========================================================
   BRAND
   ========================================================== */

.fr-masthead-thin__brand {
    position: relative;

    display: inline-block;

    color:
            var(--fr-masthead-thin-text);

    font-family:
            "Baskerville",
            "Libre Baskerville",
            Georgia,
            serif;

    font-size: 3.4rem;
    font-weight: 400;

    letter-spacing: -0.045em;
    line-height: 1;

    text-decoration: none;

    white-space: nowrap;
}


.fr-masthead-thin__brand::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: -0.72rem;

    height: 1px;

    background:
            var(--fr-masthead-thin-rule);
}


.fr-masthead-thin__brand:hover,
.fr-masthead-thin__brand:focus-visible {
    color: #fff;
}


/* ==========================================================
   PRIMARY NAVIGATION
   ========================================================== */

.fr-masthead-thin__nav {
    display: flex;

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

    gap: 0.25rem;

    min-width: 0;
}


.fr-masthead-thin__link {
    position: relative;

    display: inline-flex;

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

    min-height: 3.8rem;

    padding:
            0.45rem
            1.35rem;

    border-radius: 0.3rem;

    color:
            var(--fr-masthead-thin-text-muted);

    font-family:
            var(
                    --font-sans,
                    -apple-system,
                    BlinkMacSystemFont,
                    "Segoe UI",
                    Helvetica,
                    Arial,
                    sans-serif
            );

    font-size: 1.5rem;
    font-weight: 500;

    letter-spacing: 0.01em;
    line-height: 1;

    text-decoration: none;

    white-space: nowrap;

    transition:
            color 120ms ease,
            background-color 120ms ease;
}


.fr-masthead-thin__link:hover,
.fr-masthead-thin__link:focus-visible {
    color: #fff;

    background:
            var(--fr-masthead-thin-hover);
}


.fr-masthead-thin__link[aria-current="page"],
.fr-masthead-thin__link.is-active {
    color: #fff;

    background:
            var(--fr-masthead-thin-active);
}


.fr-masthead-thin__link[aria-current="page"]::after,
.fr-masthead-thin__link.is-active::after {
    content: "";

    position: absolute;

    left: 1.25rem;
    right: 1.25rem;

    bottom: 0.2rem;

    height: 1px;

    background:
            rgb(255 255 255 / 72%);
}


/* ==========================================================
   NOTEBOOK
   ========================================================== */

.fr-masthead-thin__link--notebook {
    font-style: normal;
}


/* ==========================================================
   RIGHT-SIDE ACTIONS

   Theme first.
   Avatar/sign-in at absolute far right.
   ========================================================== */

.fr-masthead-thin__actions {
    display: flex;

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

    gap: 1.8rem;

    flex: 0 0 auto;

    min-width: 0;
}


/* ==========================================================
   THEME FIRST
   ========================================================== */

.fr-masthead-thin__themeWrap {
    order: 1;

    display: flex;

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

    flex: 0 0 auto;

    padding-left: 0;
    padding-right: 1.8rem;

    border-left: 0;

    border-right:
            1px solid
            rgb(255 255 255 / 22%);
}


/* ==========================================================
   MEMBER / SIGN-IN LAST
   ========================================================== */

.fr-masthead-thin__member {
    order: 2;

    position: relative;

    display: flex;

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

    flex: 0 0 auto;
}


/* ==========================================================
   SIGN IN
   ========================================================== */

.fr-masthead-thin__signIn {
    display: inline-flex;

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

    min-height: 3.8rem;

    padding:
            0.45rem
            0.4rem;

    color: #fff;

    font-family:
            var(
                    --font-sans,
                    -apple-system,
                    BlinkMacSystemFont,
                    "Segoe UI",
                    Helvetica,
                    Arial,
                    sans-serif
            );

    font-size: 1.5rem;
    font-weight: 500;

    letter-spacing: 0.01em;
    line-height: 1;

    text-decoration: none;

    white-space: nowrap;
}


.fr-masthead-thin__signIn:hover,
.fr-masthead-thin__signIn:focus-visible {
    text-decoration: underline;

    text-underline-offset: 0.25em;
}


/* ==========================================================
   MEMBER BUTTON
   ========================================================== */

.fr-masthead-thin__memberButton {
    appearance: none;
    -webkit-appearance: none;

    display: inline-flex;

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

    flex: 0 0 3.8rem;

    width: 3.8rem;
    min-width: 3.8rem;
    max-width: 3.8rem;

    height: 3.8rem;
    min-height: 3.8rem;
    max-height: 3.8rem;

    margin: 0;
    padding: 0;

    border: 0;

    border-radius: 50%;

    outline: 0;

    background: transparent;

    color: inherit;

    box-shadow: none;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}


/* ==========================================================
   AVATAR
   ========================================================== */

.fr-masthead-thin__avatar {
    display: inline-flex;

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

    width: 3.4rem;
    height: 3.4rem;

    border:
            1px solid
            rgb(255 255 255 / 38%);

    border-radius: 50%;

    background:
            rgb(255 255 255 / 11%);

    color:
            rgb(255 255 255 / 90%);

    transition:
            border-color 140ms ease,
            background-color 140ms ease;
}


.fr-masthead-thin__memberButton:hover
.fr-masthead-thin__avatar,

.fr-masthead-thin__memberButton:focus-visible
.fr-masthead-thin__avatar,

.fr-masthead-thin__memberButton[aria-expanded="true"]
.fr-masthead-thin__avatar {
    border-color:
            rgb(255 255 255 / 62%);

    background:
            rgb(255 255 255 / 17%);
}


.fr-masthead-thin__avatarIcon {
    display: block;

    width: 2rem;
    height: 2rem;

    margin: 0;
    padding: 0;
}


/* ==========================================================
   MEMBER POPOVER

   Centered directly beneath avatar.
   ========================================================== */

.fr-masthead-thin__memberPopover {
    position: absolute;

    top:
            calc(
                    100%
                    +
                    0.65rem
            );

    left: 50%;
    right: auto;

    z-index: 200;

    box-sizing: border-box;

    width: 18rem;

    padding:
            1.5rem
            1.6rem
            1.4rem;

    border:
            1px solid
            rgb(255 255 255 / 16%);

    border-radius: 0.6rem;

    background: #24272a;

    color:
            rgb(255 255 255 / 92%);

    box-shadow:
            0
            1rem
            2.8rem
            rgb(0 0 0 / 22%);

    font-family:
            var(
                    --font-sans,
                    -apple-system,
                    BlinkMacSystemFont,
                    "Segoe UI",
                    Helvetica,
                    Arial,
                    sans-serif
            );

    text-align: left;

    transform:
            translateX(-50%);
}


.fr-masthead-thin__memberPopover[hidden] {
    display: none !important;
}


/* ==========================================================
   HOVER BRIDGE
   ========================================================== */

.fr-masthead-thin__memberPopover::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: -0.8rem;

    height: 0.9rem;

    background: transparent;
}


/* ==========================================================
   POPOVER POINTER
   ========================================================== */

.fr-masthead-thin__memberPopover::before {
    content: "";

    position: absolute;

    top: -0.55rem;

    left: 50%;
    right: auto;

    width: 1rem;
    height: 1rem;

    background: #24272a;

    transform:
            translateX(-50%)
            rotate(45deg);
}


/* ==========================================================
   MEMBER LEVEL
   ========================================================== */

.fr-masthead-thin__memberLevel {
    position: relative;

    z-index: 1;

    margin: 0;

    color:
            rgb(255 255 255 / 94%);

    font-family:
            "Iowan Old Style",
            Georgia,
            "Times New Roman",
            serif;

    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.2;
}


/* ==========================================================
   MEMBER DIVIDER
   ========================================================== */

.fr-masthead-thin__memberDivider {
    position: relative;

    z-index: 1;

    width: 100%;
    height: 0;

    margin:
            1.2rem
            0;

    border-top:
            1px solid
            rgb(255 255 255 / 14%);
}


/* ==========================================================
   ACCOUNT LINK
   ========================================================== */

.fr-masthead-thin__memberAccountLink {
    position: relative;

    z-index: 1;

    display: inline-block;

    color:
            rgb(255 255 255 / 84%);

    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.2;

    text-decoration: none;
}


.fr-masthead-thin__memberAccountLink:hover,
.fr-masthead-thin__memberAccountLink:focus-visible {
    color: #fff;

    text-decoration: underline;

    text-underline-offset: 3px;
}


/* ==========================================================
   THEME PICKER
   ========================================================== */

.fr-masthead-thin
.tb-theme-picker--mastheadThin {
    display: flex;

    align-items: center;

    gap: 0.8rem;

    color:
            rgb(255 255 255 / 58%);

    font-family:
            var(
                    --font-sans,
                    -apple-system,
                    BlinkMacSystemFont,
                    "Segoe UI",
                    Helvetica,
                    Arial,
                    sans-serif
            );

    line-height: 1;
}


/* ==========================================================
   THEME LABEL
   ========================================================== */

.fr-masthead-thin
.tb-theme-picker--mastheadThin
.tb-theme-picker__label {
    margin: 0;

    color:
            rgb(255 255 255 / 50%);

    font-family:
            var(
                    --font-sans,
                    -apple-system,
                    BlinkMacSystemFont,
                    "Segoe UI",
                    Helvetica,
                    Arial,
                    sans-serif
            );

    font-size: 1rem;
    font-weight: 600;

    letter-spacing: 0.08em;
    line-height: 1;

    text-transform: uppercase;

    white-space: nowrap;
}


/* ==========================================================
   THEME SELECT
   ========================================================== */

.fr-masthead-thin
.tb-theme-picker--mastheadThin
.tb-theme-picker__select {
    appearance: none;
    -webkit-appearance: none;

    box-sizing: border-box;

    width: auto;
    min-width: 11rem;

    height: 3.4rem;

    margin: 0;

    padding:
            0
            3.1rem
            0
            1.15rem;

    border:
            1px solid
            rgb(255 255 255 / 28%);

    border-radius: 0.55rem;

    outline: 0;

    background:
            linear-gradient(
                    45deg,
                    transparent 50%,
                    rgb(255 255 255 / 72%) 50%
            )
            calc(100% - 1.35rem)
            1.4rem
            /
            0.45rem
            0.45rem
            no-repeat,

            linear-gradient(
                    135deg,
                    rgb(255 255 255 / 72%) 50%,
                    transparent 50%
            )
            calc(100% - 1.05rem)
            1.4rem
            /
            0.45rem
            0.45rem
            no-repeat,

            rgb(255 255 255 / 3.5%);

    color:
            rgb(255 255 255 / 92%);

    font-family:
            var(
                    --font-sans,
                    -apple-system,
                    BlinkMacSystemFont,
                    "Segoe UI",
                    Helvetica,
                    Arial,
                    sans-serif
            );

    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;

    cursor: pointer;

    transition:
            border-color 140ms ease,
            background-color 140ms ease;
}


.fr-masthead-thin
.tb-theme-picker--mastheadThin
.tb-theme-picker__select:hover {
    border-color:
            rgb(255 255 255 / 48%);

    background-color:
            rgb(255 255 255 / 5.5%);
}


.fr-masthead-thin
.tb-theme-picker--mastheadThin
.tb-theme-picker__select:focus,

.fr-masthead-thin
.tb-theme-picker--mastheadThin
.tb-theme-picker__select:focus-visible {
    border-color:
            rgb(255 255 255 / 62%);

    outline: 0;

    box-shadow: none;
}


.fr-masthead-thin
.tb-theme-picker--mastheadThin
.tb-theme-picker__select option {
    color: #222;

    background: #fff;
}


/* ==========================================================
   FOCUS
   ========================================================== */

.fr-masthead-thin a:focus-visible {
    outline:
            2px solid
            rgb(255 255 255 / 85%);

    outline-offset: 3px;
}


.fr-masthead-thin button:focus-visible {
    outline:
            2px solid
            rgb(255 255 255 / 85%);

    outline-offset: 3px;
}


/* ==========================================================
   MEDIUM DESKTOP
   ========================================================== */

@media (max-width: 1180px) {

    .fr-masthead-thin__inner {
        gap: 1.5rem;

        padding:
                0
                2.4rem;
    }


    .fr-masthead-thin__brand {
        font-size: 3rem;
    }


    .fr-masthead-thin__link {
        padding:
                0.45rem
                0.9rem;

        font-size: 1.42rem;
    }


    .fr-masthead-thin__actions {
        gap: 1.25rem;
    }


    .fr-masthead-thin__themeWrap {
        padding-right: 1.25rem;
    }


    .fr-masthead-thin
    .tb-theme-picker--mastheadThin
    .tb-theme-picker__label {
        display: none;
    }


    .fr-masthead-thin
    .tb-theme-picker--mastheadThin
    .tb-theme-picker__select {
        min-width: 9.5rem;
    }


    .fr-masthead-thin__signIn {
        font-size: 1.42rem;
    }
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 960px) {

    .fr-masthead-thin {
        --fr-masthead-thin-height: auto;
    }


    .fr-masthead-thin__inner {
        grid-template-columns:
                minmax(0, 1fr)
                auto;

        gap:
                0.9rem
                1.5rem;

        padding:
                1.4rem
                2rem
                1.2rem;
    }


    .fr-masthead-thin__brand {
        grid-column: 1;
        grid-row: 1;

        font-size: 2.8rem;
    }


    .fr-masthead-thin__brand::after {
        bottom: -0.5rem;
    }


    .fr-masthead-thin__actions {
        grid-column: 2;
        grid-row: 1;

        justify-self: end;
    }


    .fr-masthead-thin__nav {
        grid-column:
                1 / -1;

        grid-row: 2;

        justify-content: flex-start;

        gap: 0.1rem;

        overflow-x: auto;

        padding-top: 0.6rem;

        scrollbar-width: none;
    }


    .fr-masthead-thin__nav::-webkit-scrollbar {
        display: none;
    }


    .fr-masthead-thin__link {
        flex: 0 0 auto;
    }
}


/* ==========================================================
   SMALL TABLET
   ========================================================== */

@media (max-width: 760px) {

    .fr-masthead-thin__actions {
        gap: 1rem;
    }


    .fr-masthead-thin__themeWrap {
        padding-right: 1rem;
    }


    .fr-masthead-thin
    .tb-theme-picker--mastheadThin
    .tb-theme-picker__select {
        min-width: 8.8rem;

        height: 3.2rem;

        padding-left: 1rem;

        font-size: 1.18rem;
    }


    .fr-masthead-thin__memberButton {
        flex-basis: 3.5rem;

        width: 3.5rem;
        min-width: 3.5rem;
        max-width: 3.5rem;

        height: 3.5rem;
        min-height: 3.5rem;
        max-height: 3.5rem;
    }


    .fr-masthead-thin__avatar {
        width: 3.2rem;
        height: 3.2rem;
    }
}


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

@media (max-width: 620px) {

    .fr-masthead-thin__inner {
        grid-template-columns:
                minmax(0, 1fr)
                auto;

        padding:
                1.15rem
                1.4rem
                1rem;
    }


    .fr-masthead-thin__brand {
        font-size: 2.45rem;
    }


    .fr-masthead-thin__actions {
        gap: 0.75rem;
    }


    .fr-masthead-thin__themeWrap {
        padding-right: 0.75rem;
    }


    .fr-masthead-thin
    .tb-theme-picker--mastheadThin
    .tb-theme-picker__select {
        min-width: 8.1rem;

        height: 3rem;

        padding:
                0
                2.6rem
                0
                0.85rem;

        background:
                linear-gradient(
                        45deg,
                        transparent 50%,
                        rgb(255 255 255 / 72%) 50%
                )
                calc(100% - 1.15rem)
                1.2rem
                /
                0.4rem
                0.4rem
                no-repeat,

                linear-gradient(
                        135deg,
                        rgb(255 255 255 / 72%) 50%,
                        transparent 50%
                )
                calc(100% - 0.88rem)
                1.2rem
                /
                0.4rem
                0.4rem
                no-repeat,

                rgb(255 255 255 / 3.5%);

        font-size: 1.1rem;
    }


    .fr-masthead-thin__signIn {
        font-size: 1.25rem;
    }


    .fr-masthead-thin__memberButton {
        flex-basis: 3.2rem;

        width: 3.2rem;
        min-width: 3.2rem;
        max-width: 3.2rem;

        height: 3.2rem;
        min-height: 3.2rem;
        max-height: 3.2rem;
    }


    .fr-masthead-thin__avatar {
        width: 3rem;
        height: 3rem;
    }


    .fr-masthead-thin__avatarIcon {
        width: 1.75rem;
        height: 1.75rem;
    }


    .fr-masthead-thin__memberPopover {
        width: 16rem;
    }


    .fr-masthead-thin__nav {
        margin:
                0
                -1.4rem;

        padding:
                0.65rem
                1.4rem
                0;
    }


    .fr-masthead-thin__link {
        min-height: 3.4rem;

        padding:
                0.4rem
                0.85rem;

        font-size: 1.3rem;
    }
}


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

@media (max-width: 430px) {

    .fr-masthead-thin__brand {
        font-size: 2.2rem;
    }


    .fr-masthead-thin
    .tb-theme-picker--mastheadThin
    .tb-theme-picker__select {
        min-width: 7.4rem;

        max-width: 8rem;
    }
}