/* Homepage jumbotron, with logo */
.jumbotron {
    text-align: center;
    padding: 2rem;
}

#logo {
    transition:transform 1.2s ease-in-out;
    margin: 0 auto;
    display: block;
    margin-bottom: 1rem;
}

/* Spin on hover */
#logo:hover { transform:rotate(360deg); }

main,
.legacy-post {
    max-width: 110ch;
    margin: 0 auto;

    /* If a main element contains an aside, put it in a nice box at the top. */
    /* This is used to add a disclaimer on legacy posts */
    > aside {
        border: var(--width-form-group-error) solid var(--colour-brand);
        background-color: var(--colour-surface-background);
        color: var(--colour-surface-text);
        margin: 1lh;
        padding: 1lh;
    }
}

/* If a div contains a main and an aside, then put it in a grid */
div:has(main + aside) {
    --size-gutter: 30px;
    --size-gutter-half: calc(var(--size-gutter) / 2);
    --size-page-width: 960px;

    display: grid;
    grid-gap: var(--size-gutter);

    max-width: var(--size-page-width);
    margin-left: var(--size-gutter-half);
    margin-right: var(--size-gutter-half);

    /* On tablet, add full width gutters */
    @media screen and (min-width: 641px) { /* tablet */
        margin-right: var(--size-gutter);
        margin-left: var(--size-gutter);
    }

    /* As soon as the viewport is greater than the width of the page plus the */
    /* gutters, just centre the content instead of adding gutters. */
    @media (min-width: 1020px) {
        margin-right: auto;
        margin-left: auto;
    }


    /* On small screens, only one column */
    grid-template-columns: 1fr;
    @media screen and (min-width: 641px) { /* tablet */
        /* 2:1 ratio on larger screens */
        grid-template-columns: 2fr 1fr;
    }
}

/* Extra styling for legacy posts index */
.index-article {
    margin-bottom: 2rlh;
}

/* For legacy posts */
date {
    font-size: --font-size-16;
    &::before {
        content: "📅 ";
    }
}

/* Misc */
img {
    display: block;
    max-width: 100%;
}

/* Selected parts from: */
/* GIC.css Version 1.2.0
 * (c) Copyright Ariadne (me@aria.rip) 2026.
 * Made available under the MIT license */
