/* Cover-led catalog: artwork stays dominant; typography and actions stay quiet. */

:root {
    --hairline: rgba(255, 255, 255, 0.10);
    --scrim: linear-gradient(180deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0.66) 42%, rgb(0 0 0 / 0.92) 100%);
}

@supports (color: color-mix(in srgb, white 10%, transparent)) {
    :root {
        --hairline: color-mix(in srgb, white 10%, transparent);
    }
}

.cover-strip {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    max-height: 18vh;
    border-bottom: 1px solid var(--hairline);
    background: #000;
}

.cover-strip img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    filter: saturate(0.92) contrast(1.06);
}

@supports (animation-timeline: view()) {
    .cover-strip img {
        animation: cover-strip-shift linear both;
        animation-timeline: view();
        animation-range: cover 0% cover 100%;
    }
}

@keyframes cover-strip-shift {
    from { opacity: 0.68; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.current-catalog {
    position: relative;
    background: #000;
    border-bottom: 1px solid var(--hairline);
    overflow: hidden;
}

.current-catalog .container,
.origin-catalog .container {
    max-width: 1200px;
}

.current-catalog-header .section-title {
    letter-spacing: -0.04em;
    font-size: clamp(1.5rem, 2vw + 0.9rem, 2.35rem);
}

.current-catalog-header .section-intro {
    margin-top: 8px;
    max-width: 62ch;
}

.cover-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1px;
    background: var(--hairline);
    border: 1px solid var(--hairline);
}

.cover-card {
    position: relative;
    min-width: 0;
    background: #000;
    overflow: hidden;
    isolation: isolate;
}

.cover-card-art {
    display: block;
    background: #000;
}

.cover-card-art img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    transition: transform 300ms ease, filter 300ms ease;
    filter: saturate(0.94) contrast(1.04);
}

.cover-card:hover .cover-card-art img,
.cover-card:focus-within .cover-card-art img {
    transform: scale(1.02);
    filter: saturate(1) contrast(1.07);
}

.cover-card-body {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.34rem;
    padding: 2rem 0.62rem 0.48rem;
    background: var(--scrim);
    pointer-events: none;
}

.cover-card-body a {
    pointer-events: auto;
}

.cover-card-date,
.cover-card-meta {
    margin: 0;
    color: #e6e6ee;
    font: 500 0.54rem/1.4 var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.08em 0.2em;
    margin-left: -0.2em;
    background: rgb(0 0 0 / 0.42);
    text-shadow: 0 1px 2px rgb(0 0 0 / 1), 0 0 12px rgb(0 0 0 / 0.92);
}

@supports (color: color-mix(in srgb, white 10%, transparent)) and (color: oklch(0.72 0.014 250)) {
    .cover-card-date,
    .cover-card-meta {
        color: color-mix(in srgb, white 82%, oklch(0.78 0.008 250));
    }
}

.cover-card-meta {
    display: none;
}

.cover-card h3 {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: -0.015em;
    line-height: 1.18;
    overflow-wrap: anywhere;
    text-shadow: 0 1px 2px rgb(0 0 0 / 1), 0 0 12px rgb(0 0 0 / 0.92);
}

.cover-card-links {
    display: flex;
    gap: 10px;
    margin-top: 0;
}

.cover-card-links a {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

@supports (color: color-mix(in srgb, white 10%, transparent)) {
    .cover-card-links a {
        color: color-mix(in srgb, white 82%, transparent);
    }
}

.cover-card-links a:hover,
.cover-card-links a:focus-visible {
    color: #fff;
}

.catalog-more {
    margin-top: 18px;
}

.catalog-more a {
    color: var(--text-secondary);
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

.catalog-more a:hover {
    color: var(--text);
}

.origin-catalog {
    background: #000;
    border-top: 1px solid var(--hairline);
}

.origin-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1px;
    background: var(--hairline);
    border: 1px solid var(--hairline);
}

.origin-kicker {
    display: block;
    margin: 0;
    color: var(--electric);
    font: 500 0.54rem/1.4 var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgb(0 0 0 / 1), 0 0 12px rgb(0 0 0 / 0.92);
}

@media (max-width: 1050px) {
    .cover-grid,
    .origin-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 780px) {
    .cover-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        max-height: 28vw;
    }

    .cover-strip img:nth-child(n + 5) {
        display: none;
    }

    .cover-grid,
    .origin-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 540px) {
    .cover-grid,
    .origin-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cover-card-body {
        padding: 1.8rem 0.55rem 0.4rem;
    }

    .cover-card h3 {
        font-size: 0.72rem;
    }

    .cover-card-date,
    .origin-kicker,
    .cover-card-links a {
        font-size: 0.52rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cover-strip img,
    .cover-card-art img {
        animation: none;
        transition: none;
        transform: none;
        opacity: 1;
    }

    .cover-card:hover .cover-card-art img,
    .cover-card:focus-within .cover-card-art img {
        transform: none;
        filter: saturate(0.94) contrast(1.04);
    }
}