@layer depreciated, reset, tokens, base, theme, components, utilities;
/**
 *  chrissatchell.com Styles
 */
/*
    Reset

    Staring "The Coyier CSS Starter" by Chris Coyier https://frontendmasters.com/blog/the-coyier-css-starter/,
    featuring "A Modern CSS Reset" by Josh W. Comeau https://www.joshwcomeau.com/css/custom-css-reset/,
    and "Preflight" by Tailwind https://tailwindcss.com/docs/preflight
*/
@layer reset {

    @media (prefers-reduced-motion: no-preference) {
        @view-transition {
            navigation: auto;
        }
    }

    :root {
        --reset-body-line-height: 1.5;
    }

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

    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        margin: 0;
        padding: 0;
    }

    html {
        color-scheme: light dark;
        font-size: 16px; /* Alternative 16px × 0.625 = 10px → 1rem = 10px */
        -moz-tab-size: 2;
          -o-tab-size: 2;
             tab-size: 2;
        word-break: break-word;
        hanging-punctuation: first allow-end last;

        @media (prefers-reduced-motion: no-preference) {
            & {
                /* Enable keyword animations */
                interpolate-size: allow-keywords;
            }
            &:focus-within {
                scroll-behavior: smooth;
            }
        }

    }

    body {
        margin: 0;
        /* Add accessible line-height */
        line-height: var(--reset-body-line-height, 1.5);
        /* Improve text rendering */
        -webkit-font-smoothing: antialiased;
    }

    :focus-visible {
        outline-offset: 2px;
    }

    :target {
        /* Root line-height */
        scroll-margin: 3rlh;
    }

    ::-moz-selection {
        background: var(--color-amber, #ffe082);
        color: #000;
    }

    ::selection {
        background: var(--color-amber, #ffe082);
        color: #000;
    }

    [hidden]:where(:not([hidden='until-found'])) {
        display: none !important;
    }

    [role="region"][aria-labelledby][tabindex] {
        overflow: auto;
    }

    .visually-hidden:not(:focus):not(:active) {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        width: 1px;
        height: 1px;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        pointer-events: none;
    }

    h1, h2, h3, h4, h5, h6 {
        /* text-wrap: balance; */
        margin-block-start: 0;
    }

    h1, h2 {
        font-weight: 900;
        letter-spacing: -0.02rem;
    }

    h1, h2, h3 {
        line-height: 1.1;
    }

    p, h1, h2, h3, h4, h5, h6 {
        /* Avoid text overflows */
        overflow-wrap: break-word;
    }

    p, li, dd {
        /* Improve line wrapping */
        text-wrap: pretty;
    }

    a {
        color: oklch(0.68 0.17 228);
        text-underline-offset: 2px;

        &:not(:is(:hover, :focus)) {
            text-decoration-color: color-mix(in srgb, currentColor, transparent 50%);
        }
    }

    ul, ol, dl {
        margin: 0;
        padding: 0;
        /* list-style-position: inside; */

        & ul, & ol, & dl {
            padding-inline-start: 2ch;
        }
    }

    sub, sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }

    sub {
        inset-block-end: -0.25em;
    }

    sup {
        inset-block-start: -0.5em;
    }

    pre, code, kbd, samp {
        font-family: ui-monospace, SFMono-Regular, monospace;
    }

    pre {
        white-space: pre-wrap;
        background: CanvasText;
        color: Canvas;
        padding: 1.5rem;
    }

    hr {
        border-style: solid;
        border-width: 1px 0 0;
        color: inherit;
        height: 0;
        overflow: visible;
        margin-block: 2.5rem;
    }

    img, video, iframe {
        display: block;
        max-inline-size: 100%;
        block-size: auto;
        border-style: none;
    }

    /* Improve media defaults */
    img, picture, video, canvas, svg {
        display: block;
        max-width: 100%;
    }

    figure {
        inline-size: -moz-fit-content;
        inline-size: fit-content;
        margin-inline: auto;
    }

    figcaption {
        contain: inline-size;
        font-size: 90%;
    }

    svg {
        fill: currentColor;
    }

    input, select, textarea, button {
        font: inherit;
        /* appearance: base; */
    }

    label {
        display: block;
    }

    table {
        caption-side: bottom;
        border-collapse: collapse;

        & td {
            font-size: 90%;
        }

        & td,
        & th {
            word-break: normal;
            border: 1px solid gray;
            padding: 0.5rem;
        }
    }

    caption {
        font-size: 90%;
    }

    input:not(
        :where(
            [type="submit"],
            [type="checkbox"],
            [type="radio"],
            [type="button"],
            [type="reset"]
        )
    ) {
        inline-size: 100%;
    }

    button,
    input:where(
        [type="submit"],
        [type="reset"],
        [type="button"]
    ) {
        background: CanvasText;
        color: Canvas;
        border: 1px solid transparent;
    }

    textarea {
        field-sizing: content;
        min-block-size: 5lh;
        inline-size: 100%;
        max-inline-size: 100%;
    }

    [aria-disabled="true" i],
    [disabled] {
        cursor: not-allowed;
    }

    [disabled],
    label:has(input[disabled]) {
        opacity: 0.5;

        & [disabled] {
            opacity: 1;
        }
    }
}
/* @import "depreciated-styles.css" layer(depreciated); */
/* Custom Fonts
--------------- */
@font-face {
    font-family: "Mission Script";
    src: url("/fonts/mission-script-webfont.eot"); /* IE9 Compat Modes */
    src: url("/fonts/mission-script-webfont.eot?#iefix") format("embedded-opentype"),
        /* IE6-IE8 */ url("/fonts/mission-script-webfont.woff") format("woff"),
        /* Modern Browsers */ url("/fonts/mission-script-webfont.ttf") format("truetype"),
        /* Safari, Android, iOS */ url("/fonts/mission-script-webfont.svg#MissionScript")
            format("svg"); /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}
