/**
 * CSS for Mavs Iosevka Light
 * Generated by Wakamai Fondue - https://wakamaifondue.com
 * by Roel Nieskens/PixelAmbacht - https://pixelambacht.nl
 */

@layer fonts {
    @font-face {
        font-family: "Mavs Iosevka Light";
        src: url("/assets/fonts/primary.woff2") format("woff2");
        unicode-range: U+000D, U+0020-007E, U+00A0, U+00A2-00A9, U+00AC-00AE,
        U+00B0-00B7, U+00B9-00BA, U+00BC-00BE, U+00D7, U+00F7, U+2000-200D,
        U+2010-2027, U+202F-2064, U+2074, U+20AC, U+2122, U+2190-21BB, U+2212,
        U+2215, U+FFFD;
        font-display: block;
    }

    @font-face {
        font-family: "Geist Regular";
        src: url("/assets/fonts/secondary.woff2") format("woff2-variations");
        font-weight: 32 240;
        unicode-range: U+0020-007E, U+00A0, U+00A2-00A9, U+00AC-00AE,
        U+00B0-00B7, U+00B9-00BA, U+00BC-00BE, U+00D7, U+00F7, U+2013-2014,
        U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033,
        U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2190-2199, U+219D,
        U+21A9-21AA, U+21B0-21B1, U+21B3-21B5, U+2212;
        font-display: block;
    }

    /* Set custom properties for each layout feature */
    :root {
        --mavs-iosevka-light-frac: "frac" off;
        --mavs-iosevka-light-lnum: "lnum" off;
        --mavs-iosevka-light-onum: "onum" off;
        --mavs-iosevka-light-ss01: "ss01" off;
        --mavs-iosevka-light-ss03: "ss03" off;
        --mavs-iosevka-light-zero: "zero" off;

        --geist-regular-dlig: "dlig" off;
        --geist-regular-frac: "frac" off;
        --geist-regular-pnum: "pnum" off;
        --geist-regular-ss01: "ss01" off;
        --geist-regular-ss03: "ss03" off;
        --geist-regular-subs: "subs" off;
        --geist-regular-sups: "sups" off;
        --geist-regular-tnum: "tnum" off;
    }

    /* If class is applied, update custom property and
       apply modern font-variant-* when supported */
    .mavs-iosevka-light-frac {
        --mavs-iosevka-light-frac: "frac" on;
    }

    @supports (font-variant-numeric: diagonal-fractions) {
        .mavs-iosevka-light-frac {
            --mavs-iosevka-light-frac: "____";
            font-variant-numeric: diagonal-fractions;
        }
    }

    .mavs-iosevka-light-lnum {
        --mavs-iosevka-light-lnum: "lnum" on;
    }

    @supports (font-variant-numeric: lining-nums) {
        .mavs-iosevka-light-lnum {
            --mavs-iosevka-light-lnum: "____";
            font-variant-numeric: lining-nums;
        }
    }

    .mavs-iosevka-light-onum {
        --mavs-iosevka-light-onum: "onum" on;
    }

    @supports (font-variant-numeric: oldstyle-nums) {
        .mavs-iosevka-light-onum {
            --mavs-iosevka-light-onum: "____";
            font-variant-numeric: oldstyle-nums;
        }
    }

    .mavs-iosevka-light-ss01 {
        --mavs-iosevka-light-ss01: "ss01" on;
    }

    .mavs-iosevka-light-ss03 {
        --mavs-iosevka-light-ss03: "ss03" on;
    }

    .mavs-iosevka-light-zero {
        --mavs-iosevka-light-zero: "zero" on;
    }

    @supports (font-variant-numeric: slashed-zero) {
        .mavs-iosevka-light-zero {
            --mavs-iosevka-light-zero: "____";
            font-variant-numeric: slashed-zero;
        }
    }

    /* Apply current state of all custom properties
       whenever a class is being applied */
    .mavs-iosevka-light-frac,
    .mavs-iosevka-light-lnum,
    .mavs-iosevka-light-onum,
    .mavs-iosevka-light-ss01,
    .mavs-iosevka-light-ss03,
    .mavs-iosevka-light-zero {
        font-feature-settings: var(--mavs-iosevka-light-frac), var(--mavs-iosevka-light-lnum),
        var(--mavs-iosevka-light-onum), var(--mavs-iosevka-light-ss01), var(--mavs-iosevka-light-ss03),
        var(--mavs-iosevka-light-zero);
    }


    /* If class is applied, update custom property and
       apply modern font-variant-* when supported */
    .geist-regular-dlig {
        --geist-regular-dlig: "dlig" on;
    }

    @supports (font-variant-ligatures: discretionary-ligatures) {
        .geist-regular-dlig {
            --geist-regular-dlig: "____";
            font-variant-ligatures: discretionary-ligatures;
        }
    }

    .geist-regular-frac {
        --geist-regular-frac: "frac" on;
    }

    @supports (font-variant-numeric: diagonal-fractions) {
        .geist-regular-frac {
            --geist-regular-frac: "____";
            font-variant-numeric: diagonal-fractions;
        }
    }

    .geist-regular-pnum {
        --geist-regular-pnum: "pnum" on;
    }

    @supports (font-variant-numeric: proportional-nums) {
        .geist-regular-pnum {
            --geist-regular-pnum: "____";
            font-variant-numeric: proportional-nums;
        }
    }

    .geist-regular-ss01 {
        --geist-regular-ss01: "ss01" on;
    }

    .geist-regular-ss03 {
        --geist-regular-ss03: "ss03" on;
    }

    .geist-regular-subs {
        --geist-regular-subs: "subs" on;
    }

    @supports (font-variant-position: sub) {
        .geist-regular-subs {
            --geist-regular-subs: "____";
            font-variant-position: sub;
        }
    }

    .geist-regular-sups {
        --geist-regular-sups: "sups" on;
    }

    @supports (font-variant-position: super) {
        .geist-regular-sups {
            --geist-regular-sups: "____";
            font-variant-position: super;
        }
    }

    .geist-regular-tnum {
        --geist-regular-tnum: "tnum" on;
    }

    @supports (font-variant-numeric: tabular-nums) {
        .geist-regular-tnum {
            --geist-regular-tnum: "____";
            font-variant-numeric: tabular-nums;
        }
    }

    /* Apply current state of all custom properties
       whenever a class is being applied */
    .geist-regular-dlig,
    .geist-regular-frac,
    .geist-regular-pnum,
    .geist-regular-ss01,
    .geist-regular-ss03,
    .geist-regular-subs,
    .geist-regular-sups,
    .geist-regular-tnum {
        font-feature-settings: var(--geist-regular-dlig), var(--geist-regular-frac),
        var(--geist-regular-pnum), var(--geist-regular-ss01), var(--geist-regular-ss03),
        var(--geist-regular-subs), var(--geist-regular-sups), var(--geist-regular-tnum);
    }

    /* Variable instances */
    .geist-regular-thin {
        font-variation-settings: "wght" 32;
    }

    .geist-regular-ultralight {
        font-variation-settings: "wght" 42;
    }

    .geist-regular-light {
        font-variation-settings: "wght" 68;
    }

    .geist-regular-regular {
        font-variation-settings: "wght" 84;
    }

    .geist-regular-medium {
        font-variation-settings: "wght" 106;
    }

    .geist-regular-semibold {
        font-variation-settings: "wght" 126;
    }

    .geist-regular-bold {
        font-variation-settings: "wght" 146;
    }

    .geist-regular-black {
        font-variation-settings: "wght" 176;
    }

    .geist-regular-ultrablack {
        font-variation-settings: "wght" 208;
    }
}

