@font-face {
    font-family: "PT Root UI";
    src: url("/fonts/pt-root-ui_vf.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: block;
}


@font-face {
    font-family: "IBM Plex Mono";
    src: url("/fonts/IBMPlexMono-SemiBoldItalic.woff2") format("woff2");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}


:root {

    --text: 50, 50, 50;
    --muted: 168, 168, 168;
    --muted-light: 218, 218, 218;
    --background: 255, 255, 255;
    --hover: 247, 81, 31;
    --text-asside: 90, 90, 90;

    --pill: 248, 248, 248;
    --pill-hover: 235, 235, 235;


    --font-size-top: 1rem;

    --font-size-label: .8rem;
    --font-size-h1: 2.7rem;
    --font-size-h2: 1.9rem;
    --font-size-main: 1rem;
    --font-size-description: .8rem;
    --font-size-nav: .6rem;

    --font-size-stylized: .8rem;

    @media (max-width: 767px) {

        --font-size-top: 1.4rem;

        --font-size-label: .9rem;
        --font-size-h1: 2.25rem;
        --font-size-h2: 1.6rem;
        --font-size-main: 1.1rem;
        --font-size-description: .9rem;

        --font-size-stylized: .8rem;
    }

    --link-transition: .6s cubic-bezier(.4, 0, .2, 1);
}


html {
    line-height: 1.25;
    scroll-behavior: smooth;

    --mobile-viewport-min: 320;
    --mobile-desktop-breakpoint: 768;
    --desktop-viewport-max: 1500;

    --mobile-font-size-min: 14;
    --mobile-font-size-max: 32;

    --desktop-font-size-min: 12.5;
    --desktop-font-size-max: 24;

    font-size: calc(var(--mobile-font-size-min) * 1px);

    @media screen and (min-width: 320px) {
        font-size: calc(var(--mobile-font-size-min) * 1px + (var(--mobile-font-size-max) - var(--mobile-font-size-min)) * ((100vw - var(--mobile-viewport-min) * 1px) / (var(--mobile-desktop-breakpoint) - var(--mobile-viewport-min))));
    }

    @media screen and (min-width: 768px) {
        font-size: calc(var(--desktop-font-size-min) * 1px + (var(--desktop-font-size-max) - var(--desktop-font-size-min)) * ((100vw - var(--mobile-desktop-breakpoint) * 1px) / (var(--desktop-viewport-max) - var(--mobile-desktop-breakpoint))));
    }

    @media screen and (min-width: 1500px) {
        font-size: calc(var(--desktop-font-size-max) * 1px);
    }

}


/* Base */

* {
    box-sizing: border-box;
}


body {
    margin: 0;

    color: rgb(var(--text));
    background: rgb(var(--background));

    font-family: "PT Root UI", Arial, sans-serif;
    font-weight: 400;
}


button {
    font: inherit;
}


a {
    color: inherit;

    text-decoration: underline;
    text-decoration-color: rgba(var(--text), .15);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;

    transition:
        color var(--link-transition),
        text-decoration-color var(--link-transition);
}


a:hover,
a:focus-visible {
    color: rgb(var(--hover));
    text-decoration-color: rgba(var(--hover), .15);

    transition-duration: 0s;
}


img {
    display: block;
    max-width: 100%;
}


/* IDS */

.ids__wrapper {
    width: 97%;
    margin: 0 auto;

    @media (max-width: 768px) {
        width: 93%;
    }
}


.ids__space.XS {
    height: .5rem;
}


.ids__space.S {
    height: 1rem;
}


.ids__space.M {
    height: 2rem;
}


.ids__space.L {
    height: 4rem;
}


.ids__space.XL {
    height: 8rem;
}


/* Header */

.home-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    font-weight: 500;
    padding: .5rem 0;
    isolation: isolate;
}

.home-topbar::before {
    content: "";
    position: absolute;
    z-index: -1;

    inset-block: 0;

    left: -1.5%;
    right: -1.5%;

    background: rgb(var(--background));
}


.home-topbar__inner {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;

    gap: 9rem;

    font-size: var(--font-size-top);
}


.home-topbar__identity {
    display: flex;
    align-items: center;

    gap: .7rem;
}


.home-topbar__avatar {
    width: 2.3rem;
    aspect-ratio: 1 / 1;

    object-fit: cover;
    border-radius: .65rem;
}

.home-topbar__language {
    color: rgba(var(--text), .1);
}

/* Home intro */

.home-signature {
    width: 18rem;
    height: auto;
}


.home-intro__about {
    width: 70%;
    font-size: var(--font-size-main);

    p {
        margin: 0 0 .6rem;
    }

    .home-intro__link {
        margin-top: .9rem;
    }

    a {
        font-weight: 400;
    }
}


/* Filters */

.portfolio-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    font-weight: 500;
    width: 75%;

    font-size: var(--font-size-main);
}


