/* ============================================================================================= */
/* 0. CSS Reset                                                                                  */
/* --------------------------------------------------------------------------------------------- */
html, body {
    border: none;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6, p, blockquote, address, big, cite, code, em, font, img, small, strike, 
sub, sup, li, ol, ul, fieldset, form, label, legend, button, table, caption, tr, th, td {
    border: none;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0;
    text-align: inherit;
}

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

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

/* ============================================================================================= */
/* 1. Document Setup                                                                             */
/* --------------------------------------------------------------------------------------------- */
:root {
    --site-title-width: 650px;
    --base-splodge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 150 75'%3E%3Cpath fill='%23f6f6f6' d='M.25,18.74C2.21,9.19,14.18,4.18,17.07,3c19.1-8,28.06,4.91,55.75,4.21,23.32-.59,27.75-10,49.44-6.31,4.56.78,22.65,3.87,25.24,13.67,2,7.47-7.12,10.91-7.36,22.09-.29,13.23,12.21,19.15,9.47,27.35-2,5.9-10.22,8.07-15.78,9.46-21.89,5.48-29.7-5.14-54.7-5.26-14.66-.06-15.5,3.57-45.23,5.26-14.94.85-21.71.33-25.24-4.2-4.76-6.13,1.86-12.57-1-27.35C5.09,29.12-1.33,26.38.25,18.74Z'/%3E%3C/svg%3E");
    --transition-duration: .25s;
}
@media (prefers-reduced-motion) {
    :root {
        --transition-duration: 0;
    }
}

html {
    /* font-size: 6.25%; /* 1rem == 1px */
    scroll-behavior: smooth;
    overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) { html {
    scroll-behavior: auto;
} }

body {
    background: #ffffff;
    box-sizing: border-box;
    color: #000000;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}


#site-content { 
    overflow: hidden; /* TODO: Review */
}

article[id] {
    padding-block-start: 150px !important;
    margin-block-start: -150px !important;
}

/* ============================================================================================= */
/* 2. Typography                                                                                 */
/* --------------------------------------------------------------------------------------------- */
@font-face { font-family: "Avenir Next"; src: url("/fonts/77156710-6a58-4606-b189-b4185e75967b.woff2")       format("woff2"), url("/fonts/3d5260a1-e4cd-4567-80ed-69d23c40355f.woff")       format("woff"); font-weight: 300; font-style: normal; }
@font-face { font-family: "Avenir Next"; src: url("/fonts/77caabd3-1877-4634-85c8-8e398a093b99.woff2")       format("woff2"), url("/fonts/e388ac99-8c6a-4451-8690-1d15b4d45adb.woff")       format("woff"); font-weight: 400; font-style: normal; }
@font-face { font-family: "Avenir Next"; src: url("/fonts/014f2daa-c310-4a36-b9fd-79a8e0c48d44.woff2")       format("woff2"), url("/fonts/12b00842-ec20-4c7f-aa72-802fb00f6cc4.woff")       format("woff"); font-weight: 400; font-style: italic; }
@font-face { font-family: "Avenir Next"; src: url("/fonts/e78b17bb-11fb-4860-8d66-4ee0d0c1e117.woff2")       format("woff2"), url("/fonts/d4ffabb3-dd7c-472a-bdfb-6700383c6354.woff")       format("woff"); font-weight: 700; font-style: normal; }
@font-face { font-family: "Avenir Next"; src: url("/fonts/77156710-6a58-4606-b189-b4185e75967b-ext.woff2")   format("woff2"), url("/fonts/3d5260a1-e4cd-4567-80ed-69d23c40355f-ext.woff")   format("woff"); font-weight: 300; font-style: normal; unicode-range: U+0100-017F,U+0180-024F,U+1E00-1EFF,U+02B0-02FF; }
@font-face { font-family: "Avenir Next"; src: url("/fonts/77caabd3-1877-4634-85c8-8e398a093b99-ext.woff2")   format("woff2"), url("/fonts/e388ac99-8c6a-4451-8690-1d15b4d45adb-ext.woff")   format("woff"); font-weight: 400; font-style: normal; unicode-range: U+0100-017F,U+0180-024F,U+1E00-1EFF,U+02B0-02FF; }
@font-face { font-family: "Avenir Next"; src: url("/fonts/014f2daa-c310-4a36-b9fd-79a8e0c48d44-ext.woff2")   format("woff2"), url("/fonts/12b00842-ec20-4c7f-aa72-802fb00f6cc4-ext.woff")   format("woff"); font-weight: 400; font-style: italic; unicode-range: U+0100-017F,U+0180-024F,U+1E00-1EFF,U+02B0-02FF; }
@font-face { font-family: "Avenir Next"; src: url("/fonts/9851da0a-2481-4687-bbeb-ed4ab170dc38-ext.woff2")   format("woff2"), url("/fonts/cebce072-9561-4c6d-8c89-f0cefec63289-ext.woff")   format("woff"); font-weight: 700; font-style: normal; unicode-range: U+0100-017F,U+0180-024F,U+1E00-1EFF,U+02B0-02FF; }
@font-face { font-family: "Avenir Next"; src: url("/fonts/e78b17bb-11fb-4860-8d66-4ee0d0c1e117-ext.woff2")   format("woff2"), url("/fonts/d4ffabb3-dd7c-472a-bdfb-6700383c6354-ext.woff")   format("woff"); font-weight: 700; font-style: normal; unicode-range: U+0100-017F,U+0180-024F,U+1E00-1EFF,U+02B0-02FF; }
@font-face { font-family: "Avenir Next"; src: url("/fonts/77156710-6a58-4606-b189-b4185e75967b-greek.woff2") format("woff2"), url("/fonts/3d5260a1-e4cd-4567-80ed-69d23c40355f-greek.woff") format("woff"); font-weight: 300; font-style: normal; unicode-range: U+0370-03FF; }
@font-face { font-family: "Avenir Next"; src: url("/fonts/77caabd3-1877-4634-85c8-8e398a093b99-greek.woff2") format("woff2"), url("/fonts/e388ac99-8c6a-4451-8690-1d15b4d45adb-greek.woff") format("woff"); font-weight: 400; font-style: normal; unicode-range: U+0370-03FF; }
@font-face { font-family: "Avenir Next"; src: url("/fonts/014f2daa-c310-4a36-b9fd-79a8e0c48d44-greek.woff2") format("woff2"), url("/fonts/12b00842-ec20-4c7f-aa72-802fb00f6cc4-greek.woff") format("woff"); font-weight: 400; font-style: italic; unicode-range: U+0370-03FF; }
@font-face { font-family: "Avenir Next"; src: url("/fonts/e78b17bb-11fb-4860-8d66-4ee0d0c1e117-greek.woff2") format("woff2"), url("/fonts/d4ffabb3-dd7c-472a-bdfb-6700383c6354-greek.woff") format("woff"); font-weight: 700; font-style: normal; unicode-range: U+0370-03FF; }
@font-face { font-family: "Avenir Next"; src: url("/fonts/174d458a-81e0-4174-9473-35e3bf0a613c.woff2")       format("woff2"), url("/fonts/57a79aa3-9b06-4ba7-a9a4-2b766d826ecf.woff")       format("woff"); font-weight: 300; font-style: normal; unicode-range: U+0400-04FF; }
@font-face { font-family: "Avenir Next"; src: url("/fonts/7db1f672-3a8f-4d19-9c49-7f61aed450b5.woff2")       format("woff2"), url("/fonts/4ab86b35-c0c2-42b5-98ad-4b6eba66b197.woff")       format("woff"); font-weight: 400; font-style: normal; unicode-range: U+0400-04FF; }
@font-face { font-family: "Avenir Next"; src: url("/fonts/b17468ea-cf53-4635-984b-4d930a68ed4d.woff2")       format("woff2"), url("/fonts/4d1d0d0d-9ea6-4117-901f-8b32ca1ab936.woff")       format("woff"); font-weight: 400; font-style: italic; unicode-range: U+0400-04FF; }
@font-face { font-family: "Avenir Next"; src: url("/fonts/40d36b4a-60c6-460a-bf43-4c948c23563e.woff2")       format("woff2"), url("/fonts/45b78f45-e639-4836-8612-e0892e120f14.woff")       format("woff"); font-weight: 700; font-style: normal; unicode-range: U+0400-04FF; }
@font-face { font-family: "Avenir Next"; src: url("/fonts/281f890c-8412-4ee3-84ed-8b5d062d2ab8.woff2")       format("woff2"), url("/fonts/5729f02e-f6b0-4f35-8ee5-c2cffa65fa76.woff")       format("woff"); font-weight: 300; font-style: normal; unicode-range: U+10A0-10FF; }
@font-face { font-family: "Avenir Next"; src: url("/fonts/281f890c-8412-4ee3-84ed-8b5d062d2ab8.woff2")       format("woff2"), url("/fonts/5729f02e-f6b0-4f35-8ee5-c2cffa65fa76.woff")       format("woff"); font-weight: 400; font-style: normal; unicode-range: U+10A0-10FF; }
@font-face { font-family: "Avenir Next"; src: url("/fonts/2200dfff-da50-40b0-bc12-5e4b872a1998.woff2")       format("woff2"), url("/fonts/dc10b3bd-5076-4df5-a5f5-e5961f4a6938.woff")       format("woff"); font-weight: 700; font-style: normal; unicode-range: U+10A0-10FF; }
@font-face { font-family: "Avenir Next"; src: url("/fonts/2a1ae9a5-b6b5-405c-b660-bbdf1b356952.woff2")       format("woff2"), url("/fonts/a8aeea1b-1a9d-45b7-8ad9-7c71824599e2.woff")       format("woff"); font-weight: 300; font-style: normal; unicode-range: U+0600-06FF,U+FB50-FDFF,U+FE70-FEFF; }
@font-face { font-family: "Avenir Next"; src: url("/fonts/6ea5fa46-5311-450b-8744-288a30c55348.woff2")       format("woff2"), url("/fonts/d9e4040d-32ff-4a1c-ac04-927a781da1f5.woff")       format("woff"); font-weight: 400; font-style: normal; unicode-range: U+0600-06FF,U+FB50-FDFF,U+FE70-FEFF; }
@font-face { font-family: "Avenir Next"; src: url("/fonts/97694c53-4e94-4f9e-969b-a148adfcdcfd.woff2")       format("woff2"), url("/fonts/8b01637a-f445-4f10-92ea-b84a355f7690.woff")       format("woff"); font-weight: 700; font-style: normal; unicode-range: U+0600-06FF,U+FB50-FDFF,U+FE70-FEFF; }
@font-face { font-family: "Avenir Next"; src: url("/fonts/31da4b04-f98a-4b5f-b545-a31d26da99e5.woff2")       format("woff2"), url("/fonts/d98fb015-7ef6-404f-a58a-5c9242d79770.woff")       format("woff"); font-weight: 300; font-style: normal; unicode-range: U+0590-05FF,U+FB00-FB4F; }
@font-face { font-family: "Avenir Next"; src: url("/fonts/31da4b04-f98a-4b5f-b545-a31d26da99e5.woff2")       format("woff2"), url("/fonts/d98fb015-7ef6-404f-a58a-5c9242d79770.woff")       format("woff"); font-weight: 400; font-style: normal; unicode-range: U+0590-05FF,U+FB00-FB4F; }
@font-face { font-family: "Avenir Next"; src: url("/fonts/32a2c5cf-6736-44a6-a276-49ba7e030944.woff2")       format("woff2"), url("/fonts/fa71df11-7b19-4baf-8ff7-3537dea718f0.woff")       format("woff"); font-weight: 400; font-style: italic; unicode-range: U+0590-05FF,U+FB00-FB4F; }
@font-face { font-family: "Avenir Next"; src: url("/fonts/a9eaf4d3-6427-42df-9306-3ea1270f7b1a.woff2")       format("woff2"), url("/fonts/f4a085c3-1c64-4fc0-a598-26f3e658c2b0.woff")       format("woff"); font-weight: 700; font-style: normal; unicode-range: U+0590-05FF,U+FB00-FB4F; }
@font-face { font-family: "Avenir Next"; src: url("/fonts/94aa531e-7746-4df0-bb6e-349891f2eda5.woff2")       format("woff2"), url("/fonts/121524c1-8d82-4155-bfb3-fd2f15f09e93.woff")       format("woff"); font-weight: 300; font-style: normal; unicode-range: U+0900-097F; }
@font-face { font-family: "Avenir Next"; src: url("/fonts/3ae1e25e-3aa6-4061-a016-a079159f9d65.woff2")       format("woff2"), url("/fonts/f1799750-0952-403f-8108-b2402eed0f62.woff")       format("woff"); font-weight: 400; font-style: normal; unicode-range: U+0900-097F; }
@font-face { font-family: "Avenir Next"; src: url("/fonts/41331c3c-3759-4462-8695-33c9a21b6a5b.woff2")       format("woff2"), url("/fonts/31e0c094-e345-4a54-a797-d5f1a5885572.woff")       format("woff"); font-weight: 700; font-style: normal; unicode-range: U+0900-097F; }

body {
    font-family: "Avenir Next", Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1;
}


/* ============================================================================================= */
/* 4. Elements                                                                                   */
/* --------------------------------------------------------------------------------------------- */

main {
    display: block;
    flex-grow: 1;
}

/* Text ---------------------------------------------------------------------------------------- */
/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.25;
}
h1, .heading-size-1 { font-size: 48px; }
h2, .heading-size-2 { font-size: 36px; }
h3, .heading-size-3 { font-size: 30px; }
h4, .heading-size-4 { font-size: 24px; }
h5, .heading-size-5 { font-size: 18px; }
h6, .heading-size-6 { font-size: 16px; }