@layer reset {
    /*https://andy-bell.co.uk/a-more-modern-css-reset/*/
    /* Box sizing rules */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    /* Prevent font size inflation */
    html {
        text-size-adjust: none;
    }

    body, h1, h2, h3, h4, p,
    figure, blockquote, dl, dd {
        font-weight: inherit;
        margin: 0;
    }

    h1, h2, h3, h4,
    button, input, label {
        line-height: 1.1;
    }

    input, button,
    textarea, select {
        font: inherit;
    }

    img, picture {
        image-rendering: crisp-edges;
    }
}


:root {
    color-scheme: light;
    forced-color-adjust: none;

    --pale-cyan: oklch(0.971 0.014 258.345);
    --light-cyan: oklch(0.794 0.104 230.694);
    --bright-cyan: oklch(0.946 0.027 230.349);
    --dark-cyan: oklch(0.537 0.135 249.34);
    --pink: oklch(0.69 0.171 359.49);
    --purple: oklch(0.479 0.159 324.484);
    --red: oklch(0.507 0.208 29.234);
    --green: oklch(0.662 0.183 149.825);
    --light-green: oklch(0.851 0.187 149.407);
    --blue: oklch(0.536 0.15 249.661);
    --white: oklch(1 0 none);
    --black: oklch(0 0 none);
    --grey-light: oklch(0.845 0 none);
    --grey-medium: oklch(0.464 0 none);
    --grey-dark: oklch(0.321 0 none);
    --blackish: oklch(0.176 0.004 345.707);

    --background-color: var(--white);
    --background-color-dark: var(--grey-dark);

    --icon-size: 0.75em;

    --font-primary: "Mavs Iosevka Light", sans-serif;
    --font-primary-weight: regular;
    --font-secondary: "Geist Regular", sans-serif;
    --font-secondary-weight: 32;

    --text-color: var(--grey-medium);
    --text-color-over-dark: var(--bright-cyan);

    --dev-emphasis: var(--red);
    --com-emphasis: var(--green);
    --other-emphasis: var(--blue);

    --page-width-minimum: 719px;
    --page-width-maximum: 1280px;
    --max-clamped-width: clamp(var(--page-width-minimum), 100%, var(--page-width-maximum));
    --spacer-margin: clamp(0.3lh, 0.1vh, 1ch);

    --page-banner-height: 2cm;
    --legend-row-height: 2ch;
    --page-header-height: calc(var(--page-banner-height) + var(--legend-row-height));
    --page-footer-height: 2rem;

    /* the magic numbers below come from svg viewbox to determine exact aspect ratio to scale the image width by */
    --banner-right-image-width: calc(var(--page-banner-height) * 531.45 / 354.3);
    --banner-right-image-height: var(--page-banner-height);

    --title-highlight: var(--white);
    --page-header-font-family: var(--font-secondary);
    --page-header-font-weight: var(--font-secondary-weight);

    --page-header-text-color: var(--light-cyan);
    --page-footer-text-color: var(--grey-light);

    --page-header-background-color: var(--dark-cyan);
    --page-footer-border-color: var(--grey-light);

    --record-banner-font: var(--font-primary);
    --record-banner-font-weight: var(--font-primary-weight);
    --record-banner-font-size: clamp(1rem, calc(0.3vw), 1.2rem);

    --record-banner-background-primary: var(--light-cyan);
    --record-banner-text-primary: var(--white);
    --record-banner-background-secondary: var(--white);
    --record-banner-text-secondary: var(--dark-cyan);
    --record-banner-background-tertiary: var(--blue);
    --record-banner-text-tertiary: var(--pale-cyan);

    --record-banner-employer-name-font: var(--font-primary);
    --record-banner-employer-name-font-size: calc(var(--record-banner-font-size) * 0.9);
    --record-banner-employer-name-font-weight: var(--font-primary-weight);

    --record-banner-employment-time-font: var(--font-primary);
    --record-banner-employment-time-font-size: calc(var(--record-banner-font-size) * 0.8);
    --record-banner-employment-time-font-weight: var(--font-primary-weight);

    --record-margin-top: calc(var(--spacer-margin) * 0.7);

    --font-skills-heading-family: var(--font-primary);
    --font-skills-heading-size: var(--record-banner-font-size);
    --font-skills-heading-weight: var(--font-primary-weight);
    --skills-heading-background-color: var(--pink);
    --font-skills-heading-color: var(--white);

    --font-skills-family: var(--font-primary);
    --font-skills-size: calc(var(--record-banner-font-size) * 0.8);
    --font-skills-weight: var(--font-primary-weight);
    --font-skills-color: var(--white);
    --skills-rating-color: var(--light-green);

    --max-skill-rating: 5;
}

