/* =========================== reset.css ========================== */

/* Resets styles to known defaults to work around weird user agents. */
/* Based on http://meyerweb.com/eric/tools/css/reset/ */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}


/* =========================== colours.css ========================== */

:root {
    --accent-colour: #3c658d;
    --accent-alt-colour: #223950;
    --background-colour: #15151a;
    --background-alt-colour: #202026;
    --text-colour: #e0e0ea;
    --text-highlight-colour: #efefff;
    --text-alt-colour: #90909a;
    --link-colour: #7099c4;
}


/* =========================== dimens.css ========================== */

:root {
    --border-radius: 10px;

    --small-space: 0.5rem;
    --smedium-space: 1rem;
    --medium-space: 2.5rem;
    --large-space: 5rem;

    --content-width: min(1600px, calc(100vw - 2 * var(--large-space)));
    --content-margin: calc((100vw - var(--content-width)) / 2);

    @media (max-width: 1200px) {
        --small-space: 0.5rem;
        --smedium-space: 1rem;
        --medium-space: 2rem;
        --large-space: 4rem;
    }

    @media (max-width: 800px) {
        --small-space: 0.4rem;
        --smedium-space: 0.8rem;
        --medium-space: 1.5rem;
        --large-space: 2.5rem;
    }

    @media (max-width: 500px) {
        --content-width: calc(100vw - 20pt);
    }
}


/* =========================== about.css ========================== */

.about {
    /* Centers the trading card when it's not floated */
    text-align: center;

    * {
        text-align: left;
    }

    & > :last-child {
        flex: 100%;
        margin-right: var(--small-space);
        padding-top: var(--small-space);

        @media (max-width: 500px) {
            margin-right: 0;
        }

        p:first-child {
            margin-top: var(--small-space);
            margin-bottom: var(--small-space);
            font-size: var(--font-size-large);
            line-height: 1.8em;
        }

        .drop {
            font-family: "Chris Hand", sans-serif;
            color: var(--text-highlight-colour);
            font-weight: 800;
            font-size: var(--font-size-giant);
            margin-right: var(--small-space);
            vertical-align: baseline;
            line-height: 0;
        }
    }
}

.tcg-outer {
    float: right;
    position: relative;
    width: min-content;
    cursor: help;

    transform: rotate(4deg) translateY(40px);
    margin-left: var(--large-space);
    margin-bottom: var(--medium-space);

    @media (max-width: 1200px) {
        float: none;
        margin-bottom: var(--large-space);
        margin-left: auto;
        margin-right: auto;
    }

    @media (max-width: 800px) {
        transform: rotate(0deg);
    }

    .tcg-front {
        transform: rotateY(0deg);
    }

    .tcg-back {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: rotateY(180deg);
        background-color: var(--accent-colour);

        .tcg-back-emboss {
            position: absolute;
            font-size: var(--font-size-xlarge);
            top: 30%;
            left: 0;
            width: 100%;
            text-align: center;
            text-transform: uppercase;
            font-weight: bolder;
            color: color-mix(in srgb, var(--accent-colour), black 20%);
        }

        .tcg-back-hello {
            position: absolute;
            margin: 0;
            bottom: 0;
            right: 0;
            font-size: var(--font-size-tiny);
            color: color-mix(in srgb, var(--accent-colour), black 20%);
        }
    }

    .tcg-flip {
        transform-style: preserve-3d;
        transition: transform 800ms 400ms;
    }

    &:hover .tcg-flip {
        transform: rotateY(180deg);
    }

    .tcg-front,
    .tcg-back {
        /* Firefox doesn't do anti-aliasing in a 3D context, which looks terrible
       as the card is rotated a bit. Adding a transparent outline somehow
       fixes it. https://stackoverflow.com/a/9333891 */
        outline: 1px solid transparent;
        border: 12px solid var(--accent-colour);
        border-radius: var(--border-radius);
        box-shadow: 20px 20px 5px black;
        backface-visibility: hidden;

        @media (max-width: 500px) {
            box-shadow: 10px 10px 5px black;
        }

        &::before {
            position: absolute;
            top: -12px;
            left: -12px;
            right: -12px;
            bottom: -12px;
            content: " ";
            border-radius: var(--border-radius);

            transform: translateZ(1.41px);
            overflow: hidden;

            background-image: radial-gradient(
                farthest-corner circle at 300px 400px,
                hsla(0, 0%, 100%, 0.8) 10%,
                hsla(0, 0%, 100%, 0.65) 20%,
                hsla(0, 0%, 0%, 0.5) 90%
            );

            mix-blend-mode: overlay;
        }
    }

    .tcg-inner {
        width: 300px;
        margin: -4px;
        background-color: var(--background-alt-colour);
        border-radius: var(--border-radius);
        overflow: hidden;

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

        font-size: var(--font-size-tiny);

        img {
            width: 100%;
            border-bottom: 6px solid var(--accent-colour);
        }

        .tcg-properties {
            width: 100%;
            display: grid;
            grid-template-columns: auto 1fr auto 1fr;
            padding: 10px;
            grid-column-gap: var(--small-space);
            align-items: baseline;

            dt {
                font-weight: bold;
                text-align: right;
            }
        }

        .tcg-skills {
            margin: 0 10px;
            /* Safari doesn't like to calculate the width properly by itself...? */
            max-width: calc(100% - 20px);
            border-bottom: 0;

            td {
                border: 0;
                padding: 4px;
                font-size: var(--font-size-tiny);

                &:first-child {
                    text-align: center;
                }
            }

            em {
                font-style: normal;
                font-weight: bold;

                /* The global style adds underscores around emphasis, but we don't want that here */
                &::before {
                    display: none;
                }

                &::after {
                    display: none;
                }
            }
        }

        footer {
            width: 100%;
            border-top: 2px solid var(--accent-colour);
            margin-top: 10px;
            padding: 5px 10px 5px 10px;
            font-size: var(--font-size-tiny);
            font-style: italic;
            display: flex;
            justify-content: right;
        }
    }
}


/* =========================== articles.css ========================== */

article h2 {
    margin-bottom: 0;
}

article section + section {
    margin-top: var(--medium-space);
}

.date,
.meta {
    margin: var(--small-space) 0 var(--medium-space) 0;
    color: var(--text-alt-colour);
    padding-top: 0;
    font-size: var(--font-size-tiny);
    font-family: "Berkeley Mono", monospace;
    text-transform: uppercase;

    &::before {
        content: "// ";
    }
}

.paste-metadata {
    color: var(--text-alt-colour);
    padding: 0;
    margin: 0 0 var(--small-space) 0;
    font-size: var(--font-size-tiny);
    font-family: "Berkeley Mono", monospace;
    text-transform: uppercase;
    float: right;
}

hr.end-of-post {
    clear: both;
    border: 0;
    width: 100%;
    margin: var(--medium-space) 0;
    height: var(--medium-space);
    background: repeating-linear-gradient(
        -45deg,
        var(--accent-colour) 0,
        var(--accent-colour) 10px,
        transparent 10px,
        transparent 20px
    );
}

@media (min-width: 1200px) {
    .e-content figure.right:first-child {
        margin-top: calc(
            -1 *
                (
                    var(--font-size-xlarge) + var(--font-size-tiny) +
                        var(--medium-space)
                )
        );
    }
}


/* =========================== asides.css ========================== */

