body,
#contenido,
.artist-directory {
    display: flex;
    flex-direction: column;
}

body {
    min-height: 100vh;
}

#contenido,
.artist-directory,
.artist-directory__wall {
    flex: 1;
}

.nav-links a[aria-current="page"] {
    color: var(--yellow);
    text-decoration: underline;
    text-underline-offset: .35em;
}

.artist-directory {
    overflow: hidden;
}

.artist-directory__hero {
    position: relative;
    isolation: isolate;
    background: var(--ink);
    color: var(--paper);
}

.artist-directory__intro {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    padding-block: clamp(2.75rem, 5.5vw, 5rem) clamp(3rem, 6vw, 5.5rem);
}

.artist-directory__kicker {
    margin-bottom: .85rem;
    color: var(--yellow);
}

.artist-directory__title {
    --sheet-color: var(--orange);
    --ragged: polygon(0 5%, 6% 4%, 9% 7%, 14% 4%, 21% 5%, 27% 3%, 32% 4%, 39% 2%, 45% 4%, 50% 1%, 57% 3%, 64% 1%, 70% 3%, 76% 1%, 83% 3%, 89% 0, 95% 3%, 99% 1%, 100% 39%, 98% 61%, 100% 95%, 95% 94%, 88% 98%, 83% 96%, 76% 99%, 70% 96%, 65% 98%, 58% 97%, 52% 100%, 45% 97%, 39% 99%, 32% 96%, 26% 99%, 19% 96%, 13% 98%, 8% 95%, 0 99%, 1% 71%, 0 42%);
    display: inline-block;
    padding: .04em .14em .13em;
    color: var(--ink);
    font: 900 clamp(2.1rem, 8.8vw, 8rem) / 1 var(--display);
    letter-spacing: -.055em;
    transform: rotate(-1.4deg);
}

.artist-directory__note {
    --sheet-color: var(--yellow);
    --ragged: polygon(1% 4%, 12% 2%, 19% 5%, 31% 3%, 42% 1%, 52% 3%, 63% 1%, 73% 4%, 86% 0, 98% 4%, 100% 25%, 98% 58%, 100% 96%, 91% 98%, 79% 95%, 69% 99%, 56% 96%, 46% 100%, 33% 97%, 21% 99%, 11% 97%, 0 100%, 2% 77%, 0 45%);
    width: min(30%, 310px);
    padding: .85em .95em;
    color: var(--ink);
    font: 900 clamp(1.15rem, 2.65vw, 2.35rem) / 1.07 var(--display);
    text-transform: uppercase;
    transform: rotate(3deg);
}

.artist-directory__note-tape {
    right: 12%;
    top: -12px;
    transform: rotate(12deg);
}

.artist-directory__hero-ink,
.artist-directory__note-ink,
.artist-directory__wall-ink {
    aspect-ratio: 1;
    height: auto;
}

.artist-directory__hero-ink {
    right: -58px;
    top: -55px;
    width: min(58vw, 450px);
    color: var(--orange);
    opacity: .66;
    z-index: -1;
}

.artist-directory__note-ink {
    right: -20px;
    bottom: -27px;
    width: 62px;
    color: var(--ink);
}

.artist-directory__wall {
    position: relative;
    isolation: isolate;
    background: var(--paper);
    background-image: var(--texture);
    padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem);
}

.artist-directory__wall::before {
    content: "";
    position: absolute;
    inset: -15px 0 auto;
    height: 16px;
    background: var(--paper);
    clip-path: polygon(0 50%, 5% 23%, 10% 44%, 14% 15%, 20% 42%, 26% 17%, 30% 34%, 37% 7%, 42% 35%, 47% 14%, 53% 38%, 58% 9%, 63% 29%, 69% 0, 73% 26%, 79% 12%, 84% 34%, 90% 6%, 96% 31%, 100% 12%, 100% 100%, 0 100%);
    pointer-events: none;
}

.artist-directory__wall-ink {
    left: -102px;
    bottom: -56px;
    width: 260px;
    color: var(--ink);
    opacity: .66;
    z-index: -1;
}

.directory-card.artist-sheet {
    --sheet-color: var(--white);
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    padding: clamp(1.15rem, 3vw, 2.5rem);
}

.directory-card .artist-portrait {
    grid-row: auto;
    aspect-ratio: 1;
    min-height: 0;
    margin: 0;
}

.directory-card .artist-portrait img {
    min-height: 0;
}

.directory-card__copy h2 {
    font-size: clamp(1.9rem, 5vw, 4.4rem);
    line-height: .98;
    letter-spacing: -.055em;
}

.directory-card__copy .artist-specialty {
    font-size: .82rem;
    line-height: 1.45;
}

.directory-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: 0 0 .85rem;
    padding: 0;
    list-style: none;
}

.directory-card__tags li {
    background: var(--yellow);
    padding: .25rem .6rem;
    font-size: .76rem;
    font-weight: 800;
}

.directory-card__bio {
    max-width: 65ch;
    font-size: .95rem;
    line-height: 1.65;
}

.directory-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: 1.25rem;
}

.directory-card__actions .btn,
.directory-empty .btn {
    min-height: 44px;
}

.directory-empty.artist-sheet {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

@media (max-width: 800px) {
    .directory-card.artist-sheet {
        grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
    }
}

@media (max-width: 580px) {
    .artist-directory__wall {
        padding-bottom: 3.75rem;
    }

    .artist-directory__intro {
        flex-direction: column;
        align-items: start;
        gap: 1.5rem;
    }

    .artist-directory__title {
        font-size: clamp(2.1rem, 11.5vw, 4.5rem);
    }

    .artist-directory__note {
        align-self: end;
        width: min(78%, 220px);
    }

    .directory-card.artist-sheet {
        grid-template-columns: minmax(0, 1fr);
    }

    .directory-card .artist-portrait {
        aspect-ratio: 4 / 3;
    }

    .directory-card.paper .tape.tape--artist-corner {
        bottom: -31px;
    }

    .directory-card__actions .btn {
        flex-basis: 100%;
    }
}