body {
    height: 100vh;
    line-height: 1.35;
    font-family: var(--font-primary), sans-serif;
    font-weight: var(--font-primary-weight);
    text-align: justify;
    color: var(--text-color);
    background-color: var(--blackish);

    & a {
        position: relative;
        text-decoration: none;
        color: currentColor;

        &::after {
            display: inline-block;
            vertical-align: baseline;
            margin-left: 0.5ch;
            content: '';
            aspect-ratio: 1;
            width: 1.5ch;
            background-image: linear-gradient(90deg, oklch(0.271 0.118 261.136) 2.5%, oklch(0.479 0.159 324.484) 97.5%), url("/assets/images/external.svg");
            background-color: oklch(0.387 0 none);
            background-blend-mode: color-dodge;
            background-position: center;

            background-size: cover;
            background-repeat: no-repeat;
        }
    }

    & dl {
        padding-block: 0.5em;
        display: grid;
        align-items: center;
        grid-template-columns: auto 1fr;
        column-gap: 0.5em;
    }

    & .icon {
        aspect-ratio: 1;
        width: var(--icon-size);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;

        &.email {
            background-image: url("/assets/images/email.svg");
        }

        &.github {
            background-image: url("images/github.svg");
        }

        &.stackoverflow {
            background-image: url("images/stackoverflow.svg");
        }
    }

    & .dev-emphasis {
        color: var(--dev-emphasis)
    }

    & .com-emphasis {
        color: var(--com-emphasis)
    }

    & .other-emphasis {
        color: var(--other-emphasis)
    }
}