blockquote {
    padding: var(--small-space)
        calc(var(--content-margin) + var(--medium-space));
    background-color: var(--background-alt-colour);
    border-radius: 0;
    margin: 0 calc(-1 * var(--content-margin));
    width: 100vw;
    position: relative;

    &::before {
        position: absolute;
        top: var(--medium-space);
        left: var(--content-margin);
        content: "“";
        display: block;
        color: var(--accent-colour);
        font-size: var(--font-size-giant);
        line-height: var(--font-size-giant);
    }

    &::after {
        position: absolute;
        bottom: 0;
        right: var(--content-margin);
        content: "”";
        display: block;
        color: var(--accent-colour);
        font-size: var(--font-size-giant);
        line-height: var(--font-size-giant);
    }

    p {
        margin-left: calc(var(--small-space) + 2ex);
        margin-right: calc(var(--small-space) + 2ex);
    }
}

aside.update {
    clear: both;
    background-color: var(--background-alt-colour);
    border-radius: var(--border-radius);
    padding: var(--medium-space);
    border: 3px solid var(--accent-colour);
    box-shadow: 0 0 20px var(--accent-colour);
    margin: var(--large-space) 0;

    ins {
        text-decoration: none;
    }

    h5 {
        &::before {
            font-size: var(--font-size-large);
            content: "";
            margin: 0;
        }

        text-transform: uppercase;
        color: var(--text-alt-colour);
        font-size: var(--font-size-large);
        margin-top: 0;
        margin-bottom: var(--small-space);

        & + p {
            margin-top: var(--small-space);
        }
    }

    *:last-child {
        margin-bottom: 0;
    }
}

aside.warning {
    clear: both;
    background-image: repeating-linear-gradient(
        -45deg,
        red 0,
        red 10px,
        white 10px,
        white 20px,
        red 20px
    );
    border-radius: var(--border-radius);
    padding: 10px;
    box-shadow: 0 0 20px var(--accent-colour);
    margin: var(--medium-space) 0;
    color: black;

    & > div {
        background-color: rgba(255, 255, 255, 0.95);
        border-radius: var(--border-radius);
        width: 100%;
        padding: calc(var(--medium-space) / 2);

        h5 {
            &::before {
                font-size: var(--font-size-large);
                content: "⚠";
                margin: 0;
                color: inherit;
            }

            color: inherit;
            text-transform: uppercase;
            font-family: inherit;
            font-weight: 800;
            font-size: var(--font-size-large);
            margin-top: 0;
            margin-bottom: var(--small-space);

            & + p {
                margin-top: var(--small-space);
            }
        }

        *:last-child {
            margin-bottom: 0;
        }
    }
}

aside.sidenote {
    border-left: 10px solid var(--background-alt-colour);
    padding-left: 15px;

    h5 {
        &::before {
            content: "";
            margin: 0;
        }
    }
}

aside.old-post-warning {
    background: var(--background-alt-colour);
    padding: var(--small-space) var(--medium-space);
    margin: var(--medium-space) 0;
    border-radius: var(--border-radius);
}


/* =========================== contact.css ========================== */

