/* stylelint-disable no-duplicate-selectors */

/* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1600,22,1.25,7,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
    --step--2: clamp(0.6944rem, 0.648rem + 0.232vw, 0.88rem);
    --step--1: clamp(0.8331rem, 0.7664rem + 0.3336vw, 1.1rem);
    --step-0: clamp(1rem, 0.9063rem + 0.4688vw, 1.375rem);
    --step-1: clamp(1.2rem, 1.0703rem + 0.6484vw, 1.7188rem);
    --step-2: clamp(1.44rem, 1.2628rem + 0.8859vw, 2.1488rem);
    --step-3: clamp(1.7281rem, 1.4888rem + 1.1969vw, 2.6856rem);
    --step-4: clamp(2.0738rem, 1.753rem + 1.6039vw, 3.3569rem);
    --step-5: clamp(2.4881rem, 2.0611rem + 2.1352vw, 4.1963rem);
    --step-6: clamp(2.9863rem, 2.4216rem + 2.8234vw, 5.245rem);
    --step-7: clamp(3.5831rem, 2.8398rem + 3.7164vw, 6.5563rem);
}

/* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1600,24,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6|8,s-l|l-3xl&g=s,l,xl,12 */

:root {
    --space-3xs: clamp(0.25rem, 0.2188rem + 0.1563vw, 0.375rem);
    --space-2xs: clamp(0.5rem, 0.4375rem + 0.3125vw, 0.75rem);
    --space-xs: clamp(0.75rem, 0.6563rem + 0.4688vw, 1.125rem);
    --space-s: clamp(1rem, 0.875rem + 0.625vw, 1.5rem);
    --space-m: clamp(1.5rem, 1.3125rem + 0.9375vw, 2.25rem);
    --space-l: clamp(2rem, 1.75rem + 1.25vw, 3rem);
    --space-xl: clamp(3rem, 2.625rem + 1.875vw, 4.5rem);
    --space-2xl: clamp(4rem, 3.5rem + 2.5vw, 6rem);
    --space-3xl: clamp(6rem, 5.25rem + 3.75vw, 9rem);
    --space-4xl: clamp(8rem, 7rem + 5vw, 12rem);

    /* One-up pairs */
    --space-3xs-2xs: clamp(0.25rem, 0.125rem + 0.625vw, 0.75rem);
    --space-2xs-xs: clamp(0.5rem, 0.3438rem + 0.7813vw, 1.125rem);
    --space-xs-s: clamp(0.75rem, 0.5625rem + 0.9375vw, 1.5rem);
    --space-s-m: clamp(1rem, 0.6875rem + 1.5625vw, 2.25rem);
    --space-m-l: clamp(1.5rem, 1.125rem + 1.875vw, 3rem);
    --space-l-xl: clamp(2rem, 1.375rem + 3.125vw, 4.5rem);
    --space-xl-2xl: clamp(3rem, 2.25rem + 3.75vw, 6rem);
    --space-2xl-3xl: clamp(4rem, 2.75rem + 6.25vw, 9rem);
    --space-3xl-4xl: clamp(6rem, 4.5rem + 7.5vw, 12rem);

    /* Custom pairs */
    --space-s-l: clamp(1rem, 0.5rem + 2.5vw, 3rem);
    --space-l-3xl: clamp(2rem, 0.25rem + 8.75vw, 9rem);
}

