/* From https://fonts.google.com/specimen/Raleway */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('./Raleway.woff2') format('woff2');
}

:root {
    --background-color: hsl(244deg 93% 18%);
    --color: hsl(65deg 100% 78%);
    --accent-color: hsl(326deg 100% 50%);

    --stroke-width: 0.15rem;

    --halftone-color: var(--accent-color);
    --halftone-size: clamp(0.075rem, 0.0648rem + 0.0455vw, 0.1rem);

    --halftone-stop1: var(--halftone-size);
    --halftone-stop2: calc(var(--halftone-size) * 1.5);
    --halftone-spacing: calc(var(--halftone-size) * 6);
    --halftone-circle-image: radial-gradient(circle at center, var(--halftone-color) var(--halftone-stop1), transparent var(--halftone-stop2));
    --halftone-background:
        var(--halftone-circle-image) 0 0 / var(--halftone-spacing) var(--halftone-spacing),
        var(--halftone-circle-image) calc(var(--halftone-spacing) / 2) calc(var(--halftone-spacing) / 2) / var(--halftone-spacing) var(--halftone-spacing);

    /* @link https://utopia.fyi/type/calculator?c=360,18,1.2,1240,20,1.333,3,0,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
    --step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
    --step-1: clamp(1.35rem, 1.2206rem + 0.575vw, 1.6663rem);
    --step-2: clamp(1.62rem, 1.3741rem + 1.0929vw, 2.2211rem);
    --step-3: clamp(1.944rem, 1.5281rem + 1.8486vw, 2.9607rem);

    --fluid-64-160: clamp(4rem, 1.5455rem + 10.9091vw, 10rem);

    /* @link https://utopia.fyi/space/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75,1.5|2|3|4,&g=s,l,xl,12 */
    --space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
    --space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
    --space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
    --space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
    --space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
    --space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);

    /* One-up pairs */
    --space-xs-s: clamp(0.875rem, 0.7216rem + 0.6818vw, 1.25rem);
    --space-s-m: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
    --space-m-l: clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);
    --space-l-xl: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
    --space-xl-2xl: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);
}

body {
    min-height: 100vh;
    margin: 0;

    font-family: 'Raleway', sans-serif;
    font-size: var(--step-0);
    font-weight: 900;

    background: var(--background-color);
    color: var(--color);
    accent-color: var(--accent-color);
}

:focus-visible {
    outline: var(--stroke-width) solid var(--accent-color);
    outline-offset: 0.1em;
}

::selection {
    background-color: var(--accent-color);
    color: var(--background-color);
    -webkit-text-fill-color: currentColor;
}

h1, h2, h3 {
    font-weight: inherit;
}
h2 {
    font-size: var(--step-3);
}
h3 {
    font-size: var(--step-2);
}

a {
    display: inline-block;
    position: relative;

    color: inherit;
    text-decoration-style: dotted;
    text-decoration-thickness: var(--stroke-width);

    --hover-offset: 0.1em;
    --hover-shadow-count: 3;
    --hover-shadow-offset: calc(var(--hover-offset) / var(--hover-shadow-count));
    --hover-shadow: drop-shadow(var(--hover-shadow-offset) var(--hover-shadow-offset) 0 var(--accent-color));

    &:hover {
        text-decoration-style: solid;
        translate: calc(-1 * var(--hover-offset)) calc(-1 * var(--hover-offset));
        filter:
            var(--hover-shadow)
            var(--hover-shadow)
            var(--hover-shadow);

        /* Place pseudo element where the <a> used to be, to prevent flickering. */
        &::before {
            content: '';
            position: absolute;
            inset: 0;
            translate: var(--hover-offset) var(--hover-offset);
        }
    }
}

.icon {
    width: 1.5em;
    height: 1.5em;
    fill: currentColor;
}

/* HEADER */
header {
    padding: var(--fluid-64-160) var(--space-m);

    display: flex;
    flex-direction: column;
    align-items: center;

    background:
        linear-gradient(to top, var(--background-color) 5%, transparent 30%),
        url('./photo.jpg') 50% 30% / cover no-repeat,
        var(--background-color);
    background-blend-mode: normal, soft-light, normal;

    font-size: var(--step-2);
    text-align: center;

    p {
        margin: 0;
    }

    h1 {
        display: grid;
        margin: var(--space-m) 0;

        font-size: var(--fluid-64-160);
        letter-spacing: 0.1em;
        text-transform: uppercase;

        span {
            grid-area: 1 / 1;
        }

        .text {
            z-index: 1;
            -webkit-text-stroke: 0.025em currentColor;
        }

        .shadow {
            user-select: none;

            color: transparent;
            translate: 0.08em 0.08em;

            background: var(--halftone-background);
            background-clip: text;
        }
    }

    .link-list {
        justify-content: center;
    }
}

.link-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    column-gap: 2em;
    row-gap: 1em;

    a {
        display: flex;
        align-items: center;
        gap: 0.5em;

        .icon {
            flex: 0 0 auto;
        }
    }
}

/* SECTIONS */
section {
    max-width: 60rem;
    margin: 0 auto var(--space-xl-2xl);
    padding: 0 var(--space-m);

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

    > h2 {
        margin-top: 0;
        margin-bottom: var(--space-s-m);
        text-align: center;
    }
}

article {
    position: relative;

    width: min(90%, 32rem);
    margin: var(--space-s-m) 0;
    padding: var(--space-m);
    box-sizing: border-box;

    background-color: var(--background-color);
    border: var(--stroke-width) solid var(--color);
    border-radius: var(--stroke-width);

    h3 {
        margin: 0;
    }

    p {
        font-weight: 700;
        line-height: 1.5;
    }

    small {
        font-size: 0.75em;
    }

    ul {
        font-size: 1.1em;
    }

    &::after {
        content: '';
        display: block;
        position: absolute;
        inset: 0;
        z-index: -1;

        translate: var(--space-xs) var(--space-xs);

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

article:nth-of-type(3n + 1) {
    align-self: start;
}
article:nth-of-type(3n + 2) {
    align-self: center;
}
article:nth-of-type(3n + 3) {
    align-self: end;
}