/**
 * This file incorporates code by Thierry Michel from https://codepen.io/thierrymichel/pen/Pwzbmd
 *
 * Copyright (c) 2024 Thierry Michel
 * Copyright (c) 2026 Chris Smith
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

[data-contact],
[data-nod] {
    position: relative;

    .loading,
    .result {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;

        span {
            width: 48px;
            height: 48px;
            border: 5px solid var(--accent-colour);
            border-bottom-color: transparent;
            border-radius: 50%;
            display: inline-block;
            box-sizing: border-box;
            animation: rotation 1s linear infinite;
        }

        p {
            background-color: var(--accent-colour);
            padding: var(--medium-space);
            color: var(--text-colour);
            text-align: center;
            border-radius: var(--border-radius);
        }
    }

    &:has(.loading) form,
    &:has(.result) form {
        opacity: 0.5;
    }

    form {
        transition: opacity 200ms ease-in-out;
    }

    form.contact {
        display: flex;
        flex-direction: column;
        gap: var(--small-space);

        input,
        textarea {
            font-size: var(--font-size-small);
            background-color: var(--background-alt-colour);
            color: var(--text-colour);
            border: 1px solid var(--accent-colour);
            border-radius: 2px;
            padding: var(--small-space);
        }

        textarea {
            min-height: 200px;
            resize: vertical;
        }

        button {
            font-size: var(--font-size-small);
            background-color: var(--accent-colour);
            color: var(--text-colour);
            border: 0;
            text-transform: uppercase;
            padding: var(--small-space);
            border-radius: 2px;
            cursor: pointer;
        }
    }

    form.nod {
        --button-size: 125px;

        cursor: pointer;
        display: grid;
        grid-template-columns: auto 1fr;
        gap: var(--smedium-space);
        background-color: var(--accent-alt-colour);
        border-radius: calc((var(--button-size) + var(--smedium-space)) / 2);
        padding: var(--smedium-space);

        &:hover,
        &:active,
        &:focus {
            button {
                box-shadow:
                    inset 0 calc(var(--button-size) / 24) 0
                        hsl(from var(--accent-colour) h s calc(l + 5)),
                    inset 0 calc(-1 * var(--button-size) / 24)
                        calc(var(--button-size) / 60)
                        hsl(from var(--accent-colour) h s calc(l - 5)),
                    0 0 calc(var(--button-size) / 60) var(--accent-colour),
                    inset 0 0 calc(var(--button-size) / 30)
                        hsl(from var(--accent-colour) h s calc(l - 15)),
                    inset 0 0 calc(var(--button-size) / 30)
                        hsla(from var(--accent-alt-colour) h s l / 0.5),
                    inset 0 0 calc(var(--button-size) / 60)
                        calc(var(--button-size) / 12) var(--accent-colour),
                    inset 0 calc(-1 * var(--button-size) / 30)
                        calc(var(--button-size) / 40)
                        calc(var(--button-size) / 10)
                        hsla(from var(--accent-alt-colour) h s l / 0.7),
                    inset 0 0 calc(var(--button-size) / 60)
                        calc(var(--button-size) / 10)
                        hsl(from var(--accent-colour) h s calc(l - 20)),
                    inset 0 0 calc(var(--button-size) / 60)
                        calc(var(--button-size) / 10)
                        hsla(from var(--accent-alt-colour) h s l / 0.7),
                    inset 0 0 calc(var(--button-size) / 40)
                        calc(var(--button-size) / 8.5)
                        hsl(from var(--accent-colour) h s calc(l - 40)),
                    inset 0 0 calc(var(--button-size) / 120)
                        calc(var(--button-size) / 7.5)
                        hsla(from var(--accent-colour) h s calc(l + 30) / 0.2),
                    inset 0 calc(var(--button-size) / 20) 0
                        calc(var(--button-size) / 8.5)
                        hsla(from var(--accent-colour) h s calc(l + 15) / 0.5),
                    inset 0 calc(-1 * var(--button-size) / 20)
                        calc(var(--button-size) / 60)
                        calc(var(--button-size) / 8.5)
                        hsla(from var(--accent-colour) h s calc(l - 10) / 0.8),
                    inset 0 0 0 calc(var(--button-size) / 5.5)
                        hsl(from var(--accent-colour) h s calc(l - 3)),
                    inset 0 calc(var(--button-size) / 2.5)
                        calc(var(--button-size) / 7.5)
                        hsl(from var(--accent-colour) h s calc(l - 8)),
                    inset 0 0 calc(var(--button-size) / 10)
                        calc(var(--button-size) / 6)
                        hsl(from var(--accent-colour) h s calc(l - 15)),
                    0 calc(var(--button-size) / 40)
                        calc(var(--button-size) / 20) rgba(0, 0, 0, 0.5);

                background-color: hsl(
                    from var(--accent-colour) h s calc(l - 2)
                );
                color: hsl(from var(--text-colour) h s calc(l - 10) / 0.8);

                &:before {
                    opacity: 0.5;
                }
            }
        }

        button {
            position: relative;
            display: inline-block;
            width: var(--button-size);
            height: var(--button-size);
            border: 0;
            outline: none;
            background-color: var(--accent-colour);
            border-radius: 50%;
            cursor: pointer;
            transition:
                box-shadow 200ms,
                color 200ms;
            color: hsl(from var(--text-colour) h s l / 0.8);
            text-shadow:
                -1px 1px 0 rgba(255, 255, 255, 0.1),
                1px -1px 0 rgba(0, 0, 0, 0.4);
            font-size: var(--font-size-large);
            font-family: "IBM Plex Sans", serif;
            font-weight: bolder;

            box-shadow:
                inset 0 calc(var(--button-size) / 24) 0
                    hsl(from var(--accent-colour) h s calc(l + 5)),
                inset 0 calc(-1 * var(--button-size) / 24)
                    calc(var(--button-size) / 60)
                    hsl(from var(--accent-colour) h s calc(l - 5)),
                0 0 calc(var(--button-size) / 60) var(--accent-colour),
                inset 0 0 calc(var(--button-size) / 30)
                    hsl(from var(--accent-colour) h s calc(l - 15)),
                inset 0 0 calc(var(--button-size) / 30)
                    hsla(from var(--accent-alt-colour) h s l / 0.5),
                inset 0 0 calc(var(--button-size) / 60)
                    calc(var(--button-size) / 12) var(--accent-colour),
                inset 0 calc(-1 * var(--button-size) / 30)
                    calc(var(--button-size) / 40) calc(var(--button-size) / 10)
                    hsla(from var(--accent-alt-colour) h s l / 0.7),
                inset 0 0 calc(var(--button-size) / 60)
                    calc(var(--button-size) / 10)
                    hsl(from var(--accent-colour) h s calc(l - 20)),
                inset 0 0 calc(var(--button-size) / 60)
                    calc(var(--button-size) / 10)
                    hsla(from var(--accent-alt-colour) h s l / 0.7),
                inset 0 0 calc(var(--button-size) / 120)
                    calc(var(--button-size) / 9.2)
                    hsl(from var(--accent-colour) h s calc(l - 50)),
                inset 0 0 calc(var(--button-size) / 120)
                    calc(var(--button-size) / 8)
                    hsla(from var(--accent-colour) h s calc(l + 30) / 0.7),
                inset 0 calc(var(--button-size) / 20) 0
                    calc(var(--button-size) / 8.5)
                    hsla(from var(--accent-colour) h s calc(l + 15) / 0.7),
                inset 0 calc(-1 * var(--button-size) / 20)
                    calc(var(--button-size) / 60) calc(var(--button-size) / 8.5)
                    hsla(from var(--accent-colour) h s calc(l - 10) / 0.2),
                inset 0 0 0 calc(var(--button-size) / 5.5) var(--accent-colour),
                inset 0 calc(var(--button-size) / 2.5)
                    calc(var(--button-size) / 7.5)
                    hsl(from var(--accent-colour) h s calc(l - 5)),
                inset 0 0 calc(var(--button-size) / 10)
                    calc(var(--button-size) / 6)
                    hsl(from var(--accent-colour) h s calc(l - 10)),
                0 calc(var(--button-size) / 40) calc(var(--button-size) / 20)
                    rgba(0, 0, 0, 0.5);

            &:before {
                content: "";
                position: absolute;
                bottom: calc(var(--button-size) / 4.5);
                left: calc(var(--button-size) / 3.6);
                display: block;
                width: calc(var(--button-size) / 2.2);
                height: calc(var(--button-size) / 3.3);
                background: hsla(
                    from var(--accent-colour) h s calc(l + 30) / 0.2
                );
                background: linear-gradient(
                    to top,
                    hsla(from var(--accent-colour) h s calc(l + 40) / 0.3) 0%,
                    hsla(from var(--accent-colour) h s l / 0.1) 100%
                );
                border-radius: 40% 40% 60% 60%;
                transition: opacity 200ms;
            }
        }

        div {
            align-self: center;
            text-align: center;
        }

        p {
            font-family: "Chris Hand", sans-serif;
            font-size: var(--font-size-xlarge);
            line-height: var(--font-size-xlarge);
            margin: 0;
            padding: 0;
        }
    }
}

/** End of file **/


/* =========================== figures.css ========================== */

figure {
    margin: var(--medium-space) var(--medium-space) var(--small-space)
        var(--medium-space);
    padding: var(--medium-space);
    border-radius: var(--border-radius);
    text-align: center;
    background-color: var(--background-alt-colour);
    max-width: 100%;
    font-family: "Chris Hand", sans-serif;
    font-size: var(--font-size-xlarge);
    line-height: 1;
    color: var(--text-alt-colour);
    position: relative;
    z-index: 1;

    img,
    video {
        max-width: 100%;
        max-height: 100%;
        border-radius: var(--border-radius);
        height: auto;
    }

    @media (max-width: 500px) {
        margin: 0;
    }

    @media (min-width: 1200px) {
        &.left {
            float: left;
            max-width: 30%;
            margin-left: calc(-1 * clamp(0px, var(--content-margin), 50px));
            transform: rotate(-2deg);
            margin-right: calc(var(--medium-space) * 1.5);

            img,
            video {
                transform: rotate(1.5deg);
            }
        }

        &.right {
            float: right;
            max-width: 30%;
            margin-right: calc(-1 * clamp(0px, var(--content-margin), 50px));
            transform: rotate(2deg);
            margin-left: calc(var(--medium-space) * 1.5);

            img,
            video {
                transform: rotate(-1.5deg);
            }
        }

        &.left,
        &.right {
            position: relative;
            box-shadow: -5px 5px 10px var(--background-colour);
            margin-bottom: var(--medium-space);

            &::before,
            &::after {
                content: "";
                display: block;
                position: absolute;
                left: calc(50% - 50px);
                width: 100px;
                height: 40px;
                background-color: var(--accent-colour);
                opacity: 0.15;
                box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
            }

            &::before {
                top: -20px;
                transform: rotate(4deg);
            }

            &::after {
                bottom: -20px;
                transform: rotate(-8deg);
            }
        }
    }

    figcaption {
        margin-top: var(--medium-space);

        p {
            margin: 0;
        }
    }

    &.full {
        margin: var(--medium-space) calc(-1 * var(--content-margin));
        width: 100vw;
        max-width: 100vw;
        border-radius: 0;
    }
}


/* =========================== films.css ========================== */

.film-review-parent {
    container-type: inline-size;
}

