.directory-page {
    background: var(--cream);
}

.directory-page :focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 4px;
}

.directory-header {
    position: sticky;
    top: 0;
}

.directory-back-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .8rem 1.05rem;
    border: 1px solid var(--ink);
    border-radius: 999px;
    background: var(--yellow);
    box-shadow: 3px 3px 0 var(--ink);
}

.directory-back-link:hover {
    background: var(--pink);
    text-decoration: none !important;
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--ink);
}

.directory-hero {
    display: grid;
    min-height: calc(100svh - 86px);
    grid-template-columns: 1.1fr .9fr;
    border-bottom: 1px solid var(--ink);
}

.directory-hero__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(4rem, 8vw, 8rem) var(--pad);
}

.directory-hero h1,
.directory-section-heading h2,
.catalog-directory h2,
.catalog-note h2 {
    margin: 0;
    font-family: "Yeseva One", Georgia, serif;
    font-weight: 400;
    letter-spacing: -.06em;
    line-height: .9;
}

.directory-hero h1 {
    font-size: clamp(4.5rem, 10vw, 10rem);
}

.directory-hero h1 em {
    color: var(--orange);
    font-style: normal;
    text-shadow: 3px 3px 0 var(--ink);
}

.directory-hero__copy > p:last-child {
    max-width: 42rem;
    margin: 2.4rem 0 0;
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    line-height: 1.55;
}

.directory-hero__index {
    position: relative;
    padding: var(--pad);
    border-left: 1px solid var(--ink);
    background: var(--pool);
    overflow: hidden;
}

.index-card {
    position: absolute;
    display: grid;
    width: min(76%, 440px);
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 1rem;
    padding: clamp(1.2rem, 2.5vw, 2rem);
    border: 1px solid var(--ink);
    box-shadow: 9px 10px 0 var(--ink);
}

.index-card small {
    grid-column: 1 / -1;
    font: 500 .68rem DM Mono, monospace;
    letter-spacing: .12em;
}

.index-card strong {
    overflow: hidden;
    font-family: "Yeseva One", Georgia, serif;
    font-size: clamp(2rem, 4.2vw, 4.4rem);
    font-weight: 400;
    letter-spacing: -.05em;
    line-height: .95;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.index-card b {
    font: 500 .72rem DM Mono, monospace;
}

.index-card--yellow {
    top: 13%;
    left: 8%;
    background: var(--yellow);
    transform: rotate(-4deg);
}

.index-card--pink {
    z-index: 2;
    top: 38%;
    right: 7%;
    background: var(--pink);
    transform: rotate(3deg);
}

.index-card--cream {
    z-index: 3;
    bottom: 12%;
    left: 13%;
    background: var(--cream);
    transform: rotate(-1.5deg);
}

.index-sticker {
    position: absolute;
    z-index: 4;
    top: 8%;
    right: 5%;
    display: grid;
    width: clamp(5.5rem, 9vw, 8rem);
    aspect-ratio: 1;
    place-content: center;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: var(--cream);
    box-shadow: 4px 5px 0 var(--ink);
    text-align: center;
    transform: rotate(8deg);
}

.index-sticker strong {
    font-family: "Yeseva One", Georgia, serif;
    font-size: clamp(1.55rem, 2.7vw, 2.7rem);
    font-weight: 400;
    letter-spacing: -.05em;
    line-height: .9;
}

.index-sticker span {
    font: 500 .56rem DM Mono, monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.directory-section-heading {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 2rem;
    margin-bottom: 3rem;
}

.directory-section-heading h2,
.catalog-directory h2 {
    font-size: clamp(3.5rem, 8vw, 7.5rem);
}

.directory-section-heading a {
    font: 500 .7rem DM Mono, monospace;
    text-transform: uppercase;
    text-underline-offset: .35rem;
}

.featured-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1rem, 2.6vw, 2.6rem);
}

.featured-card {
    display: grid;
    align-content: start;
    gap: 1rem;
    color: inherit;
    text-decoration: none;
}

.featured-card--drop {
    padding-top: 3.5rem;
}

.featured-card img {
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid var(--ink);
    box-shadow: 7px 7px 0 var(--ink);
    object-fit: cover;
    transition: transform .25s ease, box-shadow .25s ease;
}

