/* Refined layout: same copy, type and dark/pink palette, with less visual noise. */
body {
    position: relative;
    isolation: isolate;
    overflow-x: clip;
    background-color: #050505;
}

body::before {
    position: fixed;
    z-index: -1;
    inset: 0;
    background:
        radial-gradient(ellipse 34rem 30rem at 5% 16%, rgb(255 42 133 / 8%), transparent 72%),
        radial-gradient(ellipse 38rem 34rem at 96% 42%, rgb(255 42 133 / 7%), transparent 73%),
        radial-gradient(ellipse 32rem 38rem at 15% 88%, rgb(255 42 133 / 6%), transparent 74%),
        radial-gradient(ellipse 42rem 32rem at 84% 96%, rgb(255 42 133 / 5%), transparent 75%);
    content: "";
    pointer-events: none;
}

.bg-grid-pattern {
    background-image: none;
}

.site-header-inner,
.site-footer-inner {
    max-width: 1440px;
    margin-inline: auto;
}

.site-header-inner {
    min-height: 72px;
}

@media (min-width: 1024px) {
    .site-header-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    }

    #top-member-highlight {
        grid-column: 2;
    }

    #top-member-highlight[hidden] {
        display: block !important;
        visibility: hidden;
    }

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


header.sticky {
    background: rgb(5 5 5 / 88%);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.site-main {
    padding-top: clamp(1.5rem, 4vw, 3.5rem);
    padding-bottom: clamp(3.5rem, 8vw, 6rem);
}

.home-content {
    display: flex;
    max-width: 1280px;
    flex-direction: column;
    gap: clamp(3.5rem, 7vw, 5.5rem);
    margin-inline: auto;
}

.home-content > * + * {
    margin-block-start: 0 !important;
}

.home-hero {
    isolation: isolate;
    display: grid;
    min-height: clamp(340px, 42vw, 500px);
    place-content: center;
    justify-items: center;
    gap: .55rem;
    overflow: hidden;
    padding: clamp(4.5rem, 9vw, 7rem) 1.25rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.home-hero > * {
    position: relative;
    z-index: 1;
}

.home-wordmark {
    font-size: clamp(3.25rem, 9vw, 6.75rem);
    line-height: .95;
    letter-spacing: clamp(.12em, 2vw, .2em);
    text-shadow: 0 10px 48px rgb(255 42 133 / 25%);
}

.home-tagline {
    margin-top: .35rem;
    font-family: Inter, sans-serif;
    font-size: .85rem;
    font-weight: 500;
    letter-spacing: .18em;
    color: #a1a1aa;
}

.home-hero > .inline-block > div {
    width: 40px;
    height: 2px;
    margin-top: .35rem;
}

.home-about {
    max-width: 40rem;
    margin: .3rem auto 0;
    color: #a1a1aa;
    font-size: clamp(.82rem, 1.2vw, .9rem);
    line-height: 1.55;
    text-align: center;
    text-wrap: balance;
}

.home-content > section:not(.home-hero) {
    min-width: 0;
}

.home-content > section > .flex.items-center.gap-3.border-b,
.members-header {
    border-color: rgb(255 255 255 / 9%);
    padding-bottom: 1rem;
}

.home-content > section > .flex.items-center.gap-3.border-b h2,
.members-header h2 {
    color: #e4e4e7;
    letter-spacing: .16em;
}

.top-liked-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 14px;
}

.top-liked-card {
    min-height: 82px;
    padding: 1rem;
    border-color: rgb(255 255 255 / 8%);
    border-radius: 16px;
    background: linear-gradient(145deg, #121216, #0c0c0f);
    box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}

.top-liked-card:hover {
    transform: translateY(-2px);
    border-color: rgb(255 42 133 / 40%);
    box-shadow: 0 12px 28px rgb(0 0 0 / 24%);
}

.home-content article.bg-brand-card {
    border-color: rgb(255 255 255 / 8%);
    background: linear-gradient(145deg, #121216, #0b0b0e);
}

.recruitment-callout {
    border-color: rgb(255 42 133 / 18%);
    border-left: 2px solid #ff2a85;
    border-radius: 18px;
    background: linear-gradient(110deg, rgb(255 42 133 / 7%), #101014 48%);
    box-shadow: none;
}

.recruitment-cta {
    min-height: 46px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgb(255 42 133 / 16%);
}

.member-tabs {
    border-color: rgb(255 255 255 / 9%);
    background: #101014;
}

.member-tabs button {
    min-height: 38px;
}

.home-content > section.space-y-8 > .grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr));
    gap: 16px;
}

.home-content [data-member-card] {
    min-height: 240px;
    padding: 1.25rem;
    border-color: rgb(255 255 255 / 8%);
    border-radius: 18px;
    background: linear-gradient(150deg, #131317, #0b0b0e);
    box-shadow: 0 8px 24px rgb(0 0 0 / 14%);
}

.home-content [data-member-card]:hover {
    transform: translateY(-3px);
    border-color: rgb(255 42 133 / 42%);
    box-shadow: 0 14px 32px rgb(0 0 0 / 26%);
}

.site-footer-inner {
    max-width: 1440px;
}

@media (max-width: 639px) {
    .site-main {
        padding-top: 1.25rem;
        padding-bottom: 3.5rem;
    }

    .home-content {
        width: 100%;
        gap: 3.25rem;
    }

    .site-header-inner {
        padding-inline: 1rem;
    }

    .home-hero {
        min-height: 300px;
        border-radius: 0 !important;
        padding: 3.5rem .75rem !important;
    }

    .home-wordmark {
        max-width: 100%;
        font-size: clamp(2rem, 10vw, 3.8rem);
        letter-spacing: clamp(.04em, 1vw, .09em);
        white-space: nowrap;
    }

    .home-tagline {
        font-size: .65rem;
        letter-spacing: .17em;
    }

    .home-about {
        max-width: 32rem;
        margin-top: .2rem;
        padding-inline: .5rem;
        font-size: .82rem;
        line-height: 1.5;
    }

    .top-liked-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .top-liked-card {
        min-width: 0;
    }

    .home-content > section.space-y-8 > .grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-content [data-member-card] {
        min-height: 0;
    }

    .site-footer-inner {
        padding-inline: 1rem;
        text-align: center;
    }

    .recruitment-callout {
        border-left-width: 2px;
        padding: 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .top-liked-card,
    .home-content [data-member-card] {
        transition: none;
    }
}