#page-header-spacer {
    height: calc(var(--page-header-height) + 1lh);
}

#page-header {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-rows: var(--page-banner-height) auto;
    align-items: center;

    height: var(--page-header-height);
    width: var(--max-clamped-width);

    background-color: var(--page-header-background-color);

    font-family: var(--page-header-font-family), sans-serif;
    font-weight: var(--page-header-font-weight);
    color: var(--page-header-text-color);

    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;

    & > .title {
        grid-column: 1;
        padding-left: 1cm;
        font-size: 2.5rem;

        & > .initial {
            color: var(--title-highlight);
            font-size: 3rem;
        }
    }

    /* Banner links */

    & .links {
        grid-column: 2;
        padding-right: 1cm;
        font-size: 0.9rem;
        font-family: var(--font-primary), sans-serif;
        font-weight: var(--font-primary-weight);
        color: var(--text-color-over-dark);
    }

    #banner-end-image {
        grid-column: 3;
        width: var(--banner-right-image-width);
        height: var(--banner-right-image-height);
        background-image: url("/assets/images/banner-right.svg");
        background-repeat: no-repeat;
    }

    & > .legend-row {
        grid-column: 1 / -1;
        grid-row: -1;
        color: var(--text-color);
        background-color: var(--pale-cyan);
        box-shadow: 0 1px 2px oklch(0 0 0 / 0.08);
        font-family: var(--font-primary), sans-serif;
        font-size: var(--font-skills-size);
        padding: var(--spacer-margin);
    }
}

#more-experience {
    position: relative;

    & summary {
        text-align: right;
        font-weight: bold;
        margin-top: 3ch;

        &::after {
            position: absolute;
            right: 2ch;
            content: 'Further experience available';
        }
    }

    &[open] {
        & summary::after {
            content: 'Collapse to recent experience';
        }
    }
}