.featured-card:hover img {
    transform: translateY(-.35rem) rotate(-1.5deg);
    box-shadow: 11px 12px 0 var(--pink);
}

.featured-card > span {
    display: grid;
    gap: .15rem;
}

.featured-card strong {
    font-size: 1rem;
}

.featured-card small {
    font: 500 .65rem DM Mono, monospace;
    text-transform: uppercase;
}

.catalog-directory {
    padding: clamp(5rem, 9vw, 9rem) var(--pad);
    border-top: 1px solid var(--ink);
    background: var(--ink);
    color: var(--cream);
}

.catalog-directory__intro {
    display: grid;
    grid-template-columns: 1fr minmax(18rem, .55fr);
    align-items: end;
    gap: 3rem;
}

.catalog-directory__intro p {
    max-width: 36rem;
    margin: 0;
    color: rgba(244, 236, 221, .72);
    font-size: 1.05rem;
    line-height: 1.6;
}

.directory-tools {
    display: grid;
    grid-template-columns: minmax(16rem, 1fr) auto;
    gap: 1.5rem;
    align-items: end;
    margin-top: clamp(3rem, 6vw, 5rem);
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(244, 236, 221, .5);
}

.artist-search {
    display: grid;
    gap: .65rem;
}

.artist-search > span {
    font: 500 .65rem DM Mono, monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.artist-search input {
    width: 100%;
    padding: .8rem 0;
    border: 0;
    border-bottom: 1px solid rgba(244, 236, 221, .45);
    border-radius: 0;
    background: transparent;
    color: var(--cream);
    font-family: "Yeseva One", Georgia, serif;
    font-size: clamp(1.6rem, 3vw, 2.8rem);
}

.artist-search input::placeholder {
    color: rgba(244, 236, 221, .32);
}

.letter-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.letter-filters button,
.directory-empty button {
    min-height: 2.7rem;
    padding: 0 .9rem;
    border: 1px solid rgba(244, 236, 221, .6);
    border-radius: 999px;
    background: transparent;
    color: var(--cream);
    font: 500 .65rem DM Mono, monospace;
    text-transform: uppercase;
    cursor: pointer;
}

.letter-filters button:hover,
.letter-filters button.is-active,
.directory-empty button:hover {
    border-color: var(--pool);
    background: var(--pool);
    color: var(--ink);
}

.artist-count {
    margin: 1.3rem 0 0;
    color: var(--pool);
    font: 500 .65rem DM Mono, monospace;
    text-transform: uppercase;
}

.artist-index-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(12rem, .5fr) minmax(7rem, .25fr);
    gap: clamp(1rem, 2.5vw, 2rem);
    margin-top: 2rem;
    padding: 0 0 .7rem;
    color: rgba(244, 236, 221, .62);
    font: 500 .6rem DM Mono, monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.artist-index {
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(244, 236, 221, .45);
    list-style: none;
}

.artist-index li[hidden] {
    display: none;
}

.artist-entry > summary {
    list-style: none;
    cursor: pointer;
}

.artist-entry > summary::-webkit-details-marker {
    display: none;
}

.artist-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(12rem, .5fr) minmax(7rem, .25fr);
    min-height: 86px;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2rem);
    padding: 1rem 0;
    border-bottom: 1px solid rgba(244, 236, 221, .45);
    transition: padding .2s ease, background .2s ease, color .2s ease;
}

.artist-row:hover {
    padding-inline: 1rem;
    background: rgba(244, 236, 221, .04);
    color: var(--yellow);
}

.artist-entry[open] .artist-row {
    padding-inline: 1rem;
    background: var(--cream);
    color: var(--ink);
}

.artist-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem;
    font-family: "Yeseva One", Georgia, serif;
    font-size: clamp(1.55rem, 2.8vw, 2.8rem);
    line-height: 1;
}

.artist-imprint {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    min-height: 1.55rem;
    padding: .2rem .55rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font: 600 .55rem DM Mono, monospace;
    font-style: normal;
    letter-spacing: .04em;
    line-height: 1;
    text-transform: uppercase;
}

