/* Audio Sound Paper, et al. — index page */
body.asp-page main { position: relative; padding: 0; }

body.asp-page .breadcrumb { color: var(--asp-brick-light); }
body.asp-page .breadcrumb a { color: var(--asp-brick-light); text-decoration: none; transition: color 0.15s; }
body.asp-page .breadcrumb a:hover { color: var(--asp-brick); }
body.asp-page .breadcrumb .sep { margin: 0 8px; color: var(--asp-brick-light); opacity: 0.7; }
body.asp-page .breadcrumb .current { color: var(--asp-brick-light); }

body.asp-page .artist-hero {
    width: 100%;
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    margin-bottom: 0;
}
body.asp-page footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: none;
    z-index: 2;
}
body.asp-page .artist-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 50%;
    filter: saturate(0.85) brightness(0.65);
}
body.asp-page .artist-hero-tint {
    position: absolute;
    inset: 0;
    background: rgba(200, 144, 48, 0.12);
    mix-blend-mode: screen;
}
body.asp-page .artist-hero-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
                rgba(16,11,8,0.0)  0%,
                rgba(16,11,8,0.0)  85%,
                rgba(16,11,8,0.85) 100%
    );
}

body.asp-page .hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 900px;
    padding: 0 20px 36px;
    display: flex;
    flex-direction: column;
}

body.asp-page .artist-header {
    width: 100%;
    max-width: 900px;
    margin-bottom: 0;
    animation: fadeUp 0.5s ease both;
}
body.asp-page .artist-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: var(--asp-amber);
    letter-spacing: 0.2em;
    margin-bottom: 10px;
    opacity: 0.8;
}
body.asp-page .artist-name {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(16px, 4vw, 28px);
    color: var(--asp-cream);
    letter-spacing: 0.08em;
    line-height: 1.4;
    margin-bottom: 16px;
    text-shadow: 0 0 24px rgba(200, 144, 48, 0.5);
}
body.asp-page .artist-aka {
    font-family: 'Courier Prime', monospace;
    font-size: 14px;
    color: var(--asp-mid);
    margin-top: -8px;
    margin-bottom: 16px;
}
body.asp-page .artist-aka strong {
    color: var(--asp-amber-glow);
    font-weight: normal;
}

body.asp-page .sub-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 0;
    animation: fadeUp 0.5s 0.1s ease both;
}

body.asp-page .divider {
    width: 100%;
    max-width: 900px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--asp-mid), transparent);
    opacity: 0.3;
    margin: 0 auto 48px;
    padding: 0 20px;
    box-sizing: border-box;
}

body.asp-page .artist-body {
    width: 100%;
    max-width: 900px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    animation: fadeUp 0.5s 0.15s ease both;
}

body.asp-page .bio, body.asp-page .timeline, body.asp-page .connections { width: 100%; }

body.asp-page .section-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    color: var(--asp-amber);
    letter-spacing: 0.15em;
    margin-bottom: 20px;
}

body.asp-page .bio p {
    font-family: 'Courier Prime', monospace;
    font-size: 16px;
    color: var(--asp-cream);
    line-height: 1.8;
    margin-bottom: 16px;
    opacity: 0.85;
}
body.asp-page .bio p a {
    color: var(--asp-amber-glow);
    text-decoration: none;
}
body.asp-page .bio p a:hover {
    text-decoration: underline;
}
body.asp-page .bio strong {
    color: var(--asp-brick-light);
    font-weight: normal;
}