.projects-list{--main-template-columns: repeat(auto-fit, minmax(14rem, 1fr));--main-template-rows: repeat(auto-fit, auto);display:block;margin-inline:0;min-height:100%;container-type:inline-size;overflow-y:auto}.projects-list{header {
            display: grid;
            grid-auto-flow: row;
            place-content: center;
            grid-column: 1 / span 1;

            h2 {
                display: grid;
                grid-auto-flow: row;
                place-content: center;
                padding: var(--space-l);
                font-family: var(--font-heading);
                font-size: var(--step-0);
                text-align: end;
            }

            span {
                width: min-content;
                font-family: var(--font-base);
                font-size: var(--step-1);
                font-weight: 900;
                text-transform: uppercase;
            }
        }
        .items-list {
            display: grid;
            margin: 0;
            padding: 0;
            min-height: 100%;
            grid-template-columns: var(--main-template-columns, 1fr);
            grid-template-rows: var(--main-template-rows, auto);
            grid-column: span 3 / -1;

            & > article {
                display: block;
                width: 100%;
                min-height: 12rem;
                height: 100%;
                list-style: none;
                z-index: 0;
                background-color: var(--bg-color);
                transition: all .2s ease-in-out;

                & > a {
                    outline: .063rem solid var(--bg-color-subtle);
                    width: calc(100% - .025rem);
                    height: calc(100% - .063rem);
                }

                & > *  figure svg {
                    transition: all .2s ease-in-out;
                }

                &:hover,
                &:focus,
                &:active,
                &:target {
                    /* scale: 1.02;
                    z-index: 2; */
                    /* box-shadow:  1.5rem .5rem 1.5rem -1rem hsla(0, 0%, 52%, 0.384),
                         -1.5rem -.5rem 1rem -1rem hsla(0, 0%, 52%, 0.384); */

                        & > *  figure svg {
                            scale: 1.035;
                        }
                }
            }
        }



        a {
            display: flex;
            gap: var(--space-s-m);
            text-decoration: none;
            color: var(--fg-color);
            font-weight: 900;
            height: 100%;

            /* &:hover,
            &:focus {
                figure {
                    scale: 1.1;
                }
            } */
        }

        figure {
            display: flex;
            flex-direction: column;
            gap: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            transition: scale .4s ease-in-out;

            svg {
                display: grid;
                place-content: center;
                width: 100%;
                height: max(100%, 55rem);
                aspect-ratio: 1/1;
                transition: all .4s ease-in-out;
            }

            &:is(:not(:hover, :focus, :focus-within, :active, :target)) svg {
                --svg-color: none;
                stroke-width: 3;
                stroke: var(--fg-color);
            }

            &:is(:hover, :focus, :focus-within, :active, :target) svg {
                stroke-width: 0;
            }

            img,
            picture {
                max-width: initial;
            }

            img {
                display: grid;
                place-content: center;
                width: 100%;
                height: 100%;
                object-fit: cover;
                font-weight: 300;
                font-size: var(--step--2);

                &[alt] {
                    margin: auto;
                }
            }



            figcaption {
                align-self: end;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
                padding: var(--space-xs) var(--space-2xs);
                border-block-start: .063rem solid var(--bg-color-subtle);
                font-size: var(--step--1);
                text-align: center;
                z-index: 10;
                background-color: var(--bg-color);

                & > em {
                    display: block;
                    width: 100%;
                    padding-block: var(--space-2xs);
                    font-family: var(--font-heading);
                    font-size: var(--step--1);
                    font-weight: 400;
                    text-align: center;
                }

                & > ul {
                    display: flex;
                    gap: .25em 0;
                    padding: 0;

                    & > li {
                        display: block;
                        font-family: var(--font-default);
                        font-size: var(--step--2);
                        font-weight: 300;

                        &:not(:first-child)::before {
                            content: ', ';
                        }
                    }
                }
            }
        }}
.wb_rin7da{display:flex;align-items:center;overflow:hidden;transition:max-width .25s ease-in-out .25s,opacity .25s ease-in-out .2s;.wb_rin7da &::after{content:"";display:block;width:.75em;height:.25em;border-top:.5em solid transparent;border-bottom:.5em solid transparent;border-left:.75em solid var(--bg-color-subtle);margin-inline-start:-.375em;z-index:-1}a:hover & {
            max-width: 100%;
            opacity: 1;
            transition: max-width .25s ease-in-out .2s, opacity .25s ease-in-out .25s;

        }}
.icon-link{svg {
            width: var(--svg-icon-size, 1.5rem);
            height: var(--svg-icon-size, 1.5rem);
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            fill: none;
        }}
