/* =========================================================
   INTHING HEADER
========================================================= */

.site-header {
    position: fixed;
    z-index: 100;

    top: 0;
    left: 0;
    right: 0;

    height: 96px;

    padding: 0 clamp(22px, 5vw, 72px);

    display: flex;
    align-items: center;
    justify-content: space-between;

    color: var(--ink);

    transition:
        height .35s ease,
        background .35s ease,
        box-shadow .35s ease,
        color .35s ease;
}


/* =========================================================
   SCROLLED HEADER
========================================================= */

.site-header.scrolled {
    height: 72px;

    background: rgba(247, 247, 244, .88);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    box-shadow:
        0 8px 30px rgba(20, 30, 35, .06);
}


/* =========================================================
   LOGO
========================================================= */

.site-logo {
    display: inline-block;

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

    font-size: clamp(31px, 3.3vw, 43px);

    font-weight: 500;

    letter-spacing: -1.8px;

    line-height: 1;

    color: var(--deep);

    text-decoration: none;

    white-space: nowrap;
}

.site-logo small {
    display: block;

    margin-top: 7px;

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

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 2.2px;

    line-height: 1;

    text-transform: uppercase;

    color: #687176;
}


/* =========================================================
   MENU TRIGGER
========================================================= */

.menu-trigger {
    border: 0;

    background: rgba(255, 255, 255, .78);

    box-shadow:
        0 10px 30px rgba(25, 38, 47, .10);

    border-radius: 16px;

    padding: 14px 23px;

    color: var(--maroon);

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

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.1px;

    line-height: 1;

    min-width: 132px;

    cursor: pointer;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}

.menu-trigger:hover {
    background: var(--maroon);

    color: var(--white);

    transform: translateY(-2px);

    box-shadow:
        0 14px 35px rgba(25, 38, 47, .14);
}


/* =========================================================
   MENU PANEL
========================================================= */

.menu-panel {
    position: fixed;

    z-index: 110;

    top: 118px;

    right: clamp(24px, 3.5vw, 60px);

    width: clamp(460px, 40vw, 650px);

    height: calc(100vh - 154px);
    height: calc(100dvh - 154px);

    padding:
        30px
        clamp(30px, 3vw, 46px)
        26px;

    background: rgba(247, 247, 244, .96);

    border: 1px solid rgba(63, 69, 72, .16);

    border-radius: 18px;

    box-shadow:
        0 30px 90px rgba(23, 29, 33, .20);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    transform: translate3d(120%, 0, 0);

    opacity: 0;

    visibility: hidden;

    transition:
        transform .65s var(--ease),
        opacity .35s ease,
        visibility 0s linear .65s;

    overflow-y: auto;
    overflow-x: hidden;

    -webkit-overflow-scrolling: touch;
}

.menu-panel.open {
    transform: translate3d(0, 0, 0);

    opacity: 1;

    visibility: visible;

    transition:
        transform .65s var(--ease),
        opacity .35s ease,
        visibility 0s linear 0s;
}


/* =========================================================
   MENU BACKDROP
========================================================= */

body:has(.menu-panel.open)::before {
    content: "";

    position: fixed;

    z-index: 105;

    inset: 0;

    background: rgba(23, 29, 33, .36);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    pointer-events: none;

    animation: menuBackdrop .45s ease forwards;
}

@keyframes menuBackdrop {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* =========================================================
   MENU TOP
========================================================= */

.menu-panel__top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 22px;
}

.menu-panel__top::before {
    content: none;
}