.portfolio-filter__title {
    margin-right: .4rem;
    margin-bottom: .6rem;
}


.portfolio-filter__scroll {
    display: contents;
}


.portfolio-filter__item {
    display: inline-flex;
    align-items: baseline;
}


.portfolio-filter__item:not(:last-child)::after {
    content: ",";

    margin-left: .05em;
    margin-right: .28em;

    color: rgba(var(--muted), 1);
}


.portfolio-filter__button {
    margin: 0;
    padding: .08em .42em .12em;

    border: .3px solid transparent;
    border-radius: .3rem;

    background: rgb(var(--pill));
    color: rgb(var(--muted));

    font: inherit;

    cursor: pointer;

    transition:
        color var(--link-transition),
        background-color var(--link-transition),
        border-color var(--link-transition);
}


.portfolio-filter__button:hover,
.portfolio-filter__button:focus-visible,
.portfolio-filter__button[aria-pressed="true"] {
    color: rgb(var(--text));
    background: rgb(var(--background));
    border-color: rgb(var(--text));

    transition-duration: 0s;
}


/* Projects */

.projects-gallery {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-auto-flow: dense;

    gap: 2.8rem 1.2rem;

    width: 100%;

    align-items: start;

    @media (max-width: 767px) {

        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-auto-flow: row;

        gap: 2.6rem .75rem;
    }
}


.project-card {
    min-width: 0;
}


.project-card.is-hidden {
    display: none;
}


/* Project sizes */

.project-card--delovoz {
    grid-column: span 6;
}


.project-card--ads {
    grid-column: span 6;
}


.project-card--longread {
    grid-column: span 4;
}


.project-card--concept {
    grid-column: span 4;
}

.project-card--guide {
    grid-column: span 6;
}

.project-card--calculator {
    grid-column: span 6;
}







/* Media */

.project-card__media {
    display: block;

    color: inherit;
    text-decoration: none;
}


.project-card__image {
    width: 100%;
    height: auto;

    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}


.project-card__placeholder {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgb(var(--pill-hover));
}



/* Caption */

.project-card__title {
    margin: .3rem 0 0;

    font-size: var(--font-size-main);
    font-weight: 600;

    transition: color var(--link-transition);
}


.project-card--linked:hover .project-card__title {
    color: rgb(var(--hover));

    transition-duration: 0s;
}


/* Stylized caption */

.font-stylized {
    font-family: "IBM Plex Mono", monospace;
    font-size: var(--font-size-stylized);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: -0.02rem;
}


/* Inline gallery */

.inline-gallery {
    position: relative;

    display: grid;

    touch-action: pan-y;
}


.inline-gallery>img {
    grid-area: 1 / 1;

    width: 100%;
    height: auto;
    aspect-ratio: 2048 / 1235;

    object-fit: cover;

    visibility: hidden;
}


.inline-gallery>img:first-child {
    visibility: visible;
}


.longread-inline-gallery>img {
    aspect-ratio: auto;
    object-fit: contain;
}

/* Concept inline gallery */

.concept-inline-gallery>img {
    aspect-ratio: 1392 / 456;
    object-fit: contain;
}


/* Announcement guide inline gallery */

.guide-inline-gallery>img {
    aspect-ratio: auto;
    object-fit: contain;
}


/* Content enter */

/* main {
    animation: content-enter .2s linear;
}



@keyframes content-enter {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
} */


/* Mobile */

@media (max-width: 767px) {


    /* Header */

    .home-topbar__inner {
        gap: 2rem;
    }


    .home-topbar__surname,
    .home-topbar__role {
        display: none;
    }


    /* Intro */

    .home-intro__about {
        width: 100%;
    }


    /* Filters */

    .portfolio-filter {
        display: block;

        width: 100%;
    }


    .portfolio-filter__title {
        display: block;

        margin: 0 0 .6rem;
    }


    .portfolio-filter__scroll {
        display: flex;
        flex-wrap: nowrap;
        align-items: baseline;

        width: calc(100% + 1.5vw);

        margin-right: -1.5vw;
        padding-right: 1.5vw;

        overflow-x: auto;
        overflow-y: hidden;

        white-space: nowrap;

        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }


    .portfolio-filter__scroll::-webkit-scrollbar {
        display: none;
    }


    .portfolio-filter__item {
        flex: 0 0 auto;
    }


    /* Projects */


    .project-card {
        grid-column: span 6;
    }


    .project-card.mobile-span-1 {
        grid-column: span 1;
    }


    .project-card.mobile-span-2 {
        grid-column: span 2;
    }


    .project-card.mobile-span-3 {
        grid-column: span 3;
    }


    .project-card.mobile-span-4 {
        grid-column: span 4;
    }


    .project-card.mobile-span-5 {
        grid-column: span 5;
    }


    .project-card.mobile-span-6 {
        grid-column: span 6;
    }
}


/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
    main {
        animation: none;
    }
}