/* =========================================================
   ORCA UNIVERSAL
   HOME
   ========================================================= */

:root {
    --orca-bg: #101214;
    --orca-surface: #181b1f;
    --orca-surface-raised: #202429;

    --orca-text: #f2f3f4;
    --orca-muted: #a3aab2;

    --orca-border: #353b42;
    --orca-border-light: #4c555e;

    --orca-accent: #91b9ca;
    --orca-accent-light: #c5e5f1;

    --orca-radius: 12px;

    --orca-shadow:
        0 14px 40px rgba(0, 0, 0, 0.24);

    --orca-content-width: 1500px;
}


/* =========================================================
   PAGE
   ========================================================= */

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    margin: 0;

    background: var(--orca-bg);
    color: var(--orca-text);

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    line-height: 1.5;
}

a {
    color: inherit;
}


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

.orcaBrandHeader {
    width: 100%;
}

#banner {
    width: 100%;
}


/* =========================================================
   UTILITY
   ========================================================= */

.orcaUtilityBar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;

    width: min(
        calc(100% - 32px),
        var(--orca-content-width)
    );

    margin: 8px auto 0;

    color: var(--orca-muted);

    font-size: 12px;
}

#timeButton {
    width: 28px;
    height: 28px;

    padding: 0;

    border: 1px solid var(--orca-border);
    border-radius: 50%;

    background: var(--orca-surface);
    color: var(--orca-text);

    cursor: pointer;
}


/* =========================================================
   HOME
   ========================================================= */

.orcaHome {
    width: min(
        calc(100% - 32px),
        var(--orca-content-width)
    );

    margin: 16px auto 40px;
}


/* =========================================================
   INTRO
   ========================================================= */

.homeIntro {
    overflow: hidden;

    border: 1px solid var(--orca-border);
    border-radius: var(--orca-radius);

    background:
        linear-gradient(
            145deg,
            #1d2227,
            #111417
        );

    box-shadow: var(--orca-shadow);
}

.homeAnnouncement {
    padding: 10px 20px;

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

    color: var(--orca-accent-light);

    font-size: 13px;
    text-align: center;
}

.homeIntroContent {
    max-width: 820px;

    padding: 54px 42px 58px;
}

.homeEyebrow,
.homeCardEyebrow {
    margin-bottom: 7px;

    color: var(--orca-accent);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;

    text-transform: uppercase;
}

.homeIntro h1 {
    margin: 0;

    font-size: clamp(
        38px,
        6vw,
        72px
    );

    line-height: 1;
    font-weight: 600;
}

.homeMission {
    max-width: 650px;

    margin: 18px 0 0;

    color: var(--orca-text);

    font-size: clamp(
        19px,
        2vw,
        26px
    );
}

.homeStatement {
    max-width: 680px;

    margin: 20px 0 0;

    color: var(--orca-muted);

    font-size: 15px;
}

.homeActions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 30px;
}

.homePrimaryLink,
.homeSecondaryLink,
.homeCardLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding: 9px 17px;

    border-radius: 7px;

    text-decoration: none;
}

.homePrimaryLink {
    background: var(--orca-accent);
    color: #101214;

    font-weight: 600;
}

.homeSecondaryLink,
.homeCardLink {
    border: 1px solid var(--orca-border-light);

    background: var(--orca-surface-raised);
}


/* =========================================================
   FEATURE GRID
   ========================================================= */

.homeFeatures {
    display: grid;

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

    gap: 16px;

    margin-top: 16px;
}

.homeCard {
    min-width: 0;

    padding: 22px;

    background: var(--orca-surface);

    border: 1px solid var(--orca-border);
    border-radius: var(--orca-radius);

    box-shadow: var(--orca-shadow);
}

.homeCardHeader h2 {
    margin: 0;

    font-size: 21px;
    font-weight: 600;
}

.homeCard h3 {
    margin: 18px 0 7px;
}

.homeCard p {
    color: var(--orca-muted);
}

.homeCardLead {
    color: var(--orca-text) !important;

    font-size: 17px;
}

.homeCardDivider {
    margin: 22px 0;

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


/* =========================================================
   VERSE
   ========================================================= */

.homeVerse {
    margin-top: 20px;

    color: #ddd8cb;

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

    font-size: 18px;

    line-height: 1.75;
}


/* =========================================================
   VIDEO
   ========================================================= */

.homeVideo {
    position: relative;

    overflow: hidden;

    width: 100%;

    margin-top: 18px;

    aspect-ratio: 16 / 9;

    border-radius: 8px;

    background: #000;
}

.homeVideo iframe {
    width: 100%;
    height: 100%;

    border: 0;
}


/* =========================================================
   FEATURED MUSIC
   ========================================================= */

.featuredProject {
    margin-top: 18px;
}

.featuredArtwork {
    display: block;

    width: 100%;

    padding: 0;

    overflow: hidden;

    aspect-ratio: 1 / 1;

    border: 0;
    border-radius: 8px;

    background: var(--orca-surface-raised);

    cursor: pointer;
}

.featuredArtwork img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 160ms ease;
}

.featuredArtwork:hover img {
    transform: scale(1.025);
}

.featuredDetails {
    margin-top: 13px;
}

.featuredDetails h3 {
    margin: 0;
}

.featuredDetails p {
    margin: 3px 0 0;
}

.featuredProject audio {
    width: 100%;

    margin-top: 14px;
}

.homeMuted {
    color: var(--orca-muted);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .homeFeatures {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 650px) {

    .orcaHome {
        width: calc(100% - 20px);
    }

    .homeIntroContent {
        padding: 38px 24px 42px;
    }

    .homeFeatures {
        grid-template-columns: 1fr;
    }

    .homeActions {
        flex-direction: column;
    }

    .homePrimaryLink,
    .homeSecondaryLink {
        width: 100%;
    }

}
/* =========================================================
   STICKY ORCA HEADER
   ========================================================= */

.orcaBrandHeader {
    position: sticky;
    top: 0;
    z-index: 5000;

    width: 100%;

    background: var(--orca-bg);

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.28);
}