table {
    margin: auto;
    border-spacing: 0;
    width: var(--max-clamped-width);
    height: 100%;
    background-color: var(--white);

    & > thead, & > tfoot, & > tbody, & td, & th, & tr {
        padding: 0;
    }

    & > tbody td {
        vertical-align: top;
        text-rendering: optimizeLegibility;

        & .statement {
            margin: var(--spacer-margin);
            font-size: 2ch;
        }

        & article.record {
            display: flow-root;
            break-inside: avoid;
            margin-top: var(--record-margin-top);
            font-size: 0.85rem;

            & > header {
                display: grid;
                grid-template-columns: 1fr clamp(27ch, 20vw, 30ch);
                align-items: stretch;

                background-color: var(--record-banner-background-primary);
                color: var(--record-banner-text-primary);

                & > h3 {
                    align-self: center;
                    padding-inline: var(--spacer-margin);
                    font-family: var(--record-banner-font), sans-serif;
                    font-weight: var(--record-banner-font-weight);
                    font-size: var(--record-banner-font-size);
                }

                & > .employer {
                    grid-column: 2;
                    border-block: 1px var(--record-banner-background-primary) solid;
                    border-right: 1px var(--record-banner-background-primary) solid;
                    background-color: var(--record-banner-background-secondary);
                    color: var(--record-banner-text-secondary);
                    text-align: right;

                    padding-right: var(--spacer-margin);

                    & > .employer-name {
                        font-family: var(--record-banner-employer-name-font), sans-serif;
                        font-size: var(--record-banner-employer-name-font-size);
                        font-weight: var(--record-banner-employer-name-font-weight);
                    }

                    & > .employment-time {
                        font-family: var(--record-banner-employment-time-font), sans-serif;
                        font-size: var(--record-banner-employment-time-font-size);
                        font-weight: var(--record-banner-employment-time-font-weight);
                    }
                }
            }

            & > header.sub-header {

                padding-left: 2.75ch;

                background-color: var(--record-banner-background-tertiary);
                color: var(--record-banner-text-tertiary);

                & > .employer {
                    & > .employer-name {
                        font-size: calc(var(--record-banner-employer-name-font-size) * 0.9);
                    }

                    & > .employment-time {
                        font-size: calc(var(--record-banner-employment-time-font-size) * 0.9);
                    }
                }
            }

            & > header + header.sub-header {
                margin-top: calc(var(--spacer-margin) * 0.4);
            }

            & ul {
                list-style: none;

                & li {
                    position: relative;
                    line-height: 1.5;
                    padding-left: calc(var(--spacer-margin) / 2);
                    padding-right: var(--spacer-margin);

                    & + li, &:first-child {
                        margin-bottom: 0.2cm;
                    }

                    &::before {
                        position: absolute;
                        transform: translateX(calc(-100% - 0.5em)) translateY(50%);
                        aspect-ratio: 1;
                        height: 0.7em;
                        content: "";
                        background-image: url("/assets/images/bullet.svg");
                    }

                    /* not supported in firefox until 121 at least -- that's Jan 2024 at least */
                    /*&:has(> ul)::before {*/
                    /*    display: none;*/
                    /*}*/

                    &.no-bullet::before {
                        display: none;
                    }
                }
            }

            & > ul {
                padding-left: 3ch;

                & ul {
                    padding-left: 2ch;
                }
            }

            & > article.record {
                margin-top: var(--record-margin-top);

                & > header {
                    display: grid;
                    grid-template-columns: 1fr 30ch;
                    align-items: center;

                    background-color: var(--record-banner-background-tertiary);
                    color: var(--record-banner-text-tertiary);

                    & > h3 {
                        padding-left: var(--spacer-margin);
                        font-family: var(--record-banner-font), sans-serif;
                        font-weight: var(--record-banner-font-weight);
                        font-size: var(--record-banner-font-size);
                    }

                    & > .employer {
                        grid-column: 2;
                        border-block: 1px var(--record-banner-background-tertiary) solid;
                        border-right: 1px var(--record-banner-background-tertiary) solid;
                        background-color: var(--record-banner-text-tertiary);
                        color: var(--record-banner-background-tertiary);
                        text-align: right;

                        padding-right: var(--spacer-margin);

                        & > .employer-name {
                            font-family: var(--record-banner-employer-name-font), sans-serif;
                            font-size: var(--record-banner-employer-name-font-size);
                            font-weight: var(--record-banner-employer-name-font-weight);
                        }

                        & > .employment-time {
                            font-family: var(--record-banner-employment-time-font), sans-serif;
                            font-size: var(--record-banner-employment-time-font-size);
                            font-weight: var(--record-banner-employment-time-font-weight);
                        }
                    }
                }
            }
        }

        & table.skills {
            width: auto;
            height: auto;
            color: var(--text-color-over-dark);

            font-family: var(--font-skills-family), sans-serif;
            font-weight: var(--font-skills-weight);
            font-size: var(--font-skills-size);

            background-color: var(--background-color-dark);

            margin-top: var(--record-margin-top);
            margin-left: 1ch;

            & > thead h3 {
                background-color: var(--skills-heading-background-color);
                color: var(--font-skills-heading-color);

                font-family: var(--font-skills-heading-family), sans-serif;
                font-weight: var(--font-skills-heading-weight);
                font-size: var(--font-skills-heading-size);

                text-align: center;
                padding-block: 0.5em;
            }

            & > tbody {
                color: var(--text-color-over-dark);

                font-family: var(--font-skills-family), sans-serif;
                font-weight: var(--font-skills-weight);
                font-size: var(--font-skills-size);

                background-color: var(--background-color-dark);

                margin-top: var(--record-margin-top);
                margin-left: 1ch;
            }
        }
    }

    & .skills {

        float: right;

        color: var(--text-color-over-dark);

        font-family: var(--font-skills-family), sans-serif;
        font-weight: var(--font-skills-weight);
        font-size: var(--font-skills-size);

        background-color: var(--background-color-dark);

        margin-top: var(--record-margin-top);
        margin-left: 0.75ch;

        & > h3 {
            background-color: var(--skills-heading-background-color);
            color: var(--font-skills-heading-color);

            font-family: var(--font-skills-heading-family), sans-serif;
            font-weight: var(--font-skills-heading-weight);
            font-size: var(--font-skills-heading-size);

            text-align: center;
            padding: 0.5ch;
        }

        & dl {
            margin: 0.75ch 2ch;
            row-gap: 0.6lh;

            & > dt {
                font-family: var(--font-skills-family), sans-serif;
                font-weight: var(--font-skills-weight);
                font-size: var(--font-skills-size);
                color: var(--font-skills-color);
                text-align: right;
                width: 20ch;
            }

            & > dd {
                position: relative;
                height: 100%;
                width: 10ch;

                &::before {
                    display: inline-block;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    content: "";
                    height: 0.5em;

                    /* This needs CSS level 5 attr values & units.. some day! */
                    /* width: calc(attr(data-rating number)/var(--max-skill-rating)*100%); */
                    width: calc(var(--actual-rating) / var(--max-skill-rating) * 100%);
                    background-color: var(--skills-rating-color);
                }

                /* until then, we workaround with classes */

                &.s5 {
                    --actual-rating: 5;
                }

                &.s4 {
                    --actual-rating: 4;
                }

                &.s3 {
                    --actual-rating: 3;
                }

                &.s2 {
                    --actual-rating: 2;
                }

                &.s1 {
                    --actual-rating: 1;
                }

            }
        }
    }
}