.film-review {
    display: grid;
    grid-template-areas:
        "image header"
        "image body";
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    background-color: var(--background-alt-colour);
    border-radius: var(--border-radius);
    padding: 0;
    column-gap: var(--smedium-space);
    margin: var(--smedium-space) 0;
    box-shadow: 0 0 3px var(--accent-colour);
    overflow: hidden;

    @container (width >= 700px) {
        height: 350px;

        img {
            border-top-left-radius: var(--border-radius);
            border-bottom-left-radius: var(--border-radius);
        }
    }

    @container (width < 700px) {
        grid-template-areas: "header" "image" "body";
        grid-template-rows: auto auto auto;
        grid-template-columns: 1fr;
        row-gap: var(--small-space);
        padding: var(--smedium-space);

        header {
            grid-template-columns: 100% !important;
            grid-template-rows: auto auto auto auto;

            time {
                text-align: left !important;
            }
        }
    }

    img {
        grid-area: image;
        max-width: 100%;
        max-height: 350px;
    }

    header {
        grid-area: header;
        display: grid;
        grid-template-columns: 1fr auto auto auto;
        align-items: center;
        column-gap: var(--small-space);
        margin-top: var(--small-space);
        margin-right: var(--smedium-space);

        div {
            display: flex;
            align-items: center;
        }

        h3 {
            &::before {
                content: none;
            }

            font-size: var(--font-size-xlarge);
            line-height: var(--font-size-xlarge);
            margin: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        time {
            text-align: right;
            font-size: var(--font-size-tiny);
            font-family: "Berkeley Mono", monospace;
            text-transform: uppercase;
        }
    }

    & > div {
        padding-bottom: var(--small-space);
        padding-right: var(--small-space);
        overflow-y: auto;
        font-size: var(--font-size-small);

        p {
            margin-top: var(--smedium-space);
            margin-bottom: var(--smedium-space);

            &:first-child {
                margin-top: 0;
            }

            &:last-child {
                margin-bottom: 0;
            }
        }

        i {
            font-style: italic;
        }
    }
}

.film-reviews-parent {
    container-type: inline-size;
}

.film-reviews {
    display: grid;
    column-gap: var(--smedium-space);

    @container (width >= 1500px) {
        grid-template-columns: 1fr 1fr;
    }

    @container (width < 1500px) {
        grid-template-columns: 1fr;
    }
}

.films-list {
    display: flex;
    flex-direction: column;
    gap: var(--smedium-space);
    list-style-type: none;
    margin: 0;
    padding: 0;

    li {
        display: grid;
        grid-template-areas: "image header" "image watches" "image rating" "image blank";
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto auto 1fr;
        grid-column-gap: var(--smedium-space);
        grid-row-gap: var(--small-space);

        &:not(:first-child) {
            padding-top: var(--smedium-space);
            border-top: 2px solid var(--background-alt-colour);
        }

        &,
        * {
            margin: 0;
            padding: 0;
        }

        img {
            grid-area: image;
            max-height: 200px;
            border-radius: var(--border-radius);
            border: 2px solid var(--background-alt-colour);
            box-shadow: 0 0 5px var(--background-alt-colour);
        }

        h3 {
            &::before {
                content: none;
            }

            .year {
                color: var(--text-alt-colour);
                font-size: var(--font-size-large);
            }
        }

        p {
            color: var(--text-alt-colour);
            font-family: "Berkeley Mono", monospace;
            font-size: var(--font-size-small);
        }
    }
}

a.film-list {
    display: grid;
    max-height: calc(200px + var(--smedium-space) * 2);
    grid-template-areas: "header images" "description images" "meta images";
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr auto;
    row-gap: var(--small-space);
    background: var(--background-alt-colour);
    box-shadow: 0 0 3px var(--accent-colour);

    &,
    &:hover,
    &:focus,
    &:active {
        padding: var(--smedium-space);
        border: none;
        text-decoration: none;
        border-radius: var(--border-radius);
    }

    &:hover,
    &:focus,
    &:active {
        background: var(--accent-colour);
    }

    & + & {
        margin-top: var(--medium-space);
    }

    *,
    *:hover,
    *:active,
    *:focus {
        margin: 0;
        padding: 0;
        border: none;
    }

    h3 {
        font-size: var(--font-size-xxlarge);
        &::before {
            content: none;
        }
    }

    .description {
        p + p {
            margin-top: var(--smedium-space);
        }

        overflow: hidden;
        --mask-height: 1.5em;
        mask: linear-gradient(
            to bottom,
            black,
            black var(--mask-height),
            transparent calc(100% - var(--mask-height)),
            transparent
        );
    }

    .count {
        color: var(--text-alt-colour);
        font-size: var(--font-size-small);
        font-family: "Berkeley Mono", monospace;
    }

    .poster-stack {
        --overlap: 0.4;
        grid-area: images;
        position: relative;
        width: calc(133px + (133px * 4 * var(--overlap)));
        height: 200px;

        img {
            max-height: 200px;
            max-width: 133px;
            border-radius: var(--border-radius);
            position: absolute;
            top: 0;

            /* There must be a nicer way to do this... Please tell me how. */
            &:nth-child(1) {
                z-index: 5;
                left: 0;
            }
            &:nth-child(2) {
                z-index: 4;
                left: calc(133px * var(--overlap) * 1);
            }
            &:nth-child(3) {
                z-index: 3;
                left: calc(133px * var(--overlap) * 2);
            }
            &:nth-child(4) {
                z-index: 2;
                left: calc(133px * var(--overlap) * 3);
            }
            &:nth-child(5) {
                z-index: 1;
                left: calc(133px * var(--overlap) * 4);
            }
        }
    }
}

ol.recent-films {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    overflow-x: hidden;
    gap: var(--small-space);

    margin: var(--small-space) 0;
    padding: 0;

    mask: linear-gradient(to right, black, black 95%, transparent 100%);

    li {
        margin: 0;
        padding: 0;

        a {
            border-radius: var(--border-radius);
            padding: var(--small-space);
            background: none;
            text-decoration: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--small-space);
            transition: background 200ms ease-in-out;

            &:hover,
            &:focus,
            &:active {
                background: var(--accent-colour);

                time {
                    color: var(--text-colour);
                }

                img {
                    border-color: var(--text-colour);
                }
            }

            time {
                font-family: "Berkeley Mono", monospace;
                font-size: var(--font-size-small);
                color: var(--text-alt-colour);
                transition: color 200ms ease-in-out;
            }

            img {
                max-height: 200px;
                max-width: 133px;
                border: 4px solid var(--background-alt-colour);
                border-radius: 4px;
                transition: border-color 200ms ease-in-out;
            }
        }
    }
}

.film-rewatch {
    display: inline-block;
    font-size: var(--font-size-tiny);
    padding: 0 var(--small-space);
    background-color: var(--accent-colour);
    border-radius: var(--border-radius);
}

.film-spoilers {
    display: inline-block;
    font-size: var(--font-size-tiny);
    padding: 0 var(--small-space);
    background-color: darkred;
    border-radius: var(--border-radius);
}