:root {
    --content-width-main: 55rem;
    --content-width-side: 27rem;
    --content-width-gap: var(--space-xl);
    --content-width-wrapper: calc(
        var(--content-width-main) + var(--content-width-side) +
            var(--content-width-gap) + var(--padding-default) * 2
    );
    --content-width-hero: 100rem;

    /* Spacing */
    --padding-default: var(--space-l);
    --space-default: 1.25em;

    /* Fonts */
    --font-family-headlines: "Lexend Deca", sans-serif;
    --font-weight-headlines: 600;
    --font-family-text: system-ui, sans-serif;
    --font-family-code: ui-monospace, "Cascadia Code", "Source Code Pro",
        "Menlo", "Consolas", "DejaVu Sans Mono", monospace;

    /* Colors based on: https://coolors.co/713e5a-f2f2f2-5e8217-c4e576-4d5057 */
    --color-text: hsl(210deg 50% 15%);
    --color-primary: hsl(80deg 70% 65%);
    --color-primary-dark: hsl(80deg 70% 40%);
    --color-secondary: hsl(210deg 50% 20%);
    --color-secondary-invert: hsl(0deg 0% 100%);
    --color-tertiary: hsl(35deg 100% 50%);
    --color-tertiary-dark: hsl(35deg 50% 25%);
    --color-teaser-background-hover: hsl(0deg 0% 100%);

    /* Gradients */
    --gradient-body-background: linear-gradient(
        110deg,
        hsl(0deg 0% 97.5%),
        hsl(0deg 0% 87.5%)
    );
    --gradient-body-background-invert: linear-gradient(
        190deg,
        hsl(222deg 6% 30%),
        hsl(222deg 6% 60%)
    );
    --gradient-primary: linear-gradient(
        190deg,
        var(--color-primary-dark),
        var(--color-primary)
    );
    --gradient-tertiary: linear-gradient(
        190deg,
        var(--color-tertiary-dark),
        var(--color-tertiary)
    );
    --gradient-eleventy: linear-gradient(
        190deg,
        hsl(220deg 0% 35%),
        hsl(0deg 0% 20%)
    );
    --gradient-js: linear-gradient(
        190deg,
        hsl(53deg 93% 35%),
        hsl(0deg 0% 20%)
    );
    --gradient-css: linear-gradient(
        190deg,
        hsl(210deg 50% 15%),
        hsl(0deg 0% 20%)
    );
    --shadow: 0 0 2rem #ddd;
}

@font-face {
    font-display: swap;
    font-family: "Lexend Deca";
    font-weight: 1 999;
    src: url("../fonts/lexend-deca.woff2") format("woff2-variations");
}

*,
::before,
::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

picture {
    display: inline-block;
}

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

*:focus {
        outline: 0;
    }

*:focus-visible {
        text-decoration: none;
        outline-offset: 0.15rem;
        outline: 0.2rem dashed var(--color-tertiary);
    }

/* Elements */

html {
    font-size: 100%;
}

body {
    font-size: var(--step-0);
    color: var(--color-text);
    background-image: var(--gradient-body-background);
    background-size: 100% 100%;
    background-attachment: fixed;
    font-family: var(--font-family-text);
    font-weight: 300;
    line-height: 1.6;
    overflow-x: hidden;
}

p {
    max-width: var(--content-width-main);
}

picture {
    background-image: var(--gradient-body-background-invert);
}

picture img {
        transform: rotate(0.5deg);
        position: relative;
        top: -0.5rem;
        left: -0.5rem;
        width: 100%;
    }

button {
    background-color: transparent;
    color: white;
    border: 0;
    font-size: inherit;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    padding: var(--space-2xs);
    transition: background-color 100ms linear, color 100ms linear;
    cursor: pointer;
    position: relative;
}

button::before {
        position: absolute;
        content: "";
        display: block;
        width: 110%;
        height: 110%;
        left: -5%;
        top: 0;
        z-index: -1;
        transform: rotate(-1deg);
        background-color: var(--color-primary);
        transition: background-color 100ms linear, width 200ms linear,
            height 200ms linear;
    }

button::after {
        position: absolute;
        content: "";
        display: block;
        width: 110%;
        height: 110%;
        left: 0;
        top: -5%;
        z-index: -1;
        transform: rotate(1.25deg);
        background-color: var(--color-secondary);
        transition: transform 100ms linear;
    }

@media (hover: hover) {
        button:hover::after {
            transform: rotate(0);
        }

        button:hover::before {
            background-color: var(--color-tertiary);
            top: -12.5%;
            width: 120%;
            height: 125%;
        }
    }

button svg {
        margin-inline-end: var(--space-2xs);
        stroke: currentcolor;
    }

a {
    text-decoration-thickness: 0.15em;
    transition: text-underline-offset linear 50ms;
    text-decoration-color: var(--color-primary-dark);
    color: currentcolor;
    text-underline-offset: 0.1em;
    font-weight: 500;
}

a:visited {
        text-decoration-color: var(--color-primary);
    }

