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

body {
    min-height: 100vh;
}

#contenido,
.portfolio,
.portfolio__results {
    flex: 1;
}

.portfolio {
    --portfolio-ragged: polygon(0 3%, 6% 5%, 12% 1%, 19% 4%, 27% 1%, 34% 3%, 40% 1%, 48% 3%, 56% 0, 63% 4%, 71% 1%, 78% 4%, 85% 0, 91% 4%, 99% 2%, 100% 23%, 99% 45%, 100% 68%, 99% 97%, 92% 95%, 85% 99%, 78% 96%, 70% 99%, 62% 96%, 55% 100%, 47% 97%, 40% 99%, 33% 96%, 25% 98%, 18% 96%, 11% 100%, 0 97%, 1% 70%, 0 44%);
    overflow: hidden;
}

.portfolio__hero {
    position: relative;
    isolation: isolate;
    background: var(--ink);
    color: var(--paper);
    padding-block: clamp(2.3rem, 5vw, 4.3rem) clamp(3.1rem, 5vw, 4.5rem);
}

.portfolio__hero-ink,
.portfolio__results-ink {
    aspect-ratio: 1;
    height: auto;
    z-index: -1;
}

.portfolio__hero-ink {
    top: -92px;
    right: -67px;
    width: min(57vw, 470px);
    color: var(--orange);
    opacity: .7;
}

.portfolio__kicker {
    margin-bottom: .7rem;
    color: var(--yellow);
}

.portfolio__title {
    --ragged: var(--portfolio-ragged);
    --sheet-color: var(--orange);
    display: inline-block;
    padding: .05em .16em .14em;
    color: var(--ink);
    font: 900 clamp(2.2rem, 9.6vw, 8rem) / 1 var(--display);
    letter-spacing: -.06em;
    transform: rotate(-1.1deg);
}

.portfolio-filters {
    --ragged: var(--portfolio-ragged);
    --sheet-color: var(--white);
    --sheet-shadow: var(--yellow);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: end;
    gap: 1.1rem;
    margin-top: clamp(2rem, 5vw, 3.7rem);
    padding: clamp(1.25rem, 3vw, 2.2rem);
    color: var(--ink);
}

.portfolio-filters__tape {
    top: -13px;
    left: 8%;
}

.portfolio-filters__tape--end {
    top: -10px;
    right: 7%;
    left: auto;
    transform: rotate(11deg);
}

.portfolio-filters label {
    display: grid;
    gap: .4rem;
    min-width: 0;
    font-size: .85rem;
    font-weight: 800;
}

.portfolio-filters select {
    width: 100%;
    min-height: 48px;
    padding: .5rem .6rem;
    border: 2px solid var(--ink);
    border-radius: 0;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
}

.portfolio-filters select:focus-visible,
.portfolio-grid:focus-visible {
    outline: 3px solid #2074c6;
    outline-offset: 4px;
}

.portfolio__results {
    position: relative;
    isolation: isolate;
    background: var(--paper);
    background-image: var(--texture);
    padding-block: clamp(2.5rem, 5.5vw, 4.6rem);
}

.portfolio__results::before {
    content: "";
    position: absolute;
    inset: -14px 0 auto;
    height: 15px;
    background: var(--paper);
    clip-path: polygon(0 42%, 6% 18%, 11% 40%, 16% 19%, 22% 39%, 27% 12%, 33% 29%, 39% 11%, 45% 37%, 51% 16%, 56% 33%, 62% 0, 68% 32%, 74% 12%, 80% 39%, 86% 18%, 92% 35%, 97% 16%, 100% 31%, 100% 100%, 0 100%);
    pointer-events: none;
}

.portfolio__results-ink {
    left: -84px;
    bottom: -25px;
    width: 230px;
    color: var(--ink);
    opacity: .58;
}

.portfolio-card.paper {
    --ragged: var(--portfolio-ragged);
    --sheet-color: var(--white);
    --sheet-shadow: var(--orange);
    border: 0;
    background: transparent;
    box-shadow: none;
}

.portfolio-card.paper:nth-child(even) {
    --sheet-shadow: var(--yellow);
    box-shadow: none;
}

.portfolio-card__tape {
    top: -11px;
    left: 18%;
}

.portfolio-card:nth-child(even) .portfolio-card__tape {
    right: 17%;
    left: auto;
    background: #efa5b3bf;
    transform: rotate(8deg);
}

.portfolio-card img {
    background: var(--paper);
    object-fit: contain;
}

.portfolio-empty h2 {
    max-width: 22ch;
    font-size: clamp(1.5rem, 3.1vw, 2.8rem);
    line-height: 1.04;
    letter-spacing: -.045em;
    overflow-wrap: anywhere;
}

.portfolio-actions {
    margin-top: 1.7rem;
    text-align: center;
}

.portfolio-actions p {
    margin-top: .7rem;
}

.portfolio [hidden] {
    display: none;
}

@media (max-width: 800px) {
    .portfolio-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .portfolio-filters > .btn {
        justify-self: start;
    }
}

@media (max-width: 580px) {
    .portfolio__title {
        font-size: clamp(2.2rem, 11.5vw, 4.5rem);
    }

    .portfolio-filters {
        grid-template-columns: minmax(0, 1fr);
    }

    .portfolio-filters .btn,
    .portfolio-actions .btn {
        width: 100%;
    }

    .portfolio-empty .archive-art {
        margin-top: 0;
    }
}