/* ==========================================================
   MASTHEAD THIN — HOME TEST

   Home-only integration layer.

   MastheadThin replaces:
   - large TomBeaverBooks home masthead
   - member-level label
   - two-line tagline
   - old home navigation row
   - spacing associated with those elements

   The rest of part-home-minimal remains unchanged.
   ========================================================== */


/* ==========================================================
   HIDE EMPTY CASPER HEADER ON HOME
   ========================================================== */

.home-template #gh-head {
    display: none;
}


/* ==========================================================
   HOME TEST WRAPPER
   ========================================================== */

.fr-home-masthead-thin-test {
    width: 100%;

    margin: 0;

    padding: 0;

    background: var(--tb-bg);
}


/* ==========================================================
   ENSURE THIN MASTHEAD RUNS EDGE TO EDGE
   ========================================================== */

.fr-home-masthead-thin-test > .fr-masthead-thin {
    width: 100vw;

    margin-left:
            calc(
                    50%
                    -
                    50vw
            );
}


/* ==========================================================
   REMOVE OLD HOME MASTHEAD
   ========================================================== */

.fr-home-masthead-thin-test
.fr-home-minimal__masthead {
    display: none !important;
}


.fr-home-masthead-thin-test
.fr-home-minimal__masthead
+
.fr-spacer {
    display: none !important;
}


/* ==========================================================
   REMOVE OLD HOME NAVIGATION
   ========================================================== */

.fr-home-masthead-thin-test
.fr-home-minimal__nav {
    display: none !important;
}


.fr-home-masthead-thin-test
.fr-home-minimal__nav
+
.fr-spacer {
    display: none !important;
}


/* ==========================================================
   THIN MASTHEAD — RIGHT SIDE

   HOME ORDER:

   Theme | Avatar

   Avatar is the terminal control at the far right.
   ========================================================== */

.fr-home-masthead-thin-test
.fr-masthead-thin__actions {
    display: flex;
    align-items: center;

    flex: 0 0 auto;

    gap: 1.8rem;

    margin-left: 2.4rem;
}


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

.fr-home-masthead-thin-test
.fr-masthead-thin__themeWrap {
    order: 1;

    display: flex;
    align-items: center;

    flex: 0 0 auto;

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

    border-left: 0;

    border-right:
            1px solid
            rgba(255, 255, 255, 0.22);
}


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

.fr-home-masthead-thin-test
.fr-masthead-thin__member {
    order: 2;

    position: relative;

    display: flex;
    align-items: center;

    flex: 0 0 auto;
}


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

.fr-home-masthead-thin-test
.fr-masthead-thin__signIn {
    color: rgba(255, 255, 255, 0.92);

    font-family:
            Arial,
            Helvetica,
            sans-serif;

    font-size: 1.45rem;
    font-weight: 500;
    line-height: 1;

    text-decoration: none;
    white-space: nowrap;
}


.fr-home-masthead-thin-test
.fr-masthead-thin__signIn:hover,

.fr-home-masthead-thin-test
.fr-masthead-thin__signIn:focus-visible {
    text-decoration: underline;
    text-underline-offset: 4px;
}


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