#page-footer-spacer {
    height: var(--page-footer-height);
    margin-top: 1rem;
}

#page-footer {
    position: fixed;
    bottom: 0;
    z-index: 5;
    width: var(--max-clamped-width);
    height: var(--page-footer-height);
    left: 50%;
    transform: translateX(-50%);
    text-align: right;
    background-color: var(--page-header-background-color);
    color: var(--page-footer-text-color);
    padding-block: 0.75ch;
    padding-inline: calc(var(--spacer-margin) * 2.5);

    & a {
        color: var(--title-highlight);
    }
}

#backlink {
    color: var(--light-cyan);
    font-size: 0.8rem;
}

#minimum-width-not-met {
    display: none;
    padding: min(3vh, 3vw);
    font-size: 1.5rem;
    color: var(--grey-light);

    & h1 {
        margin-top: 1rem;
        margin-bottom: 2rem;
        color: var(--red);
    }
}

@media screen {
    .print-only {
        display: none;
    }
}

/* Screen-reader only: visually hidden but parseable by ATS and AI agents */
@layer machine-readable {
    /*
     * Machine-readable layers for ATS, AI agents, and LLM parsers.
     * Visually hidden so they don't interfere with human reading,
     * browser "reading view" modes, or screen readers.
     *
     * IMPORTANT: aria-label is NOT used on visible content elements because it
     * REPLACES element text in the accessibility tree (which breaks reading view).
     * Instead, data-llm-* attributes carry LLM metadata additively — screen readers
     * ignore data-* attrs, but AI agents parsing the DOM or HTML source see both
     * the real text AND the supplementary metadata.
     */
    /* Full machine-readable CV summary block */
    .cv-machine-summary,
        /* ATS keyword reinforcement block */
    .cv-ats-keywords,
        /* Screen-reader-only text within machine blocks */
    .sr-only {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
}

@media screen and (max-width: 719px) {
    #minimum-width-not-met {
        display: block;
    }

    #cv {
        display: none;
    }

    p {
        margin-top: 2rem;
    }
}

@media print {
    @page {
        size: A4;
        margin: 0;
    }

    article.record > ul {
        padding-inline: 1ch;

        & > li {
            font-size: 10pt;
        }
    }

    .links > .email {
        display: block;
    }

    .links > .email + dd.print-only::before {
        content: "cv@mavs.work";
    }

    .screen-only {
        display: none;
    }

    #page-header .legend-row {
        font-size: 9pt;
    }

    #page-header-spacer {
        height: calc(var(--page-header-height) + 0.6lh);
    }

    #page-header-bottom {
        height: 1.48cm;
    }

    #page-footer {
        height: auto;

        & .print-only {
            font-size: 10pt;
        }
    }

    #more-experience {
        position: relative;

        & summary {
            text-align: right;
            font-weight: bold;
            margin-top: 3ch;
            list-style: none;

            &::after {
                position: absolute;
                right: 1ch;
                content: '';
            }
        }

        &[open] {
            & summary {
                display: none;
            }
        }
    }

    body {
        background-color: unset;
    }

    table > tbody td {
        & .statement {
            font-size: 11pt;
        }
    }
}