/* Paragraphs */
p     { margin: 0; }
p + p { margin-top: 10px; }

/* Font modifiers */
em, i, q, dfn {
    font-style: italic;
}

em em, em i, i em, i i, cite em, cite i {
    font-weight: bolder; /* TODO */
}

a {
    color: inherit;
}

/* Skipped following lines in TwentyTwenty stylesheet:
	368 to 944 (Elements)
	except list options
	then everything up to 1350 (Site Header)
*/

/* Lists --------------------------------------------------------------------------------------- */
ul, ol {
    margin-block-start: 0;
    margin-inline-end: 0;
    margin-block-end: 30px;
    margin-inline-start: 30px;
}

ul { list-style: disc; }
ul ul { list-style: circle; }
ul ul ul { list-style: square; }

ol { list-style: decimal; }
ol ol { list-style: lower-alpha; }
ol ol ol { list-style: lower-roman; }

    li {
        line-height: 1.5;
        margin: 0.5px 0 0 2px;
    }

    li > ul,
    li > ol {
        margin: 1rem 0 0 2rem;
    }

.reset-list-style,
.reset-list-style ul,
.reset-list-style ol {
    list-style: none;
    margin: 0;
}

.reset-list-style li {
    margin: 0;
}


/* ============================================================================================= */
/* 5. Header                                                                                     */
/* --------------------------------------------------------------------------------------------- */