.fr-home-masthead-thin-test
.fr-masthead-thin__memberButton {
    appearance: none;
    -webkit-appearance: none;

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

    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;

    cursor: pointer;

    box-shadow: none;

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


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

.fr-home-masthead-thin-test
.fr-masthead-thin__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 3.4rem;
    height: 3.4rem;

    border:
            1px solid
            rgba(255, 255, 255, 0.38);

    border-radius: 50%;

    background:
            rgba(255, 255, 255, 0.11);

    color:
            rgba(255, 255, 255, 0.90);

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


.fr-home-masthead-thin-test
.fr-masthead-thin__memberButton:hover
.fr-masthead-thin__avatar,

.fr-home-masthead-thin-test
.fr-masthead-thin__memberButton:focus-visible
.fr-masthead-thin__avatar,

.fr-home-masthead-thin-test
.fr-masthead-thin__memberButton[aria-expanded="true"]
.fr-masthead-thin__avatar {
    border-color:
            rgba(255, 255, 255, 0.62);

    background:
            rgba(255, 255, 255, 0.17);
}


.fr-home-masthead-thin-test
.fr-masthead-thin__avatarIcon {
    display: block;

    width: 2rem;
    height: 2rem;
}


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

.fr-home-masthead-thin-test
.fr-masthead-thin__memberPopover {
    position: absolute;

    top:
            calc(
                    100%
                    +
                    0.65rem
            );

    left: 50%;
    right: auto;

    z-index: 100;

    box-sizing: border-box;

    width: 18rem;

    padding:
            1.5rem
            1.6rem
            1.4rem;

    border:
            1px solid
            rgba(255, 255, 255, 0.16);

    border-radius: 0.6rem;

    background:
            #24272a;

    color:
            rgba(255, 255, 255, 0.92);

    box-shadow:
            0
            1rem
            2.8rem
            rgba(0, 0, 0, 0.22);

    font-family:
            Arial,
            Helvetica,
            sans-serif;

    text-align: left;

    transform:
            translateX(-50%);
}


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


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

.fr-home-masthead-thin-test
.fr-masthead-thin__memberPopover::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: -0.8rem;

    height: 0.9rem;

    background: transparent;
}


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

.fr-home-masthead-thin-test
.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);
}


/* ==========================================================
   MEMBERSHIP LEVEL
   ========================================================== */