@media (hover: hover) {
        a:hover {
            text-underline-offset: 0.2em;
            text-decoration-color: var(--color-tertiary);
        }
    }

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-headlines);
    font-weight: var(--font-weight-headlines);
    color: var(--color-secondary);
    line-height: 1.2;
    transform: rotate(-0.25deg);
    text-wrap: balance;
}

h1 {
    font-size: var(--step-5);
}

h2 {
    font-size: var(--step-3);
}

h3 {
    font-size: var(--step-2);
}

ul:not([class]),
ol:not([class]) {
    max-width: var(--content-width-main);
    padding-inline-start: var(--space-s);
}

ul:not([class]) li, ol:not([class]) li {
        margin-block-start: 1em;
    }

ul[class],
ol[class] {
    list-style: none;
}

summary {
    font-size: var(--step-2);
    cursor: pointer;
}

summary > * {
        display: inline;
        font-size: var(--step-2);
    }

summary + * {
        margin-block-start: var(--space-s);
    }

code {
    background-color: #fff;
    padding: 0.2em 0.3em;
    border-radius: 0.2em;
    font-size: 0.9em;
    font-family: var(--font-family-code);
}

figcaption {
    font-size: var(--step--1);
    font-style: italic;
}

/* Components */

.wrapper {
    width: var(--content-width-wrapper);
    max-width: 100%;
    margin-inline: auto;
    padding-inline: var(--padding-default);
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--padding-default);
    gap: var(--space-l);
    flex-wrap: wrap;
}

.site-header + * {
        padding-block-start: var(--space-l-3xl);
    }

.site-navigation {
    list-style: none;
    font-size: var(--step--1);
    text-transform: uppercase;
    line-height: 1;
    font-weight: 500;
    font-family: var(--font-family-headlines);
    display: flex;
    gap: var(--space-m);
    align-items: center;
}

.site-footer {
    max-width: 100%;
    width: var(--content-width-wrapper);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: var(--space-l);
    padding-inline: var(--padding-default);
}

.site-footer__left > * + * {
            margin-block-start: var(--space-l);
        }

.site-footer__image {
        text-align: center;
    }

.site-footer__image picture {
            background-image: var(--gradient-primary);
        }

.site-footer__image img {
            top: -0.5rem;
            left: -0.5rem;
        }

.site-footer__title {
        font-family: var(--font-family-headlines);
        text-transform: uppercase;
    }

.site-title {
    font-family: var(--font-family-headlines);
    text-transform: uppercase;
    font-size: var(--step-1);
    font-weight: var(--font-weight-headlines);
    position: relative;
    text-decoration: none;
}

.site-title::before {
        content: "";
        display: block;
        position: absolute;
        background-color: var(--color-primary);
        z-index: -1;
        transform: rotate(-1.1deg);
        inset: 1.45em -0.25em 0;
        transition: background-color 100ms linear, transform 100ms linear;
    }

@media (hover: hover) {
        .site-title:hover::before {
            background-color: var(--color-tertiary);
            transform: rotate(0);
        }
    }

.section {
    --space: var(--space-3xl-4xl);

    width: var(--content-width-wrapper);
    max-width: 100%;
    margin-inline: auto;
    padding-inline: var(--padding-default);
}

@media (width >= 60rem) {

.section {
        display: grid;
        -moz-column-gap: var(--content-width-gap);
             column-gap: var(--content-width-gap);
        grid-template-columns: [main] 2fr [side] 1fr
}
    }

.section > * {
        --space: var(--space-default);
    }

.section :is(h1, h2, h3, h4, h5, h6) + * {
        margin-block-start: 0.5em;
    }

.section > *:not(.section__side) {
        grid-column-start: main;
    }

.section__side {
        grid-column-start: side;
        width: 100%;
        margin-inline: auto;
        display: block;

        --space: var(--content-width-gap);
    }

@media (width >= 60rem) {

.section__side {
            --space: 0
    }
        }

@media (width >= 60rem) {

.section__fullwidth {
            grid-column-end: span 2
    }
        }

.section h2::before {
        display: block;
        content: "";
        height: 3em;
        position: absolute;
        left: calc((var(--padding-default) / 1.5) * -1);
        background: var(--gradient-primary);
        width: 0.25em;
        transform: rotate(-0.5deg);
        box-shadow: 0.1em 0.1em 0 var(--color-tertiary);
    }