/* Skip header link */
.skip-link {
    /* Hide */
    clip: rect(1px,1px,1px,1px);
    word-wrap: normal;
    border: 0;
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    overflow: hidden;
    padding: 0;
    position: absolute;
    transform: scale(0);
    pointer-events: none;
    transition: transform .25s;

    /* Show */
    &:focus {
        clip: auto;
        -webkit-clip-path: none;
        clip-path: none;
        height: auto;
        width: auto;
        transform: scale(1);
        pointer-events: all;
    }

    /* Design */
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 999999;
    display: block;
    font-size: 1.25rem;
    color: #000000;
    --mask: var(--base-splodge, url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100' height='100' /%3E%3C/svg%3E"));
    mask: var(--mask);
    mask-size: 100% 100%;
    background: center / calc(100% - 10px) calc(100% - 10px) #000 no-repeat;
    background-image: var(--mask);
    padding: 1.5rem;
    text-decoration: underline;

    &:after {
        display: block;
        content: "";
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        background-color: var(--site-colour);
        mix-blend-mode: multiply;
        filter: grayscale(1);
        opacity: .5;
    }
    &:hover:after {
        filter: grayscale(.5);
    }
}

/* Main header */
.site-header {
    display: flex;
    flex-wrap: nowrap;

    align-items: center;
    justify-content: space-between;
    margin: 0 0 75px;
    width: 100%;
    --header-padding-bottom: 20px;
    padding: 20px 30px var(--header-padding-bottom);
    
    position: sticky;
    top: 0;
    z-index: 99;
    background: none;

    @media (min-width: 481px) and (max-width: 875px) { & {
        flex-direction: column;
        justify-content: center;

        .site-branding {
            text-align: center;
        }
    } }
    @media (max-width: 875px) { & {
        padding-bottom: 10px;
        margin: 0 0 7.375vw;
    } }

    /* Branding */
    .site-branding {
        order: 1;
        color: #000;
        z-index: 2;

        .site-title {
            font-size: 1.5rem;
        }

        .site-description {
            display: inline-block;
            font-size: 1.125rem;
            margin: .5rem 0 .25rem;

            @media (max-width: 480px) { & {
                margin-inline-end: -85px;
            } }
        }
    }


    /* Squiggle */
    .header-squiggle {
        order: 1;
        position: relative;
        display: block;
        align-self: flex-end;
        transform: translateY(var(--header-padding-bottom));
        bottom: 0;
        margin: 0 -50px;
        margin: 0;
        width: auto;
        flex-grow: 1;
        flex-shrink: 1;
        container-type: inline-size;
        padding-bottom: 1px;
        margin-bottom: -1px;
        --branding-offset: -712px;
        
        /* Mask aliasing lines at edges of squiggle */
        &:before, &:after {
            content: "";
            display: block;
            position: absolute;
            bottom: 1px;
            width: calc(100% + 110px);
            height: 100vh;
        }
        &:before {
            left: -55px;
            --diff: max(calc((100% - 1680px) / 2), 0px);
            background: linear-gradient(90deg, var(--site-colour) calc(var(--diff) + 10px), rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) calc(100% - var(--diff) - 10px), var(--site-colour) 0%);
        }
        &:after {
            right: -50px;
            width: calc(100% + 100px);
            padding-bottom: min(calc(((100% + 100px) * 0.052) - 1px), calc((1680px * 0.052) - 1px));
            border-block-start: 100vh solid var(--site-colour);
        }
        @container (max-width: 350px) { 
            &:before {
                display: none;
            }
            &:after {
                transform: translateX(var(--branding-offset)) translateY(-15px) translateY(2px);
                width: calc(100vw + 100px);
                padding: 0;
                right: unset;
            } 
        }
        @container (max-width: 0px) { &:after {
                transform: translateX(var(--branding-offset)) translateY(0px);
                width: 200vw;
        } }
        @media (max-width: 875px) { &:after {
            transform: none;
            padding: 0;
        } }


        @media (max-width: 800px) { & {
            --branding-offset: -394px;
        } }

        @media (max-width: 875px) {
            order: 2;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            transform: none;
        }

        svg {
            display: block;
            z-index: 1;
            position: absolute;
            left: 50%;
            bottom: 1px;
            transform-origin: top;
            transform: translateX(-50%);
            width: calc(100% + 100px);
            max-width: 1680px;
            height: auto;
            
            border: 100vw solid var(--site-colour);
            border-block-start-width: 100vh;
            border-block-end: none;
            box-sizing: content-box;

            @container (max-width: 350px) { & {
                left: unset; bottom: unset;
                transform: translateX(var(--branding-offset)) translateY(-15px) scaleY(0.75);
                margin: 0 0px;
                width: calc(100vw + 100px);
                
                border: none;
                box-shadow: 0 -101vh 0 100vh var(--site-colour);
            } }
            @container (max-width: 0px) { & {
                transform: translateX(-60%) scaleY(0.75) translateY(-2px);
            } }
            @media (max-width: 875px) { & {
                left: unset;
                bottom: unset;
                transform: translateX(0px) scaleY(0.5) translateY(-2px);
                margin: 0 0px;
                width: calc(100vw + 100px);
                min-width: 500px;
                
                border: none;
                box-shadow: 0 -101vh 0 100vh var(--site-colour);
            } }
        }
    }


    /* Header menu */
    .site-nav {
        order: 1;
        flex: 0 0 auto;
        margin-bottom: auto;
        z-index: 999;

        /* Menu toggle */
        #site-nav-toggle {
            display: none;

            color: inherit;
            text-decoration: none;
            outline: none;

            font-size: 1.25rem;
            font-family: inherit;
            padding: calc(0.66 * 20px);
            margin: 5px -5px 0 15px;

            background: center / 0% 0% no-repeat;
            background-image: var(--base-splodge, none);
            transition: background-size .25s;

            cursor: pointer;

            &:hover, &:focus-visible {
                background-size: 100% 100%;
            }
            &:focus-visible {
                text-decoration: underline;
            }

            @media (max-width: 480px) { & {
                display: block;
                top: 25px; right: 25px;
                z-index: 999;

                &[aria-expanded="true"]  .open,
                &[aria-expanded="false"] .close {
                    display: none;
                }

                &[aria-expanded="false"] {
                    & ~ #site-nav-items {
                        display: none;
                    }
                }
                &[aria-expanded="true"] {
                    position: fixed;
                    margin: 0;

                    body:has(&) > *:not(header) {
                        display: none;
                    }

                    & ~ #site-nav-items {
                        display: block;
                        position: fixed;
                        top: 0; right: 0; bottom: 0; left: 0;
                        z-index: 9;

                        padding: 70px 35px 0;
                        background: var(--site-colour);

                        text-align: center;

                        pointer-events: none;

                        li {
                            pointer-events: all;
                        }

                        ul {
                            position: static;
                            transform: none;
                            padding: 0;
                        }
                    }

                    html:has(&) {
                        overflow: hidden;
                    }
                }
            } }
        }

        ul#site-nav-items {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            list-style: none;
            margin: 0;

            /* Sub-menu */
            & > li {
                position: relative;
            }
            ul {
                position: absolute;
                z-index: 9;
                right: 0;
                left: auto;

                margin: 0;

                display: flex;
                flex-direction: column;
                list-style: none;
                transform: scaleY(0);
                transform-origin: top;
                transition: transform .25s;
                background: var(--site-colour);
                border-radius: 0 0 20px 20px;
                padding: 20px;

                /* Visable */
                li:is(:hover, :focus-within) > & {
                    transform: scaleY(1);
                }
            }
        }

        /* Menu items */
        ul a {
            color: inherit;
            display: inline-block;
            text-decoration: none;
            outline: none;

            font-size: 1.25rem;
            padding: calc(0.66 * 20px);

            background: center / 0% 0% no-repeat;
            background-image: var(--menu-item-background, none);
            transition: background-size .25s;
        }
        ul ul a {
            font-size: 1rem;
        }

        /* Highlight link */
        li:has(li.current-page-item) > a,
        li.current-page-item > a, 
        li > a:is(:hover, :focus) {
            background-size: 100% 100%;
            color: #000000;
        }

        /* Focused link */
        li a:focus-visible {
            text-decoration: underline;
        }

        /* Current page */
        li.current-page-item > a {
            filter: brightness(1);

            /* Splodge indicator */
            /* Hide if another item is hovered/focused */
            nav:has(&) button:hover,
            ul:hover li:has(&) > a:not(:hover),
            ul:focus-within li:has(&) > a:not(:focus),
            ul ul:hover &:not(:hover),
            ul ul:focus-within &:not(:focus),
            li:has(&) li:not(hover) > a:not(:hover, :focus) {
                background-size: 0% 0%;
            }

            /* Dot indicator */
            li li &:after {
                content: "";
                display: block;
                position: absolute;
                left: -5px;
                top: 50%;
                width: 10px;
                height: 10px;
                border-radius: 100%;
                background: #ffffff;

                --scale: scale(1);
                transform: translate(-25%, -50%) var(--scale);
                transition: transform .25s;
            }
            /* Hide when splodge indicator shown */
            li li &:is(:hover, :focus):after {
                --scale: scale(0);
            }
        }

        /* Splodges */
        /* An+B where A = number of splodges availalbe */
        li:nth-of-type(   5n+5) a,
        li li:nth-of-type(5n+1) a {
            --menu-item-background: var(--base-splodge);
        }

        li:nth-of-type(   5n+4) a,
        li li:nth-of-type(5n+2) a {
            --menu-item-background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 150 75'%3E%3Cpath fill='%23f6f6f6' d='M23.43,12.41c17.4,3.95,25.29-.87,57.43-6.49,34.48-6,55.72-9.56,61.69,0,3.11,5-.77,9.19,3.19,24.9,2.28,9,4.36,10.8,4.26,16.24-.23,11.71-10.18,20.37-11.7,21.66C123.7,81,107.93,70,68.1,70.88,36.36,71.62,30.26,79,19.17,72-1.39,58.84-5,17.61,6.41,10.25,10.39,7.68,14.42,10.37,23.43,12.41Z'/%3E%3C/svg%3E");
        }

        li:nth-of-type(   5n+3) a,
        li li:nth-of-type(5n+3) a {
            --menu-item-background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 150 75'%3E%3Cpath fill='%23f6f6f6' d='M15.27,68.49c9.33,6.69,20,6.13,35.54,5.1C75.72,71.94,78.13,64.42,97,65c22.17.68,28.32,11.35,37.81,5.53,10.23-6.27,14.58-25.71,15.06-37.24,0-.22,0-.38,0-.5.26-7,1-26.3-9.69-31.62-5.73-2.86-11.23.06-21.54,3.06C98.31,10.13,70.33,12,50.81,8.31A95.39,95.39,0,0,0,31,7c-9.3.33-12.84,1.81-15,3C9.65,13.52,6.73,19.27,5.57,21.57-1.44,35.43,1.2,58.42,15.27,68.49Z'/%3E%3C/svg%3E");
        }

        li:nth-of-type(   5n+2) a,
        li li:nth-of-type(5n+4) a {
            --menu-item-background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 150 75'%3E%3Cpath fill='%23f6f6f6' d='M.59,36.18C5.21,12.88,13.78,4.73,20.87,1.65c16-6.95,28,10.38,57.79,9.14,23.6-1,28.33-12.4,41.56-8.12,25.06,8.09,37.78,58.61,24.33,70.07-10,8.51-27.93-10.09-66.91-5.08-7.28.93-8,1.76-23.31,4.06-36.74,5.53-44.77,2.64-48.67-2C3.71,67.34,3,64.4,1.61,58.52A60.63,60.63,0,0,1,.59,36.18Z'/%3E%3C/svg%3E%0A");
        }

        li:nth-of-type(   5n+1) a,
        li li:nth-of-type(5n+5) a {
            --menu-item-background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 150 75'%3E%3Cpath fill='%23f6f6f6' d='M1.53,21.21C7.54,6.31,29.18,4.07,41.34,2.8c22.1-2.29,25.48,5,49,5.42C124,8.77,136.57-6,145.44,2.8c10,9.94,1.32,36-5.1,55.22-2.91,8.72-5.24,12.76-9.19,15.16-8.65,5.26-17-2.26-31.64-5.41-25.27-5.45-31.13,10.31-57.15,5.41-6.7-1.26-22.2-4.43-32.66-18.41C8.23,52.81-4.29,35.63,1.53,21.21Z'/%3E%3C/svg%3E");
        }
    }
}