.fr-home-masthead-thin-test
.fr-masthead-thin__memberLevel {
    position: relative;

    z-index: 1;

    margin: 0;

    color:
            rgba(255, 255, 255, 0.93);

    font-family:
            var(--font-iowan),
            Georgia,
            "Times New Roman",
            serif;

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


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

.fr-home-masthead-thin-test
.fr-masthead-thin__memberDivider {
    position: relative;

    z-index: 1;

    width: 100%;
    height: 0;

    margin:
            1.2rem
            0;

    border-top:
            1px solid
            rgba(255, 255, 255, 0.14);
}


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

.fr-home-masthead-thin-test
.fr-masthead-thin__memberAccountLink {
    position: relative;

    z-index: 1;

    display: inline-block;

    color:
            rgba(255, 255, 255, 0.84);

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

    text-decoration: none;
}


.fr-home-masthead-thin-test
.fr-masthead-thin__memberAccountLink:hover,

.fr-home-masthead-thin-test
.fr-masthead-thin__memberAccountLink:focus-visible {
    color: #fff;

    text-decoration: underline;
    text-underline-offset: 3px;
}


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

.fr-home-masthead-thin-test
.tb-theme-picker--mastheadThin {
    display: flex;
    align-items: center;

    gap: 0.9rem;

    color: rgba(255, 255, 255, 0.58);

    font-family:
            Arial,
            Helvetica,
            sans-serif;

    font-size: 1.1rem;
    line-height: 1;
}


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

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

    color: rgba(255, 255, 255, 0.52);

    font-family:
            Arial,
            Helvetica,
            sans-serif;

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

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


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

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

    width: auto;
    min-width: 11rem;
    height: 3.4rem;

    margin: 0;

    padding:
            0
            3.1rem
            0
            1.2rem;

    border:
            1px solid
            rgba(255, 255, 255, 0.28);

    border-radius: 0.55rem;

    outline: 0;

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

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

            rgba(255, 255, 255, 0.035);

    color: rgba(255, 255, 255, 0.92);

    font-family:
            Arial,
            Helvetica,
            sans-serif;

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

    cursor: pointer;

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


/* ==========================================================
   SELECT INTERACTION
   ========================================================== */

.fr-home-masthead-thin-test
.tb-theme-picker--mastheadThin
.tb-theme-picker__select:hover {
    border-color:
            rgba(255, 255, 255, 0.48);

    background-color:
            rgba(255, 255, 255, 0.055);
}


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

.fr-home-masthead-thin-test
.tb-theme-picker--mastheadThin
.tb-theme-picker__select:focus-visible {
    border-color:
            rgba(255, 255, 255, 0.62);

    box-shadow: none;
}


/* ==========================================================
   HOME CONTENT POSITION
   ========================================================== */

.fr-home-masthead-thin-test
.fr-home-minimal {
    position: relative;

    padding-top: 10rem;
}


/* ==========================================================
   HOME HYPE LINE
   ========================================================== */

.fr-home-masthead-thin-test
.fr-home-minimal__hype {
    position: absolute;

    top: calc(5rem - 0.625em + 4px);
    left: 0;
    right: 0;

    width: 100%;

    margin: 0;

    padding: 0 2rem;

    color: var(--tb-accent-dark);

    font-family:
            var(--font-iowan),
            Georgia,
            "Times New Roman",
            serif;

    font-size:
            clamp(
                    1.7rem,
                    1.75vw,
                    2.15rem
            );

    font-weight: 400;

    line-height: 1.25;

    letter-spacing: -0.015em;

    text-align: center;

    white-space: nowrap;

    pointer-events: none;

    opacity: 0;

    transform: translateY(0.7rem);

    animation:
            fr-home-hype-enter
            650ms
            cubic-bezier(.22, .61, .36, 1)
            120ms
            forwards,

            fr-home-hype-color
            18s
            ease-in-out
            1s
            infinite
            alternate;
}


@keyframes fr-home-hype-enter {

    from {
        opacity: 0;

        transform: translateY(0.7rem);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }
}


@keyframes fr-home-hype-color {

    0% {
        color:
                color-mix(
                        in srgb,
                        var(--tb-accent-dark) 82%,
                        #111
                );
    }

    33% {
        color:
                var(--tb-accent-dark);
    }

    66% {
        color:
                color-mix(
                        in srgb,
                        var(--tb-accent-dark) 72%,
                        var(--tb-bg)
                );
    }

    100% {
        color:
                color-mix(
                        in srgb,
                        var(--tb-accent-dark) 88%,
                        var(--tb-accent-med)
                );
    }
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .fr-home-masthead-thin-test
    .fr-home-minimal__hype {
        opacity: 1;

        transform: none;

        animation: none;

        color: var(--tb-accent-dark);
    }
}


/* ==========================================================
   LARGE DESKTOP
   ========================================================== */

@media (min-width: 1200px) {

    .fr-home-masthead-thin-test
    .fr-home-minimal {
        width:
                min(
                        118rem,
                        calc(100% - 8rem)
                );
    }
}


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

@media (max-width: 900px) {

    .fr-home-masthead-thin-test
    .fr-masthead-thin__actions {
        gap: 1.4rem;

        margin-left: 1.5rem;
    }


    .fr-home-masthead-thin-test
    .fr-masthead-thin__themeWrap {
        padding-right: 1.4rem;
    }


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


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


    .fr-home-masthead-thin-test
    .fr-home-minimal {
        width:
                calc(
                        100% - 5rem
                );

        padding-top: 3.2rem;
    }


    .fr-home-masthead-thin-test
    .fr-home-minimal__hype {
        position: relative;

        top: auto;
        left: auto;
        right: auto;

        margin:
                0
                0
                2.8rem;

        padding: 0 1rem;

        font-size:
                clamp(
                        1.55rem,
                        2.7vw,
                        1.9rem
                );

        white-space: normal;
    }
}


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

@media (max-width: 620px) {

    .fr-home-masthead-thin-test
    .fr-masthead-thin__actions {
        width: 100%;

        justify-content: flex-end;

        margin-left: 0;
    }


    .fr-home-masthead-thin-test
    .fr-masthead-thin__themeWrap {
        padding-right: 1.2rem;
    }


    .fr-home-masthead-thin-test
    .tb-theme-picker--mastheadThin
    .tb-theme-picker__select {
        min-width: 9rem;
        height: 3.2rem;

        font-size: 1.15rem;
    }


    .fr-home-masthead-thin-test
    .fr-home-minimal {
        width:
                calc(
                        100% - 3rem
                );

        padding-top: 2.5rem;
    }


    .fr-home-masthead-thin-test
    .fr-home-minimal__hype {
        margin-bottom: 2.4rem;

        padding: 0 0.5rem;

        font-size: 1.55rem;

        line-height: 1.35;
    }
}