:root {
    --font-variable: "Inter", sans-serif;
    --font-weight-normal: 400;
    --font-weight-bold: 700;

    /* Colour palette */
    --blue: #1d70b8;
    --blue-tint-25: #5694ca;
    --blue-tint-50: #8eb8dc;
    --blue-tint-80: #d2e2f1;
    --blue-tint-95: #f4f8fb;
    --blue-shade-25: #16548a;
    --blue-shade-50: #0f385c;
    --blue-shade-10: #1a65a6;;
    --blue-shade-95: #030B12;
    --green: #0f7a52;
    --green-tint-25: #4b9b7d;
    --green-tint-50: #87bca8;
    --green-tint-80: #cfe4dc;
    --green-tint-95: #f3f8f6;
    --green-shade-25: #0b5c3e;
    --green-shade-50: #083d29;
    --teal: #158187;
    --teal-tint-25: #50a1a5;
    --teal-tint-50: #8ac0c3;
    --teal-tint-80: #d0e6e7;
    --teal-tint-95: #f3f9f9;
    --teal-shade-25: #106165;
    --teal-shade-50: #0b4144;
    --teal-accent: #00ffe0;
    --purple: #54319f;
    --purple-tint-25: #7f65b7;
    --purple-tint-50: #aa98cf;
    --purple-tint-80: #ddd6ec;
    --purple-tint-95: #f6f5fa;
    --purple-shade-25: #3f2577;
    --purple-shade-50: #2a1950;
    --magenta: #ca357c;
    --magenta-tint-25: #d7689d;
    --magenta-tint-50: #e59abe;
    --magenta-tint-80: #f4d7e5;
    --magenta-tint-95: #fcf5f8;
    --magenta-shade-25: #98285d;
    --magenta-shade-50: #651b3e;
    --red: #ca3535;
    --red-tint-25: #d76868;
    --red-tint-50: #e59a9a;
    --red-tint-80: #f4d7d7;
    --red-tint-95: #fcf5f5;
    --red-shade-25: #982828;
    --red-shade-50: #651b1b;
    --orange: #f47738;
    --orange-tint-25: #f7996a;
    --orange-tint-50: #fabb9c;
    --orange-tint-80: #fde4d7;
    --orange-tint-95: #fef8f5;
    --orange-shade-25: #b7592a;
    --orange-shade-50: #7a3c1c;
    --yellow: #ffdd00;
    --yellow-tint-25: #ffe640;
    --yellow-tint-50: #ffee80;
    --yellow-tint-80: #fff8cc;
    --yellow-tint-95: #fffdf2;
    --yellow-shade-25: #bfa600;
    --yellow-shade-50: #806f00;
    --brown: #99704a;
    --brown-tint-25: #b39477;
    --brown-tint-50: #ccb8a5;
    --brown-tint-95: #faf8f6;
    --black: #0b0c0c;
    --black-tint-25: #484949;
    --black-tint-50: #858686;
    --black-tint-80: #cecece;
    --black-tint-95: #f3f3f3;
    --white: #ffffff;

    --colour-brand: var(--blue);

    --colour-text: var(--black);
    --colour-body-background: var(--white);

    /* Used in for example 'muted' text and help text. */
    --colour-text-secondary: var(--black-tint-25);

    --colour-focus: var(--yellow);
    --colour-focus-text: var(--black);

    --colour-error: var(--red);
    --colour-success: var(--green);

    /* Used in for example borders, separators, rules and keylines. */
    --colour-border: var(--black-tint-80);
    /* Used for form inputs and controls */
    --colour-input-border: var(--black);
    /* Used for hover states on form controls */
    --colour-hover: var(--black-tint-80);
    /* Standard links (on white) */
    --colour-link: var(--blue-shade-10);
    --colour-link-visited: var(--purple);
    --colour-link-hover: var(--blue-shade-50);
    --colour-link-active: var(--black);

    /* 'Surfaces' are our name for components that have different colour */
    /* palettes to typical page content. This is the generic surface. */
    --colour-surface-background: var(--blue-tint-95);
    --colour-surface-text: var(--black);
    --colour-surface-board: var(--blue-tint-50);
    --colour-button-text: var(--white);

    /* Dark theme, from catpuccin mocha */
    @media (prefers-color-scheme: dark) {
        color-scheme: dark;
        --blue: #89b4fa;
        --blue-base: #89b4fa;
        --blue-tint-25: #6787bc;
        --blue-tint-50: #455a7d;
        --blue-tint-80: #1b2432;
        --blue-tint-95: #07090d;
        --blue-shade-10: #95bcfb;
        --blue-shade-25: #a7c7fb;
        --blue-shade-50: #c4dafd;
        --blue-shade-95: #f9fbff;
        --green: #a6e3a1;
        --green-tint-25: #7daa79;
        --green-tint-50: #537251;
        --green-tint-80: #212d20;
        --green-tint-95: #080b08;
        --green-shade-25: #bceab9;
        --green-shade-50: #d3f1d0;
        --teal: #94e2d5;
        --teal-tint-25: #6faaa0;
        --teal-tint-50: #4a716b;
        --teal-tint-80: #1e2d2b;
        --teal-tint-95: #070b0b;
        --teal-shade-25: #afe9e0;
        --teal-shade-50: #caf1ea;
        --purple: #cba6f7;
        --purple-tint-25: #987db9;
        --purple-tint-50: #66537c;
        --purple-tint-80: #292131;
        --purple-tint-95: #0a080c;
        --purple-shade-25: #d8bcf9;
        --purple-shade-50: #e5d3fb;
        --pink: #f5c2e7;
        --pink-tint-25: #b892ad;
        --pink-tint-50: #7b6174;
        --pink-tint-80: #31272e;
        --pink-tint-95: #0c0a0c;
        --pink-shade-25: #f8d1ed;
        --pink-shade-50: #fae1f3;
        --red: #f38ba8;
        --red-tint-25: #b6687e;
        --red-tint-50: #7a4654;
        --red-tint-80: #311c22;
        --red-tint-95: #0c0708;
        --red-shade-25: #f6a8be;
        --red-shade-50: #f9c5d4;
        --orange: #fab387;
        --orange-tint-25: #bc8665;
        --orange-tint-50: #7d5a44;
        --orange-tint-80: #32241b;
        --orange-tint-95: #0d0907;
        --orange-shade-25: #fbc6a5;
        --orange-shade-50: #fdd9c3;
        --yellow: #f9e2af;
        --yellow-tint-25: #bbaa83;
        --yellow-tint-50: #7d7158;
        --yellow-tint-80: #322d23;
        --yellow-tint-95: #0c0b09;
        --yellow-shade-25: #fbe9c3;
        --yellow-shade-50: #fcf1d7;
        --brown: #f2cdcd;
        --brown-tint-25: #b69a9a;
        --brown-tint-50: #796767;
        --brown-tint-95: #0c0a0a;
        --black: #1e1e2e;
        --black-tint-25: #171723;
        --black-tint-50: #0f0f17;
        --black-tint-80: #060609;
        --black-tint-95: #020202;
        --white: #cdd6f4;
        --white-shade-25: #9aa1b7;

        --colour-text: var(--white);
        --colour-body-background: var(--black);
        --colour-text-secondary: var(--white-shade-25);
        --colour-border: var(--white);
        --colour-input-border: var(--white);
        --colour-focus-text: var(--white);
        --colour-link-active: var(--white);
        --colour-surface-background: var(--blue-tint-80);
        --colour-surface-text: #fff;
        --colour-surface-board: var(--blue-tint-50);
        --colour-button-text: var(--black);
    }


    --width-input-border: 2px;
    --width-form-group-error: 5px;
    --width-focus: 3px;

    --font-size-80: 53px;
    --line-height-80: 55px;
    --font-size-48: 32px;
    --line-height-48: 35px;
    --font-size-36: 27px;
    --line-height-36: 30px;
    --font-size-27: 21px;
    --line-height-27: 25px;
    --font-size-24: 21px;
    --line-height-24: 25px;
    --font-size-19: 19px;
    --line-height-19: 25px;
    --font-size-16: 16px;
    --line-height-16: 20px;

    --spacing-0: 0;
    --spacing-1: 5px;
    --spacing-2: 10px;
    --spacing-3: 15px;
    --spacing-4: 15px;
    --spacing-5: 15px;
    --spacing-6: 20px;
    --spacing-7: 25px;
    --spacing-8: 30px;
    --spacing-9: 40px;

    @media screen and (min-width: 641px) { /* tablet */
        --font-size-80: 80px;
        --line-height-80: 80px;
        --font-size-48: 48px;
        --line-height-48: 50px;
        --font-size-36: 36px;
        --line-height-36: 40px;
        --font-size-27: 27px;
        --line-height-27: 30px;
        --font-size-24: 24px;
        --line-height-24: 30px;
        --spacing-4: 20px;
        --spacing-5: 25px;
        --spacing-6: 30px;
        --spacing-7: 40px;
        --spacing-8: 50px;
        --spacing-9: 60px;
    }

    @media print {
        --colour-text: #000000;
        --font-size-80: 53pt;
        --line-height-80: 1.1;
        --font-size-48: 32pt;
        --line-height-48: 1.15;
        --font-size-36: 24pt;
        --line-height-36: 1.05;
        --font-size-27: 18pt;
        --line-height-27: 1.15;
        --font-size-24: 18pt;
        --line-height-24: 1.15;
        --font-size-19: 14pt;
        --line-height-19: 1.15;
        --font-size-16: 14pt;
        --line-height-16: 1.2;
    }
}