.hero {
    max-width: 100%;
    width: var(--content-width-wrapper);
    margin-inline: auto;
    min-height: 45vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
    padding-inline: var(--padding-default);
    flex-wrap: wrap-reverse;
}

.hero > * {
        margin-inline: auto;
    }

.hero__headline {
        font-size: var(--step-7);
        position: relative;
        display: inline;
        background-image: repeating-linear-gradient(
            179deg,
            transparent,
            transparent 0.8em,
            var(--color-primary) 0.8em,
            var(--color-primary) 1.3em
        );
        padding-bottom: 0.2em;
        -webkit-box-decoration-break: clone;
                box-decoration-break: clone;
    }

.hero__headline + * {
            margin-block-start: var(--space-l);
        }

.hero__image {
        min-width: 20rem;
        background-image: var(--gradient-primary);
    }

.hero__image img {
            top: -0.75rem;
            left: -0.75rem;
        }

.article > * + * {
        margin-block-start: var(--space-xl);
    }

.article__date-link {
        --space: var(--space-3xs);

        font-weight: inherit;
        text-decoration: none;
        display: inline-block;
        text-transform: uppercase;
    }

.article__date {
        font-size: var(--step--1);
    }

.article__excerpt {
        font-weight: 500;
        font-family: var(--font-family-headlines);
    }

.article *:is(h2, h3, h4, h5) {
        max-width: var(--content-width-main);
    }

.article-list {
    --space: var(--space-xl);

    list-style: none;
}

.article-list > * {
        --space: var(--space-l-xl);
    }

.teaser {
    position: relative;
    padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-s);
    transition: background-color 100ms linear;
    max-width: -moz-fit-content;
    max-width: fit-content;
}

.teaser::before {
        content: "";
        display: block;
        width: 0;
        border-inline-start: 0.5rem solid var(--color-primary);
        position: absolute;
        inset: -0.25em -0.1em;
        transform: rotate(-1.25deg);
        transition: transform 100ms linear, border-color 200ms linear;
    }

.teaser > * {
        --space: var(--space-2xs);
    }

@media (hover: hover) {
        .teaser:hover {
            background-color: var(--color-teaser-background-hover);
        }

            .teaser:hover::before {
                transform: rotate(0.25deg);
                border-color: var(--color-tertiary);
            }
    }

.teaser:focus-within {
        background-color: var(--color-teaser-background-hover);
    }

.teaser:focus-within *:focus {
            outline: 0;
        }

.teaser__link {
        text-decoration: none;
    }

.teaser__link::before {
            content: "";
            display: block;
            position: absolute;
            inset: 0;
        }

.teaser__date {
        display: block;
        text-transform: uppercase;
        font-size: var(--step--1);
    }

.teaser__headline {
        font-size: var(--step-2);
        font-weight: 500;
        position: unset;
    }

.iconlist {
    list-style: none;
    text-transform: uppercase;
    width: -moz-max-content;
    width: max-content;
}

.iconlist > * + * {
        margin-block-start: var(--space-2xs);
    }

.iconlist a {
        display: flex;
        align-items: center;
        gap: var(--space-2xs);
    }

.iconlist svg {
        height: 1em;
        width: 1em;
    }

.post-list {
    list-style: none;
    display: flex;
    justify-content: space-between;
    overflow: auto visible;
    gap: var(--space-m-l);
    padding: var(--space-2xs);
}

.post-list li {
        display: inline-block;
        aspect-ratio: 4 / 3;
        background-image: var(--gradient-primary);
        width: 26rem;
        max-width: 65vw;
        flex-shrink: 0;
        align-items: stretch;
        transition: background-image 1200ms linear;
    }

@media (hover: hover) {
            .post-list li:hover {
                background-image: var(--gradient-tertiary);
            }
        }

.post-list li:focus-within {
            outline-offset: 0.15rem;
            background-image: var(--gradient-tertiary);
            outline: 0.2rem dashed var(--color-tertiary);
        }

.post-list li:focus-within a:focus-visible {
                outline: none;
            }

.navlist > * + * {
        margin-block-start: var(--space-2xs);
    }