nav[role="navigation"] {
        --menu-item-color: var(--fg-color);

        position: relative;
        display: flex;
        justify-content: space-between;

        @media (min-width: 1000px) {
            --menu-item-direction: row;
            --menu-item-fsz: var(--step--1);

            /* display: flex; */
            flex-direction: column;
            align-items: end;
            justify-content: center;

            position: sticky;
            top: 0;
            z-index: 1;

            width: var(--sidebar-size);
            max-width: var(--sidebar-size);
            /* height: 100dvh; */
            padding: var(--space-xl);


            /* hide toggle */
            .toggle {
                display: none;
            }
        }

        @media screen and (max-width: 999px) {
            --menu-item-fsz: var(--step-0);

            padding: var(--space-xs);
            border-block-end: var(--social-links-border, .063rem solid var(--bg-color-subtle));

            .toggle {
                color: var(--fg-color);
                font-weight: 700;

                &.close {
                    position: absolute;
                    top: var(--space-xs);
                    right: var(--space-xs);
                    padding-block: 1.5rem;
                    text-align: right;
                    display: block;
                    text-decoration: none;
                    opacity: 0;
                    transition: opacity .3s ease-in-out;
                }
            }
        }

        a {
            align-self: center;
            text-decoration: none;
        }

        [aria-roledescription="logo"] {
            @media screen and (min-width: 1000px) {
                position: fixed;
                top: var(--space-m);
                left: var(--space-m);
            }

            @media screen and (max-width: 999px) {
                background-color: var(--bg-color);
                z-index: 100;
            }

            & > svg {
                color: var(--accent-color);
                height: 4rem;
                width: 4rem;
            }
        }

        & > menu {
            --menu-link-size: 4rem;
            --svg-icon-size: 1.5em;

            transition: transform .3s ease-in-out;

            flex-direction: column;
            align-items: center;
            gap: var(--space-m);
            padding: 0;
            margin: 0;
            list-style: none;

            @media screen and (min-width: 1000px) {
                display: grid;
                justify-content: space-around;
            }

            @media only screen and (max-width: 999px) {
                position: fixed;
                /* or choose `absolute` depending on desired behavior*/
                top: 0;
                bottom: 0;

                display: flex;
                justify-content: center;

                /* override Safari bug */
                height: 100dvh;
                width: 100dvw;
                left: -100dvw;
                z-index: 10;
                background-color: var(--bg-color);

                &:target {
                    transform: translateX(100dvw);

                    .close {
                        opacity: 1;
                    }
                }
            }

            li {
                text-align: start;

                @media only screen and (max-width: 999px) {
                    width: 8rem;
                }
            }

            & :is(a, button) {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                flex-direction: var(--menu-item-direction, row);
                gap: var(--space-xs);
                color: var(--menu-item-color);
                font-size: var(--menu-item-fsz, var(--step-3));
                font-weight: 700;
                text-decoration: none;

                &:hover,
                &:focus {
                    --menu-item-color: var(--bg-color);
                    color: var(--accent-color);
                }
            }
        }
    }
.w9f0-i8im{display:flex;font-size:var(--step--2);font-weight:700;span {
            display: flex;
            align-items: center;
            gap: .25em;
        }

        a {
            color: var(--fg-color);
            text-decoration-style: dotted;
        }}
[data-layout='with-sidebar'] {
        @media screen and (min-width: 1000px) {
            --layout-with-sidebar-columns: var(--sidebar-size) 1fr;
            --layout-with-sidebar-rows: 1fr repeat(2, auto) auto 1fr;
            --layout-with-sidebar-areas:
                                    "  .    content"
                                    " nav   content"
                                    " nav   content"
                                    "  .    content"
                                    "footer content";
            --layout-with-sidebar-height: 100dvh;
            --layout-overflow: hidden;
            --section-border-width: 0 0 0 .063rem;
        }

        @media print {
            --layout-with-sidebar-columns: 1fr;
            --layout-with-sidebar-areas:
                                    "content"
                                    "content"
                                    "content"
                                    "content"
                                    "content";
        }

        display: grid;
        grid-template-columns: var(--layout-with-sidebar-columns, 1fr);
        grid-template-rows: var(--layout-with-sidebar-rows, auto 1fr auto);
        grid-template-areas: var(--layout-with-sidebar-areas, "nav" "content" "footer");
        gap: var(--sidebar-gap);
        width: var(--layout-width, 100dvw);
        height: var(--layout-with-sidebar-height, 100%);
        min-height: 100dvh;
        margin-inline: auto;
        overflow: var(--layout-overflow, visible);


        /* DEBUG */
        /* background-color: color-mix(in lch, transparent 70%, pink); */

        /* container-settings */
        container-name: layout-sidebar;
        container-type: inline-size;

        & > nav {
            grid-area: nav;

            @media print {
                display: none;
            }
        }

        & > section {
            grid-area: content;
            inline-size: 100%;
            min-height: 100dvh;
            height: 100%;
            overflow-y: auto;
            margin: auto;
            border: solid var(--bg-color-subtle);
            border-width: var(--section-border-width, 0);
        }

        & > footer {
            grid-area: footer;
            /* position: sticky; */
            bottom: 0;
            display: grid;
            align-items: end;
            justify-content: end;

            @media print {
                display: none;
            }
        }
    }
.skipcontent {
		position: fixed;
		top: 0;
		right: 100%;
		z-index: 10000;
		display: block;
		width: max-content;
		padding: var(--space-s);
		color: var(--bg-color);
		background-color: var(--fg-color);
		font-weight: bold;
		text-align: center;
		text-decoration-line: underline;

		&:focus {
			right: var(--space-s);
			left: var(--space-s);
		}

		&:focus:not(:active) {
			outline-style: solid;
			outline-offset: 0;
		}
	}
.drawn-man-print {
        @media screen {
            display: none;
        }

        @media print {
            position: fixed;
            top: -5mm;
            bottom: 0;
            left: -50mm;
            height: 320mm;
            /* max-height: 100vh; */
            overflow: hidden;
            opacity: 0.1;
        }

    }