.menu-panel__top .eyebrow {
    margin: 0;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: .22em;

    line-height: 1.2;

    text-transform: uppercase;

    color: var(--maroon);
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.menu-close {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid;

    place-items: center;

    padding: 0;

    border: 1px solid var(--line);

    border-radius: 50%;

    background: transparent;

    color: var(--ink);

    font-family: Arial, sans-serif;

    font-size: 13px;

    line-height: 1;

    cursor: pointer;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .3s ease;
}

.menu-close:hover {
    background: var(--maroon);

    border-color: var(--maroon);

    color: var(--white);

    transform: rotate(90deg);
}


/* =========================================================
   MENU LIST
========================================================= */

.menu-list {
    display: block;

    width: 100%;

    max-width: none;

    border-top: 1px solid var(--line);
}

.menu-list a {
    position: relative;

    display: flex;

    align-items: center;

    min-height: 50px;

    padding: 9px 0;

    border-bottom: 1px solid var(--line);

    color: var(--ink);

    font-size: clamp(18px, 1.7vw, 24px);

    font-weight: 300;

    line-height: 1.1;

    letter-spacing: -.025em;

    text-decoration: none;

    transition:
        color .3s ease,
        padding-left .35s var(--ease);
}

.menu-list a::after {
    content: "↗";

    margin-left: auto;

    padding-left: 15px;

    font-family: Arial, sans-serif;

    font-size: 13px;

    opacity: 0;

    transform: translateX(-8px);

    transition:
        opacity .3s ease,
        transform .3s var(--ease);
}

.menu-list a:hover {
    color: var(--maroon);

    padding-left: 7px;
}

.menu-list a:hover::after {
    opacity: 1;

    transform: translateX(0);
}


/* =========================================================
   MENU FOOTER LABEL
========================================================= */

.menu-panel::after {
    content:
        "INTHING  /  FASHION  •  CRAFT  •  POSSIBILITY";

    display: block;

    margin-top: 20px;

    padding-top: 14px;

    border-top: 1px solid var(--line);

    font-size: 7px;

    line-height: 1.4;

    letter-spacing: .22em;

    color: var(--muted);
}


/* =========================================================
   MOBILE — 650px
========================================================= */

@media (max-width: 650px) {

    .site-header {
        height: 78px;

        padding-left: 20px;
        padding-right: 20px;
    }

    .site-header.scrolled {
        height: 68px;
    }

    .site-logo {
        font-size: 31px;

        letter-spacing: -1.4px;
    }

    .site-logo small {
        font-size: 7px;

        letter-spacing: 1.8px;

        margin-top: 6px;
    }

    .menu-trigger {
        min-width: 0;

        padding: 12px 17px;

        border-radius: 14px;

        font-size: 10px;
    }


    /* -----------------------------------------------------
       MOBILE MENU
    ----------------------------------------------------- */

    .menu-panel {
        top: 0;

        right: 0;
        bottom: 0;
        left: 0;

        width: 100%;

        height: 100dvh;

        padding:
            26px
            20px
            28px;

        border: 0;

        border-radius: 0;

        box-shadow: none;

        backdrop-filter: none;
        -webkit-backdrop-filter: none;

        transform: translate3d(0, -100%, 0);
    }

    .menu-panel.open {
        transform: translate3d(0, 0, 0);
    }

    .menu-panel__top {
        margin-bottom: 20px;
    }

    .menu-panel__top .eyebrow {
        font-size: 8px;

        letter-spacing: .20em;
    }

    .menu-close {
        width: 40px;
        height: 40px;

        flex: 0 0 40px;

        font-size: 12px;
    }

    .menu-list a {
        min-height: 0;

        padding: 10px 0;

        font-size: 21px;

        line-height: 1.08;

        letter-spacing: -.02em;
    }

    .menu-list a::after {
        font-size: 12px;

        padding-left: 10px;
    }

    .menu-panel::after {
        margin-top: 20px;

        padding-top: 13px;

        font-size: 6.5px;

        letter-spacing: .18em;
    }

    body:has(.menu-panel.open)::before {
        display: none;
    }
}


/* =========================================================
   SMALL PHONES — 420px
========================================================= */

@media (max-width: 420px) {

    .site-header {
        padding-left: 18px;
        padding-right: 18px;
    }

    .site-logo {
        font-size: 29px;
    }

    .menu-panel {
        padding:
            23px
            18px
            25px;
    }

    .menu-panel__top {
        margin-bottom: 17px;
    }

    .menu-panel__top .eyebrow {
        font-size: 7px;

        letter-spacing: .19em;
    }

    .menu-close {
        width: 38px;
        height: 38px;

        flex: 0 0 38px;

        font-size: 11px;
    }

    .menu-list a {
        padding: 9px 0;

        font-size: 19px;

        line-height: 1.08;
    }

    .menu-list a::after {
        font-size: 11px;
    }

    .menu-panel::after {
        margin-top: 17px;

        padding-top: 12px;

        font-size: 6px;

        letter-spacing: .17em;
    }
}


/* =========================================================
   VERY SMALL PHONES — 360px
========================================================= */

@media (max-width: 360px) {

    .site-header {
        padding-left: 16px;
        padding-right: 16px;
    }

    .site-logo {
        font-size: 27px;
    }

    .site-logo small {
        font-size: 6px;

        letter-spacing: 1.5px;
    }

    .menu-trigger {
        padding: 11px 14px;

        font-size: 9px;
    }

    .menu-panel {
        padding:
            20px
            16px
            22px;
    }

    .menu-panel__top {
        margin-bottom: 15px;
    }

    .menu-panel__top .eyebrow {
        font-size: 7px;

        letter-spacing: .17em;
    }

    .menu-close {
        width: 36px;
        height: 36px;

        flex: 0 0 36px;

        font-size: 10px;
    }

    .menu-list a {
        padding: 8px 0;

        font-size: 18px;

        line-height: 1.08;
    }

    .menu-list a::after {
        font-size: 10px;

        padding-left: 8px;
    }

    .menu-panel::after {
        margin-top: 15px;

        padding-top: 10px;

        font-size: 5.5px;

        letter-spacing: .15em;
    }
}


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

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

    .menu-panel,
    .menu-list a,
    .menu-list a::after,
    .menu-close,
    .menu-trigger {
        transition: none;
    }

    body:has(.menu-panel.open)::before {
        animation: none;
    }
}