/* Custom Properties (Variables)
------------------------------- */
@layer tokens {
    :root {

        /* 0. Icons */

        --icon-url-external-link: url("/images/icon-external-link.svg");
        --icon-svg-external-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0-201.4 201.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3 448 192c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 96C35.8 96 0 131.8 0 176L0 432c0 44.2 35.8 80 80 80l256 0c44.2 0 80-35.8 80-80l0-80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 80c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l80 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 96z'/%3E%3C/svg%3E");

        /* 1. Colours */

        --color-primary: hsl(210 100% 80.6%); /* #9cceff */
        --color-secondary: #343434;
        --color-softblack: #333333;
        --color-mutedblack: #222;
        --color-black: #0a0a0a;
        --color-softwhite: #f5f5ed;
        --color-grey-alpha: 1;
        --color-grey: rgba(170, 170, 170, var(--color-grey-alpha));
        --color-faded-grey: oklab(0.6, 0, 0, 1);

        --color-focus: #0071e3;
        --color-amber: #ffe082;

        --color-gray-1: hsl(240, 100%, 99%); /* ghostwhite (#f8f8ff) */
        --color-gray-2: hsl(0, 0%, 96%); /* whitesmoke (#f5f5f5) */
        --color-gray-3: hsl(0, 0%, 86%); /* gainsboro (#dcdcdc) */
        --color-gray-4: hsl(0, 0%, 83%); /* lightgray (#d3d3d3) */
        --color-gray-5: hsl(0, 0%, 75%); /* silver (#c0c0c0) */
        --color-gray-6: hsl(0, 0%, 66%); /* darkgray (#a9a9a9) */
        --color-gray-7: hsl(0, 0%, 50%); /* gray (#808080) */
        --color-gray-8: hsl(0, 0%, 41%); /* dimgray (#696969) */
        --color-gray-9: hsl(210, 14%, 53%); /* lightslategrey (#778899) */
        --color-gray-10: hsl(210, 13%, 50%); /* slategray (#708090) */
        --color-gray-11: hsl(180, 25%, 25%); /* darkslategray (#2f4f4f) */
        --color-gray-12: hsl(0, 0%, 0%); /* black (#000000) */

         /* 2. Typography */

        --font-serif: "PT Serif", Georgia, Palatino, "Palatino Linotype", serif;
        --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
        --font-monospace: "Courier New", Courier, monospace;
        --font-handwritten: "Mission Script", sans-serif;

        --font-size-rawbase: 16;
        --font-size-base: 1rem; /* 16px */
        --font-size-lg: 1.25rem; /* 18px */
        --font-size-xl: 1.5rem; /* 24px */
        --font-size-xxl: 2rem; /* 32px */
        --font-size-xxxl: 3rem; /* 48px */
        --font-size-xxxxl: 4rem; /* 64px */

        --font-fluid-base: 22dvw;

        --font-headline-size: calc(320 / 16 * 1rem);
        --font-headline-size-sm: calc(262 / 16 * 1rem);

        --font-tagline-size: calc(40.8 / 16 * 1rem);

        --heading-letter-spacing: calc(-1.4 / var(--font-size-rawbase) * var(--font-size-base));
        --tagline-leading: 1.4;

        /* 3. Sizing */

        --container-width-xs: calc(710 / 16 * 1rem); /* 710px */
        --container-width-sm: calc(960 / 16 * 1rem); /* 960px */
        --container-width: calc(1440 / 16 * 1rem); /* 1440px */
        --container-width-lg: calc(1872 / 16 * 1rem); /* 1872px */

        /* 4. Animation */

        --popover-display-timing: 0.75s;
        --backdrop-display-timing: 0.25s;

        /* 5. Padding */

        --padding-inline-small: 1rem;
        --padding-inline: 1.5rem;
    }
}
/* Base
------- */
@layer base {
    html {
        /* -webkit-tap-highlight-color: transparent; */
        scroll-behavior: smooth;
    }

    body {
        font-size: var(--font-size-lg);
        line-height: 1.42857143;
        font-family: var(--font-serif);
        color: var(--color-mutedblack);
        background-color: var(--color-softwhite);
    }

    :where(h1, h2, h3, h4, h5, h6) {
        font-family: var(--font-sans);
    }

    :where(h2) {
        letter-spacing: var(--heading-letter-spacing);
    }

    :where(h3) {
        letter-spacing: -0.03em;
    }

    a,
    button {
        position: relative;
        font-weight: 400;
        text-decoration: underline;
        text-underline-offset: 2px;
        color: var(--color-black);
        background-color: transparent;
        cursor: pointer;

        &:hover,
        &:focus {
            text-decoration-thickness: 3px;
            text-underline-offset: 3px;
        }

        &:focus-visible {
            border: none;
            outline: 3px solid var(--color-focus);
            outline-offset: 3px;
            text-decoration: none;
        }

        /* External links with icon */
        &:is([data-external])[target="_blank"]::after {
            --size: 0.8em;
            content: "";
            background: var(--icon-svg-external-link, var(--icon-url-external-link)) top left no-repeat scroll;
            background-size: contain;
            position: relative;
            width: var(--size);
            height: var(--size);
            display: inline-block;
            margin-inline-start: 0.3rem;
            transform: translateY(1px);
            opacity: 0.7;
            image-rendering: pixelated;
        }
    }

    a:hover,
    a:focus {
        color: #2a6496;
        text-decoration: underline;
    }

    a:focus {
        outline: thin dotted;
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px;
    }

    figure {
        margin: 0;
    }

    img {
        vertical-align: middle;
    }

    hr {
        margin-top: 20px;
        margin-bottom: 20px;
        border: 0;
        border-top: 1px solid #eeeeee;
    }

    main {
        width: 100%;
        position: relative;
        margin-inline: auto;
    }
}
/* Theme
-------- */
@layer theme {
    h1,
    .h1 {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;

        padding: 0;
        margin: 2rem 0 0;

        font: normal
              400
              clamp(
                1.8rem,
                var(--font-fluid-base),
                var(--font-headline-size)
            )
            / 1
            var(--font-handwritten);
        color: var(--color-secondary);
        leading-trim: both;
        text-edge: cap alphabetic;


        @media (width >= 1440px) {
            & {
                font-size: var(--font-headline-size);
            }
        }

        @media (width <= 1120px) {
            margin-block-start: 1rem;
            --font-fluid-base: 17.5dvw;
        }

        @media (width <= 840px) {
            --font-fluid-base: 21dvw;
        }

        @media (width <= 640px) {
            --font-fluid-base: 20dvw;

        }

        /* "Chris Satchell" */
        & span {
            display: inline-block;
            line-height: 0.65;
            margin-block: 4rem 2.4rem;
            text-align: center;

            @media (width <= 1120px) {
                margin-block-end: 1.75rem;
            }
        }

        /* "Satchell" */
        & em {
            font-style: normal;
            color: var(--color-primary);
        }

        /* "tagline / sales-pitch" */
        & strong {
            --font-max-size: var(--font-tagline-size);
            --font-min-size: 1.4rem;
            --font-fluid-size: 4vw;

            font: normal 500
                clamp(
                    var(--font-min-size),
                    var(--font-fluid-size),
                    var(--font-max-size)
                )
                / var(--tagline-leading)
                var(--font-sans);
            letter-spacing: calc(-1.4 / 16 * 1rem);
            text-align: center;

            width: 100%;
            display: block;
            /* padding-block: var(--pt) 0; */
            /* margin-block: 0 2rem; */
            margin-block: 0 2rem;
            margin-inline: auto;

            @media (width <= 1120px) {
                letter-spacing: calc(-0.65 / 16 * 1rem);
                max-width: 35ch;
                margin-block: 0 1rem;
            }

            @media (width <= 685px) {
                --font-fluid-size: 1.8vw;
                margin-block: 0 0.5rem;
            }

            & br {
                display: none;

                @media (width <= 1120px) {
                    display: block;
                }
            }
        }
    }

    :where(h2, h3, h4, h5, h6) {
        font-weight: 600;
    }

    :is(header, main) {
        --width-including-padding: calc(var(--container-width) + var(--padding-inline));
        --min-width: 100dvw;

        width: min(var(--min-width), var(--width-including-padding));
        padding-inline: var(--padding-inline);
        margin: auto;
    }

    header {
        & .oh-canada {
            padding-top: 3.75rem;
            text-align: center;

            em {
                display: inline-flex;
            }

            & img {
                display: inline-block;
                filter: grayscale(100%);
            }
        }
    }

    main {
        padding-block-start: 2.05rem;
    }

    .grid-container {
        --gap: 3.2rem;

        display: grid;
        gap: var(--gap);
        grid-template-columns: repeat(
            auto-fit,
            minmax(min(100vw, 30rem), calc(33.333% - var(--gap)))
        );
    }


    /*
        Generic section elements
    */

    .intro-icon {
        width: calc(90 / 16 * 1rem);
        height:auto;
        margin-inline:auto;
        margin-bottom: -1rem;
        margin-top: 2rem;
    }

    .section-icon {
        width: calc(90 / 16 * 1rem);
        height:auto;
        margin-inline:auto;
        margin-bottom: -1rem;
        margin-top: 2rem;

        & > img[src*="maple-leaf"] {
            mix-blend-mode: multiply;
        }
    }

    .section-headline {
        margin-block: 2rem;
    }


    .section-description {
        max-width: 64ch;
        margin-inline: auto;

        br {
            display: none;

            @media (width > 1024px) {
                display: block;
            }
        }
    }


    /*
        Introduction
    */

    .introduction {
        margin-inline: auto;

        @media (width <= 1120px) {
            padding-inline: var(--padding-inline);
            max-width: var(--container-width-xs);
        }

        @media (width <= 640px) {
            padding-inline: var(--padding-inline-small);
        }

        h2 {
            font-size: var(--font-size-xxxl);
            text-align: center;
            margin-bottom: 4rem;
        }

        h3 {
            font-size: var(--font-size-xxl);
        }

        p {
            margin-block: 0.5rem;

            @media (width < 440px) {
                font-size: 1.05rem;
            }

            &:first-of-type {
                margin-block-start: 1rem;
            }

            a {
                font-family: var(--font-sans);
                font-weight: 500;
                display: inline-block;
            }
        }

        /* p:last-child a:last-child {
            display: block;
            margin-top: 0.25rem;
        } */

        .introduction__columns {
            --gap: 1rem;
            --grid-cols: auto-fit;

            display: grid;
            gap: var(--gap) calc(var(--gap) * 2);
            grid-template-columns: repeat(
                var(--grid-cols),
                minmax(min(100%, 18rem), 1fr)
            );
            margin-inline: auto;

            @media (width <= 1120px) {
                --grid-cols: 1;
                text-align: center;
                margin-top: 1rem;
            }
        }

        section {
            --border-color: var(--color-secondary);
            --padding-x: 0;
            --padding-y: calc(34 / 16 * 1rem);
            padding-block: var(--padding-y);
            padding-inline: var(--padding-x);
            border-top: 3px solid transparent; /* var(--border-color); */
            position: relative;

            @media (width <= 1120px) {
                max-width: calc(525 / 16 * 1rem);
                margin-inline: auto;
                padding-block-start: 3rem;
                /* padding-inline: 5.5rem; */
            }

            &:nth-child(2) {
                --border-color: var(--color-grey);
            }

            &:nth-child(3) {
                --border-color: var(--color-primary);
            }

            &::before {
                --border-width: 100%;
                --border-width-offset: 2px;
                content: '';
                display: block;
                height: 3px;
                width: calc(var(--border-width) - var(--border-width-offset));

                position: absolute;
                top: 0;
                left: 0;
                transform: translateY(-100%);
                background-color: var(--border-color);

                @media (width <= 1120px) {
                    --border-width: 150px;
                    left: 50%;
                    margin: auto;
                    transform: translate(-50%, -100%);
                }
            }
        }

        .introduction__links,
        .intro\:links {
            display: flex;
            gap: 1rem;
            padding-top: 0.22rem;

            @media (width <= 1120px) {
                text-align: center;
                justify-content: center;
            }

            &:has(.pill-button) {
                padding-top: 0.55rem;
                transform: translateX(-1.5px);
            }

            & :is(a, button) {
                color: var(--color-softblack);
                font-size: 0.9em;
                text-decoration-thickness: 1.5px;
                text-decoration-color: var(--color-gray-6);
                text-underline-offset: 1px;
                /* text-decoration: none; */

                &:hover,
                &:focus {
                    color: var(--color-black);
                    text-decoration-thickness: 2px;
                    text-decoration-color: var(--color-gray-12);
                    text-underline-offset: 2px;
                }
            }
        }
    }


    /*
        Projects & Services
    */

    .projects,
    .services {
        /* display: flex; */
        flex-flow: column nowrap;
        gap: 2rem 2rem;
        margin-block-start: 7.5rem;

        margin-inline: auto;

        @media (width <= 1120px) {
            padding-inline: var(--padding-inline);
            margin-block-start: 6rem;
        }

        @media (width <= 640px) {
            /* padding-inline: var(--padding-inline-small); */
            padding-inline: 0;
        }

        h2 {
            text-align: center;
            font-size: var(--font-size-xxl);
            margin-block: 2rem;

            &:has(+ div > p) {
                margin-block-end: 0.75rem;
            }

            & + div {
                margin-block-end: 2rem;
            }
        }

        h3 {
            font-family: var(--font-sans);
            position: relative;
            display: flex;
            flex-flow: row wrap;
            gap: 0.5rem;
        }

        ul {
            --gap: 1rem;
            --cols: auto-fit;
            list-style: none;

            display: grid;
            gap: 1.5rem calc(var(--gap) * 2);
            grid-template-columns: repeat(var(--cols), minmax(min(100%, 20rem), 1fr));

            margin-block-start: 1.25rem;

            max-width: 1040px;
            margin-inline: auto;

            @media (width > 1024px) {
                margin-block-start: 2.5rem;
            }

            @media (width > 1440px) {
                --gap: 1.25rem;
                /* --gap: 1rem; */

                /* --cols: 3; */
                /* max-width: fit-content; */
                /* margin-inline: auto; */
            }
        }

        .project-card {
            --padding-inline: 1.5rem;
            position: relative;
            padding: 1.25rem 0 1.3rem 0;
            transition: 0.2s background-color ease-in;

            display: flex;
            flex-flow: column nowrap;

            /* overflow: clip; */

            height: 100%;

            /* border-bottom: 2.5px solid var(--color-grey);
            transition: 0.2s border ease-in-out; */

            &::after {
                content: "";
                display: block;
                position: absolute;
                bottom: 0;
                left: 0;
                height: 2.5px;
                width: calc(100% - 10px);
                background-color: var(--color-grey);
                z-index: 1;
                opacity: 0.5;
                transition: background-color 0.2s ease-in-out,
                            opacity 0.2s ease-in-out,
                            width 0.15s 0.05s ease-in-out allow-discrete;
            }

            &:hover {
                /* border-color: 4px solid var(--color-secondary); */

                &::after {
                    background-color: var(--color-secondary);
                    opacity: 1;
                    width: 100%;
                }
            }

            &:has(a:focus-visible) {
                &::after {
                    background-color: var(--color-secondary);
                    opacity: 1;
                    width: 100%;
                }
            }

            & > * {
                order: 0;
            }

            & a,
            & .project-link {
                position: static;
                text-decoration: none;
                font-size: 0.8em;
                font-weight: 400;
                font-family: var(--font-sans);
                opacity: 0.6;
                transition: 0.2s opacity ease-in, 0.2s color ease-in;

                &:focus-visible,
                &:focus {
                    outline: 3px solid var(--color-focus);
                    outline-offset: 4px;
                    border-radius: 0;
                    opacity: 1;
                    color: black;
                }
            }

            &:hover a {
                color: var(--color-softblack);
                opacity: 1;
            }

            /* Stretched link */
            & a::after {
                content: "";
                display: block;
                z-index: 2;
                width: 100%;
                height: 100%;
                position: absolute;
                inset: 0;
            }

            .project-card__meta {
                --grid-col: auto-fit;
                display: grid;
                grid-template-columns: repeat(var(--grid-col), minmax(min(100%, 18rem), 1fr));
                gap: 0 0.5rem;
                margin-block-start: 0.25rem;

                @media (width >= 525px ) {
                    --grid-col: 2
                }

                & ul {
                    display: block;
                    margin: 0;
                }

                .project-status {
                    text-transform: capitalize;
                }

                .project-agency,
                .project-status {
                    & b {
                        display: block;
                        margin-block-end: 0.35rem;
                    }
                }
            }
        }

        .project-link[class] {
            &:hover,
            &:active {
                text-decoration: underline;
                text-underline-offset: 2px;
                text-decoration-thickness: 2px;
            }
            &:active,
            &:focus {
                color: var(--color-focus);
                opacity: 1;
            }

            &:focus-visible {
                border-radius: 7px;
                outline: 3px solid blue;
                color: blue;
                opacity: 1;
                display: inline-block;
                padding: 0.01rem 0.5rem;
                transform: translateX(2px);
            }
        }

        a.project-link.project-link--archive[class] {
            /* text-transform: lowercase; */
        }

        .project-header {
            display: flex;
            flex-flow: row wrap;
            gap: 0.5rem;
            flex: 0 0 auto;
        }

        .project-body {
            flex: 1 1 auto;
        }

        .project-meta {
            font-size: 0.8em;
            order: 10;

            display: flex;
            flex-flow:column nowrap;
            gap: 0.5rem;
            /* justify-content: space-between; */

            margin-block-start: 0.5rem;

            &:has(.project-agency),
            &:has(.project-status) {
                display: none
            }
        }

        .project-meta[class] {
            padding: 0;
            margin: 1rem 0;
            list-style-type: none;

            @media (width <= 745px) {
                &:not(:last-child) {
                    margin-bottom: 0rem;
                }
            }

            &[aria-label]::before {
                content: attr(aria-label);
                font-size: 1rem;
                font-weight: bold;
                text-transform: capitalize;
                display: block;
            }

            li {
                margin: 0;
                padding: 0;
                font-size: 1rem;
                display: inline-block;
            }

            li:last-child > span:last-child {
                display:none;
            }
        }

        .project-icon,
        .project-logo {
            --size: 30;
            /* width: calc(50 / 16 * 1rem); */
            height: calc(var(--size) / 16 * 1rem);
            display: block;
            pointer-events: none;
            overflow: clip;
            margin-bottom: 1rem;
            /* margin-left: auto; */
            /* border-radius: 999px; */
            /* transform: translate(0.75rem, -0.5rem); */
            img {
                width: inherit;
                height: inherit;
                -o-object-fit: contain;
                   object-fit: contain;
                filter: grayscale(1);
                opacity: 0.8;
                transition: 0.2s all ease-in-out;
                /* filter: invert(1); */
            }
        }

        .project-card:has(.project-banner) {
            /* padding-top: 0; */

            .project-banner {
                margin-bottom: 1.25rem;

                img {
                    filter: grayscale(1);
                    height: 150px;
                    width: 100%;
                    -o-object-fit: cover;
                       object-fit: cover;
                    overflow: clip;
                    border-radius: 0.24rem;
                    transition: 0.2s filter ease-in-out;
                }
            }

            &:hover .project-banner img {
                filter: grayscale(0);
            }
        }

        .project-card:hover .project-logo img {
            filter: grayscale(0);
            opacity: 1 !important;
        }

        /* emojiPlanet */
        .project-card[data-project="emojiplanet"] {
            .project-banner img {
                background-color: #e64011;
            }
        }

        /* springermiller */
        .project-card[data-project="sms"],
        .project-card[data-project="ellisdon"],
        .project-card[data-project="del-fresco-pure"],
        .project-card[data-project="polyblow"],
        .project-card[data-project="loreal"] {
            .project-logo img {
                filter: grayscale(1) invert(1);
                opacity: 0.6;
            }
        }

        .project-card[data-project="frankfranco"],
        .project-card[data-project="pival"] {
            .project-logo img {

                mix-blend-mode: multiply;
                will-change: transform;
                opacity: 0.7;
            }
        }

        .project-card[data-project="pedaal"] {
            .project-logo img {
                opacity: 0.7;
                border-radius: 4px;
            }
        }

        .project-card[data-project="upper-canada-child-care"] {
            .project-logo img {
                scale: 1.2;
                translate: 9px -2px;
            }
        }

        /*  */

    }


    /*
        Archived Projects
    */

    .archived-projects {
        margin-block-start: 7.5rem;

        @media (width <= 1120px) {
            margin-block-start: 6rem;
        }
    }

    .project-archives-button {
        background-color: unset;
        padding: 0.3rem 1rem;
        margin-top: 0.75rem;
        font-family: var(--font-sans);
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 2px;
        text-decoration-color: #34343481;
        transition: text-decoration-color 0.2s;
        /* transform: rotate(-5deg) */
        &:hover, &:active, &:focus {
            text-decoration-color: #343434;
        }
    }


    /*
        Project Summaries
    */

    .projects-summaries[class] {
        display: flex;
        flex-flow: column nowrap;
        gap: 1.5rem;
        margin-block-start: 0;
    }

    .project-summary {
        margin: 0;
        flex: 1 1 auto;
    }

    .project-summary:last-child > .project-card[class] {
        border-bottom: 0;
    }

    .project-summary .project-card[class] {
        display: block;
        text-align: left;

        @media (width > 1024px) {
            /* width: 89%; */
        }

        .project-desc {
            margin-block: 1rem;
            font-size: 1rem;
            width: 75%;
        }
    }


    /*
        Agencies & Campaigns
    */

    .agencies,
    .campaigns {
        margin-block: 6rem 9rem;

        @media (width <= 1120px) {
            margin-block: 3rem 6rem;
        }

        & h2 {
            text-align: center;
            margin-bottom: 1rem;
            line-height: 1.3;
            margin-inline:auto;
            max-width: 43ch;
        }

        .section-description {
            margin-inline: auto;
            @media (width <= 1120px) {
                padding-inline: var(--padding-inline);
                max-width: 710px;
            }

            @media (width <= 640px) {
                padding-inline: 0;
            }
        }
    }

    .agencies-group,
    .campaigns-group {
        & ul {
            list-style-type: none;
            margin-inline:auto;
            margin-top: 2rem;
            padding:0;

            display: flex;
            flex-flow: row wrap;
            gap: 0.85rem 2rem;
            justify-content:center;
            align-items: center;

            @media (width > 1140px) {
                flex-flow: row nowrap;
                width: 80%;
            }

            @media (width <= 475px ) {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                -moz-column-gap: 1.5rem;
                     column-gap: 1.5rem;
            }

            li {
                @media (width <= 475px ) {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    min-height: 60px;
                }
            }
        }

        & img {
            filter: grayscale(1);
            max-height: 60px;
            /* opacity: 1 !important; */
        }

        & [data-agency="tbwa"] img {
            height: 25px;
            opacity: 0.5;
        }

        & [data-agency="52-pick-up"] img {
            opacity: 0.7;
        }

        & :where(
            [data-agency="sajak-&-farki"],
            [data-agency="teehan-+-lax"]
        ) img {
            mix-blend-mode: multiply;
            max-height: 50px;
        }

        & :is([data-agency="teehan-+-lax"]) img {
            max-height: 20px;
        }

        & [data-agency="redphone"] img {
            opacity: 0.8;
            max-height: 45px;
            transform: translateY(3px);
        }

        & [data-agency="sajak-&-farki"] img {
            display: block;
            overflow: clip;
            max-height: 30px;
            opacity: 0.42;
        }

        & [data-agency="nv"] img {
            display: block;
            overflow: clip;
            border-radius: 999px;
            max-height: 34px;
            opacity: 0.42;
        }
    }

    .agencies-group ul {
        @media (width <= 1120px) {
            max-width: calc(600/16*1rem);
        }
    }

    .campaigns-group ul {
        @media (width <= 1120px) {
            max-width: calc(600/16*1rem);
        }
        @media (width <= 640px) {
            -moz-column-gap: 0.25rem;
                 column-gap: 0.25rem;
        }
    }


    [data-campaign="universal"] img {
        filter: invert(1);
        opacity: 0.5;
    }

    [data-campaign="oceanspray"] img {
        max-height: 35px;
        opacity: 0.6;
    }

    [data-campaign="vw"] img {
        mix-blend-mode: multiply;
        opacity: 0.7;
        will-change: transform;
    }

    [data-campaign="loreal"] img {
        max-height: 20px;
        opacity: 0.7;
    }

    [data-campaign="virgin"] img {
        height: 100px;
        opacity: 0.7;
    }

    [data-campaign="visa"] img {
        max-height: 40px;
        opacity: 0.7;
        mix-blend-mode: multiply;
        will-change: transform; /* iOS */
    }

    [data-campaign="purina"] img {
        max-height: 25px;
        opacity: 0.7;
    }

    [data-campaign="tiff"] img {
        height: 25px;
        opacity: 0.6;
    }


    /*
        Services
        Note: See accordion.css
    */

    #services {
        --accordion-items-bg: rgba(255, 255, 255, 0.725);
        container-name: accordion-items;
        container-type: normal;

        accordion-items {
            background-color: var(--accordion-items-bg)
        }
    }

    @container accordion-items style(--accordion-items-bg) {
        accordion-items {
            box-shadow: 0 1px 2px rgba(155, 148, 137, 0.357);
            margin-top: 3rem;

        }
    }

}
/* Footer
--------- */
@layer footer {
    footer {
        h2 {
            color: var(--color-black);
            font-family: var(--font-handwritten);
            font-size: 4.8rem;
            font-weight: 400;
            line-height: 1;
            margin-bottom: -1.9rem;
            margin-top: 1rem;

            @media (width <= 420px) {
                font-size: 4rem;
            }

            & + p {
                margin-block-start: 2.5rem;

                @media (width <= 420px) {
                    font-size: 1.2rem;
                }
            }

            a[href] {
                color: inherit;
                text-decoration: none !important;
                padding-inline: 0.5rem;
                padding-block-start: 0.25rem;
            }
        }

        a {
            &:hover {
                text-decoration: underline !important;
            }
        }

        .cs-resume-contactinfo--footer[class][class]  {

            & a {
                /* display: inline-flex; */
                padding-inline-start: 1.5rem;
                position: relative;
            }

            & svg {
                width: 1em;
                position: absolute;
                top: 50%;
                left: 0;
                translate: 0 -45%;
            }

            & [class*="__linkedin"] {
                & svg {
                    width: 0.9em;
                    translate: 0.5px -50.5%;

                    @media (width < 1100px) {
                        translate: 0.8px -50.5%;
                    }
                }
            }

            & [class*="__email"] {
                & svg {
                    width: 0.98em;
                    @media (width < 1100px) {
                        scale: 0.99;
                        translate: -0.5px -48.5%;
                    }
                }
            }

            & [class*="__website"] {

                & svg {
                    @media (width < 1100px) {
                        translate: -0.8px -48%;
                    }
                }
            }
        }
    }

    /*
        TEMP: Resume styles
    */
    .cs-resume-contactinfo {
        margin: 0;
        padding: 0;
        list-style: none;

        flex: 1 0 auto;

        li {
            margin-block: 1.5rem;
        }

        & li > a[target="_blank"]::after {
            /* display: none; */
        }

        li strong {
            /* display: block; */
            font-family: var(--font-sans);
        }
    }

    .satch-contentinfo {
        margin-inline: auto;
        width: min(95vw, var(--container-width));
        overflow: clip;

        & > section {
            background-color: var(--color-secondary);
            padding: 1.5rem 2.5rem 1rem;
            color: #fff;
            border-radius: 16px 16px 0 0;
            margin-block-start: calc(80 / 16 * 1rem);
        }
    }

    .cs-resume-contactinfo--footer[class] {
        --gap-x: 1.6rem;
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-end;
        gap: 0.8rem var(--gap-x);
        list-style: none;
        padding-left: 0;
        border-radius: 2rem 2rem 0 0;
        margin: 0;
        /* padding-inline: none !important; */

        @media (width < 1100px) {
            display: block;
            order: 0;
            width: -moz-fit-content;
            width: fit-content;
            padding-inline: 1rem;
            margin: auto;
        }

        & li:not(:last-child)::after {
            --w: 2px;
            content: "";
            display: inline-block;
            width: 2px;
            height: 1em;
            transform: translate(calc((var(--gap-x) / 2) - (var(--w) * 1.25)), 2.5px);
            background-color: #fff;
            opacity: 0;
        }

        & li > a {
            text-decoration: none;
            font-size: 0.8em;
            transform: translateY(-2px);
        }

        & li > a[target="_blank"]::after {
            display: none;
        }

        p small {
            font-size: 0.8em;
        }
    }

    .satch-contentinfo__group--bottom {
        margin: 0.9rem 0 1.35rem;
    }

    main section .cs-resume-contactinfo__linkedin a {
        --underline-offset: -265%;

        text-decoration: none;
        position: relative;
        display: inline-block;

        &::before {
            --underline-offset: -5px;
            content: "";
            display: block;
            height: 1.25px;
            width: 100%;
            max-width: calc(19ch - 8px);
            background-color: var(--cs-color-black);
            position: absolute;
            bottom: 0;
            left: 0;
            transform: translate(0, var(--underline-offset));
        }

        &:hover::before,
        &:focus::before {
            --underline-offset: -3.5px;
            height: 3px;
            transform: translate(0, var(--underline-offset));
        }

        &[target="_blank"]::after {
            transform: translate(-1rem, 0);
            /* margin-inline-start: 0; */
        }

        & span {
            display: inline-block; /* Allows width control */
            max-width: 19ch; /* Adjust based on your layout */
            white-space: nowrap;
            overflow: clip visible;
            text-overflow: ellipsis; /* Adds "..." when text overflows */
            vertical-align: bottom;
        }
    }

    .copyright {
        margin-block: 0;
        font-size: inherit;

        @media (width < 1100px) {
            display: block;
            order: 1;
            margin-top: 1.5rem;
        }

        & small {
            font-size: 0.77em;
            transform: translateY(-1px);
        }
    }

    .flex-container {
        display: flex;
        flex-flow: row wrap;
        gap: var(--gap, 1rem);
        justify-content: space-between;

        @media (width > 1100px) {
            & {
                --gap: 1rem 3rem;
                flex-flow: row wrap;
            }
        }
    }

    .satch-contentinfo__group.flex-container[class] {
        @media (width < 1100px) {
            & {
                display: block;
            }

            & p {
                text-align: left !important;
            }
        }
    }

    /* Top group layout */
    .contentinfo .satch-contentinfo__group.flex-container {
        align-items: baseline;
    }

    .contentinfo .satch-contentinfo__group.flex-container p {
        flex: 1 1 auto; /* was "1 1" inline */
        margin-bottom: 0;
        text-align: right;
    }

    /* Footer contact links */
    .contentinfo .cs-resume-contactinfo--footer a {
        color: #fff;
        text-decoration: none;
    }
    .contentinfo .cs-resume-contactinfo--footer a:focus,
    .contentinfo .cs-resume-contactinfo--footer a:hover {
        text-decoration: underline;
    }


    /*
        Updated Footer

        Copied from refactored resume footer styles.

        @date: 2024-06-05
    */

    footer:has(.resume-footer-content) {
        padding-block: 5rem;
        position: relative;

        &::before {
            content: '';
            display: block;
            margin: 0 auto 4rem;
            width: min(80dvw, 80px);
            height: 2px;
            background-color: var(--color-secondary);
        }

        h2 {
            margin: 0;
            text-align: center;
            font-size: calc(44/16*1rem);
            /* margin-block-eånd: 1.5rem; */

            &:has(+ .resume-footer-content > address) {
                margin-bottom: 0.9rem;
            }

            em {
                font-style: normal;
                color: var(--color-primary);
            }
        }
    }

    .resume-footer-content {
        display: flex;
        flex-flow: row wrap;
        gap: 0.5rem 1.5rem;
        justify-content: center;
        padding-inline: 2rem;

        * {
            text-align: center;
            font-weight: 700;
            font-style: normal;
            text-transform: uppercase;
            font-size: 0.8em;
            font-family: var(--font-sans);
            letter-spacing: -0.05em;
            order: 1;

        }

        footer {

        }

        a {
            font-size: inherit;
        }

        .phone {
            flex-basis: 100%;
        }
    }

    .copyright[class] {
        /* display:none; */
        flex: 1 0 100dvw;
        padding-inline: 2rem;
        text-align: center;
        font-family: var(--font-sans);
        font-weight: 500;
        /* margin-top: 2.4rem; */

        opacity: 0.5;
        text-transform: uppercase;
        font-size: 0.8em;
        margin-top: 2rem;

        @media (prefers-contrast: more) {
            opacity: 1;
            font-size: 1.1rem;
        }
    }

    footer .satch-contentinfo__group.satch-contentinfo__group--bottom.flex-container {
        justify-content: center;
    }

}
@layer footer.sticky {
    html,
    body {
        height: 100dvh;
    }

    body #content {
        display: flex;
        flex-flow: column nowrap;
        height: 100%;

        & header {
            flex: 0 1 auto;
        }

        & main {
            flex: auto;
        }

        footer.satch-contentinfo.contentinfo {
            flex: 0 0 auto;
        }
    }
}
/* Components
------------- */
@layer components.accessibility {
    .skip-link:not(:focus) {
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        overflow: hidden !important;
        clip: rect(1px, 1px, 1px, 1px) !important;
        border: 0 !important;
        position: absolute !important;
    }

    .skip-link {
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.5;
        color: var(--color-softblack);
        word-wrap: break-word;
        text-decoration: none;
        outline-offset: -2px;
        box-sizing: border-box;
        padding: 1rem;
        position: absolute !important;
        z-index: 999;
        /* outline: none; */
        box-shadow: none;
        margin-block-start: 1rem;
        margin-inline-start: 1rem;
    }
}
@layer components.dialog {
    :root {
        --popover-display-timing: 0.15s;
        --popover-display-delay: 0.1s;
        --popover-backdrop-blur: 2px;
    }

    :root:has(dialog.full-page) {
        transition: var(--popover-display-timing) filter ease-in;
    }

    :root.has-open-modal[class] {
        overflow: hidden;
        filter: blur(var(--popover-backdrop-blur));
    }

    dialog,
    [popover] {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: min(800px, 100dvw);

        background-color: #fff;
        padding: 1rem 2rem;
        color: black;
        outline: none;
        border: none;
        border-radius: 24px;

        /* user agent styles */
        max-width: calc(100% - 2em - 6px);
        max-height: calc(100% - 2em - 6px);

        opacity: 0;
        transition: opacity var(--popover-display-timing, 0.5s),
            display var(--popover-display-timing, 0.5s) allow-discrete;

        &:popover-open {
            opacity: 1;

            @starting-style {
                & {
                    opacity: 0;
                }
            }
        }

        & > div:first-child {
            display: flex;
            flex-flow: column nowrap;
        }

        a::after {
            display: none;
        }

        ul {
            margin-inline: 0;
            padding-inline: 0;
        }
    }

    /* Full Page Modal */
    dialog[aria-modal="true"].full-page {
        --max-width: calc(960 / 16 * 1rem);
        --offset-y: 2.65rem;
        --scrollbar-gutter-width: 1rem;

        background-color: transparent;
        border-radius: 0;

        /* reset user agent styles */
        max-width: unset;
        max-height: unset;

        /* setup */
        width: 100dvw;
        padding: 0;

        /* prevent shift off-screen */
        inset: 0;
        transform: none;

        /* 1. The secret sauce that allows scroll */
        height: 100%; /* fallback */
        height: 100dvh;
        overflow: hidden;

        /*
            Animate dialog
        */

        opacity: 0;
        transition: opacity var(--popover-display-timing, 0.5s),
            display var(--popover-display-timing, 0.5s) allow-discrete;

        &[open] {
            opacity: 1;

            @starting-style {
                & {
                    opacity: 0;
                }
            }
        }

        /*
            Animate dialog backdrop
        */
        &::backdrop {
            opacity: 0;
            backdrop-filter: blur(0);
            /* background-color: rgba(10, 10, 10, 0.1); */
            /* will-change: opacity; */

            transition: display var(--backdrop-display-timing, 0.5s),
                /* required */ overlay var(--backdrop-display-timing, 0.5s),
                /* required */ opacity var(--backdrop-display-timing, 0.5s),
                backdrop-filter var(--backdrop-display-timing, 0.5s);
            transition-behavior: allow-discrete;
        }

        /* On open, transition to... */
        &[open]::backdrop {
            /* backdrop-filter: blur(2px); */
            /* background-color: rgba( 0 0 0 / 75% ); */
            opacity: 1;
        }

        /* On open, starting-style */
        @starting-style {
            &[open]::backdrop {
                opacity: 0;
            }
        }

        .dialog-page {
            position: relative;

            /* 2. The secret sauce that allows scroll */
            height: calc(100dvh);
            overflow: auto;

            /* Scrollbar gutter */
            padding-inline-end: var(--scrollbar-gutter-width);
        }

        .dialog-container {
            padding-top: var(--offset-y);
            /* background-color: #f0f0f0bf; */
            /* backdrop-filter: blur(5px); */

            /* Fix body horzontal centering by extending the width of the container by the amount of the scroll gutter */
            /* width: calc( 100% + var(--scrollbar-gutter-width) ); */
        }

        .dialog-body {
            overflow: clip;
            width: min( calc(100dvw - var(--scrollbar-gutter-width) * 3), var(--max-width));
            background-color: rgb(252 252 252);
            /* backdrop-filter: blur(30px); */
            color: var(--color-black);
            outline: none;
            border: none;
            border-radius: 1.5rem;
            margin-bottom: var(--offset-y);

            /* center */
            margin-inline: auto;

            /* Fix body horzontal centering related to the scroll gutter */
            transform: translateX(calc(var(--scrollbar-gutter-width) / 2) );

            @media (width <= 640px) {
                width: 100dvw;
                transform:none
            }

        }

        .dialog-header {
            display: flex;
            align-items: flex-start;
            position: sticky;
            top: 0;
            z-index: 2;
            padding: 1rem 2rem 0.5rem 2rem;

            /* background-color: rgba(255, 255, 255, 0.9); */
            /* backdrop-filter: blur(5px); */

            & h2 {
                font-family: var(--font-handwritten);
                font-size: 2rem;
                font-weight: normal;
                margin-block: 0;
                transform: translate(40px, 6.5px);

                /* Pre scroll shrink animation */
                transition: 0.4s font-size;
                font-size: 4em;
            }
        }

        .dialog-content {
            /* padding: 0.75rem 4.75rem 4rem; */
            padding:0.05rem 3.65rem 4rem;

            @media (width <= 780px) {
                padding: 0.75rem 3.5rem 4rem;
            }

            h3 {
                font-size: var(--font-size-xxl);
            }

            h4 {
                font-size: var(--font-size-lg);
                /* margin-block-start: 1.5rem;
                margin-block-end: 0.5rem; */
            }

            .project-link {
                font-size: 1.1rem;
            }

            .project-logo {
                --offset-x: -13;
                --offset-y: 4px;
                @media (width >= 1024px) {
                    right:0;
                    transform: translate(var(--offset-x), var(--offset-y));
                    position: absolute;
                }

                img {
                    filter: none;
                    opacity: 1;
                }
            }
        }

        .close {
            padding-inline: 0.7rem;
            transform: translateX(1rem);
        }
    }

    /* Close button */
    :where(button).close {
        display: inline-flex;
        margin-left: auto;
        padding: 0.25rem 1.75rem;
        outline: 2px solid var(--color-gray-3);
        border-radius: 999px;
        cursor: pointer;
        font-weight: bold;
        text-decoration: none;

        @media (prefers-contrast: more) {
            outline: 3px solid var(--color-secondary);
        }

        &:hover {
            background-color: rgba(156, 206, 255, 0.1);
            background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
        }

        &:focus {
            background-color: black;
            color: white;
        }
    }
}
@layer components.cta {
    .cta {
        position: relative;
        overflow: clip;
        min-height: 810px;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        border-radius: 0.5rem/0.6rem;

        .cta-backdrop {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 0;

            media-playback {
                position: relative;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0);

                video {
                    width: 100%;
                    height: 100%;
                    -o-object-fit: cover;
                       object-fit: cover;
                    opacity: 0.5;
                }
                button {
                    isolation: isolate;
                    z-index: 100 !important;
                }
            }
        }
        .cta-foreground {
            position: relative;
            z-index: 2;
            padding: 2rem 10rem;
            /* min-height: 810px; */
            color: white;
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            /* pointer-events: none; */
            font-size: 2rem;
        }
    }
}
@layer components.button {
    .pill-button {
        padding: 0.52rem 1.5rem 0.55rem;
        padding-inline: 1.75rem;
        background-color: #fff;
        border: 2px solid var(--color-softwhite);
        box-shadow: inset 0 -1.5px 0 0 var(--color-gray-3);
        border-radius: 1.5rem;
        text-decoration: none;
        font-size: 1.05rem;
        font-weight: 500;
        letter-spacing: 0.2px;
        color: var(--color-softblack);
        transition: 0.125s color ease-in-out,
                    0.125s border-color ease-in-out,
                    0.125s box-shadow ease-in-out;

        &:hover,
        &:focus {
            color: var(--color-black);
            border-color: var(--color-softwhite);
            box-shadow: inset 0 0 0 2px var(--color-primary);
            /* border-left-color: var(--color-gray-10);
            border-top-color: var(--color-gray-10);

            border-right-color: var(--color-gray-11);
            border-bottom-color: var(--color-gray-11); */
        }

        &::after {
            --size: 0.77em;
            opacity: 0.7;
        }
    }
}
/* Utilities
------------ */
@layer utilities {
    /* https://css-tricks.com/inclusively-hidden/ */
    :is(.sr-only, .visually-hidden):not(:focus):not(:active) {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    .hidden {
        display: none !important;
        visibility: hidden;
    }

    .invisible {
        visibility: hidden;
    }

    /* Line Break Before */
    .br-before::before {
        content: "\A";
        white-space: pre;
    }

    /* Line Break After */
    .br-after::after {
        content: "\A";
        white-space: pre;
    }

    .text-serif {
        font-family: var(--font-serif);
    }

    .text-left {
        text-align: left;
    }

    .text-center {
        text-align: center;
    }

    .text-right {
        text-align: right;
    }

    /* Breakout of container */
    .break-out {
        display: block;
        width: calc(100% + var(--padding-inline) * 2);
        margin-inline: calc(var(--padding-inline) * -1);
    }
}