body {
    background-color: black;
    color: antiquewhite;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.header1 {
    position: sticky;
    top: 0;
    z-index: 100;
    margin: 0;
    padding: calc(0.75rem + env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px)) 0.75rem max(1rem, env(safe-area-inset-left, 0px));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: xx-large;
    background-color: black;
    /* keeps header readable over scrolling content */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

/* Back to home — same vertical center as .header1-brand */
.header-back {
    position: absolute;
    left: max(1rem, env(safe-area-inset-left, 0px));
    top: 50%;
    transform: translateY(-50%);
    color: inherit;
    text-decoration: none;
    font-size: 2rem;
    font-weight: 300;
    line-height: 1;
}

.header-back:hover {
    color: white;
}

.header-back-chevron {
    display: block;
    transform: scaleY(1.35);
    transform-origin: center;
}

.header1-brand {
    text-align: center;
}

/* Artist detail: one photo + name + bio */
.artist-detail {
    padding: 40px;
}

.artist-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
}

.artist-media {
    text-align: center;
}

.artist-media img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.artist-name {
    font-size: x-large;
    margin: 1rem 0 0;
}

.artist-bio {
    font-size: 1rem;
    line-height: 2;
}

.artist-bio p {
    margin: 0;
}

.artist-content {
    min-width: 0;
}

.artist-bio-rule {
    border: 0;
    border-top: 1px solid rgba(250, 235, 215, 0.22);
    margin: 1.75rem 0 1.15rem;
}

.artist-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    font-size: 1rem;
}

.artist-links a {
    color: inherit;
    text-decoration: none;
}

.artist-links a:hover {
    text-decoration: underline;
}

/* Desktop / tablet: horizontal with pipe separators */
@media (min-width: 601px) {
    .artist-links {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0;
    }

    .artist-links a:not(:last-child)::after {
        content: "|";
        margin: 0 0.65em;
        opacity: 0.45;
        font-weight: 300;
        pointer-events: none;
        text-decoration: none;
        display: inline;
    }
}

.contact {
    text-align: center;
}

.email {
    color: inherit;
}

/* Mobile: photo centered on top, bio below */
@media (max-width: 600px) {
    .artist-detail {
        padding: 24px 1.25rem 40px;
    }

    .artist-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .artist-media {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .artist-media img {
        width: 100%;
        max-width: min(100%, 400px);
        margin: 0 auto;
    }
    .artist-bio {
        line-height: 1.6;
    }

    .artist-links {
        display: grid;
        grid-template-columns: repeat(2, auto);
        justify-content: center;
        justify-items: center;
        column-gap: 1.5rem;
        row-gap: 0.55rem;
        width: 100%;
    }

    /* Odd count: last row has one link — span both columns and center */
    .artist-links a:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
    }
}