@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght,MONO@0,300..800,1;1,300..800,1&family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    font-family: 'Google Sans', sans-serif;
    font-size  : 12px;

    --card_tan  : #beb198;
    --card_gray : #68717d;
    --card_white: #fafafa;

    --aside_width: 185px;
    --nav_width  : 180px;
    --lip_width  : 12px;
    --lip_height : 70px;

    --grid_row_header: 85px;
    --grid_row_main  : 1fr;
    --grid_row_footer: 50px;

    --text                    : black;
    --muted_text              : #777;
    --headers                 : #66d;
    --light_gray              : #dadada;
    --nav_primary_links_border: #804d4d;
    --off_white               : #f0f0f0;
    --element_border          : #cfcfcf;
    --block_quote_left        : #0c0;
    --aside_border_right      : #ddd;
    --nav_border_lip_border   : #699;
    --nav_background          : #eee;
    --hard_border             : silver;
    --cell_background         : #f6f6f6;
    --value_dark              : green;
    --value_light             : lightgreen;

    --header_background: linear-gradient(
        to bottom,
        #568cc2  0px,
        #568cc2 55px,
        #547ea8 55px,
        #78a5d2 60px,
        #6699cc 80px,
        #d3d3d3 80px
    );

    --aside_background  : repeating-linear-gradient(
        to bottom,
        #e2e7ed,
        #e2e7ed 1px,
        #eee 1px,
        #eee 2px
    );
}

