/* ---------------------------------------------------------------
   Analog Breakdown — Faircamp theme overlay
   Matches the Quarto "vapor" Bootstrap theme used by the rest
   of analogbreakdown.com (deep purple bg, white/teal body text,
   purple→pink accents, Lato).
   --------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');

:root {
    /* Backgrounds — vapor's #170229 layered with progressively lighter purples */
    --bg-1: #170229;
    --bg-1-90: rgba(23, 2, 41, 0.92);
    --bg-1-overlay: rgba(23, 2, 41, 0.85);
    --bg-2: #1f0a3a;
    --bg-2-overlay: rgba(31, 10, 58, 0.85);
    --bg-3: #2a1450;
    --bg-acc: #6f42c1;
    --bg-acc-overlay: rgba(111, 66, 193, 0.85);
    --bg-mg: #3b1f6c;

    /* Foregrounds */
    --fg-1: #ffffff;
    --fg-1-focus: #ea39b8;
    --fg-1-veil: rgba(255, 255, 255, 0.05);
    --fg-2: #dee2e6;
    --fg-3: #a98eda;
    --fg-3-focus: #ea39b8;
    --fg-acc: #ffffff;
    --fg-mg: #7a5fa0;

    /* Mid-grounds */
    --mg: #6f42c1;
    --mg-acc: #ea39b8;
    --mg-acc-overlay: rgba(234, 57, 184, 0.85);

    /* Soft rounded corners */
    --cover-border-radius: 10px;
    --ul-list-style-type: square;
}

/* Override the oklch block that ships in Faircamp's theme file —
   modern browsers prefer that layer so we have to match it. */
@supports (color: oklch(0% 0% 0)) {
    :root {
        --bg-1: #170229;
        --bg-1-90: rgba(23, 2, 41, 0.92);
        --bg-1-overlay: rgba(23, 2, 41, 0.85);
        --bg-2: #1f0a3a;
        --bg-2-overlay: rgba(31, 10, 58, 0.85);
        --bg-3: #2a1450;
        --bg-acc: #6f42c1;
        --bg-acc-overlay: rgba(111, 66, 193, 0.85);
        --bg-mg: #3b1f6c;
        --fg-1: #ffffff;
        --fg-1-focus: #ea39b8;
        --fg-1-veil: rgba(255, 255, 255, 0.05);
        --fg-2: #dee2e6;
        --fg-3: #a98eda;
        --fg-3-focus: #ea39b8;
        --fg-acc: #ffffff;
        --fg-mg: #7a5fa0;
        --mg: #6f42c1;
        --mg-acc: #ea39b8;
        --mg-acc-overlay: rgba(234, 57, 184, 0.85);
    }
}

/* ---------- Typography ---------- */
body,
button,
input,
.layout {
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}

h1, h2, h3, h4 {
    color: #fff;
    letter-spacing: 0.01em;
    font-weight: 700;
}

/* Title gradient mirrors the vapor accent pair */
.abstract h1,
.release > a {
    background: linear-gradient(90deg, #a98eda 0%, #ea39b8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ---------- Top-of-page band-site nav strip ---------- */
.ab-nav {
    background: linear-gradient(180deg, #1a0a33 0%, #170229 100%);
    border-bottom: 1px solid rgba(111, 66, 193, 0.35);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    padding: 0.6rem 1.5rem;
    display: flex;
    gap: 0.25rem;
    align-items: center;
    flex-wrap: wrap;
    font-family: 'Lato', sans-serif;
    font-size: 0.95rem;
    position: sticky;
    top: 0;
    z-index: 50;
}
.ab-nav .ab-brand {
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    margin-right: auto;
    text-decoration: none;
    font-size: 1.05rem;
}
.ab-nav .ab-brand:hover { color: #ea39b8; }
.ab-nav a {
    color: #dee2e6;
    text-decoration: none;
    font-weight: 600;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
}
.ab-nav a:hover {
    color: #fff;
    background: rgba(234, 57, 184, 0.18);
}
.ab-nav a.active {
    color: #fff;
    background: rgba(111, 66, 193, 0.4);
}
.ab-nav .ab-search svg,
.ab-nav .ab-ig svg {
    width: 1.1em;
    height: 1.1em;
    vertical-align: -0.18em;
}

/* ---------- Faircamp's own header — soften so it stacks well ---------- */
.layout > header {
    background: rgba(23, 2, 41, 0.6);
    border-bottom: 1px solid rgba(111, 66, 193, 0.2);
    padding: 0.75rem 1.5rem;
}
.layout > header #logo {
    color: #fff;
}
.layout > header #logo span {
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* ---------- Buttons / pills ---------- */
button.browse,
button.listen,
button[data-copy],
button.link {
    background: rgba(111, 66, 193, 0.18);
    border: 1px solid rgba(168, 142, 218, 0.4);
    border-radius: 999px;
    color: #dee2e6;
    padding: 0.35rem 0.85rem;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
button.browse:hover,
button.listen:hover,
button[data-copy]:hover,
button.link:hover {
    background: rgba(234, 57, 184, 0.22);
    border-color: #ea39b8;
    color: #fff;
}

/* ---------- Cover art ---------- */
.release img,
.cover img,
.embed_cover,
.undescribed_wrapper img {
    border-radius: var(--cover-border-radius);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

/* ---------- Player ---------- */
.docked_player {
    background: rgba(23, 2, 41, 0.92) !important;
    border-top: 1px solid rgba(111, 66, 193, 0.3);
    backdrop-filter: blur(6px);
}
.docked_player .timeline .progress {
    background: linear-gradient(90deg, #6f42c1, #ea39b8) !important;
}

/* ---------- Footer ---------- */
footer {
    border-top: 1px solid rgba(111, 66, 193, 0.2);
    padding-top: 1rem;
    margin-top: 2rem;
    color: #a98eda;
}
footer a { color: #a98eda; }
footer a:hover { color: #ea39b8; }

/* ---------- Search overlay ---------- */
#browser {
    background: rgba(23, 2, 41, 0.96);
}
#browser input {
    background: rgba(111, 66, 193, 0.12);
    border: 1px solid rgba(168, 142, 218, 0.4);
    color: #fff;
}

/* ---------- Misc polish ---------- */
a {
    transition: color 0.15s;
}
.artists,
.artists a { color: #a98eda; }
.artists a:hover { color: #ea39b8; }