.artist-status {
    display: inline-flex;
    min-height: 1.65rem;
    align-items: center;
    padding: 0 .55rem;
    border: 1px solid var(--ink);
    border-radius: 999px;
    background: var(--pink);
    box-shadow: 2px 2px 0 var(--cream);
    color: var(--ink);
    font: 500 .54rem DM Mono, monospace;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.artist-imprints {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.artist-imprint--bonfire {
    color: var(--pool);
}

.artist-imprint--wildfire {
    color: var(--orange);
}

.artist-imprint--burn-the-money {
    color: var(--pink);
}

.artist-imprint--stuff-to-think-about {
    color: var(--yellow);
}

.artist-imprint--shapeless-culture {
    color: var(--cream);
}

.artist-imprint--wreckroom {
    color: #c7a7ff;
}

.artist-row small {
    color: rgba(244, 236, 221, .72);
    font: 500 .66rem DM Mono, monospace;
}

.artist-release-panel {
    padding: clamp(1.4rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2.5rem);
    border-bottom: 1px solid rgba(244, 236, 221, .45);
    background: rgba(244, 236, 221, .055);
}

.artist-release-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    color: var(--pool);
    font: 500 .62rem DM Mono, monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.artist-release-panel__head nav {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
}

.artist-release-panel__head nav:empty {
    display: none;
}

.artist-release-panel__head a,
.artist-release-panel li > a {
    color: inherit;
    text-underline-offset: .25rem;
}

.artist-release-panel ul {
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(244, 236, 221, .22);
    list-style: none;
}

.artist-release-panel li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(5rem, auto) minmax(4.8rem, auto);
    align-items: baseline;
    gap: clamp(.8rem, 2vw, 1.8rem);
    padding: .85rem 0;
    border-bottom: 1px solid rgba(244, 236, 221, .16);
}

.artist-release-panel li > a:first-child {
    overflow: hidden;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.artist-release-panel time,
.artist-release-panel li > span,
.artist-release-spotify {
    color: rgba(244, 236, 221, .7);
    font: 500 .6rem DM Mono, monospace;
}

.artist-release-empty {
    margin: 0;
    color: rgba(244, 236, 221, .7);
}

.directory-empty {
    justify-items: start;
    gap: 1rem;
    padding: 3rem 0;
}

.directory-empty:not([hidden]) {
    display: grid;
}

.directory-empty p {
    margin: 0;
    font-size: 1.1rem;
}

.catalog-note {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 3rem;
    align-items: end;
    padding: clamp(5rem, 9vw, 9rem) var(--pad);
    border-bottom: 1px solid var(--ink);
    background: var(--yellow);
}

.catalog-note h2 {
    max-width: 10ch;
    font-size: clamp(3.2rem, 7vw, 7rem);
}

.catalog-note > p {
    align-self: center;
    max-width: 34rem;
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.6;
}

.catalog-note > div {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
}

.directory-footer {
    padding-bottom: 5rem;
}

@media (max-width: 980px) {
    .directory-hero {
        grid-template-columns: 1fr;
    }

    .directory-hero__index {
        min-height: 430px;
        border-top: 1px solid var(--ink);
        border-left: 0;
    }

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

    .catalog-directory__intro,
    .catalog-note {
        grid-template-columns: 1fr;
    }

    .catalog-note > div {
        grid-column: auto;
    }
}

@media (max-width: 680px) {
    .directory-hero {
        min-height: auto;
    }

    .directory-hero__copy {
        min-height: 620px;
    }

    .directory-hero__index {
        min-height: 320px;
    }

    .index-card {
        width: 78%;
        padding: 1.1rem;
    }

    .index-card strong {
        font-size: clamp(1.55rem, 7vw, 2.3rem);
    }

    .directory-section-heading,
    .catalog-directory__intro,
    .directory-tools {
        grid-template-columns: 1fr;
    }

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

    .featured-card--drop {
        padding-top: 0;
    }

    .artist-row {
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: 80px;
        gap: 1rem;
    }

    .artist-index-head {
        display: none;
    }

    .artist-imprints {
        justify-content: flex-end;
    }

    .artist-row small {
        grid-column: 1 / -1;
    }

    .artist-release-panel li {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .artist-release-panel li > span,
    .artist-release-spotify {
        grid-column: auto;
    }

    .artist-release-panel time {
        text-align: right;
    }
}

@media (prefers-reduced-motion: reduce) {
    .featured-card img,
    .artist-row {
        transition: none;
    }
}