body {
    margin               : 0;
    background-color     : white;
    color                : var( --text );
    display              : grid;
    min-height           : 100vh;
    grid-template-rows   : var( --grid_row_header ) var( --grid_row_main ) var( --grid_row_footer );
    grid-template-columns: var( --aside_width ) 1fr var( --nav_width );
    grid-template-areas  :
        'header header header'
        'aside main nav'
        'footer footer footer';

    .hidden {
        display: none;
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: 'Josefin Sans', sans-serif;
    }

    ::selection, ::-moz-selection {
        background-color: var( --value_light )
    }

    a:hover {
        color: var( --value_dark );
    }

    pre, code {
        font-family: 'Google Sans Code', sans-serif !important;
    }

    pre {
        line-height: 1.25em !important;
    }

    code {
        font-size: 0.9em !important;
    }

    div.border_lip {
        border-top            : white 8px solid;
        border-left           : white var( --lip_width ) solid;
        border-top-left-radius: calc( var( --lip_width ) * 2 );
        transform             : scaleY(0.5);
        transform-origin      : top left;
        clip-path             : polygon(
               0    0,
            100%    0,
            100% 100%,
            12px 100%,
               0 calc( 100% - 4px )
        );
        filter: drop-shadow( 0px 0px 2px rgba( 0, 0, 0, 0.5 ) );
    }

    label.menu_toggle {
        position        : absolute;
        border-radius   : 0.5rem;
        cursor          : pointer;
        border          : 1px solid var( --element_border );
        background-color: var( --light_gray );

        font-size : 2.125rem;
        width     : 3rem;
        height    : 3rem;
        text-align: center;

        &:hover {
            background-color: var( --off_white );
        }
    }

    .nav_menu_toggle, .blog_menu_toggle {
        display: none;
    }

    aside section h3,
    nav section.primary_offsite_links a {
        display         : block;
        padding         : 0.125em 0.25em;
        width           : calc( 100% - 0.75em );
        height          : 1.25em;
        background-color: var( --light_gray );
        border          : 1px solid var( --nav_primary_links_border );
        border-radius   : 0.5rem;

        img {
            width       : 16px;
            height      : 16px;
            margin-right: 0.125em;
        }
    }

    header {
        grid-area: header;
        position : relative;

        div.carousel {
            a {
                position: absolute;
                top     : 0;
                left    : 0;
                display : block;
                width   : 400px;
                height  : 100px;

                img {
                    width          : 100%;
                    height         : 100%;
                    object-fit     : cover;
                    object-position: center;
                }

                --carousel_base_curve: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100'><path d='M0,100 L100,100 C133,100 166,80 200,80 L400,80 L400,0 L0,0 Z'/></svg>");
                --carousel_right_fade: linear-gradient(
                    to right,
                    black 75%,
                    transparent 100%
                );

                -webkit-mask-image: var( --carousel_base_curve ), var( --carousel_right_fade );
                mask-image        : var( --carousel_base_curve ), var( --carousel_right_fade );

                -webkit-mask-composite: source-in;
                mask-composite        : intersect;
            }

            filter: drop-shadow( 0px 0px 2px rgba( 0, 0, 0, 0.5 ) );
        }

        background: var( --header_background );

        div.border_lip {
            position    : absolute;
            top         : 82px;
            left        : calc( var( --aside_width ) - var( --lip_width ) - 1px );
            width       : calc( 100% - var( --aside_width ) + 1px );
            height      : calc( var( --lip_height ) + 20px );
            border-color: #69c;
        }

        a.icon {
            position: absolute;
            top     : 0;
            right   : 0;
            margin  : 9px;

            img {
                width : 40px;
                filter: drop-shadow( 0px 0px 2px rgba( 255, 255, 255, 0.5 ) );
            }
        }
    }

    main {
        grid-area  : main;
        padding    : 1.5rem 2rem 1rem 2rem;
        font-size  : 1.33rem;
        line-height: 1.5em;

        h1, h2, h3, h4, h5, h6 {
            color         : var( --headers );
            border-bottom : 1px dashed var( --element_border );
            margin-top    : 1.5em;
            margin-bottom : 1em;
            margin-left   : -0.5rem;
        }

        h1 { font-size : 2.25rem }
        h2 { font-size : 2rem }
        h3 { font-size : 1.75rem }
        h4 { font-size : 1.66rem }
        h5 { font-size : 1.5rem }
        h6 { font-size : 1.33rem }

        h1:first-of-type {
            font-style    : italic;
            letter-spacing: -1px;
            margin-top    : 0.25em;
            margin-bottom : 1.75em;

            &:not([id]) {
                margin-bottom: 1em;
            }
        }

        h1.blog_list_page {
            margin-bottom: -0.25em !important;
        }

        h2.blog_subtitle {
            margin-top   : 1.75em;
            margin-bottom: 1.75em;
        }

        h1:first-of-type, h2.blog_subtitle {
            position: relative;
            z-index : 1;

            span.post_categories, time.post_published {
                display       : block;
                position      : absolute;
                font-family   : 'Google Sans', sans-serif;
                font-style    : normal;
                font-size     : 1rem;
                letter-spacing: 0;
            }

            span.post_categories {
                bottom : -2rem;
                right  : 0rem;
                z-index: 0;

                a {
                    text-decoration: none;

                    &:hover {
                        text-decoration: underline;
                    }
                }
            }

            time.post_published {
                bottom     : -2rem;
                left       : 1rem;
                color      : var( --muted_text );
                font-weight: normal;

                &::before {
                    content: '\1F552\00a0';
                }
            }
        }

        pre {
            border-radius   : 1rem;
            padding         : 1rem;
            border          : 1px solid var( --element_border );
            background-color: var( --off_white ) !important;
        }

        code {
            padding: 0.125em 0.25em;
        }

        ul.contains-task-list li.task-list-item {
            list-style : none;
            margin-left: -1.5em;

            input[type="checkbox"]:disabled {
                -webkit-appearance: none;
                appearance        : none;

                margin-bottom: -1px;

                width           : 1.125em;
                height          : 1.125em;
                border          : 1px solid #767676;
                border-radius   : 3px;
                background-color: #fff;

                pointer-events: none;
                opacity       : 1;
            }

            input[type="checkbox"]:disabled:checked {
                background-color: #0075ff;
                border-color    : #0075ff;
                position        : relative;
            }

            input[type="checkbox"]:disabled:checked::after {
                content     : "";
                position    : absolute;
                left        : 4px;
                top         : 1px;
                width       : 3px;
                height      : 7px;
                border      : solid white;
                border-width: 0 2px 2px 0;
                transform   : rotate(45deg);
            }
        }

        img {
            border-radius: 1rem;
            border       : 1px solid var( --hard_border );
            margin-left  : 1rem;

            &:not([width]) {
                width: calc( 100% - 2rem );
            }
        }

        a:hover img {
            border-color: var( --value_dark );
        }

        .inline_max {
            display       : inline-block;
            vertical-align: top;
            margin-right  : 0.5rem;
            margin-bottom : 1.5rem;
        }

        figure:has(.inline_max) {
            margin-right : 0.125rem;
            margin-bottom: 1.5rem;
        }

        figure .inline_max {
            margin-bottom: 0;

            img {
                width: 100%;
            }
        }

        figure {
            margin-left   : 1rem;
            margin-right  : -1rem;
            display       : inline-block;
            vertical-align: top;
            width         : 100%;

            img {
                margin-left: 0rem;
            }

            &:has(.inline) {
                margin-right: -1.5rem;
            }

            &:has(.width_2) { width: calc( 50% + 1px ) }
            &:has(.width_3) { width: calc( 33% + 4px ) }
            &:has(.width_4) { width: calc( 25% + 1px ) }

            &:has(.width_tall) { width: 37% }
            &:has(.width_wide) { width: 63% }

            figcaption {
                font-size   : 1rem;
                margin-left : 1em;
                margin-right: 2em;
                margin-top  : -0.25em;
                line-height : 1.125rem;
            }
        }

        blockquote {
            font-family : 'Noto Serif', sans-serif;
            font-style  : italic;
            border-left : 0.25em solid var( --block_quote_left );
            padding-left: 0.75em;
            margin-left : 0.75em;
        }

        p {
            margin: 1.5em 0;
        }

        table {
            border-collapse: collapse;

            th, td {
                border          : 1px solid var( --hard_border );
                padding         : 0.0625em 0.25em;
                background-color: var( --cell_background );
            }

            thead, tfoot {
                th, td {
                    background-color: var( --light_gray );
                }
            }
        }

        iframe {
            height       : 600px;
            width        : calc( 100% - 1.5rem );
            padding      : 0.75rem;
            border-radius: 1rem;
            border       : 1px solid var( --hard_border );
        }

        iframe + iframe {
            margin-top: 1.5em;
        }

        hr {
            border    : none;
            border-top: 1px dotted var( --muted_text );
            height    : 0;
            margin    : 1em 0;
        }

        details, div.callout {
            border-radius: 1rem;
            padding      : 1rem;
            border       : 1px solid var( --element_border );
            margin       : 1rem 0;
            background   : #f0f0f0;

            summary {
                cursor: pointer;
            }

            .callout-title {
                div.callout-title-icon {
                    display: inline-block;

                    svg {
                        width : 16px;
                        height: 16px;
                        vertical-align: middle;
                        margin-top: -4px;
                    }
                }

                div.callout-title-inner {
                    display: inline-block;
                    line-height: 1rem;
                    font-weight: bold;
                }
            }

            &[data-callout='note' i], &[data-callout='info' i], &[data-callout='todo' i] {
                background: #e0e0ff;
            }

            &[data-callout='example' i] {
                background: #f0d0f0;
            }

            &[data-callout='abstract' i], &[data-callout='summary' i], &[data-callout='tldr' i],
            &[data-callout='tip' i], &[data-callout='hint' i], &[data-callout='important' i] {
                background: #cfc;
            }

            &[data-callout='success' i], &[data-callout='check' i], &[data-callout='done' i] {
                background: #cfc;
            }

            &[data-callout='question' i], &[data-callout='help' i], &[data-callout='faq' i],
            &[data-callout='warning' i], &[data-callout='caution' i], &[data-callout='attention' i] {
                background: #ffc;
            }

            &[data-callout='failure' i], &[data-callout='fail' i], &[data-callout='missing' i],
            &[data-callout='danger' i], &[data-callout='error' i],
            &[data-callout='bug' i] {
                background: #fcc;
            }

            &[data-callout='quote' i], &[data-callout='cite' i] {
                background: #f0f0f0;
            }
        }

        section.toc {
            margin-top   : -1rem;
            margin-bottom: 2.5rem;
        }
    }

    aside {
        grid-area   : aside;
        padding     : 1rem;
        padding-top : calc( 1rem + 3px );
        border-right: 1px solid var( --aside_border_right );
        overflow-y  : auto;
        background  : var( --aside_background );

        section {
            h3 {
                line-height  : 1.5em;
                margin-top   : 1em;
                margin-bottom: 0;

                img {
                    vertical-align: middle;
                    margin-top    : -5px;
                }
            }

            ul {
                padding-left: 1.5em;
                font-style  : italic;
                color       : var( --muted_text );

                li + li {
                    margin-top: 0.25em;
                }

                a {
                    font-style: normal;
                }
            }
        }

        &.blog {
            section.all_posts h3 {
                width     : calc( 100% - 2rem );
                margin-top: 0;
            }

            section.calendar table {
                margin-top  : 1rem;
                width       : calc( 100% - 1rem );
                table-layout: fixed;

                caption {
                    span.back {
                        float: left;
                    }

                    span.forward {
                        float: right;
                    }

                    span.back, span.forward {
                        cursor: pointer;

                        &:hover {
                            text-decoration: underline;
                        }
                    }
                }

                td {
                    text-align: right;

                    &.today {
                        font-weight: bold;
                    }
                }
            }

            section a.rss_feed {
                text-decoration: none;
                color          : var( --text );

                h3:hover {
                    border-style: dashed;
                }
            }
        }
    }

    nav {
        grid-area     : nav;
        position      : relative;
        padding-bottom: 1rem;

        div.border_lip {
            position    : absolute;
            top         : 3px;
            right       : 0;
            width       : var( --nav_width );
            height      : calc( var( --lip_height ) + 10px );
            border-color: var( --nav_border_lip_border );
            z-index     : 0;
        }

        div.nav_background {
            margin-top               : 6px;
            background-color         : var( --nav_background );
            border-left              : var( --element_border ) 1px solid;
            border-bottom            : var( --element_border ) 1px solid;
            border-bottom-left-radius: 1rem;
            padding                  : 1rem;

            h3 {
                font-size: 1.25rem;
                margin   : 1.25rem 0 0.5rem 0;
            }

            section.primary_offsite_links {
                position: relative;
                z-index : 1;

                &:first-of-type ul {
                    margin-top: -0.75rem;
                }

                ul {
                    font-size   : 1.25rem;
                    padding-left: 0;

                    li {
                        margin    : 0.75em 0;
                        list-style: none;

                        a {
                            text-decoration: none;
                            font-family    : 'Josefin Sans', sans-serif;
                            font-weight    : bold;
                            line-height    : 1.5em;

                            &:hover {
                                border-style: dashed;
                            }

                            img {
                                vertical-align: middle;
                                margin-top    : -5px;
                            }
                        }
                    }
                }
            }

            section.secondary_links {
                font-size: 1.125rem;

                ul {
                    padding-left: 1.75em;
                    margin      : 0;

                    li {
                        padding-left: 0;
                        margin      : 0.125em 0;

                        a {
                            text-decoration: none;

                            &:hover {
                                text-decoration: underline;
                            }
                        }
                    }
                }
            }
        }
    }

    section.toc {
        padding-top  : 1em;
        padding-left : 1em;
        padding-right: 1em;

        & > ol > li > ol {
            margin-top   : 1em;
            margin-bottom: 1.5em;
        }

        ol {
            list-style-type    : none;
            padding-left       : 0;
            list-style-position: inside;

            li {
                line-height  : 1.25em;
                font-weight  : bold;
                margin-top   : 0.5em;
                margin-bottom: 0.5em;

                a {
                    text-decoration: none;
                    &:hover {
                        text-decoration: underline;
                    }
                }
            }

            ol {
                list-style-type: upper-roman;

                li {
                    font-weight: normal;
                }

                ol {
                    list-style-type: upper-alpha;
                    padding-left   : 1.125em;

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

    footer {
        grid-area       : footer;
        padding         : 0.75em 1em;
        background-color: lightgray;
        color           : var( --muted_text );
        border-top      : 1px solid var( --hard_border );
    }
}

@media print {
    body {
        display: inherit;

        main {
            padding: 0 0 0 0.5em;
        }

        header {
            background: none;
            display   : block;
            position  : absolute;
            top       : 2.75rem;
            right     : 0;

            div {
                display: none;
            }

            a.icon {
                margin: 0;
                img {
                    width: 30px;
                }
            }
        }

        aside.blog, nav, footer, .nav_menu_toggle, .blog_menu_toggle {
            display: none !important;
        }
    }
}

@media ( max-width: 800px ) {
    body {
        grid-template-columns: 1fr var( --nav_width );
        grid-template-areas  :
            'header header'
            'main nav'
            'footer footer';

        header div.border_lip {
            height: calc( var( --lip_height ) - 25px );
        }

        main {
            padding-top: 2.75rem;
        }

        label.blog_menu_toggle {
            display: block;
            top    : calc( var( --grid_row_header ) - 26px );
            left   : 0.25rem;
        }

        aside.blog {
            display: none;
        }

        input.blog_menu_toggle:checked ~ aside.blog {
            display                   : block !important;
            position                  : absolute;
            top                       : calc( var( --grid_row_header ) + 20px );
            width                     : var( --aside_width );
            left                      : 0;
            border-top-right-radius   : 1rem;
            border-bottom-right-radius: 1rem;
            z-index                   : 2;
        }
    }
}

@media ( max-width: 640px ) {
    body {
        grid-template-columns: 1fr;
        grid-template-areas  : 'header' 'main' 'footer';

        label.nav_menu_toggle {
            display: block !important;
            top    : calc( var( --grid_row_header ) + 3px );
            right  : 0.25rem;
            z-index: 3;
        }

        nav {
            display: none;
        }

        input.nav_menu_toggle:checked ~ label.nav_menu_toggle {
            right: calc( var( --nav_width ) + 1.25rem );
        }

        input.nav_menu_toggle:checked ~ nav {
            display : block;
            position: absolute;
            top     : var( --grid_row_header );
            z-index : 3;
            width   : var( --nav_width );
            right   : 0;

            button.toggle_nav_menu {
                display : inline-block;
                position: absolute;
                top     : 4px;
                left    : -39px;
            }

            section.toc {
                border                   : 1px solid var( --element_border );
                background-color         : var( --off_white );
                border-top-left-radius   : 1rem;
                border-bottom-left-radius: 1rem;
                margin-top               : 0.25rem;
            }
        }

        footer {
            background-color: white;
        }
    }
}

@media ( max-width: 430px ) {
    body main h1:first-of-type {
        margin-bottom: 2.25em;

        span.post_categories {
            bottom: -3.5rem;
            left  : 2.5rem;
        }
    }
}

@media ( max-width: 380px ) {
    body {
        header {
            overflow-x: hidden;
            height    : 100px;
            background: none;
            filter    : drop-shadow( 0px 0px 2px rgba( 0, 0, 0, 0.5 ) );

            a.icon {
                margin: 22px;
            }

            div.border_lip {
                display: none;
            }
        }

        label.nav_menu_toggle {
            top: calc( var( --grid_row_header ) - 3px );
        }

        input.nav_menu_toggle:checked ~ nav {
            top: calc( var( --grid_row_header ) + -6px );
        }
    }
}

@media ( max-width: 920px ) {
    body {
        grid-template-rows:
            var( --grid_row_header )
            var( --grid_row_main )
            calc( var( --grid_row_footer ) + 1.25em );
    }
}

@media ( max-width: 630px ) {
    body {
        grid-template-rows:
            var( --grid_row_header )
            var( --grid_row_main )
            calc( var( --grid_row_footer ) + 2.5em );
    }
}

@media ( max-width: 500px ) {
    body footer {
        font-size: 90%;
    }
}

@media ( max-width: 359px ) {
    body nav {
        top: calc( var( --grid_row_header ) + 15px );
    }
}

@media ( max-width: 240px ) {
    body {
        main h1:first-of-type {
            margin-bottom: 1em;

            span.post_categories, time.post_published {
                display: none;
            }
        }
    }
}