.film-page {
    display: grid;

    @media (min-width: 1200px) {
        grid-template-areas: "header sidebar" "review sidebar" "review -";
        grid-template-columns: calc(var(--content-width) - 300px) 300px;
        grid-template-rows: auto auto 1fr;
        column-gap: var(--medium-space);

        aside {
            rotate: 1.5deg;
        }

        .film-review-content {
            padding-right: calc(
                300px + var(--medium-space) + var(--content-margin)
            );

            &::after {
                right: calc(
                    300px + var(--medium-space) + var(--content-margin)
                );
            }
        }
    }

    @media (max-width: 1200px) {
        grid-template-areas: "header" "review" "sidebar";
        grid-template-columns: 1fr;

        aside {
            margin-top: var(--medium-space);
        }
    }

    & > header {
        grid-area: header;
    }

    & > div {
        grid-area: review;
    }

    & > aside {
        grid-area: sidebar;
    }

    .film-page-review {
        position: relative;

        .film-review-content p {
            font-family: "Chris Hand", sans-serif;
            font-size: var(--font-size-xlarge);
        }

        & > h3 {
            margin-bottom: 0;
        }

        & > p {
            margin-top: 0;

            span:not(:first-child) {
                margin-left: var(--smedium-space);
            }
        }
    }

    aside {
        z-index: 1;
        background: var(--background-colour);
        display: flex;
        flex-direction: column;
        border: 2px solid var(--accent-colour);
        max-width: 300px;
        border-radius: var(--border-radius);
        overflow: hidden;
        gap: var(--smedium-space);
        padding-bottom: var(--medium-space);

        img {
            border-bottom: 2px solid var(--accent-colour);
        }

        p,
        a {
            margin: 0 var(--small-space);
            font-size: var(--font-size-small);
            text-align: center;
            background: none;

            &.release-date {
                color: var(--text-alt-colour);
            }
        }
    }
}


/* =========================== footer.css ========================== */

.footer-wave {
    display: block;
    margin-top: var(--large-space);
    height: 60px;
}

body > footer {
    margin-top: 0;
    padding: var(--small-space) var(--content-margin) var(--small-space)
        var(--content-margin);
    background-color: var(--background-alt-colour);

    display: grid;
    grid-template-columns: 1fr 1fr;

    li p {
        font-family: "Berkeley Mono", monospace;
        font-size: var(--font-size-small);
        color: var(--text-alt-colour);
    }

    /* Other links */
    section:nth-child(2) {
        text-align: right;
    }

    /* Licenses */
    section:nth-child(3) {
        margin-top: var(--medium-space);
        grid-column: 1 / span 2;
        text-align: center;

        font-family: "Berkeley Mono", monospace;
        font-size: var(--font-size-tiny);

        @media (max-width: 500px) {
            text-align: left;
            p {
                margin-bottom: var(--medium-space);
            }
        }
    }

    @media (max-width: 1000px) {
        display: flex;
        flex-direction: column;

        section:nth-child(2) {
            text-align: left;
        }
    }

    h2 {
        font-size: var(--font-size-xlarge);

        &:has(a) {
            display: flex;
        }

        &::before {
            font-size: var(--font-size-xlarge);
        }

        a {
            font-size: var(--font-size-xlarge);
            color: var(--accent-colour);
            border: 1px solid var(--accent-colour);
            display: inline-block;
            box-sizing: content-box;
            height: 24px;
            width: 24px;
            padding: 2px;
            border-radius: 4px;
            margin-left: calc(var(--medium-space) / 2);
            background-color: var(--background-colour);
            transition:
                background-position 300ms ease-in-out,
                color 300ms ease-in-out;

            &:hover,
            &:active,
            &:focus {
                color: var(--text-highlight-colour);
            }
        }
    }

    ul,
    a,
    p {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    li {
        margin-bottom: var(--small-space);
    }

    ul.icons {
        display: flex;
        flex-direction: row;
        justify-content: right;
        gap: 25px;

        a {
            background: none;

            &::after {
                display: none;
            }
        }

        svg {
            width: 48px;
            height: 48px;
            fill: var(--text-colour);
            transition: fill 150ms ease-out;

            &:hover {
                fill: var(--link-colour);
            }
        }

        @media (max-width: 1000px) {
            justify-content: left;
        }
    }
}


/* =========================== global.css ========================== */

body {
    background: url(/background.png) var(--background-colour);
    color: var(--text-colour);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 100vh;
    min-width: 100vw;

    /* In chromium, 100vw includes the space taken by the vertical scrollbar, so
     having any content that's 100vw wide will cause horizontal scrolling.
     There's no good way to fix this, AFAICT. So just hide the overflow. */
    overflow-x: hidden;
}

main {
    width: var(--content-width);
    margin: 0 auto;
    flex-grow: 1;
}

hr {
    border: 0;
    border-top: 5px solid var(--accent-colour);
    margin: var(--large-space) 0;
    width: 100%;
}

ol {
    list-style-type: decimal;
    padding-left: 2em;

    li {
        padding-left: 0.5em;
        margin-bottom: var(--small-space);
    }
}

ul {
    list-style-type: disc;
    padding-left: 1.5em;
}

.footnote-ref a {
    text-decoration-thickness: 2px;
}

*[hidden] {
    display: none;
}


/* =========================== header.css ========================== */

body > header {
    padding: var(--small-space) 0;
    width: var(--content-width);
    margin: var(--large-space) auto 2em auto;

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

    @media (max-width: 1200px) {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--medium-space);
    }

    & > a {
        /* Safari underlines block level elements within an A... */
        text-decoration: none;
    }

    h1 {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        color: var(--text-highlight-colour);
        font-family: "Berkeley Mono", monospace;
        text-transform: uppercase;
        text-wrap: nowrap;

        .prelude {
            font-size: var(--font-size-small);
            line-height: 1;
            color: var(--text-alt-colour);
            text-decoration: none;
        }

        .title {
            font-size: var(--font-size-giant);
            line-height: 1;
        }

        border-bottom: 4px solid var(--accent-colour);
    }

    nav {
        display: flex;
        gap: 20px;
        align-items: flex-end;

        a {
            font-family: "Berkeley Mono", monospace;
            text-transform: uppercase;
            white-space: nowrap;
        }

        @media (max-width: 700px) {
            flex-direction: column;
            align-items: flex-start;
        }
    }
}


/* =========================== littlefoot.css ========================== */

/**
 * littlefoot 4.1.2, with modifications.
 *
 * The MIT License (MIT)
 *
 * Copyright (c) 2016 Chris Sauvé and Luís Rodrigues.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */
@custom-media --breakpoint (width < 768px);

.littlefoot {
    --popover-background-color: var(--accent-colour);
    --popover-text-color: var(--text-colour);
    --popover-border: 0;
    --popover-border-radius: 0.5rem;
    --popover-max-height: 15em;
    --popover-max-width: 90%;
    --popover-horizontal-padding: calc(var(--medium-space) / 2);
    --popover-vertical-padding: calc(var(--medium-space) / 2);
    --popover-shadow: 8px 8px 8px #000000cc;
    --popover-transform-origin: 50% 0;
    --popover-transform: scale(0.1) translateZ(0);
    --popover-active-transform: scale(1) translateZ(0);
    --popover-transition: opacity 0.25s ease, transform 0.25s ease;
    --popover-width: 22em;
    --popover-scroll-indicator-color: var(--text-alt-colour);
    --popover-tooltip-size: 0.5rem;

    position: relative;
}
.littlefoot__popover {
    border: var(--popover-border);
    border-radius: var(--popover-border-radius);
    box-shadow: var(--popover-shadow);
    margin: calc(var(--popover-tooltip-size) + 1.25 * var(--font-size-regular))
        0;
    max-width: var(--popover-max-width);
    position: absolute;
    top: 0;
    transform-origin: var(--popover-transform-origin);
    transform: var(--popover-transform);
    transition: var(--popover-transition);
    width: var(--popover-width);
    z-index: 99999;

    &.is-above {
        bottom: 0;
        top: auto;
    }

    &.is-active {
        transform: var(--popover-active-transform);
    }
}