.poster {
    background: var(--color-secondary);
    display: flex;
    align-items: flex-end;
    position: relative;
    border: 0.1rem solid var(--color-secondary);
    height: 100%;
    top: -0.5rem;
    left: -0.5rem;
    transition: transform 100ms ease-in;
}

.poster a {
        text-decoration: none;
    }

.poster a::before {
        display: block;
        content: "";
        position: absolute;
        inset: 0;
    }

.poster__headline {
        transform: none;
        z-index: 2;
        font-size: var(--step-0);
        line-height: 1.4;
        padding: var(--space-xl) var(--space-xs) var(--space-xs) var(--space-xs);
        width: 100%;
        color: white;
        letter-spacing: 0.05em;
    }

.poster__picture {
        position: absolute;
        inset: 0;
        z-index: 1;
        opacity: 0.25;
    }

.poster__picture img {
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
               object-fit: cover;
            opacity: 0.85;
            transform: rotate(0);
            inset: 0;
        }

.poster--eleventy {
        background-image: url("../images/eleventy.svg"),
            var(--gradient-eleventy);
        background-size: 25%, 100%;
        background-repeat: no-repeat, no-repeat;
        background-position: calc(100% - var(--space-xs)) var(--space-xs), 0 0;
    }

.poster--css {
        background-image: url("../images/css.svg"), var(--gradient-css);
        background-size: 25%, 100%;
        background-repeat: no-repeat, no-repeat;
        background-position: calc(100% - var(--space-xs)) var(--space-xs), 0 0;
    }

.poster--js {
        background-image: url("../images/js.svg"), var(--gradient-js);
        background-size: 25%, 100%;
        background-repeat: no-repeat, no-repeat;
        background-position: calc(100% - var(--space-xs)) var(--space-xs), 0 0;
    }

.post-list li:nth-of-type(even) article {
        transform: rotate(-0.5deg);
    }

@media (hover: hover) {
            .post-list li:nth-of-type(even) article:hover {
                transform: rotate(0.5deg);
            }
        }

.post-list li:nth-of-type(odd) article {
        transform: rotate(0.5deg);
    }

@media (hover: hover) {
            .post-list li:nth-of-type(odd) article:hover {
                transform: rotate(-0.5deg);
            }
        }

.webmentions__avatar {
        width: 1em;
        height: 1em;
    }

.webmentions__header {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--space-3xs);
    }

.webmentions blockquote {
        width: 100%;
        max-width: var(--content-width-main);
        border-inline-start: 0.2em solid var(--color-primary);
        padding-inline-start: 0.5em;
        font-size: 0.85em;
    }

.webmentions picture {
        background-color: var(--color-primary);
    }

.webmentions picture img {
            top: -0.2rem;
            left: -0.2rem;
        }

*::-moz-selection {
    background-color: var(--color-primary);
}

*::selection {
    background-color: var(--color-primary);
}

.blogroll {
    --space: var(--space-xl);

    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xl) var(--space-3xl);
}

.blogroll li {
        display: inline-block;
    }

.blogroll__headline {
        font-size: var(--step-1);
    }

.blogroll__linkwrapper {
        margin-block-start: var(--space-2xs);
        display: flex;
        align-items: center;
    }

.blogroll__image {
        background-image: none;
        margin-inline-end: var(--space-3xs);
        width: 1em;
        height: 1em;
    }

.blogroll__image img {
            top: 0;
            left: 0;
        }

.flow > * {
        margin-block: 0;
    }

.flow > * + * {
        margin-block-start: var(--space, var(--space-default));
    }

.visually-hidden:not(:focus, :active) {
    -webkit-clip-path: inset(50%);
            clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

msme-sharing-button:not(:empty) {
        display: inline-block;
    }

.page-wrapper {
    min-height: 100vh;
    background: var(--gradient-body-background);
    border-bottom: 1rem solid #fff;
    padding-block-end: var(--space-2xl);
    z-index: 2;
    position: relative;
    box-shadow: var(--shadow);
}

.footer-wrapper {
    padding-block: var(--space-2xl) var(--space-3xl);
}

@media (width >= 60rem) {

.footer-wrapper {
        position: sticky;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 1
}
    }