.fc-portfolio {
    --fc-blue: #0012c7;
    --fc-blue-soft: #e4f2fb;
    --fc-blue-hover: #cfe8f8;
    --fc-navy: #0d2c6b;
    --fc-title: #141414;
    --fc-radius: 14px;
    --fc-ease: cubic-bezier(.22, .8, .24, 1);
    --fc-gap-x: 2.75rem;
    --fc-gap-y: 2.75rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Filters */

.fc-portfolio__filters {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 3.5rem;
    padding: .4rem;
    border-radius: 999px;
    background: var(--fc-blue-soft);
    isolation: isolate;
}

.fc-portfolio__indicator {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 999px;
    background: var(--fc-blue);
    box-shadow: 0 6px 18px -6px rgba(0, 18, 199, .55);
    transition: transform .45s var(--fc-ease), width .45s var(--fc-ease), height .45s var(--fc-ease);
    pointer-events: none;
}

.fc-portfolio__filter {
    appearance: none;
    border: 0;
    border-radius: 999px;
    padding: .75rem 1.4rem;
    background: transparent;
    color: var(--fc-navy);
    font: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: color .3s var(--fc-ease), background-color .3s var(--fc-ease);
}

.fc-portfolio__filter:hover:not(.is-active) { background: var(--fc-blue-hover); }
.fc-portfolio__filter.is-active { color: #fff; }

.fc-portfolio:not(.is-ready) .fc-portfolio__filter.is-active { background: var(--fc-blue); }

.fc-portfolio__filter:focus-visible,
.fc-portfolio__card:focus-visible {
    outline: 3px solid var(--fc-blue);
    outline-offset: 3px;
}

/* Grid */

.fc-portfolio__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--fc-cols, 4), minmax(0, 1fr));
    gap: var(--fc-gap-y) var(--fc-gap-x);
}

.fc-portfolio__item {
    margin: 0;
    padding: 0;
    will-change: transform, opacity;
}

.fc-portfolio__item[hidden] { display: none; }

/* Card */

.fc-portfolio__card {
    display: block;
    color: inherit;
    text-decoration: none;
    border-radius: var(--fc-radius);
}

.fc-portfolio__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--fc-radius);
    background: linear-gradient(100deg, #e9edf2 30%, #f6f8fa 50%, #e9edf2 70%) 0 0 / 200% 100%;
    animation: fc-shimmer 1.3s linear infinite;
    box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .35);
    transform: translateZ(0);
    transition: transform .5s var(--fc-ease), box-shadow .5s var(--fc-ease);
}

.fc-portfolio__media.is-loaded {
    animation: none;
    background: #1d1d1d;
}

.fc-portfolio__media.is-placeholder {
    animation: none;
    background: #2b2b2b;
    container-type: inline-size;
}

.fc-portfolio__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .8s var(--fc-ease);
}

.fc-portfolio__placeholder::before {
    content: "";
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 70%),
        repeating-conic-gradient(from 20deg at 50% 50%, #2e2e2e 0deg, #9a9a9a 14deg, #1f1f1f 30deg, #c4c4c4 48deg, #3a3a3a 60deg);
    filter: blur(10px) grayscale(1);
}

.fc-portfolio__placeholder span {
    position: relative;
    padding: 0 6%;
    color: #fff;
    font-family: "Silkscreen", "Courier New", monospace;
    font-weight: 700;
    font-size: 9cqi;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 0 0 #000, 3px 3px 0 rgba(0, 0, 0, .55);
}

@media (hover: hover) {
    .fc-portfolio__card:hover .fc-portfolio__placeholder,
    .fc-portfolio__card:focus-visible .fc-portfolio__placeholder { transform: scale(1.06); }
}

@keyframes fc-shimmer {
    to { background-position: -200% 0; }
}

.fc-portfolio__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s var(--fc-ease), filter .5s var(--fc-ease);
}

.fc-portfolio__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    background:
        radial-gradient(ellipse at center, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .65) 100%);
    color: #fff;
    text-align: center;
    opacity: 0;
    transition: opacity .45s var(--fc-ease);
}

.fc-portfolio__overlay-label,
.fc-portfolio__overlay time {
    transform: translateY(10px);
    opacity: 0;
    transition: transform .5s var(--fc-ease), opacity .5s var(--fc-ease);
}

.fc-portfolio__overlay-label {
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .8);
}

.fc-portfolio__overlay time {
    padding: .45rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 1.2rem;
    font-weight: 700;
    transition-delay: .05s;
}

.fc-portfolio__title {
    display: block;
    margin-top: 1.1rem;
    color: var(--fc-title);
    font-weight: 700;
    font-size: 1.1rem;
    text-align: center;
    transition: color .35s var(--fc-ease);
}

/* Hover */

@media (hover: hover) {
    .fc-portfolio__card:hover .fc-portfolio__media,
    .fc-portfolio__card:focus-visible .fc-portfolio__media {
        transform: translateY(-6px);
        box-shadow: 0 22px 40px -18px rgba(0, 0, 0, .55);
    }

    .fc-portfolio__card:hover .fc-portfolio__img,
    .fc-portfolio__card:focus-visible .fc-portfolio__img {
        transform: scale(1.06);
        filter: saturate(1.1);
    }

    .fc-portfolio__card:hover .fc-portfolio__overlay,
    .fc-portfolio__card:focus-visible .fc-portfolio__overlay { opacity: 1; }

    .fc-portfolio__card:hover .fc-portfolio__overlay-label,
    .fc-portfolio__card:hover .fc-portfolio__overlay time,
    .fc-portfolio__card:focus-visible .fc-portfolio__overlay-label,
    .fc-portfolio__card:focus-visible .fc-portfolio__overlay time {
        transform: none;
        opacity: 1;
    }

    a.fc-portfolio__card:hover .fc-portfolio__title { color: var(--fc-blue); }
}

/* Touch: always show date as a small badge */

@media (hover: none) {
    .fc-portfolio__overlay {
        inset: auto .6rem .6rem auto;
        flex-direction: row;
        gap: .4rem;
        padding: .3rem .7rem;
        border-radius: 999px;
        background: rgba(0, 0, 0, .6);
        opacity: 1;
    }
    .fc-portfolio__overlay-label,
    .fc-portfolio__overlay time {
        transform: none;
        opacity: 1;
    }
    .fc-portfolio__overlay time {
        padding: 0;
        background: none;
        border: 0;
        font-size: .85rem;
    }
    .fc-portfolio__overlay-label { font-size: .75rem; }
}

.fc-portfolio__empty {
    text-align: center;
    margin-top: 2rem;
    color: #666;
}

/* Responsive */

@media (max-width: 1100px) {
    .fc-portfolio { --fc-gap-x: 1.75rem; }
    .fc-portfolio__grid { grid-template-columns: repeat(min(var(--fc-cols, 4), 3), minmax(0, 1fr)); }
}

@media (max-width: 782px) {
    .fc-portfolio { --fc-gap-x: 1rem; --fc-gap-y: 1.75rem; --fc-radius: 10px; }
    .fc-portfolio__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fc-portfolio__filters { border-radius: 1.4rem; margin-bottom: 2rem; }
    .fc-portfolio__filter { font-size: .95rem; padding: .6rem 1rem; }
    .fc-portfolio__title { font-size: .95rem; margin-top: .7rem; }
}

@media (max-width: 480px) {
    .fc-portfolio__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .fc-portfolio *,
    .fc-portfolio *::before,
    .fc-portfolio *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}