.littlefoot__wrapper {
    border-radius: var(--popover-border-radius);
    position: relative;
    z-index: 1;
}

.littlefoot__content {
    -webkit-overflow-scrolling: touch;
    background-color: var(--popover-background-color);
    border-radius: var(--popover-border-radius);
    box-sizing: border-box;
    color: var(--popover-text-color);
    font-family: var(--popover-font-family, initial);
    font-size: var(--popover-font-size, initial);
    font-style: var(--popover-font-style, initial);
    font-weight: var(--popover-font-weight, initial);
    line-height: var(--popover-line-height, normal);
    max-height: var(--popover-max-height);
    overflow: auto;
    padding: var(--popover-vertical-padding) var(--popover-horizontal-padding);
    width: 100%;

    & img {
        max-width: 100%;
    }

    &:focus {
        outline: none;
    }

    p {
        margin: 0;
    }

    em::before,
    em::after {
        display: none;
    }

    a {
        text-decoration: underline;

        &::after {
            display: none;
        }
    }
}

.is-scrollable {
    --arrow-x: calc(-1 * var(--popover-horizontal-padding));
    --arrow-y: calc(var(--popover-vertical-padding) / 2);

    & .littlefoot__content::after {
        bottom: 0;
        color: var(--popover-scroll-indicator-color);
        content: "\21E3";
        display: block;
        left: 0;
        opacity: 1;
        position: sticky;
        text-align: center;
        transform: translateX(var(--arrow-x)) translateY(var(--arrow-y));
        transition: var(--popover-transition);
        width: var(--popover-horizontal-padding);
    }

    &.is-fully-scrolled .littlefoot__content::after {
        opacity: 0;
    }
}

.littlefoot__tooltip {
    --tooltip-margin: calc(-1 * var(--popover-tooltip-size));

    background-color: var(--popover-background-color);
    border: var(--popover-border);
    box-shadow: var(--popover-shadow);
    height: calc(2 * var(--popover-tooltip-size));
    margin-left: var(--tooltip-margin);
    position: absolute;
    transform: rotate(45deg);
    width: calc(2 * var(--popover-tooltip-size));
}

.is-below .littlefoot__tooltip {
    top: var(--tooltip-margin);
}

.is-above .littlefoot__tooltip {
    bottom: var(--tooltip-margin);
}

@media (--breakpoint) {
    .littlefoot__popover {
        border-radius: 0;
        border-width: 1px 0 0;
        inset: auto 0 0 !important;
        margin: 0;
        max-width: 100% !important;
        position: fixed;
        transform: translateY(100%);
        width: 100%;

        &.is-active {
            transform: translateY(0);
        }
    }

    .littlefoot__wrapper {
        border-radius: 0;
        max-width: 100% !important;
        transform: none;
    }

    .littlefoot__tooltip {
        display: none;
    }
}

@media not print {
    .littlefoot--print {
        display: none;
    }
}

@media print {
    .littlefoot__popover,
    .littlefoot__button {
        display: none;
    }
}


/* =========================== pagination.css ========================== */

nav ol {
    display: flex;
    list-style-type: none;
    justify-content: center;
    gap: var(--medium-space);
    padding: 0;
    margin: var(--medium-space) 0 0 0;

    @media (max-width: 800px) {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--small-space);
    }

    a[aria-current] {
        font-weight: bold;
    }
}

nav.readmore {
    margin-top: var(--small-space);

    a {
        font-family: "Berkeley Mono", monospace;
        text-transform: uppercase;
    }
}

.pages-intro {
    p {
        background: var(--background-alt-colour);
        border-radius: var(--border-radius);
        padding: var(--medium-space);
    }

    &::after {
        margin: var(--large-space) calc(-1 * var(--content-margin));
        width: 100vw;
        display: block;
        content: "";
        border-bottom: 2px solid var(--accent-colour);
        clear: both;
    }
}

.excerpt {
    &::after {
        margin: var(--large-space) calc(-1 * var(--content-margin));
        width: 100vw;
        display: block;
        content: "";
        border-bottom: 2px solid var(--accent-colour);
        clear: both;
    }

    @media (min-width: 1200px) {
        p.date + figure.right {
            margin-top: calc(
                -1 *
                    (
                        var(--font-size-large) + var(--font-size-tiny) +
                            var(--medium-space)
                    )
            );
        }
    }
}

.sitemap time {
    color: var(--text-alt-colour);
    font-family: "Berkeley Mono", monospace;
    font-size: var(--font-size-tiny);
    padding-left: var(--small-space);
}


/* =========================== postlinks.css ========================== */

.post-links-parent {
    container-type: inline-size;
}

.post-links {
    display: flex;
    gap: var(--medium-space);
    flex-direction: row;

    @container (width < 1000px) {
        flex-direction: column;
    }
}

.post-catalogue {
    display: grid;
    gap: var(--medium-space);
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}

@keyframes wavey {
    0% {
        mask-position:
            calc(50% - 30px) 0,
            calc(50%) 15px,
            calc(50% - 30px) 100%,
            calc(50%) calc(100% - 15px);
    }
    100% {
        mask-position:
            calc(50% + 30px) 0,
            calc(50% + 60px) 15px,
            calc(50% + 30px) 100%,
            calc(50% + 60px) calc(100% - 15px);
    }
}

