/* =============================================================
   HEADER + HERO — studio-gallery redesign
   ============================================================= */
.hero-section {
    display: block;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: #f4f1eb;
}

/* Keep the photograph below the header.  With the image applied to the
   entire section, short desktop windows covered the artist's head with the
   navigation bar before the crop position could take effect. */
.hero-section::after {
    display: block;
    min-height: clamp(520px, calc(100svh - 122px), 900px);
    content: "";
    background: url("../images/artist/hero.png") center top / cover no-repeat;
}

.site-header {
    position: relative;
    z-index: 20;
    width: 100%;
    background: #fff;
    color: #27231e;
}

.header-container {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 80px;
    margin: 0 auto;
    padding: 0 18px;
}

.site-header .site-logo {
    grid-column: 2;
    display: grid;
    width: 158px;
    height: 48px;
    place-items: center;
    background: #171411;
    -webkit-mask: url("../images/artist/ramil-signature.png") center / contain no-repeat;
    mask: url("../images/artist/ramil-signature.png") center / contain no-repeat;
}

.site-header .site-logo img {
    display: none;
    width: 100%;
    max-height: 42px;
    object-fit: contain;
}

.header-social {
    grid-column: 1;
    justify-self: start;
    display: flex;
    align-items: center;
    gap: 7px;
    transform: none;
}

.header-social a {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(57, 51, 45, .48);
    border-radius: 50%;
    color: #39332d;
    transition: color 180ms ease, transform 180ms ease;
}

.header-social a:hover,
.header-social a:focus-visible {
    color: #9b6235;
    transform: translateY(-1px);
}

.header-social span {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
}

.header-social svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.header-utility {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #4b453e;
}

.header-search {
    grid-column: 1;
    justify-self: start;
}

.header-commission {
    grid-column: 3;
    justify-self: end;
}

.header-utility svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.45;
    transition: transform 180ms ease, color 180ms ease;
}

.header-utility:hover svg,
.header-utility:focus-visible svg {
    color: #a45f29;
    transform: scale(1.12);
}

.header-navigation {
    display: flex;
    width: 100%;
    justify-content: center;
    min-height: 42px;
    border-top: 1px solid rgba(60, 52, 43, .08);
}

.main-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(28px, 3vw, 48px);
    width: max-content;
    margin: 0 !important;
}

.main-nav a {
    color: #3f3932;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.main-nav a::after {
    bottom: -8px;
    height: 1px;
    background: #a45f29;
}

.hero-content {
    align-self: end;
    width: min(100% - 80px, 1240px);
    margin: 0 auto;
    padding: 0 0 clamp(66px, 9vw, 126px);
    color: #fffaf0;
}

.hero-eyebrow {
    margin-bottom: 16px;
    color: rgba(255, 250, 240, .82);
    font-size: 10px;
    letter-spacing: .25em;
}

.hero-section h1 {
    max-width: 550px;
    margin-bottom: 20px;
    font-size: clamp(54px, 6vw, 86px);
    line-height: .9;
    letter-spacing: -.055em;
    text-shadow: 0 3px 18px rgba(22, 12, 4, .25);
}

.hero-description {
    max-width: 305px;
    margin-bottom: 25px;
    color: rgba(255, 250, 240, .9);
    font-size: 12px;
    line-height: 1.65;
}

.hero-button {
    min-width: 185px;
    padding: 14px 17px;
    border-color: rgba(255, 250, 240, .85);
    background: rgba(255, 250, 240, .08);
    color: #fffaf0;
    backdrop-filter: blur(3px);
}

.hero-button:hover,
.hero-button:focus-visible {
    border-color: #fffaf0;
    background: #fffaf0;
    color: #352316;
}

.hero-scroll {
    display: none;
}

.menu-toggle {
    display: none;
}

@media (max-width: 700px) {
    .hero-section {
        min-height: 0;
    }

    .hero-section::after {
        min-height: calc(100svh - 72px);
        background-position: center top;
    }

    .header-container {
        width: min(100% - 36px, 620px);
        min-height: 72px;
        padding: 0;
    }

    .site-header .site-logo {
        grid-column: 2;
        justify-self: center;
        width: 132px;
    }

    .header-social {
        gap: 5px;
        transform: translateX(-10px);
    }

    .header-social a {
        width: 30px;
        height: 30px;
    }

    .header-commission {
        display: none;
    }

    .menu-toggle {
        grid-column: 3;
        justify-self: end;
        display: flex;
        width: 34px;
        height: 34px;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .menu-toggle span {
        display: block;
        width: 16px;
        height: 1px;
        background: #3f3932;
    }

    .header-navigation {
        display: none;
    }

    .site-header.is-menu-open .header-navigation {
        position: absolute;
        z-index: 30;
        top: 72px;
        right: 0;
        left: 0;
        display: flex;
        min-height: 0;
        padding: 23px 20px 27px;
        border-top: 1px solid rgba(60, 52, 43, .11);
        background: rgba(255, 255, 255, .98);
        box-shadow: 0 14px 24px rgba(47, 35, 23, .12);
    }

    .site-header.is-menu-open .main-nav {
        flex-direction: column;
        gap: 20px;
    }

    .site-header.is-menu-open .main-nav a {
        font-size: 12px;
    }

    .site-header.is-menu-open .main-nav a::after {
        bottom: -5px;
    }

    .hero-content {
        width: min(100% - 40px, 520px);
        padding-bottom: 58px;
    }

    .hero-section h1 {
        max-width: 340px;
        font-size: clamp(48px, 15vw, 65px);
    }
}