/* ============================================================================================= */
/* 6. Main                                                                                       */
/* --------------------------------------------------------------------------------------------- */
main {
    article > :is(h1, h2) {
        display: block;
        margin: 30px auto 60px;
        font-size: 48px;
        font-weight: 600;
        text-align: center;
    }

    section {
        display: grid;
        grid-template-columns: 50% 1fr;
        grid-template-rows: auto;

        max-width: 1680px;
        /* min-height: 500px; */
        margin: 75px auto;
        &:nth-child(1) { margin-top: 0; }
        
        /* Image */
        & > .figure {
            grid-column: 1;
            align-self: center;
            justify-self: center;
            margin: 0;

            max-width: 90%;
            max-height: 100%;

            &.padding {
                padding: 30px;
            }
        }

        /* Text */
        & > .content {
            grid-column: 2;
            align-self: center;
            padding: 30px;
        
            word-break: break-word;
            word-wrap: break-word;

            text-align: left;

            h2,h3 {
                text-align: inherit;
                margin-bottom: 30px;
            }

            p {
                line-height: 1.5;
                margin: 30px auto;
            }

            a.btn {
                padding: 10px 20px;
                font-size: 1.25rem;
                font-weight: 400;
                text-decoration: none;
                color: #000;
                background-color: var(--site-colour);
                border: 1px solid #000;
                transition: color .25s, background-color .25s;

                word-wrap: normal;
                word-break: normal;
                white-space: nowrap;

                &:hover, &:focus-visible {
                    background-color: #000;
                    color: #fff;
                }

                &.splodge {
                    padding: 15px 30px;
                    border: none;
                    outline: none;
                    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 150 75'%3E%3Cpath d='M1.53,21.21C7.54,6.31,29.18,4.07,41.34,2.8c22.1-2.29,25.48,5,49,5.42C124,8.77,136.57-6,145.44,2.8c10,9.94,1.32,36-5.1,55.22-2.91,8.72-5.24,12.76-9.19,15.16-8.65,5.26-17-2.26-31.64-5.41-25.27-5.45-31.13,10.31-57.15,5.41-6.7-1.26-22.2-4.43-32.66-18.41C8.23,52.81-4.29,35.63,1.53,21.21Z'/%3E%3C/svg%3E");
                    mask-size: 100% 100%;

                    &:focus-visible {
                        text-decoration: underline;
                    }
                }
            }

            a {
                text-decoration-thickness: 1px;
                text-underline-offset: 3px;
                text-decoration-skip-ink: all;
            }
            a:not(.btn):hover {
                text-decoration-style: dotted;
            }

            *:nth-last-child(1) {
                margin-block-end: 0;
            }
        }
    }
    /* Alternated sections */
    section:where(.content-left),
    section:where(:nth-of-type(even):not(.content-right)),
    :where(article.reverse-sections) section:where(:nth-child(odd):not(.content-right)) {
        text-align: right;

        /* Imaage */
        & > .figure {
            grid-column: 2;
            grid-row: 1;
        }
        /* Text */
        & > .content {
            grid-column: 1;
            grid-row: 1;

            text-align: right;

            ul { 
                direction: rtl;
            }
            ul > li > * { 
                direction: ltr;
            }
        }
    }

    @media (max-width: 600px) {
        section {
            grid-template-columns: 100%;

            /* Imaage */
            & > .figure {
                grid-column: 1;
                grid-row: 1;
            }
            /* Text */
            & > .content {
                grid-column: 1;
                grid-row: 2;

                text-align: center;
            }
        }
    }

    /* TODO buttons */
    /* 
    .wp-block-media-text.has-media-on-the-right .wp-block-buttons {
        justify-content: end;
    } 
    */

    /* TODO img */
    /* 
    .entry-content .wp-block-media-text__media {
        position: relative;
        min-height: 200px;
        height: 100%;
    }
    .entry-content .wp-block-media-text__media img {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        min-height: 200px;
        height: 100%;
    }
    */

}