.post-link {
    flex-basis: 300px;
    min-width: 300px;
    max-width: 600px;
    flex-grow: 1;
    text-decoration: none;
    background-color: var(--background-alt-colour);
    padding: calc(var(--small-space) + 25px) var(--small-space);
    mask:
        radial-gradient(33.54px at 50% 45px, #000 99%, #0000 101%)
            calc(50% - 30px) 0/60px 51% repeat-x,
        radial-gradient(33.54px at 50% -30px, #0000 99%, #000 101%) 50%
            15px/60px calc(51% - 15px) repeat-x,
        radial-gradient(33.54px at 50% calc(100% - 45px), #000 99%, #0000 101%)
            calc(50% - 30px) 100%/60px 51% repeat-x,
        radial-gradient(33.54px at 50% calc(100% + 30px), #0000 99%, #000 101%)
            50% calc(100% - 15px) / 60px calc(51% - 15px) repeat-x;

    &:hover {
        animation: wavey 1s linear infinite forwards 150ms;

        .img-holder img,
        .img-holder .placeholder {
            transform: scale(1.1);
        }
    }

    article {
        z-index: 2;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 200px auto;
        gap: var(--small-space);

        .img-holder {
            grid-row: 1;
            grid-column: 1;
            width: 100%;
            height: 200px;
            overflow: hidden;
        }

        img,
        .placeholder {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 300ms ease-in-out;
        }

        .placeholder {
            background-color: color-mix(
                in srgb,
                var(--accent-colour),
                black 40%
            );
            color: color-mix(in srgb, var(--accent-colour), black 30%);
            font-size: var(--font-size-giant);
            padding-bottom: 1em;
            overflow: hidden;

            div {
                font-size: 60px;
                transform: rotate(10deg) translateX(-20px) translateY(-30px);
                white-space: nowrap;

                span {
                    display: inline-block;
                    transform: rotate(180deg) translateY(-4px);
                    color: color-mix(in srgb, var(--accent-colour), black 48%);
                }
            }
        }

        h3 {
            z-index: 1;
            grid-row: 1;
            grid-column: 1;
            margin: 0;
            padding: var(--small-space);
            font-size: var(--font-size-xlarge);
            font-weight: bold;
            line-height: 1em;
            align-self: end;
            box-sizing: content-box;
            max-height: 2em;
            overflow: hidden;
            background-color: color-mix(
                in srgb,
                var(--background-alt-colour) 80%,
                transparent
            );

            &::before {
                display: none;
            }
        }

        p {
            position: relative;
            margin: 0;
            padding: 0;
            height: calc(5 * 1.2em);
            overflow: hidden;
            line-height: 1.2em;
            mask:
                linear-gradient(#000 0% 0%) top/100% calc(100% - 1.2em)
                    no-repeat,
                linear-gradient(to left, #0000, #000 50%) bottom / 100% 1em
                    no-repeat;
        }
    }
}


/* =========================== prints.css ========================== */

.print-list {
    display: flex;
    flex-direction: column;
    gap: 75px;
    padding-top: 50px;
    padding-bottom: 50px;
}

section.print {
    display: grid;
    grid-template-columns: 200px auto 200px;
    grid-gap: 20px;

    @media (max-width: 800px) {
        grid-template-columns: 200px auto 200px;

        img:first-child {
            grid-area: 1 / 1;
        }

        img:last-child {
            grid-area: 1 / 3;
        }

        div {
            grid-area: 2 / 1 / 2 / 4;
        }
    }

    img {
        max-width: 200px;
        max-height: 150px;
        justify-self: end;

        &:first-child {
            border: 1px solid var(--accent-colour);
            border-radius: 5px;
            justify-self: start;
        }
    }

    div {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    * {
        margin: 0;
    }

    ul {
        list-style-type: none;
        padding: 0;
        display: flex;
        gap: 25px;

        a {
            font-family: "Berkeley Mono", monospace;
            text-transform: uppercase;
            font-size: var(--font-size-small);

            &[href*=".stl"]::after,
            &[href*=".step"]::after {
                content: "↓";
                color: var(--accent-colour);
            }
        }
    }
}


/* =========================== projects.css ========================== */

.projects {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: var(--medium-space);
    margin-top: var(--medium-space);

    @media (max-width: 800px) {
        grid-template-columns: repeat(1, 1fr);
    }

    .project {
        display: flex;
        flex-direction: column;
        height: 100%;
        background-color: var(--background-alt-colour);
        border-radius: var(--border-radius);
        padding: var(--medium-space);

        h4 {
            margin: 0;
            padding: 0;

            &::before {
                display: none;
            }

            svg {
                width: 48px;
                height: 48px;
            }

            svg.icon-tabler-pinned {
                float: right;
                width: 24px;
                height: 24px;
            }
        }

        p {
            flex-grow: 1;
        }

        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
            gap: var(--small-space);
            flex-direction: column;

            a {
                font-family: "Berkeley Mono", monospace;
                text-transform: uppercase;
                font-size: var(--font-size-small);
            }
        }
    }
}


/* =========================== snippets.css ========================== */

.snippets {
    columns: 400px 2;
    column-fill: balance;

    section {
        margin-bottom: var(--medium-space);
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin-top: 0;
    }

    a {
        font-family: "Berkeley Mono", monospace;
        font-size: var(--font-size-small);
        text-decoration-thickness: 1px;
    }
}


/* =========================== syndication.css ========================== */

.syndications {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--small-space);
    color: var(--text-alt-colour);

    ul {
        display: contents;
        list-style-type: none;
    }

    p,
    ul,
    li {
        margin: 0;
        padding: 0;
    }
}


/* =========================== syntax.css ========================== */

/**
 * Dracula Theme originally by Zeno Rocha [@zenorocha]
 * https://draculatheme.com/
 *
 * Ported for PrismJS by Albert Vallverdu [@byverdu]
 */

code[class*="language-"],
pre[class*="language-"],
code[class*="chroma-"],
pre[class*="chroma-"] {
    color: #f8f8f2;
    background: none;
    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
    font-family: "Berkeley Mono", monospace;
    font-size: var(--font-size-tiny);
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.5;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}

/* Code blocks */
pre[class*="language-"],
pre[class*="chroma-"] {
    margin: var(--medium-space) calc(-1 * var(--content-margin));
    overflow: auto;
    border-radius: 0;
    width: 100vw;
    padding: var(--medium-space)
        calc(var(--content-margin) + var(--medium-space));
}

:not(pre) > code[class*="language-"],
:not(pre) > code[class*="chroma-"],
pre[class*="language-"],
pre[class*="chroma-"] {
    background: var(--background-alt-colour);
}

/* Inline code */
:not(pre) > code[class*="language-"],
:not(pre) > code[class*="chroma-"] {
    padding: 0.1em;
    border-radius: 0.3em;
    white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: #6272a4;
}

.token.punctuation {
    color: #f8f8f2;
}

.namespace {
    opacity: 0.7;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
    color: #ff79c6;
}

.token.boolean,
.token.number {
    color: #bd93f9;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
    color: #50fa7b;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
    color: #f8f8f2;
}

.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
    color: #f1fa8c;
}

.token.keyword {
    color: #8be9fd;
}

.token.regex,
.token.important {
    color: #ffb86c;
}

.token.important,
.token.bold {
    font-weight: bold;
}

.token.italic {
    font-style: italic;
}

.token.entity {
    cursor: help;
}

/** Chroma **/
/* Error */
.chroma-chroma .chroma-err {
    color: #ff0000;
}
/* Line */
.chroma-chroma .chroma-line {
    display: flex;
}
/* Keyword */
.chroma-chroma .chroma-k {
    color: #8cb8fa;
}
/* KeywordConstant */
.chroma-chroma .chroma-kc {
    color: #8cb8fa;
}
/* KeywordDeclaration */
.chroma-chroma .chroma-kd {
    color: #8cb8fa;
}
/* KeywordNamespace */
.chroma-chroma .chroma-kn {
    color: #8cb8fa;
}
/* KeywordPseudo */
.chroma-chroma .chroma-kp {
    color: #8cb8fa;
}
/* KeywordReserved */
.chroma-chroma .chroma-kr {
    color: #8cb8fa;
}
/* KeywordType */
.chroma-chroma .chroma-kt {
    color: #50fa7b;
}
/* NameAttribute */
.chroma-chroma .chroma-na {
    color: #50fa7b;
}
/* NameBuiltin */
.chroma-chroma .chroma-nb {
    color: #faeb8c;
}
/* NameFunction */
.chroma-chroma .chroma-nf {
    color: #faeb8c;
}
/* NameTag */
.chroma-chroma .chroma-nt {
    color: #ff79c6;
}
/* LiteralDate */
.chroma-chroma .chroma-ld {
    color: #50fa7b;
}
/* LiteralString */
.chroma-chroma .chroma-s {
    color: #50fa7b;
}
/* LiteralStringAffix */
.chroma-chroma .chroma-sa {
    color: #50fa7b;
}
/* LiteralStringBacktick */
.chroma-chroma .chroma-sb {
    color: #50fa7b;
}
/* LiteralStringChar */
.chroma-chroma .chroma-sc {
    color: #50fa7b;
}
/* LiteralStringDelimiter */
.chroma-chroma .chroma-dl {
    color: #50fa7b;
}
/* LiteralStringDoc */
.chroma-chroma .chroma-sd {
    color: #50fa7b;
}
/* LiteralStringDouble */
.chroma-chroma .chroma-s2 {
    color: #50fa7b;
}
/* LiteralStringEscape */
.chroma-chroma .chroma-se {
    color: #50fa7b;
}
/* LiteralStringHeredoc */
.chroma-chroma .chroma-sh {
    color: #50fa7b;
}
/* LiteralStringInterpol */
.chroma-chroma .chroma-si {
    color: #50fa7b;
}
/* LiteralStringOther */
.chroma-chroma .chroma-sx {
    color: #50fa7b;
}
/* LiteralStringRegex */
.chroma-chroma .chroma-sr {
    color: #50fa7b;
}
/* LiteralStringSingle */
.chroma-chroma .chroma-s1 {
    color: #50fa7b;
}
/* LiteralStringSymbol */
.chroma-chroma .chroma-ss {
    color: #50fa7b;
}
/* LiteralNumber */
.chroma-chroma .chroma-m {
    color: #bd93f9;
}
/* LiteralNumberBin */
.chroma-chroma .chroma-mb {
    color: #bd93f9;
}
/* LiteralNumberFloat */
.chroma-chroma .chroma-mf {
    color: #bd93f9;
}
/* LiteralNumberHex */
.chroma-chroma .chroma-mh {
    color: #bd93f9;
}
/* LiteralNumberInteger */
.chroma-chroma .chroma-mi {
    color: #bd93f9;
}
/* LiteralNumberIntegerLong */
.chroma-chroma .chroma-il {
    color: #bd93f9;
}
/* LiteralNumberOct */
.chroma-chroma .chroma-mo {
    color: #bd93f9;
}
/* Comment */
.chroma-chroma .chroma-c {
    color: #6272a4;
}
/* CommentHashbang */
.chroma-chroma .chroma-ch {
    color: #6272a4;
}
/* CommentMultiline */
.chroma-chroma .chroma-cm {
    color: #6272a4;
}
/* CommentSingle */
.chroma-chroma .chroma-c1 {
    color: #6272a4;
}
/* CommentSpecial */
.chroma-chroma .chroma-cs {
    color: #6272a4;
}
/* CommentPreproc */
.chroma-chroma .chroma-cp {
    color: #6272a4;
}
/* CommentPreprocFile */
.chroma-chroma .chroma-cpf {
    color: #6272a4;
}


/* =========================== tables.css ========================== */

.table-holder {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    margin: var(--medium-space) 0;
}

table {
    width: 100%;
    border-bottom: 1px solid var(--accent-colour);
}

td {
    padding: var(--small-space);
    font-size: var(--font-size-small);
}

th {
    border-bottom: 2px solid var(--accent-colour);
    padding: 0.4em;
    text-align: left;
    font-weight: bold;
    color: var(--text-alt-colour);
    text-transform: uppercase;
    font-family: "Berkeley Mono", monospace;
    font-size: var(--font-size-tiny);
}

tr:nth-child(2n) {
    background-color: var(--background-alt-colour);
}


/* =========================== typography.css ========================== */

:root {
    --font-size-tiny: 11pt;
    --font-size-small: 13pt;
    --font-size-regular: 16pt;
    --font-size-large: 19pt;
    --font-size-xlarge: 24pt;
    --font-size-xxlarge: 32pt;
    --font-size-giant: 40pt;

    @media (max-width: 500px) and (min-resolution: 2dppx) {
        --font-size-tiny: 8pt;
        --font-size-small: 9pt;
        --font-size-regular: 12pt;
        --font-size-large: 15pt;
        --font-size-xlarge: 20pt;
        --font-size-xxlarge: 25pt;
    }

    @media (max-width: 500px) {
        --font-size-giant: 30pt;
    }
}

@font-face {
    font-family: "IBM Plex Sans";
    src:
        local("IBM Plex Sans"),
        url("/fonts/IBMPlexSans-Regular.woff2") format("woff2"),
        url("/fonts/IBMPlexSans-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Berkeley Mono";
    src:
        local("Berkeley Mono"),
        url("/fonts/BerkeleyMono-Regular.woff2") format("woff2"),
        url("/fonts/BerkeleyMono-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Chris Hand";
    src:
        url("/fonts/ChrisHand-Regular.woff2") format("woff2"),
        url("/fonts/ChrisHand-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    font-size: var(--font-size-regular);
    font-family: "IBM Plex Sans", serif;
    line-height: 1.6;
}

h2,
h3,
h4,
h5,
h6 {
    font-family: "Chris Hand", sans-serif;
    font-size: var(--font-size-giant);
    color: var(--text-highlight-colour);
    margin: var(--medium-space) 0;
    line-height: 1;

    &:before {
        font-family: "Chris Hand", sans-serif;
        font-size: var(--font-size-giant);
        color: var(--accent-colour);
        margin-right: 0.25em;
    }

    a {
        background: none;
        text-decoration-skip-ink: auto;
        transition: text-decoration-color 200ms ease-in-out;
        text-decoration-color: var(--text-alt-colour);

        &:hover,
        &:focus,
        &:active {
            text-decoration-color: var(--accent-colour);
        }
    }
}

h2:before {
    content: "#";
}
h3:before {
    content: "##";
}
h4:before {
    content: "###";
}
h5:before {
    content: "####";
}
h6:before {
    content: "#####";
}

p {
    margin: var(--medium-space) 0;
}

p code,
li code {
    background-color: var(--background-alt-colour);
    border-radius: var(--border-radius);
    padding: 0.1em 0.5em;
    font-family: "Berkeley Mono", monospace;
}

a {
    color: var(--text-highlight-colour);
    text-decoration: underline;
    text-decoration-color: var(--accent-colour);
    text-decoration-thickness: 4px;
    text-decoration-skip-ink: none;

    background: linear-gradient(
            to bottom,
            transparent 50%,
            var(--accent-colour) 50%
        )
        top;
    background-size: 100% 200%;
    line-height: 1;

    transition: background 1s ease-out;

    &:hover,
    &:active,
    &:focus {
        background-position: bottom;
        transition-duration: 150ms;
    }

    &[href*="://"]:not([href*="://chameth.com"])::after {
        content: "↗";
        font-family: "Berkeley Mono", monospace;
        color: var(--accent-colour);
    }
}

.poem {
    font-family: "Berkeley Mono", monospace;
    background-color: var(--background-alt-colour);
    padding: 1em;
    margin: var(--medium-space) 0;
    border-radius: var(--border-radius);
    white-space: preserve-spaces;
}

.ascii-art {
    font-family: "Berkeley Mono", monospace;
    font-size: var(--font-size-tiny);
    color: var(--text-alt-colour);
}

em {
    font-style: italic;

    &::before,
    &::after {
        color: var(--accent-colour);
        font-size: var(--font-size-tiny);
        content: "_";
    }
}

strong {
    font-weight: bold;
}

/* via https://css-tricks.com/fluid-superscripts-and-subscripts/ */
sup,
sub {
    font-size: calc(0.5em + 4px);
    vertical-align: baseline;
    position: relative;
    top: calc(-0.5 * 0.83 * 2 * (1em - 4px));
}

sub {
    top: calc(0.25 * 0.83 * 2 * (1em - 4px));
}