@import 'reset.css';
@import 'controls.css';
@import 'page.css';
@import 'mapbox.css';

@font-face {
    font-family: "Special Gothic";
    font-style: normal;
    font-weight: 400 700;
    size-adjust: 103%;
    src: url(../fonts/SpecialGothic.ttf) format('truetype');
}

@font-face {
    font-family: "Oak Sans";
    font-style: normal;
    font-weight: 300 900;
    src: url(../fonts/OakSans[wght].woff2) format('woff2');
}

@font-face {
    font-family: "Oak Sans";
    font-style: italic;
    font-weight: 300 900;
    src: url(../fonts/OakSans-Italic[wght].woff2) format('woff2');
}

@font-face {
    font-family: "Source Code";
    font-style: normal;
    font-weight: 200 900;
    src: url(../fonts/SourceCodeVF-Upright.ttf.woff2) format('woff2');
    size-adjust: 107%;
}

:root {
    /*--co-blue: lab(32% 10 -48); original pantone conversion but perceptually too light */
    --co-blue: light-dark(lab(32% 10 -48), lab(22% 10 -48));
    --co-medium-blue: lab(50% -3 -41);
    --co-light-blue: lab(68% -13 -31);
    --co-yellow: #ffcd5e;
    --co-green: #a2d3a6;
    --co-pink: #e57373;
    --co-orange: #ef772f; /* #f08d52 */
    --co-text: light-dark(var(--co-blue), lab(95% -0.00 0.00));
    --co-bg: light-dark(lab(100% 0 0), var(--co-blue));
    --co-hl: light-dark(hsl(from var(--co-light-blue) h s calc(l + 20)), var(--co-medium-blue));
    --co-fade: light-dark(color-mix(in srgb, var(--co-light-blue) 20%, #fff 80%), var(--co-medium-blue));
    --ft-text: "Oak Sans", sans-serif;
    --ft-head: "Special Gothic", serif;
    --ft-code: "Source Code", monospace;
    --clip: polygon(0.718% 4.618%, 0.718% 4.618%, 0.655% 9.178%, 0.506% 17.348%, 0.319% 28.167%, 0.143% 40.677%, 0.025% 53.919%, 0.013% 66.935%, 0.157% 78.764%, 0.502% 88.449%, 1.099% 95.03%, 1.995% 97.548%, 1.995% 97.548%, 3.457% 97.864%, 4.923% 97.96%, 6.393% 97.891%, 7.865% 97.714%, 9.338% 97.482%, 10.813% 97.252%, 12.287% 97.079%, 13.761% 97.017%, 15.233% 97.123%, 16.702% 97.452%, 16.702% 97.452%, 17.384% 97.645%, 18.073% 97.875%, 18.766% 98.12%, 19.463% 98.359%, 20.163% 98.571%, 20.863% 98.734%, 21.563% 98.827%, 22.26% 98.829%, 22.954% 98.717%, 23.644% 98.471%, 23.644% 98.471%, 24.542% 97.867%, 25.456% 97.373%, 26.382% 96.978%, 27.318% 96.67%, 28.261% 96.435%, 29.208% 96.262%, 30.156% 96.138%, 31.103% 96.051%, 32.044% 95.989%, 32.979% 95.939%, 32.979% 95.939%, 35.475% 95.985%, 37.971% 96.125%, 40.465% 96.34%, 42.958% 96.609%, 45.45% 96.909%, 47.943% 97.22%, 50.435% 97.521%, 52.927% 97.791%, 55.419% 98.009%, 57.912% 98.153%, 57.912% 98.153%, 60.194% 98.242%, 62.098% 98.139%, 63.719% 97.886%, 65.151% 97.529%, 66.489% 97.11%, 67.828% 96.674%, 69.26% 96.265%, 70.881% 95.926%, 72.785% 95.702%, 75.066% 95.637%, 75.066% 95.637%, 76.697% 95.722%, 79.058% 96.301%, 81.946% 97.185%, 85.159% 98.185%, 88.492% 99.114%, 91.743% 99.783%, 94.708% 100.002%, 97.184% 99.584%, 98.967% 98.341%, 99.854% 96.083%, 99.854% 96.083%, 99.876% 87.063%, 99.906% 77.451%, 99.939% 67.458%, 99.971% 57.299%, 99.995% 47.188%, 100.007% 37.337%, 100.001% 27.962%, 99.973% 19.276%, 99.917% 11.492%, 99.827% 4.825%, 99.827% 4.825%, 99.804% 4.3%, 99.75% 3.8%, 99.669% 3.329%, 99.562% 2.893%, 99.432% 2.496%, 99.279% 2.144%, 99.108% 1.843%, 98.919% 1.596%, 98.715% 1.41%, 98.497% 1.29%, 98.497% 1.29%, 98.045% 1.131%, 97.589% 1.006%, 97.13% 0.914%, 96.669% 0.852%, 96.207% 0.818%, 95.744% 0.811%, 95.281% 0.827%, 94.818% 0.866%, 94.356% 0.926%, 93.896% 1.003%, 93.896% 1.003%, 90.94% 1.057%, 88.038% 1.021%, 85.177% 0.94%, 82.347% 0.862%, 79.533% 0.832%, 76.724% 0.897%, 73.906% 1.102%, 71.068% 1.494%, 68.196% 2.12%, 65.279% 3.025%, 65.279% 3.025%, 63.069% 3.121%, 60.879% 2.955%, 58.705% 2.593%, 56.541% 2.101%, 54.382% 1.545%, 52.223% 0.99%, 50.058% 0.504%, 47.884% 0.152%, 45.694% -0.001%, 43.484% 0.111%, 43.484% 0.111%, 42.89% 0.218%, 41.741% 0.452%, 40.177% 0.782%, 38.336% 1.179%, 36.356% 1.612%, 34.377% 2.052%, 32.536% 2.469%, 30.972% 2.833%, 29.823% 3.113%, 29.229% 3.28%, 29.229% 3.28%, 28.177% 3.475%, 27.049% 3.354%, 25.867% 2.994%, 24.655% 2.473%, 23.434% 1.867%, 22.229% 1.252%, 21.062% 0.705%, 19.956% 0.303%, 18.934% 0.122%, 18.019% 0.239%, 18.019% 0.239%, 17.252% 0.479%, 16.482% 0.684%, 15.711% 0.852%, 14.939% 0.981%, 14.166% 1.071%, 13.391% 1.119%, 12.617% 1.125%, 11.842% 1.088%, 11.067% 1.005%, 10.293% 0.876%, 10.293% 0.876%, 9.391% 0.775%, 8.315% 0.603%, 7.125% 0.426%, 5.883% 0.31%, 4.648% 0.322%, 3.481% 0.528%, 2.444% 0.995%, 1.598% 1.787%, 1.002% 2.973%, 0.718% 4.618%);
    --clip-vertical: polygon(95.382% 0.718%, 95.382% 0.718%, 90.822% 0.655%, 82.652% 0.506%, 71.833% 0.319%, 59.323% 0.143%, 46.081% 0.025%, 33.065% 0.013%, 21.236% 0.157%, 11.551% 0.502%, 4.97% 1.099%, 2.452% 1.995%, 2.452% 1.995%, 2.136% 3.457%, 2.04% 4.923%, 2.109% 6.393%, 2.286% 7.865%, 2.518% 9.338%, 2.748% 10.813%, 2.921% 12.287%, 2.983% 13.761%, 2.877% 15.233%, 2.548% 16.702%, 2.548% 16.702%, 2.355% 17.384%, 2.125% 18.073%, 1.88% 18.766%, 1.641% 19.463%, 1.429% 20.163%, 1.266% 20.863%, 1.173% 21.563%, 1.171% 22.26%, 1.283% 22.954%, 1.529% 23.644%, 1.529% 23.644%, 2.133% 24.542%, 2.627% 25.456%, 3.022% 26.382%, 3.33% 27.318%, 3.565% 28.261%, 3.738% 29.208%, 3.862% 30.156%, 3.949% 31.103%, 4.011% 32.044%, 4.061% 32.979%, 4.061% 32.979%, 4.015% 35.475%, 3.875% 37.971%, 3.66% 40.465%, 3.391% 42.958%, 3.091% 45.45%, 2.78% 47.943%, 2.479% 50.435%, 2.209% 52.927%, 1.991% 55.419%, 1.847% 57.912%, 1.847% 57.912%, 1.758% 60.194%, 1.861% 62.098%, 2.114% 63.719%, 2.471% 65.151%, 2.89% 66.489%, 3.326% 67.828%, 3.735% 69.26%, 4.074% 70.881%, 4.298% 72.785%, 4.363% 75.066%, 4.363% 75.066%, 4.278% 76.697%, 3.699% 79.058%, 2.815% 81.946%, 1.815% 85.159%, 0.886% 88.492%, 0.217% 91.743%, -0.002% 94.708%, 0.416% 97.184%, 1.659% 98.967%, 3.917% 99.854%, 3.917% 99.854%, 12.937% 99.876%, 22.549% 99.906%, 32.542% 99.939%, 42.701% 99.971%, 52.812% 99.995%, 62.663% 100.007%, 72.038% 100.001%, 80.724% 99.973%, 88.508% 99.917%, 95.175% 99.827%, 95.175% 99.827%, 95.7% 99.804%, 96.2% 99.75%, 96.671% 99.669%, 97.107% 99.562%, 97.504% 99.432%, 97.856% 99.279%, 98.157% 99.108%, 98.404% 98.919%, 98.59% 98.715%, 98.71% 98.497%, 98.71% 98.497%, 98.869% 98.045%, 98.994% 97.589%, 99.086% 97.13%, 99.148% 96.669%, 99.182% 96.207%, 99.189% 95.744%, 99.173% 95.281%, 99.134% 94.818%, 99.074% 94.356%, 98.997% 93.896%, 98.997% 93.896%, 98.943% 90.94%, 98.979% 88.038%, 99.06% 85.177%, 99.138% 82.347%, 99.168% 79.533%, 99.103% 76.724%, 98.898% 73.906%, 98.506% 71.068%, 97.88% 68.196%, 96.975% 65.279%, 96.975% 65.279%, 96.879% 63.069%, 97.045% 60.879%, 97.407% 58.705%, 97.899% 56.541%, 98.455% 54.382%, 99.01% 52.223%, 99.496% 50.058%, 99.848% 47.884%, 100.001% 45.694%, 99.889% 43.484%, 99.889% 43.484%, 99.782% 42.89%, 99.548% 41.741%, 99.218% 40.177%, 98.821% 38.336%, 98.388% 36.356%, 97.948% 34.377%, 97.531% 32.536%, 97.167% 30.972%, 96.887% 29.823%, 96.72% 29.229%, 96.72% 29.229%, 96.525% 28.177%, 96.646% 27.049%, 97.006% 25.867%, 97.527% 24.655%, 98.133% 23.434%, 98.748% 22.229%, 99.295% 21.062%, 99.697% 19.956%, 99.878% 18.934%, 99.761% 18.019%, 99.761% 18.019%, 99.521% 17.252%, 99.316% 16.482%, 99.148% 15.711%, 99.019% 14.939%, 98.929% 14.166%, 98.881% 13.391%, 98.875% 12.617%, 98.912% 11.842%, 98.995% 11.067%, 99.124% 10.293%, 99.124% 10.293%, 99.225% 9.391%, 99.397% 8.315%, 99.574% 7.125%, 99.69% 5.883%, 99.678% 4.648%, 99.472% 3.481%, 99.005% 2.444%, 98.213% 1.598%, 97.027% 1.002%, 95.382% 0.718%);

}

html {
    font-size: 118.75%;
    font-variant-numeric: oldstyle-nums;
    height: 100%;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

/* Color scheme light */
html:has(.cs-toggle [value="light"]:checked) {
    --wght-thin: 300;
    --wght-text: 400;
    color-scheme: light;
}

/* Color scheme dark */
html:has(.cs-toggle [value="dark"]:checked) {
    --wght-thin: 200;
    --wght-text: 300;
    color-scheme: dark;
}

body {
    --site-margin: 1rlh;
    --width: min(calc(100svw - var(--site-margin) * 2), 1200px);
    --site-pad: calc((100svw - var(--width)) * 0.5);
    background-color: var(--co-bg);
    color: var(--co-text);
    display: grid;
    font-family: var(--ft-text);
    font-feature-settings: "ss02";
    font-variant-ligatures: common-ligatures;
    font-variant-numeric: oldstyle-nums;
    font-size: 1rem;
    min-height: 100%;
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

@media ( min-width: 50em ) {
    body {
        --site-margin: 2rlh;
    }
}

body.no-js,
body.loaded {
    opacity: 1;
    visibility: visible;
}


a {
    color: var(--co-text);
    text-decoration: none;
}

article section a,
article nav a {
    text-decoration: underline;
    text-decoration-color: var(--co-light-blue);
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.075em;
    transition: color 300ms ease-out;

    &:hover {
        color: var(--co-text);
    }

    &:visited {
        color: var(--co-text);
    }
}

a[data-provider='page'],
a[data-provider='article'] {
    font-weight: 600;
}


/*
[popover] { transition-behavior: allow-discrete; }
*/

:popover-open {
    background-color: var(--co-bg);
    box-shadow: 0 0.5rlh 0.75rlh -0.1rlh rgba(0, 0, 0, 0.1);
}

.feather {
    width: 1em;
}

.ionicon {
    width: 1em;
}

h1, h2, h3 {
    font-family: var(--ft-head);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-wrap: balance;
}

h1 {
    font-size: 2.618rem;
    font-variation-settings: 'wdth' 87.5;
    line-height: 2rlh;
}

h2 {
    font-size: 1.618rem;
    line-height: 1.34rlh;
    hyphens: auto;
    scroll-margin-top: 6rlh;
}

h3 {
    font-size: 1.236rem;
    hyphens: auto;
    line-height: 1rlh;
}

h4 {
    font-size: 1rem;
    line-height: 1rlh;
    font-weight: 700;
    hyphens: auto;
}

@media (min-width: 62em) {
    h2 {
        font-size: 2rem;
        line-height: 1.5rlh;
    }

    .article-body > h2 {
        font-size: 1.618rem;
        line-height: 1.34rlh;
    }
}

.article-body * + h2 {
    margin-bottom: 0.5rlh;
    margin-top: 1.5rlh;
}

.article-body * + h3 {
    margin-bottom: 0.25rlh;
}

.article-body h2 + *,
.article-body h3 + *,
.article-body h4 + * {
    margin-top: 0;
}

@media (min-width: 50em) {
    h1 {
        font-size: 3.236rem;
        line-height: 2.5rlh;
    }
}

s {
    text-decoration: underline;
    text-decoration-skip-ink: none;
    text-decoration-thickness: from-font;
    text-underline-offset: -30%;
}

sup {
    font-variant-position: super;
}

sub {
    font-variant-position: sub;
}

.article-body ul:not([class]) {
    list-style: revert;
    margin-left: 0.5rlh;
}

.article-body ol {
    counter-reset: ol;
    list-style: none;
    margin-left: 0;
    padding: 0;

    li {
        counter-increment: ol;
        margin-left: 1.75rlh;
        position: relative;
    }

    li::before {
        align-items: center;
        background-color: var(--co-text);
        border-radius: 50%;
        color: var(--co-bg);
        content: counter(ol);
        display: flex;
        height: 1.5rlh;
        justify-content: center;
        left: -1.75rlh;
        position: absolute;
        top: 0.125rlh;
        width: 1.5rlh;
    }
}

.article-body ul li + li,
.article-body ol li + li {
    margin-top: 0.25rlh;
}

dl > dd + dt {
    margin-top: 0.5rlh;
}

.article-body > * + * {
    margin-top: 1rlh;
}

figcaption {
    font-size: 0.618rem;
    font-weight: 500;
    line-height: 0.667rlh;

    > * {
        display: block;
    }

    .feather {
        display: inline-block;
        vertical-align: -1px;
    }
}

details {
    --co-fade: light-dark(color-mix(in srgb, var(--co-light-blue) 20%, #fff 80%), var(--co-medium-blue));
    border-bottom: 1px solid var(--co-fade);
    list-style: none;
}

.article-body details + details {
    margin-top: 0;
}

h2 + details {
    border-top: 1px solid var(--co-fade);
}

summary {
    display: grid;
    grid-template-columns: 1rlh auto;
    padding: 0.5rlh 0;

    svg {
        margin-top: calc((1rlh - 1rem) * 0.5);
    }

    > h3, > h4 {
        font-family: var(--ft-text);
        font-size: 1rem;
        font-weight: 400;
        line-height: 1rlh;
        margin-bottom: 0 !important;
    }
}

[open] summary {
    background-color: var(--co-fade);
}

details summary + * {
    margin-left: 1rlh;
    opacity: 0;
    padding: 0.5rlh 0 1rlh;
    transition: display 300ms ease-out allow-discrete, opacity 300ms ease-out allow-discrete;
}

details:open summary + * {
    opacity: 1;
}


@media (min-width: 60em) {
    figcaption {
        font-size: 0.764rem;
        line-height: 0.8rlh;
    }
}

::backdrop {
    background-color: transparent;
    transition: background-color 300ms, display 300ms allow-discrete, overlay 300ms allow-discrete;
}

:popover-open::backdrop {
    background-color: rgb(0 0 0 / 25%);
}

@starting-style {
    :popover-open::backdrop {
        background-color: transparent;
    }
}

/*
++++++++++++++++++ Images ++++++++++++++++++
 */

.cover {
    position: relative;

    picture {
        clip-path: var(--clip);
        display: block;
        overflow: hidden;
    }

    img {
        aspect-ratio: 16/9;
        object-fit: cover;
        width: 100%;
    }
}

.cover .plot {
    height: 100%;
    max-width: unset;
    position: absolute;
    top: 0;
    z-index: -1;
}

.poster {
    /*
    --clip: polygon(0.718% 4.618%, 0.718% 4.618%, 0.655% 9.178%, 0.506% 17.348%, 0.319% 28.167%, 0.143% 40.677%, 0.025% 53.919%, 0.013% 66.935%, 0.157% 78.764%, 0.502% 88.449%, 1.099% 95.03%, 1.995% 97.548%, 1.995% 97.548%, 3.457% 97.864%, 4.923% 97.96%, 6.393% 97.891%, 7.865% 97.714%, 9.338% 97.482%, 10.813% 97.252%, 12.287% 97.079%, 13.761% 97.017%, 15.233% 97.123%, 16.702% 97.452%, 16.702% 97.452%, 17.384% 97.645%, 18.073% 97.875%, 18.766% 98.12%, 19.463% 98.359%, 20.163% 98.571%, 20.863% 98.734%, 21.563% 98.827%, 22.26% 98.829%, 22.954% 98.717%, 23.644% 98.471%, 23.644% 98.471%, 24.542% 97.867%, 25.456% 97.373%, 26.382% 96.978%, 27.318% 96.67%, 28.261% 96.435%, 29.208% 96.262%, 30.156% 96.138%, 31.103% 96.051%, 32.044% 95.989%, 32.979% 95.939%, 32.979% 95.939%, 35.475% 95.985%, 37.971% 96.125%, 40.465% 96.34%, 42.958% 96.609%, 45.45% 96.909%, 47.943% 97.22%, 50.435% 97.521%, 52.927% 97.791%, 55.419% 98.009%, 57.912% 98.153%, 57.912% 98.153%, 60.194% 98.242%, 62.098% 98.139%, 63.719% 97.886%, 65.151% 97.529%, 66.489% 97.11%, 67.828% 96.674%, 69.26% 96.265%, 70.881% 95.926%, 72.785% 95.702%, 75.066% 95.637%, 75.066% 95.637%, 76.697% 95.722%, 79.058% 96.301%, 81.946% 97.185%, 85.159% 98.185%, 88.492% 99.114%, 91.743% 99.783%, 94.708% 100.002%, 97.184% 99.584%, 98.967% 98.341%, 99.854% 96.083%, 99.854% 96.083%, 99.876% 87.063%, 99.906% 77.451%, 99.939% 67.458%, 99.971% 57.299%, 99.995% 47.188%, 100.007% 37.337%, 100.001% 27.962%, 99.973% 19.276%, 99.917% 11.492%, 99.827% 4.825%, 99.827% 4.825%, 99.804% 4.3%, 99.75% 3.8%, 99.669% 3.329%, 99.562% 2.893%, 99.432% 2.496%, 99.279% 2.144%, 99.108% 1.843%, 98.919% 1.596%, 98.715% 1.41%, 98.497% 1.29%, 98.497% 1.29%, 98.045% 1.131%, 97.589% 1.006%, 97.13% 0.914%, 96.669% 0.852%, 96.207% 0.818%, 95.744% 0.811%, 95.281% 0.827%, 94.818% 0.866%, 94.356% 0.926%, 93.896% 1.003%, 93.896% 1.003%, 90.94% 1.057%, 88.038% 1.021%, 85.177% 0.94%, 82.347% 0.862%, 79.533% 0.832%, 76.724% 0.897%, 73.906% 1.102%, 71.068% 1.494%, 68.196% 2.12%, 65.279% 3.025%, 65.279% 3.025%, 63.069% 3.121%, 60.879% 2.955%, 58.705% 2.593%, 56.541% 2.101%, 54.382% 1.545%, 52.223% 0.99%, 50.058% 0.504%, 47.884% 0.152%, 45.694% -0.001%, 43.484% 0.111%, 43.484% 0.111%, 42.89% 0.218%, 41.741% 0.452%, 40.177% 0.782%, 38.336% 1.179%, 36.356% 1.612%, 34.377% 2.052%, 32.536% 2.469%, 30.972% 2.833%, 29.823% 3.113%, 29.229% 3.28%, 29.229% 3.28%, 28.177% 3.475%, 27.049% 3.354%, 25.867% 2.994%, 24.655% 2.473%, 23.434% 1.867%, 22.229% 1.252%, 21.062% 0.705%, 19.956% 0.303%, 18.934% 0.122%, 18.019% 0.239%, 18.019% 0.239%, 17.252% 0.479%, 16.482% 0.684%, 15.711% 0.852%, 14.939% 0.981%, 14.166% 1.071%, 13.391% 1.119%, 12.617% 1.125%, 11.842% 1.088%, 11.067% 1.005%, 10.293% 0.876%, 10.293% 0.876%, 9.391% 0.775%, 8.315% 0.603%, 7.125% 0.426%, 5.883% 0.31%, 4.648% 0.322%, 3.481% 0.528%, 2.444% 0.995%, 1.598% 1.787%, 1.002% 2.973%, 0.718% 4.618%);
    */
    clip-path: var(--clip);
    position: relative;

    img {
        aspect-ratio: 16/9;
        object-fit: cover;
        width: 100%;

    }

    figcaption {
        /*background-color: rgba( 0, 0, 0, 0.2 );*/
        background: radial-gradient(rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
        bottom: 0.5rlh;
        color: #fff;
        padding: 0.25rlh;
        position: absolute;
        right: 0.5rlh;
        text-align: right;
    }
}

@media ( orientation: landscape ) {
    .poster img, .cover img {
        aspect-ratio: 2.39;
    }
}

@media (min-width: 34em) {
    .poster figcaption {
        bottom: 1rlh;
        padding: 0.5rlh;
    }
}

.sidebar-image {
    clip-path: var(--clip);
    max-width: 20em;
    position: relative;

    img {
        aspect-ratio: auto;
        object-fit: cover;
        width: 100%;
    }
}

@media (min-width: 62em) {
    .sidebar-image {
        clip-path: var(--clip-vertical);
    }
}

/*
++++++++++++++++++ Layout ++++++++++++++++++
 */

body > header {
    --hheight: 2.75rlh;
    --hoffset: 0.25rlh;
    --hcolour: var(--co-bg);
    background-color: var(--hcolour);
    display: grid;
    grid-template-areas: "logo controls nav";
    grid-template-columns: 1fr auto auto;
    grid-template-rows: var(--hheight);
    hyphens: auto;
    margin: 0;
    padding: var(--hoffset) var(--site-pad);
    position: sticky;
    transition: background-color 200ms ease-out;
    top: 0;
    z-index: 10;
}

@media (min-width: 62em) {
    body > header {
        --hheight: 4rlh;
        --hoffset: 0.5rlh;
        gap: 0 1rlh;
        grid-template-areas: "... controls" "logo nav";
        grid-template-columns: auto 1fr;
        grid-template-rows: auto var(--hheight);
    }
}

main {
    overflow-x: clip;
    width: 100%;

    > * {
        margin: 0 0 4rlh;
        padding-left: var(--site-pad);
        padding-right: var(--site-pad);
    }

    > *:first-child {
        margin-top: 1rlh;
    }
}

footer {
    --bg: light-dark(var(--co-blue), var(--co-medium-blue));
    color: lab(95% -0.00 0.00);
    display: grid;
    grid-template-columns: 1fr;
    overflow-x: clip;
    position: relative;

    .bg {
        height: 2rlh;
        overflow: clip;
        width: 100%;
    }

    .bg svg {
        fill: var(--bg);
        scale: 150% 100%;
    }

    .text {
        align-items: first baseline;
        background-color: var(--bg);
        display: grid;
        gap: 1rlh;
        padding: 0.5rlh var(--site-pad) 1rlh;
    }
}

@media (min-width: 50em) {
    footer .bg {
        height: 4rlh;
    }

    footer .text {
        grid-template-columns: 1fr 1fr;
    }

    footer nav, footer .copyright {
        grid-row: 2;
    }
}

.skip-link {
    height: 5rlh;
    left: 0;
    position: absolute;
    top: 0;
    width: 1px;
}

article {
    display: grid;
    gap: 1rlh;
}

main > article {
    display: grid;
    gap: 1rlh;
    grid-template-areas: "poster" "details" "heading" "body" "extra";

    > header {
        grid-area: header;
    }

    > nav {
        clip-path: inset(50%);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        position: absolute;
        width: 1px;
    }

    > .article-body {
        grid-area: body;
        position: relative;
    }

    > .article-body + * {
        grid-area: extra;
    }
}

main > article > header {
    display: contents;

    h1 {
        grid-area: heading;
    }

    .details {
        grid-area: details;
        justify-self: start;
    }

    .poster {
        grid-area: poster;
    }
}

@media (min-width: 62em) {
    main > article {
        gap: 2rlh;
        grid-template-areas: "poster poster poster poster"
        "heading heading heading ..."
        "body body nav nav"
        "extra extra nav nav";
        grid-template-columns: 1fr 8fr 2fr 1fr;

        > nav {
            --bg: color-mix(in srgb, var(--co-light-blue) 20%, #fff 80%);
            align-self: start;
            background-color: light-dark(var(--bg), var(--co-medium-blue));
            clip-path: var(--clip-vertical);
            grid-area: nav;
            height: unset;
            margin: 0 0 0 1rlh;
            min-height: 15vw;
            overflow: hidden;
            padding: 1rlh 2rlh;
            position: sticky;
            top: 6rlh;
            width: unset;
        }

        .article-body,
        .article-extra { margin-right: 1rlh;}
    }

    main:has(.details) > article {
        grid-template-areas: "poster poster poster details"
        "heading heading heading ..."
        "body body nav nav"
        "extra extra nav nav";
    }

    article nav ul { overflow-x: hidden; }
}

article.simple {
    gap: 1rlh 2rlh;
    grid-template-areas: "heading" "body" "extra" "sidebar";

    .sidebar {
        grid-area: sidebar;
    }

    .article-body + * {
        grid-area: extra;
    }
}

@media (min-width: 62em) {
    article.simple {
        grid-template-areas: "heading heading sidebar sidebar" "body body sidebar sidebar" "extra extra sidebar sidebar";
    }
}


/*
++++++++++++++++++ Navigation ++++++++++++++++++
 */

.logo {
    grid-area: logo;
    height: var(--hheight);
    width: var(--hheight);

    > a {
        display: block;
    }

    > img {
        aspect-ratio: 1;
        height: var(--hheight);
        width: var(--hheight);
    }
}

.site-controls {
    align-items: center;
    display: flex;
    flex-flow: row-reverse;
    grid-area: controls;
    justify-self: end;

    > * {
        padding-right: 0.75rlh;
        position: relative;
    }

    > *::after {
        content: "|";
        position: absolute;
        right: 0.25rlh;
    }
}

.cs-toggle {
    padding-bottom: 0.25rlh;
    padding-top: 0.25rlh;
}


.site-nav {
    align-self: center;
    grid-area: nav;

    > button {
        background-color: transparent;
        color: var(--co-text);
        padding: 0.25rlh;
    }
}

.menu-toggle svg {
    width: 1rlh;
}

#main-menu {
    gap: 1rlh;
    margin-top: calc(var(--hheight) + var(--hoffset));
    opacity: 0;
    padding: 1rlh var(--site-margin);
    transition: opacity 500ms, display 500ms allow-discrete, overlay 500ms allow-discrete;
    width: 100%;

    &:popover-open {
        display: flex;
        flex-flow: column;
        height: calc(100svh - var(--hheight));
        opacity: 1;
    }

    a:not(.btn) {
        color: var(--co-text);
        font-family: var(--ft-code);
        font-size: 1rem;
        font-weight: 550;
        line-height: 1rlh;
        text-decoration: underline;
        text-transform: uppercase;
    }

    li > [popovertarget] {
        display: none;
        font-family: var(--ft-code);
        font-weight: 550;
        position: relative;
        text-transform: uppercase;
    }

    .submenu-title {
        display: block;
        font-family: var(--ft-code);
        font-size: 1rem;
        font-weight: 550;
        line-height: 1rlh;
        text-transform: uppercase;
    }
}

@starting-style {
    #main-menu:popover-open {
        opacity: 0;
    }
}

.submenu {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    width: 100%;

    h4 {
        font-weight: inherit;
    }

    li {
        margin-top: 0.25rlh;
    }

    li a {
        color: var(--co-text);
        display: inline-block;
        margin-left: 1rlh;
    }

    p, img {
        display: none;
    }
}


@media (min-width: 62em) {
    .site-nav {
        > [popovertarget] {
            display: none;
            position: relative;
        }

        > [popover] {
            display: block;
            position: relative;
        }
    }

    .site-controls {
        position: absolute;
        right: 0;
    }

    #main-menu {
        align-items: center;
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        margin-top: 0;
        opacity: 1;
        padding: 0;
        transition: none;

        a:not(.btn), .submenu-title {
            font-size: 0.764rem;
            font-weight: 600;
            text-decoration: none;
        }

        li > [popovertarget] {
            display: inline-flex;
            font-size: 0.764rem;
            font-weight: 600;
            position: revert;
        }

        .main-cfa {
            margin-left: auto;
            margin-right: 0;
        }

        .submenu-title {
            display: none;
        }
    }

    .submenu {
        --item-width: calc((var(--width) - 4rlh) * 0.25);
        display: revert;
        left: calc((100% - var(--width)) * 0.5);
        opacity: 0;
        position: fixed;
        right: calc((100% - var(--width)) * 0.5);
        top: calc(var(--hheight) + var(--hoffset));
        max-width: var(--width);
        transition: opacity 500ms, display 500ms allow-discrete, overlay 500ms allow-discrete;
        width: max-content;

        &:popover-open {
            border-radius: 0.25rlh;
            display: grid;
            gap: 1rlh;
            /*grid-auto-columns: 1fr;*/
            grid-auto-flow: column;
            grid-template-columns: repeat(auto-fit, var(--item-width));
            opacity: 1;
            padding: 0.5rlh;
        }

        li {
            /*min-width: calc( var(--width) * 0.166 - 5rlh );
            max-width: calc( var(--width) * 0.25 - 3rlh );*/
            width: var(--item-width);
        }

        li a {
            display: flex;
            flex-direction: column;
            gap: 0.5rlh;
            margin: 0;
        }

        h4 {
            font-family: var(--ft-code);
            font-size: 1rem;
            line-height: 1rlh;
        }

        p {
            display: block;
            font-family: var(--ft-text);
            font-size: 0.764rem;
            font-weight: 450;
            line-height: 0.8rlh;
            text-transform: none;
        }

        img {
            aspect-ratio: 16/9;
            display: block;
            justify-self: stretch;
            object-fit: cover;
            width: 100%;
        }
    }

    @starting-style {
        .submenu:popover-open {
            opacity: 0;
        }
    }
}

article > nav h2 {
    font-family: var(--ft-text);
    font-size: 1rem;
    line-height: 1rlh;
    margin-bottom: 0.5rlh;
}

article > nav li {
    /*overflow: hidden;*/
    width: 100%;

    + li {
        margin-top: 0.5rlh;
    }
}

article > nav li a {
    align-items: first baseline;
    display: flex;
    font-size: 0.764rem;
    font-weight: 600;
    line-height: 1rem;
    gap: 0.25rlh;
    translate: calc(-1em - 0.25rlh) 0;
    transition: translate 200ms ease-out;

    &.current {
        translate: 0 0;
    }

    i {
        padding-right: 0.25rlh;
        width: 1em;
    }
}

/*
++++++++++++++++++ Cards & Collections ++++++++++++++++++
 */

.cards {
    display: grid;
    gap: 1rlh;
    grid-template-columns: 1fr;
}

@media (min-width: 34em) {
    .cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 60em) {
    .cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 72em) {
    .cards {
        grid-template-columns: repeat(4, 1fr);
    }
}

.card {
    border: 1px solid var(--co-text);
    border-radius: 0 1rlh 0 1rlh;
    display: grid;
    gap: 0;
    grid-template-columns: 1fr;

    > * {
        padding: 0 0.5rlh;
        overflow: hidden;
    }
}

.card-title {
    border-bottom: 1px solid var(--co-text);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 4rlh;
    padding-bottom: 0.5rlh;
    padding-top: 0.5rlh;
    text-overflow: ellipsis;
}

.card-title a {
    font-family: var(--ft-code);
    font-size: 1rem;
    font-weight: 650;
    line-height: 1rlh;
    text-transform: uppercase;
    transition: color 300ms ease-out;

    &:hover {
        color: var(--co-light-blue);
    }

    &:visited {
        color: var(--co-light-blue);
    }
}

.card-text {
    align-self: start;
    font-size: 0.764rem;
    font-weight: 500;
    height: 4rlh;
    line-height: 0.8rlh; /* max. 3 lines, 2.4rlh + 1.5rlh padding + 0.1 comp */
    padding-bottom: 1rlh;
    padding-top: 0.6rlh;
    text-overflow: ellipsis;
}

.card-date {
    font-size: 0.764rem;
    font-weight: 500;
    line-height: 1rlh;
}

.card-more {
    font-size: 0.764rem;
    font-weight: 700;
    text-align: right;
    text-transform: capitalize;
}

.card-tags {
    border-top: 1px solid var(--co-text);
    font-family: var(--ft-code);
    font-size: 0.618rem;
    font-weight: 600;
    height: 2rlh;
    letter-spacing: 0.025em;
    line-height: 1rlh;
    margin-top: 0.5rlh;
    padding-bottom: 0.5rlh;
    padding-top: 0.5rlh;
    text-transform: uppercase;
}

@media (min-width: 60em) {
    .card-title {
        height: 4rlh;
        padding-bottom: 0.5rlh;
        padding-top: 0.5rlh;
    }

    .card-text {
        height: 5rlh;
        padding-bottom: 0.5rlh;
        padding-top: 0.5rlh;
    }
}

.collection {
    display: flex;
    flex-direction: column;
    gap: 2rlh;
    margin-left: 0;
    margin-top: 0;

    > li {
        display: contents;
    }
}

.collection-item {
    display: none;
    gap: 1rlh;
    grid-template-columns: 1fr;
    grid-template-areas: "poster" "title" "details";
    opacity: 0;
    transition: opacity 300ms ease-out allow-discrete, display 300ms ease-out allow-discrete;

    > header {
        grid-area: title;
        position: relative;
    }

    > figure {
        align-self: start;
        grid-area: poster;
    }

    > section {
        grid-area: details;
    }
}

.collection-item.filtered {
    display: grid;
    opacity: 1;

    @starting-style {
        opacity: 0;
    }
}

.item-title::after,
.item-text::after {
    background-color: var(--co-text);
    bottom: -0.5rlh;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    width: 100%;
}

.item-image img {
    aspect-ratio: 2;
    scale: 1.05;
}

.item-text, .item-date, .item-more {
    font-size: 0.764rem;
    line-height: 0.8rlh;
}

.item-text, .item-date {
    font-weight: 500;
}

.item-title {
    hyphens: auto;
}

.item-title a {
    text-decoration: none;
}

.item-text {
    position: relative;
}

.item-more {
    font-weight: 700;
    text-align: right;
    text-transform: capitalize;
}

.item-tags {
    font-family: var(--ft-code);
    font-size: 0.618rem;
    font-weight: 600;
    margin-left: 0;
    margin-top: 0.5rlh;
    padding: 0.5rlh 0;
    text-align: right;
    text-transform: uppercase;
}

.collection-filters {
    display: flex;
    gap: 1rlh;
}


@media (min-width: 34em) {
    .collection {
        gap: 4rlh;
    }

    .collection li:nth-of-type(2n+1) .collection-item {
        grid-template-areas: "title poster" "details poster";
        grid-template-columns: 1fr 2fr;
    }

    .collection li:nth-of-type(2n+2) .collection-item {
        grid-template-areas: "poster title" "poster details";
        grid-template-columns: 2fr 1fr;
    }

    .item-title {
        align-self: end;
    }

    .item-details {
        align-self: start;
    }

    .item-image img {
        aspect-ratio: 1.5;
        scale: 1;
    }
}

@media (min-width: 62em) {
    .item-image img {
        aspect-ratio: 2;
    }

    .collection-filters {
        display: block;
    }
}

.steps {
    counter-reset: steps;
    display: grid;
    gap: 1rlh;
    grid-template-columns: 1fr;
    list-style: none;
    margin: 0;
    padding: 0;
}

.steps li {
    counter-increment: steps;
    display: block;
    position: relative;

    &::before {
        content: counter(steps);
    }

    h4 {
        font-family: var(--ft-head);
        font-size: 1.235rem;
        font-weight: 700;
        grid-column: 2;
        line-height: 1rlh;
    }

    span {
        display: block;
        font-size: 0.764rem;
        font-weight: 500;
        line-height: 0.8rlh;
    }

    + li {
        margin-top: 0;
    }
}

@media (min-width: 60em) {
    .steps {
        grid-template-columns: 1fr 1fr;
    }
}


/*
++++++++++++++++++ Article ++++++++++++++++++
 */

.details {
    align-items: center;
    display: flex;
    font-family: var(--ft-code);
    font-size: 0.764rem;
    font-weight: 500;
    hyphens: none;
    line-height: 1rlh;
    text-transform: uppercase;

    dt {
        padding-right: 0.25rlh;
    }

    dd + dt {
        margin: 0 0 0 0.5rlh;
    }

    .tags {
        letter-spacing: 0.025em;
    }
}

@media (min-width: 62em) {
    .details {
        flex-direction: column;
        justify-content: end;

        dt {
            align-items: center;
            border: 1px solid var(--co-text);
            border-radius: 50%;
            display: inline-flex;
            height: 1.5rlh;
            justify-content: center;
            padding: 0;
            width: 1.5rlh;
        }

        dd + dt {
            margin: 1rlh 0 0 0;
        }
    }
}

.article-image img {
    border-radius: 0.25rlh;
}

.article-image figcaption {
    margin-top: 0.25rlh;
}

.article-image figcaption span {
    display: inline;
}



.article-body .topic {
    font-size: 1rem;
    font-variation-settings: 'wdth' 100;
    font-weight: 700;
    line-height: 1rlh;
    margin-bottom: 0.5rlh;
}

.yt {
    aspect-ratio: 16/9;
    position: relative;

    &.shorts {
        aspect-ratio: 9/16;
    }

    iframe {
        border: none;
        height: 100%;
        width: 100%;
    }
}

.callout {
    --co: var(--co-green);
    --co-light: color-mix(in srgb, var(--co) 20%, #fff 80%);
    background-color: light-dark(var(--co-light), transparent);
    border: 1px solid var(--co);
    border-radius: 0.25rlh;
    color: light-dark(var(--co-text), var(--co-light));
    display: grid;
    grid-template-columns: 1rlh auto;
    padding: 0.5rlh;
    position: relative;

    &.crucial {
        --co: var(--co-yellow);
    }

    &.critical {
        --co: var(--co-orange);
    }

    svg {
        grid-column: 1;
        margin-top: calc((1rlh - 1em) * 0.5)
    }

    h2, h3, h4 {
        font-size: 1rem;
        font-weight: 700;
        line-height: 1rlh;
    }
}

/*
++++++++++++++++++ Sidebar ++++++++++++++++++
 */

.widget + .widget {
    margin-top: 2rlh;
}

.widget .widget-title {
    font-family: var(--ft-head);
    font-size: 1.235rem;
    font-weight: 700;
    line-height: 1rlh;
}

.widget.highlight {
    --bg: color-mix(in srgb, var(--co-light-blue) 20%, #fff 80%);
    background-color: light-dark(var(--bg), var(--co-bg));
    border: 1px solid light-dark(transparent, var(--co-text));
    border-radius: 0.25rlh;
    padding: 1rlh;
}

@media (min-width: 62em) {
    .sidebar .widget {
        margin-left: 1rlh;
    }
}



/*
++++++++++++++++++ Footer ++++++++++++++++++
 */

footer {
    .wrapper {
        display: grid;
        gap: 1rlh;
    }

    img {
        height: 3rlh;
        width: auto;
    }

    .menu-link {
        color: lab(95% 0 0);
        font-size: 0.764rem;
        font-weight: 500;
        -text-decoration: underline;
        text-underline-offset: 0.1em;
    }

    p, p a, p a:visited {
        color: lab(95% 0 0);
        font-size: 0.764rem;
    }
}

.footer-links {
    display: flex;
    gap: 0.5rlh;
}