/* eeeee e    e eeeee eeeee eeeee eeeee  eeeee eeeee e   e e    e  */
/*   8   8    8 8   8 8  88 8   8 8   8  8   8 8   8 8   8 8    8  */
/*   8e  8eeee8 8eee8 8   8 8e    8eee8e 8eee8 8eee8 8eee8 8eeee8  */
/*   88    88   88    8   8 88 "8 88   8 88  8 88    88  8   88    */
/*   88    88   88    8eee8 88ee8 88   8 88  8 88    88  8   88 */
html { background: var(--colour-body-background); }

body {
    font-family: var(--font-variable);
    font-weight: var(--font-weight-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    color: var(--colour-text);
    background: var(--colour-body-background);

    margin: 0;

    /* Prevent automatic text sizing, as we already cater for small devices and */
    /* would like the browser to stay on 100% text zoom by default. */
    text-size-adjust: 100%;
}

h1,h2,h3,h4 { font-weight: var(--font-weight-bold); margin-top: 0; }
span.caption { color: var(--colour-text-secondary); display: block; }

p {
    margin-top: 0;
}

/* sizing stuff. */
h1 { font-size: var(--font-size-48); line-height: var(--line-height-48); margin-bottom: var(--spacing-8); }
h2 { font-size: var(--font-size-36); line-height: var(--line-height-36); margin-bottom: var(--spacing-6); }
h3 { font-size: var(--font-size-24); line-height: var(--line-height-24); margin-bottom: var(--spacing-4); }
h4 { font-size: var(--font-size-19); line-height: var(--line-height-19); margin-bottom: var(--spacing-4); }
p { font-size: var(--font-size-19); line-height: var(--line-height-19); margin-bottom: var(--spacing-4); }
p.large { font-size: var(--font-size-24); line-height: var(--line-height-24); margin-bottom: var(--spacing-6); }
p.small { font-size: var(--font-size-16); line-height: var(--line-height-16); margin-bottom: var(--spacing-4); }

span.caption:has(+ h1) { font-size: var(--font-size-27); line-height: var(--line-height-27); margin-bottom: var(--spacing-1); }
span.caption:has(+ h2) { font-size: var(--font-size-24); line-height: var(--line-height-24); margin-bottom: var(--spacing-1); }
span.caption:has(+ h3) { font-size: var(--font-size-19); line-height: var(--line-height-19); }

/* Add top padding to headings that appear directly after paragraphs. */
p.large + h2 { padding-top: var(--spacing-1); }

p + h2,
ul + h2,
ol + h2 { padding-top: var(--spacing-4); }

p + h3,
ul + h3,
ol + h3,
p + h4,
ul + h4,
ol + h4 { padding-top: var(--spacing-1); }

a {
    text-decoration: underline;
    text-decoration-thickness: max(1px, .0625rem);
    text-decoration-offset: 0.1578em;
    color: var(--colour-link);

    &:not(.no-visited):visited {
        color: var(--colour-link-visited);
    }

    &:hover {
        color: var(--colour-link-hover);
        text-decoration-thickness: max(3px, .1875rem, .12em);
        text-decoration-skip-ink: none;
        text-decoration-skip: none;
    }

    &:active {
        color: var(--colour-link-active);
    }

    /* When focussed, the text colour needs to be darker to ensure that colour */
    /* contrast is still acceptable */
    &:focus {
        color: var(--colour-focus-text);
    }

    /* Show URL when printing */
    @media print {
        &[href^="/"],
        &[href^="http://"],
        &[href^="https://"] {
            &::after {
                content: " (" attr(href) ")";
                font-size: 90%;
                word-wrap: break-word;
            }
        }
    }

    &.error {
        &,
        &:visited {
            color: var(--colour-error);
        }

        &:hover {
            color: var(--red-shade-50);
        }

        &:active {
            color: var(--colour-error);
        }

        &:focus {
            color: var(--colour-focus-text);
        }
    }

    &.success {
        &,
        &:visited {
            color: var(--colour-success);
        }

        &:hover {
            color: var(--green-shade-50);
        }

        &:active {
            color: var(--colour-success);
        }

        &:focus {
            color: var(--colour-focus-text);
        }
    }


    &.no-underline:not(:hover):not(:active) {
        text-decoration: none;
    }
}


ul, ol {
    font-size: var(--font-size-19);
    line-spacing: var(--line-spacing-19);

    margin-top: 0;
    margin-bottom: var(--spacing-4);

    color: var(--colour-text);

    padding-left: var(--spacing-4);
    /* list-style-type: disc; */
    &.no-bullet {
        padding-left: 0;
        list-style-type: none;
        > li {
            margin-bottom: var(--spacing-1);
        }
    }

    /* Add a top margin for nested lists */
    ul, ol {
      margin-top: var(--spacing-2);
    }


    /* Lists without numbers or bullets should always have extra space between */
    /* list items. Lists with numbers or bullets only have this extra space on */
    /* tablet and above */
    > li {
        margin-bottom: 0;
        @media screen and (min-width: 641px) { /* tablet */
            margin-bottom: var(--spacing-1);
        }
    }

    &.extra-space > li {
        margin-bottom: var(--spacing-2);
        @media screen and (min-width: 641px) { /* tablet */
            margin-bottom: var(--spacing-3);
        }
    }
}


/* section spacer */
hr { margin: var(--spacing-4) 0; border: 0; }
hr.xl { margin: var(--spacing-8) 0; }
hr.l { margin: var(--spacing-6) 0; }
hr.visible { border-bottom: 1px solid var(--colour-border) }

/* utilities */
.break-word { word-break: break-word; }

/* ____ ____ ____ _  _ ____  */
/* |___ |  | |__/ |\/| [__   */
/* |    |__| |  \ |  | ___]  */
/*                           */
button {
    --button-bg: var(--green-shade-25);
    --button-bg-darker: var(--green-shade-50);
    --text: var(--colour-button-text);

    text-decoration: none;
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-80)
    line-height: 1;
    text-align: center;

    display: inline-block;
    position: relative;

    margin: 0 0 22px;
    margin-bottom: 22px;
    padding: 8px 10px 7px;
    border: 2px solid transparent;

    color: var(--text);
    box-shadow: 0 2px 0 var(--button-bg-darker);
    background-color: var(--button-bg);

    &:hover {
        background-color: var(--button-bg-darker);
    }

    &:active {
        top: 2px;
    }

    &:focus {
        border-color: var(--colour-focus);
        box-shadow: 0 var(--width-input-border) 0 var(--colour-focus-text);
        outline: var(--width-focus) solid transparent;
    }

    &.secondary {
        --button-bg: var(--black-tint-95);
        --button-bg-darker: var(--black-tint-80);
        --text: var(--colour-text);
    }
    &.warning {
        --button-bg: var(--red-shade-25);
        --button-bg-darker: var(--red-shade-50);
    }
    &[disabled] {
        opacity: .5;
        cursor: notallowed;

        &:hover {
            background-color: var(--button-bg);
        }
        &:active {
            top: 0;
        }
    }
}