:root {
    --button--color--background--danger: var(--color--danger);
    --button--color--background--inactive: var(--color--background--secondary);
    --button--color--background--loud: var(--color--loud);
    --button--color--background--quiet: var(--color--brand--70);
    --button--color--text: var(--color--text--inverted);
    --button--color--text--inactive: var(--color--text--primary);
    --button--font--family: var(--font--family--sans-serif);
    --button--font--size: var(--font--size--2xsmall);

    /* Form field */
    --form-field--color--border--error: var(--color--danger);
    --form-field--color--background: var(--color--background--secondary);
    --form-field--color--background--focus: var(--color--brand--highlight);
    --form-field--color--background--readonly: var(--color--background--primary);
    --form-field--color--border--error: var(--color--danger);
    --form-field--color--text--input: var(--color--brand--black);
    --form-field--color--text--placeholder: var(--color--brand--70);
    --form-field--color--text--readonly: var(--color--brand--black);
    --form-field--font--family: var(--font--family--monospace);
    --form-field--font--size: var(--font--size--large);
    --form-field--info--color--background: var(--color--brand--70);
    --form-field--info--color--text: var(--color--brand--white);
    --form-field--info--font--size: var(--font--size--3xsmall);
    --form-field--info--font--weight: var(--font--weight--800);

    --form-field--label--color--text: var(--color--brand);
    --form-field--label--font--family: var(--font--title--family--xsmall);
    --form-field--label--font--size: var(--font--title--size--xsmall);
    --form-field--label--font--weight: var(--font--title--weight--xsmall);
    --form-field--label--font--line-height: var(--font--title--line-height--xsmall);
    --form-field--label--font--letter-spacing: var(--font--title--letter-spacing--xsmall);
    --form-field--label--font--casing: var(--font--title--casing--xsmall);

    --form-field--size--border--error: 4px;

    /* Header */
    --header--size--border--bottom: 6px;
    --header--color--border: var(--color--brand--contrast);
    --header--color--border--bottom: var(--color--brand--highlight);
    --header--color--background: var(--color--brand);

    /* Nav */
    --nav--font--weight: var(--font--weight--500);
    --nav--color--text: var(--color--brand--white);
    --nav--color--border: var(--color--brand--contrast);
    --nav--font--family: var(--font--family--sans-serif);

    --main--color--background: var(--color--background--primary);

    /* Left nav */
    --left-nav--color--background: var(--main--color--background);
    --left-nav--outer--font--size: var(--font--size--2xsmall);
    --left-nav--inner--font--size: var(--font--size--4xsmall);
    --left-nav--font--weight: var(--font--weight--600);
    --left-nav--font--family: var(--font--family--sans-serif);
    --left-nav--heading--font--family: var(--font--family--brand);
    --left-nav--heading--font--size: var(--font--size--900);
    --left-nav--heading--font--weight: var(--font--weight--500);

    /* Footer */
    --footer--color--background: var(--color--brand--90);
}

* {
    box-sizing: border-box;
}

body {
    display: grid;
    grid-template-columns: [left-edge] 20rem [main-left] 2fr [main-center] 2fr [main-right] 20rem [right-edge];
    grid-template-rows: calc(5rem + var(--header--size--border--bottom)) auto min-content;
    padding: 0;
    margin: 0;
    height: 100vh;
    max-height: 100vh;
    overflow: clip;
}

header.site {
    display: grid;
    grid-column: left-edge / right-edge;
    grid-template-columns: subgrid;
    background-color: var(--header--color--background);
    align-items: stretch;
    justify-content: center;
    border-bottom: solid var(--header--size--border--bottom) var(--header--color--border--bottom);
    height: calc(5rem + var(--header--size--border--bottom));
    /* border-top: solid var(--header--size--border) var(--header--color--border); */

    & a.brand {
        width: 100%;
        justify-self: center;
        align-self: stretch;
        grid-column: left-edge / main-left;
        justify-content: center;
        align-items: center;
        border-right: solid 2px var(--nav--color--border);

        & svg {
            margin: 0.5rem 1rem;
            max-width: 12.5rem;
            width: 100%;

            & .cls-2 {
                stroke: var(--color--brand--highlight);
                fill: var(--color--brand--highlight);
            }

        }
    }
}

main {
    grid-column: main-left / right-edge;
    display: grid;
    grid-template-columns: subgrid;
    background-color: var(--main--color--background);
    align-self: stretch;
    overflow-y: auto;
    /* padding-top: 4rem; */
    padding: 3.375rem 4.125rem 6rem;

    &.hide-nav {
        grid-column: left-edge / right-edge;
    }

    &.public {
        grid-column: left-edge / right-edge;
        grid-template-columns: 3fr 2fr;
        padding: 0;

        & section {
            grid-column: 1 / 2;
            align-self: center;
            margin: 5rem 7.38rem 5rem 6.87rem;
        }

        & div.cover-outer {
            align-self: stretch;
            border-left: solid var(--size--border) var(--color--border);
            background-color: var(--color--brand--80);
        }

        & div.cover {
            mask-image: var(--cover-pattern);
            mask-size: cover;
            mask-position: center center;
            background-color: var(--color--brand);
            width: 100%;
            height: 100%;
        }
    }
}

a.brand {
    display: flex;
    justify-content: end;
    align-items: center;

    & img.logo {
        width: 100%;
        padding: 0 0.75rem;
    }
}

nav.main {
    grid-column: main-left / right-edge;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    text-align: center;

    font-family: var(--font--title--family--xxsmall--all-caps);
    font-size: var(--font--title--size--xxsmall--all-caps);
    font-weight: var(--font--title--weight--xxsmall--all-caps);
    line-height: var(--font--title--line-height--xxsmall--all-caps);
    letter-spacing: var(--font--title--letter-spacing--xxsmall--all-caps);
    text-transform: var(--font--title--casing--xxsmall--all-caps);

    & ul {
        border: solid 0 var(--nav--color--border);
        border-width: var(--size--border) 0;
        display: flex;
        align-items: center;
        justify-content: end;

        list-style-type: none;
        padding: 0;
        margin: 0;

        & li {
            border-left: solid var(--nav--size--border) var(--nav--color--border);
            padding: 0.375rem 1rem;
            letter-spacing: 0.15em;
        }
    }

    & a {
        color: var(--nav--color--text);
        text-decoration: none;
    }
}

nav.left {
    overflow-y: auto;
    background-color: var(--left-nav--color--background);
    border-right: solid var(--size--border) var(--color--border);

    font-family: var(--font--title--family--xxsmall--all-caps);
    font-size: var(--font--title--size--xxsmall--all-caps);
    font-weight: var(--font--title--weight--xxsmall--all-caps);
    line-height: var(--font--title--line-height--xxsmall--all-caps);
    letter-spacing: var(--font--title--letter-spacing--xxsmall--all-caps);
    text-transform: var(--font--title--casing--xxsmall--all-caps);


    h2.nav-heading {
        text-align: center;
        border-bottom-style: solid;
        border-bottom-width: var(--size--border);
        border-bottom-color: var(--color--border);
        padding: 2.5rem 0 3rem 0;
        margin: 0;

        font-family: var(--font--title--family--large);
        font-size: var(--font--title--size--large);
        font-weight: var(--font--title--weight--large);
        line-height: var(--font--title--line-height--large);
        letter-spacing: var(--font--title--letter-spacing--large);
        text-transform: var(--font--title--casing--large);

        @media screen and (max-width: 1024px) {
            padding-inline: 0.75rem;
            font-size: 2rem;
        }
    }

    & ul {
        padding: 0;
        margin: 0;
        list-style-type: none;
        font-size: var(--left-nav--outer--font--size);

        & ul {
            font-size: var(--left-nav--inner--font--size);
            text-transform: uppercase;

            & li {
                margin: 0.75rem;
            }
        }
    }

    & > ul {
        & > li {
            padding: 0.8rem 1.25rem;
            border-bottom: solid var(--size--border) var(--color--border);
            text-transform: uppercase;

            & > a {
                text-decoration: none;

                &, &:hover, &:visited, &:active {
                    color: var(--color--text--primary);
                }
            }

            &.active {
                background-color: var(--color--brand--highlight);
            }
        }
    }
}

dl {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 2rem;

    > div {
        display: grid;
        grid-column: span 2;
        grid-template-columns: subgrid;
    }

    dt, dd {
        display: inline;
        margin: 0;
        padding: 0;
    }

    dt {
        font-weight: 600;
    }
}

section {
    /* border-left-style: solid;
    border-left-width: var(--size--border);
    border-left-color: var(--color--border); */
    grid-column: main-left / right-section;
    max-width: 50rem;
    /*
    padding: 2rem;
    padding-left: 4.125rem;
    padding-top: var(--header--size--border--bottom);
    */

    /* &:first-of-type {
        margin-top: calc(-1 * var(--header--size--border--bottom));
    } */

    & > header {
        /* padding-bottom: 2.125rem; */
        border-bottom: solid 0.5rem var(--color--border);
        margin-bottom: 1.8rem;

        & h1 {
            border: none;
            padding: 0;
            margin-bottom: 0.9375rem;
        }

        & h2 {
            margin-top: 0;
            margin-bottom: 1.9rem;

            font-family: var(--font--title--family--small);
            font-weight: var(--font--title--weight--small);
            font-size: var(--font--title--size--small);
            line-height: var(--font--title--line-height--small);
            letter-spacing: var(--font--title--letter-spacing--small);
            text-transform: var(--font--title--casing--small);
        }
    }
}

footer {
    grid-column: left-edge / right-edge;

    p {
        margin: 0 0 1rem;
    }
}

form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* grid-template-columns: 25% 25% 25% 25%; */
    row-gap: 0.5rem;
    column-gap: 1rem;
    max-width: 800px;

    div.form-action {
        margin-top: 0.5rem;
    }
}

.subgrid-columns {
    display: grid;
    grid-template-columns: subgrid;
}

.half {
    grid-column-end: span 2;
}

.quarter {
    grid-column-end: span 1;
}

.three-quarters {
    grid-column-end: span 3;
}

.full {
    grid-column-end: span 4;
}

div.form-field {
    display: grid;
    grid-template-areas:
        "label info "
        "input input"
        "note note";

    grid-template-rows: 1.31rem min-content minmax(1em, auto);

    /* min-width: 0; */

    row-gap: 0.56rem;
    /* grid-column-end: span 4; */
    align-items: top;
    justify-content: stretch;

    & label {
        grid-area: label;
    }

    & input, & textarea, & select {
        grid-area: input;
    }

    & p.note {
        grid-area: note;
    }

    & p.error {
        grid-area: note;
        text-align: right;
        margin: 0;

        font-family: var(--font--caption--family--small);
        font-size: var(--font--caption--size--small);
        font-weight: var(--font--caption--weight--small);
        line-height: var(--font--caption--line-height--small);
        letter-spacing: var(--font--caption--letter-spacing--small);
        text-transform: var(--font--caption--casing--small);
    }

    & details.info {
        grid-area: info;
    }


}

p.note {
    margin: 0;

    font-family: var(--font--caption--family--small);
    font-size: var(--font--caption--size--small);
    font-weight: var(--font--caption--weight--small);
    line-height: var(--font--caption--line-height--small);
    letter-spacing: var(--font--caption--letter-spacing--small);
    text-transform: var(--font--caption--casing--small);
    padding-bottom: 1.5rem;

    &:not(:last-child) {
        display: none;
    }
}

p.error {
    color: var(--color--danger);
}

/* Form field info button */
details.info {
    width: 1rem;
    height: 1rem;
    display: block;
    justify-self: end;

    & summary {
        list-style: none;
        display: block;
        width: 1rem;
        height: 1rem;
        line-height: 1rem;
        text-align: center;
        text-decoration: none;
        border-radius: 50%;
        color: var(--form-field--info--color--text);
        background-color: var(--form-field--info--color--background);

        /* TODO: Icon is not text. We should probably use an image here instead. */
        font-family: var(--font--family--sans-serif);
        font-size: var(--form-field--info--font--size);
        font-weight: var(--form-field--info--font--weight);

        &::-webkit-details-marker, &::marker {
            display: none;
        }
    }

    & div.content {
        &::before {
            content: "";
            border-style: solid;
            border-color: var(--color--border);
            border-width: var(--size--border) 0 0 0;
            height: var(--size--border);
            width: 2.1rem;
            left: -3.3rem;
            top: 0.6rem;
            position: relative;
            display: block;
        }

        position: relative;
        top: -2rem;
        right: -3rem;
        width: 13.75rem;
        padding: 0.75rem 1.125rem;
        opacity: 0;

        border-style: solid;
        border-width: var(--size--border);
        border-color: var(--color--border);
        background-color: var(--color--background--primary);
        transition: opacity 2s;

        font-family: var(--font--caption--family--xsmall);
        font-size: var(--font--caption--size--xsmall);
        font-weight: var(--font--caption--weight--xsmall);
        line-height: var(--font--caption--line-height--xsmall);
        letter-spacing: var(--font--caption--letter-spacing--xsmall);
        text-transform: var(--font--caption--casing--xsmall);
    }

    &[open] div.content {
        opacity: 1;
    }
}

label {
    font-family: var(--form-field--label--font--family);
    font-size: var(--form-field--label--font--size);
    font-weight: var(--form-field--label--font--weight);
    line-height: var(--form-field--label--font--line-height);
    letter-spacing: var(--form-field--label--font--letter-spacing);
    text-transform: var(--form-field--label--font--casing);

    &.required {
        &::after {
            content: " *";
            color: var(--color--brand--50);
            font-weight: 500;
        }
    }
}

.error {
    & input {
        padding: calc(.5rem - 2px) calc(1rem - 2px);
        border-color: var(--form-field--color--border--error);
        border-width: var(--form-field--size--border--error);
    }
}

input, select {
    box-sizing: content-box;
    height: 1.49870588em;
}

input, textarea, select {
    font-family: var(--font--input--family--medium);
    font-size: var(--font--input--size--medium);
    font-weight: var(--font--input--weight--medium);
    line-height: var(--font--input--line-height--medium);
    letter-spacing: var(--font--input--letter-spacing--medium);
    text-transform: var(--font--input--casing--medium);

    color: var(--color--text--primary);
    border-style: solid;
    border-width: var(--size--border);
    border-color: var(--color--border);
    padding: 1.06rem 1.25rem 1.19rem;
    margin: 0;
    min-width: 0;

    &::placeholder {
        color: var(--form-field--color--text--placeholder);
    }

    &:focus {
        background-color: var(--color--brand--highlight--soft);
        outline: none;
    }

    &:disabled {
        color: var(--form-field--color--text--readonly);
        background-color: var(--form-field--color--background--readonly);
    }
    &:read-only:not(select) {
        color: var(--form-field--color--text--readonly);
        background-color: var(--form-field--color--background--readonly);
    }

    &:user-invalid {
        color: var(--color--danger);
        border-color: var(--color--danger);
    }

    /*
    &:invalid {
        color: var(--color--danger);
        border-color: var(--color--danger);
    }
    */
}

textarea {
    font-family: var(--font--text--family--large);
    font-size: var(--font--text--size--large);
    font-weight: var(--font--text--weight--large);
    line-height: var(--font--text--line-height--large);
    letter-spacing: var(--font--text--letter-spacing--large);
    text-transform: var(--font--text--casing--large);
}

button, .button {
    display: inline-flex;
    align-items: center;
    padding: 0.71875rem 2.125rem;
    /* min-width: 11rem; */
    text-align: center;
    white-space: nowrap;

    font-family: var(--font--button--family);
    font-size: var(--font--button--size);
    font-weight: var(--font--button--weight);
    line-height: var(--font--button--line-height);
    letter-spacing: var(--font--button--letter-spacing);
    text-transform: var(--font--button--casing);

    background-color: var(--color--brand--contrast--alt);

    color: var(--button--color--text);

    border: none;
    border-radius: var(--size--corner-radius);
    height: 3.125rem;
    overflow: hidden;
    vertical-align: bottom;
    cursor: pointer;

    min-width: 12rem;
    justify-content: center;

    text-decoration: none;

    &:visited, &:hover, &:active {
        color: var(--button--color--text);
    }

    &.danger {
        background-color: var(--button--color--background--danger);
    }

    &.loud {
        background-color: var(--button--color--background--loud);
    }

    &:disabled {
        background-color: var(--button--color--background--inactive);
        color: var(--button--color--text--inactive);
        border-style: solid;
        border-width: var(--size--border);
        border-color: var(--color--border);
        cursor: default;
    }

    &.borderless {
        background: none;
        border: none;
        color: var(--color--text--primary);
        padding: 0;
    }

    &.link {
        background: none;
        border: none;
        color: var(--color--text--primary);
        padding: 0;
        min-width: 0;
        justify-self: center;
        align-self: start;
        height: auto;
        margin-block: 0 0.75rem !important;
    }
}


input[type=radio] {
    appearance: none;
    border-style: solid;
    border-color: var(--color--border);
    border-width: var(--size--border);
    border-radius: 100%;
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--color--background--primary);
    padding: 0;

    display: grid;
    place-content: center;

    &::before {
        content: "";
        width: 0.5rem;
        height: 0.5rem;
        background-color: var(--form-field--color--text--input);
        border-radius: 50%;
        transform: scale(0);
        transition: 120ms transform ease-in-out;
    }

    &:checked::before {
        transform: scale(1);
    }

    &:focus {
        background-color: var(--form-field--color--background--focus);
        outline: none;
    }

    &:disabled {
        background-color: transparent;

        &::before {
            background-color: var(--form-field--color--text--readonly);
        }
    }
}

input[type=checkbox] {
    appearance: none;
    border-style: solid;
    border-color: var(--color--border);
    border-width: var(--size--border);
    width: 1.1875rem;
    height: 1.1875rem;
    background-color: var(--color--background--primary);
    padding: 0;

    display: grid;
    place-content: center;

    &::before {
        content: "";
        /* width: 0.625rem;
        height: 0.625rem; */
        width: 0.6875rem;
        height: 0.6875rem;
        background-color: var(--form-field--color--text--input);
        mask-image: var(--icon--checkmark);
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        transform: scale(0);
        transition: 120ms transform ease-in-out;
    }

    &:checked::before {
        transform: scale(1);
    }

    &:focus {
        background-color: var(--form-field--color--background--focus);
        outline: none;
    }

    &:disabled {
        background-color: transparent;

        &::before {
            background-color: var(--form-field--color--text--readonly);
        }
    }
}

div.inline-field {
    display: grid;
    grid-template-columns: min-content auto;
    justify-content: start;
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 1.25rem;
    grid-column: span 4;
    margin: -0.5rem 0 2rem;

    &.inverted {
        grid-template-columns: 1fr min-content;
    }

    &.end {
        justify-content: end;
    }

    &.three-quarters {
        grid-column: span 3;
    }

    &.half {
        grid-column: span 2;
    }

    &.quarter {
        grid-column: span 1;
    }

    & label {
        font-family: var(--font--title--family--xxsmall);
        font-size: var(--font--title--size--xxsmall);
        font-weight: var(--font--title--weight--xxsmall);
        line-height: var(--font--title--line-height--xxsmall);
        letter-spacing: var(--font--title--letter-spacing--xxsmall);
        text-transform: var(--font--title--casing--xxsmall);
    }
}

input[type=checkbox][role=switch] {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 1.25rem;
    width: 2.375rem;
    border-radius: 10rem;
    position: relative;
    justify-content: start;

    &::before {
        content: "";
        width: calc(1.25rem - 8px);
        height: calc(1.25rem - 8px);
        background-color: var(--form-field--color--text--input);
        border-radius: 100%;
        transform: none;
        mask: none;
        margin: 2px;
    }

    &:checked {
        justify-content: end;
        background-color: var(--color--brand--highlight--soft);
        border-color: var(--color--brand--30);
    }
}

select {
    appearance: none;
    border-style: solid;
    border-color: var(--color--border);
    border-width: var(--size--border);
    border-radius: 0;
    background-color: var(--color--brand--white);
    /* TODO: Remove? */
    /* font-family: var(--form-field--font--family); */
    /* font-size: var(--form-field--font--size); */
    /* padding: .5rem 2rem .5rem 1rem; */
    display: grid;
    grid-column: 1 / span 2;
    justify-content: space-between;
    align-items: center;
    overflow-x: hidden;
    text-overflow: ellipsis;
    width: auto;
    grid-template-columns: auto 1rem;

    &:focus {
        background-color: var(--form-field--color--background--focus);
        outline: none;
    }

    background-image: var(--icon--select);
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 0.85rem;
}

svg {
    stroke: currentColor;
}

footer {
    display: grid;
    grid-template-columns: min-content auto 30rem 14rem;
    grid-template-rows: min-content auto;
    background-color: var(--footer--color--background);
    border-top: solid var(--size--border) var(--color--border);

    & div.logo {
        padding: 1rem 1.25rem;
        border-right: solid var(--size--border) var(--color--border);

        & svg {
            margin-top: 0.25rem;
            width: 2.65rem;

            & path {
                fill: var(--color--brand--highlight);
                stroke: none;
            }

            & circle {
                fill: var(--color--text--primary);
                stroke: none;
            }
        }
    }

    & > div.summary {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 1 / 5;
        align-items: center;
    }

    & a {
        text-decoration: none;
    }

    & address {
        grid-column: 2 / 4;
        margin: 0 1.4rem;
        font-style: normal;

        font-family: var(--font--caption--family--xsmall);
        font-size: var(--font--caption--size--xsmall);
        font-weight: var(--font--caption--weight--xsmall);
        line-height: var(--font--caption--line-height--xsmall);
        letter-spacing: var(--font--caption--letter-spacing--xsmall);
        text-transform: var(--font--caption--casing--xsmall);
    }

    & label.footerToggle {
        grid-column: 4 / 5;
        text-align: right;
        padding: 0 1rem;
        display: flex;
        align-items: center;

        font-family: var(--font--title--family--xxsmall--all-caps);
        font-size: var(--font--title--size--xxsmall--all-caps);
        font-weight: var(--font--title--weight--xxsmall--all-caps);
        line-height: var(--font--title--line-height--xxsmall--all-caps);
        letter-spacing: var(--font--title--letter-spacing--xxsmall--all-caps);
        text-transform: var(--font--title--casing--xxsmall--all-caps);

        margin-bottom: 0.25rem;

        & > input[type=checkbox] {
            appearance: none;
            border: none;
            background: none;
            width: 1rem;
            height: 1rem;
            margin: 0;

            &:before {
                content: "";
                display: none;
            }

            &:checked:after {
                mask-image: var(--icon--down);
                margin: 0 0 0.25rem 1rem;
            }

            &:after {
                content: "";
                background-color: var(--color--brand);
                mask-image: var(--icon--up);
                mask-repeat: no-repeat;
                mask-position: center center;
                width: 1rem;
                height: 1rem;
                margin: 0 0 0 1rem;

            }
        }
    }

    & div.main-footer {
        display: none;
        grid-template-columns: subgrid;
        grid-column: 1 / 5;
        border-top: solid var(--size--border) var(--color--border);
        justify-content: stretch;

        & div.message {
            grid-column: 2 / 3;
            display: flex;
            align-items: center;
            padding-right: 4.88rem;
        }

        & ul.social {
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: flex;
            column-gap: 1rem;
            align-items: center;

            & svg {
                stroke: none;
                fill: currentColor;
            }
        }

        & ul.links {
            list-style-type: none;
            padding: 0;
            margin: 0;

            & li {
                padding: 0.81rem 0 0.88rem;
                font-family: var(--font--title--family--xxsmall);
                font-size: var(--font--title--size--xxsmall);
                font-weight: var(--font--title--weight--xxsmall);
                line-height: var(--font--title--line-height--xxsmall);
                letter-spacing: var(--font--title--letter-spacing--xxsmall);
                text-transform: var(--font--title--casing--xxsmall);

                border-bottom: solid var(--size--border) var(--color--brand--85);

                &:last-of-type {
                    border-bottom: none;
                }
            }
        }

        & h4 {
            padding-bottom: 1rem;
            border-bottom: solid var(--size--border) var(--color--border);
            margin: 0 0 0.25rem;

            font-family: var(--font--title--family--xxsmall--all-caps);
            font-size: var(--font--title--size--xxsmall--all-caps);
            font-weight: var(--font--title--weight--xxsmall--all-caps);
            line-height: var(--font--title--line-height--xxsmall--all-caps);
            letter-spacing: var(--font--title--letter-spacing--xxsmall--all-caps);
            text-transform: var(--font--title--casing--xxsmall--all-caps);
        }

        & > div:not(:first-child) {
            border-left: solid var(--size--border) var(--color--border);
            padding: 1.3rem;
        }

        & dl {
            padding-inline: 1rem;
            border-bottom: solid var(--size--border) var(--color--border);
            padding: 0 0 1rem 0;
            margin: 0.81rem 0 1rem 0;
            row-gap: 0.87rem;

            & div {
                align-items: center;
            }

            & div:first-of-type {
                margin-top: 0.25rem;
            }

            & dt {
                font-family: var(--font--title--family--xxsmall);
                font-size: var(--font--title--size--xxsmall);
                font-weight: var(--font--title--weight--xxsmall);
                line-height: var(--font--title--line-height--xxsmall);
                letter-spacing: var(--font--title--letter-spacing--xxsmall);
                text-transform: var(--font--title--casing--xxsmall);
            }

            & dd {
                /* Custom font styles */
                font-family: var(--font--family--sans-serif);
                font-size: 0.75rem;
                font-weight: 450;
                line-height: 1.667;
                letter-spacing: normal;
                text-transform: none;
            }
        }
    }

    & div.main-footer.always-open {
        display: grid;

        @media screen and (max-width: 1000px) {
            display: none;
        }
    }

    &:has(label > input[type=checkbox]:checked) div.main-footer {
        display: grid;
    }
}

.studioLink {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: 1rem;
    border-bottom: solid var(--size--border) var(--color--border);

    font-family: var(--font--input--family--medium);
    font-size: var(--font--input--size--medium);
    font-weight: var(--font--input--weight--medium);
    line-height: var(--font--input--line-height--medium);
    letter-spacing: var(--font--input--letter-spacing--medium);
    text-transform: var(--font--input--casing--medium);
}


nav.subnav {
    font-family: var(--font--title--family--xxsmall--all-caps);
    font-size: var(--font--title--size--xxsmall--all-caps);
    font-weight: var(--font--title--weight--xxsmall--all-caps);
    line-height: var(--font--title--line-height--xxsmall--all-caps);
    letter-spacing: var(--font--title--letter-spacing--xxsmall--all-caps);
    text-transform: var(--font--title--casing--xxsmall--all-caps);

    border: solid var(--size--border) var(--color--border);
    margin: 3rem 0 2rem;


    & ul {
        width: 100%;
        list-style-type: none;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: stretch;
    }

    & li {
        flex-grow: 1;
        text-align: center;

        &:not(:first-child) {
            border-left: solid var(--size--border) var(--color--border);
        }

        &.active {
            background-color: var(--color--brand--70);

            & a {
                color: var(--color--brand--white);
                text-decoration: none;
            }
        }
    }

    & a {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 2.625rem;
        text-decoration: none;
    }
}

table {
    width: 100%;

    border: solid var(--size--border) var(--color--border);
    border-collapse: collapse;
    margin-top: 1.19rem;

    font-family: var(--font--input--family--medium);
    font-size: var(--font--input--size--medium);
    font-weight: var(--font--input--weight--medium);
    line-height: var(--font--input--line-height--medium);
    letter-spacing: var(--font--input--letter-spacing--medium);
    text-transform: var(--font--input--casing--medium);

    & th, & td {
        border: solid var(--size--border) var(--color--border);
        padding: 1rem;
        background-color: var(--color--brand--white);
    }

    & th {
        background-color: var(--color--brand--85);
        text-align: left;

        font-family: var(--font--title--family--xsmall);
        font-size: var(--font--title--size--xsmall);
        font-weight: var(--font--title--weight--xsmall);
        line-height: var(--font--title--line-height--xsmall);
        letter-spacing: var(--font--title--letter-spacing--xsmall);
        text-transform: var(--font--title--casing--xsmall);
    }

    & a {
        border-bottom: solid var(--size--border) var(--color--border);
        text-decoration: none;
    }

    & caption {
        text-align: left;
        margin-bottom: 0.63rem;

        font-family: var(--font--title--family--xsmall);
        font-size: var(--font--title--size--xsmall);
        font-weight: var(--font--title--weight--xsmall);
        line-height: var(--font--title--line-height--xsmall);
        letter-spacing: var(--font--title--letter-spacing--xsmall);
        text-transform: var(--font--title--casing--xsmall);
    }
}

dl.invoices.summary {
    display: flex;
    /* display: grid; */
    column-gap: 2.5rem;
    width: 100%;
    /* grid-template-columns: repeat(3, 1fr); */

    & div {
        flex-grow: 1;
    }

    & dt {
        border-bottom: solid var(--size--border) var(--color--border);
        display: block;
        padding-bottom: 0.81rem;

        font-family: var(--font--title--family--xsmall);
        font-size: var(--font--title--size--xsmall);
        font-weight: var(--font--title--weight--xsmall);
        line-height: var(--font--title--line-height--xsmall);
        letter-spacing: var(--font--title--letter-spacing--xsmall);
        text-transform: var(--font--title--casing--xsmall);
    }

    & dd {
        text-align: right;
        display: flex;
        justify-content: end;
        align-items: top;

        font-family: var(--font--family--monospace);
        font-size: 4rem;
        font-weight: 400;
        line-height: normal;
        letter-spacing: -0.32rem;
        text-transform: none;

        &.negative {
            /* TODO: Variable-ize this */
            /* color: #FF5320; */
            color: var(--color--danger);
        }

        &.positive {
            color: var(--color--loud)
        }

        & span.cents {
            padding-top: 0.75rem;
            padding-left: 0.5rem;
            font-size: 2rem;
            font-weight: 900;
            letter-spacing: -0.16rem;
        }
    }
}

header.invoices-intro {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "heading -     "
        "copy    button";
    column-gap: 2.44rem;
    border-bottom: none;

    & h1 {
        grid-area: heading;
    }

    & p {
        margin-top: 0;
        padding-top: 1.375rem;
        border-top: solid 8px var(--color--border);
        grid-area: copy;
    }

    & a.button {
        grid-area: button;
        padding-inline: 7rem;
    }
}


p + a.button, p + button {
    margin-top: 1rem;
}

div.form-action {
    margin-top: 2rem;
}

textarea {
    resize: vertical;
}

p:has(+ h2):not(.note, .error) {
    margin-bottom: 5rem;
}


main {
    & section.invoice-list {
        max-width: 80rem;
    }
}

div.setup-checklist {
    background-color: var(--color--brand--white);
    background-image:
        linear-gradient(to right, var(--color--brand--97) 1px, transparent 1px),
        linear-gradient(to bottom, var(--color--brand--97) 1px, transparent 1px);
    background-size: 1.25rem 1.25rem;
    margin-block: 3rem;
    padding: 3.75rem 5rem;
    border: solid var(--size--border) var(--color--border);

    & h2 {
        margin-block: 0 2rem;
        font-family: var(--font--title--family--large);
        font-size: var(--font--title--size--large);
        font-weight: var(--font--title--weight--large);
        line-height: var(--font--title--line-height--large);
        letter-spacing: var(--font--title--letter-spacing--large);
        text-transform: var(--font--title--casing--large);
    }

    & p {
        margin-block: 3rem;
        font-family: "Just Saying";
        font-size: 2rem;
        font-weight: 400;
        line-height: 1.15;
        letter-spacing: -0.08
    }

    & .inline-field {
        margin-bottom: 3rem;

        & input:disabled:checked {
            background-color: var(--color--brand--highlight);
        }

        & label {
            font-family: var(--font--title--family--xsmall);
            font-size: var(--font--title--size--xsmall);
            font-weight: var(--font--title--weight--xsmall);
            line-height: var(--font--title--line-height--xsmall);
            letter-spacing: var(--font--title--letter-spacing--xsmall);
            text-transform: var(--font--title--casing--xsmall);
        }
    }
}

ul.flash-messages {
    font-family: var(--font--caption--family--large);
    font-size: var(--font--caption--size--large);
    font-weight: var(--font--caption--weight--large);
    line-height: var(--font--caption--line-height--large);
    letter-spacing: var(--font--caption--letter-spacing--large);
    text-transform: var(--font--caption--casing--large);

    list-style-type: none;
    margin: 2rem 0;
    padding: 0;
}

div.loginActions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 2rem;
    column-gap: 2rem;

    & .inline-field {
        margin: 0;
    }

    a {
        font-family: var(--font--title--family--xsmall);
        font-size: var(--font--title--size--xsmall);
        font-weight: var(--font--title--weight--xsmall);
        line-height: var(--font--title--line-height--xsmall);
        letter-spacing: var(--font--title--letter-spacing--xsmall);
        text-transform: var(--font--title--casing--xsmall);

    }

    /* @media (max-width: 1050px) {
        flex-direction: column;
        align-items: start;
    } */
}

body#settings ul.flash-messages {
    margin-block: -1rem 1rem;
}

ul.settings-payment-options {
    list-style-type: none;
    margin: 0;
    padding: 0;

    & li {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        column-gap: 3rem;
        padding-block: 1.25rem;

        border-bottom: solid var(--size--border) var(--color--border);

        &:first-of-type {
            border-top: solid var(--size--border) var(--color--border);
        }

        & h3 {
            font-family: var(--font--title--family--xsmall);
            font-size: var(--font--title--size--xsmall);
            font-weight: var(--font--title--weight--xsmall);
            line-height: var(--font--title--line-height--xsmall);
            letter-spacing: var(--font--title--letter-spacing--xsmall);
            text-transform: var(--font--title--casing--xsmall);

            margin-block: 0 0.75rem;
        }

        & p {
            font-family: var(--font--caption--family--xsmall);
            font-size: var(--font--caption--size--xsmall);
            font-weight: var(--font--caption--weight--xsmall);
            line-height: var(--font--caption--line-height--xsmall);
            letter-spacing: var(--font--caption--letter-spacing--xsmall);
            text-transform: var(--font--caption--casing--xsmall);

            margin: 0;
        }
    }
}

body#marketing {
    color: #000C66;
    /* background-color: var(--color--brand--97); */
    grid-template-rows: min-content 1fr min-content;
    min-height: 100vh;
    max-height: none;
    height: auto;
    overflow-y: auto;

    @media screen and (max-width: 40rem) {
        grid-template-columns: [left-edge] 4rem [main-left] 2fr [main-center] 2fr [main-right] 4rem [right-edge];
    }

    & header {
        @media screen and (max-width: 40rem) {
            grid-template-columns: 1fr;
            justify-content: center;

            & a.brand {
                max-width: 15rem;
                border: none;
                grid-column: span 1;
                margin-top: 0.5rem;
            }

            & nav, & nav * {
                border: none;
                grid-column: auto;
            }
        }
    }

    & footer {
        align-self: end;

        @media screen and (max-width: 60rem) {
            grid-template-columns: 1fr;

            & div.logo {
                border-right: none;
            }
        }
    }

    & main {
        align-items: start;
        grid-template-columns: subgrid;
        grid-template-rows: 1fr auto;
        padding-inline: 0;
        overflow-x: hidden;
        padding-bottom: 0;

        background-image: var(--cover-pattern-repeat);
        background-repeat: repeat;
        background-size: 20rem;
        max-height: none;
        height: auto;
        align-self: stretch;
        overflow-y: hidden;

        & section {
            height: 100%;

            &:first-of-type {
                display: flex;
                flex-direction: column;
                justify-content: center;
            }

            @media screen and (max-width: 1200px) {
                grid-column: left-edge / right-edge;
                margin-inline: 8rem;
            }

            @media screen and (max-width: 900px) {
                grid-column: left-edge / right-edge;
                margin-inline: 2rem;
            }
        }

        & form {
            display: flex;
            align-items: center;
            column-gap: 3rem;
            max-width: none;
            margin-bottom: 5rem;

            @media screen and (max-width: 40rem) {
                flex-direction: column;
                align-items: stretch;
            }

            & input {
                font-size: 1.25rem;
                font-family: var(--font--family--sans-serif);
                font-weight: 700;
                flex: 1;
                text-align: center;
                padding: 0;
                display: block;

                height: calc(5rem - 4px);

                @media screen and (max-width: 40rem) {
                    padding: 1.5rem;
                    margin-block: 1rem;
                }

                &::placeholder {
                    color: darkgray;
                }
            }

            & button {
                margin: 0;
                background-color: var(--color--brand--highlight);
                color: #000C66;
                font-size: 1.5rem;
                height: 5rem;
                box-shadow: var(--color--border) 0rem 0.1rem 0.1rem;
                border-radius: 0;
            }
        }
    }

    & section {
        padding: 3rem 0;
        max-width: 80rem;
        margin-block: auto;
        grid-column: main-left / main-right;
        justify-self: center;

        & header.prominent {
            text-align: center;
            margin-bottom: 0;

            & h1 {
                font-family: var(--font--title--family--xlarge);
                font-size: var(--font--title--size--xlarge);
                font-weight: var(--font--title--weight--xlarge);
                line-height: var(--font--title--line-height--xlarge);
                letter-spacing: var(--font--title--letter-spacing--xlarge);
                text-transform: var(--font--title--casing--xlarge);

                font-size: 6rem;

                @media screen and (max-width: 1200px) {
                    font-size: 3.75rem;
                }
            }

            & h2 {
                font-weight: 700;
                letter-spacing: -0.00125em;
            }
        }

        & p {
            font-family: var(--font--text--family--xlarge);
            font-size: var(--font--text--size--xlarge);
            font-weight: var(--font--text--weight--xlarge);
            line-height: var(--font--text--line-height--xlarge);
            letter-spacing: var(--font--text--letter-spacing--xlarge);
            text-transform: var(--font--text--casing--xlarge);

            font-size: 1.75rem;
        }

        & p.fine {
            font-family: var(--font--caption--family--medium);
            font-size: var(--font--caption--size--medium);
            font-weight: var(--font--caption--weight--medium);
            line-height: var(--font--caption--line-height--medium);
            letter-spacing: var(--font--caption--letter-spacing--medium);
            text-transform: var(--font--caption--casing--medium);

            text-align: center;
            font-size: 1.15rem;
            margin-inline: 8rem;
            margin-block: 4rem;
        }
    }

    & section.highlight {
        margin: 0;

        & div.inner {
            grid-column: main-left / main-right;

            @media screen and (max-width: 1200px) {
                grid-column: left-edge / right-edge;
                margin-inline: 8rem;
            }

            @media screen and (max-width: 900px) {
                grid-column: left-edge / right-edge;
                margin-inline: 2rem;
            }
        }

        & p {
            font-family: var(--font--caption--family--large);
            font-size: var(--font--caption--size--large);
            font-weight: var(--font--caption--weight--large);
            line-height: var(--font--caption--line-height--large);
            letter-spacing: var(--font--caption--letter-spacing--large);
            text-transform: var(--font--caption--casing--large);

            margin-top: 1rem;
            font-size: 2rem;
            font-weight: 300;
            line-height: 1.5;
        }


    }

    & div.highlight {
        display: grid;
        grid-column: left-edge / main-outer-right;
        background-color: var(--color--brand--highlight);
        border-top: solid var(--size--border) var(--color--border);
        grid-template-columns: subgrid;
    }
}

p.drop-cap {
    &::first-letter {
        /* display: inline-block; */
        font-family: var(--font--family--sans-serif);
        font-size: 4.9em;
        font-weight: 900;
        color: var(--color--brand--70);
        text-shadow: 0.3rem 0.3rem var(--color--brand--90);
        float: left;
        line-height: 0.9em;
        margin-right: 0.5rem;
    }
}

.invoices-intro .button {
    margin-top: 0;
}

body#profile {
    & p:has(+ div.form-field) {
        margin-bottom: 2rem;
    }
}

body#settings {
    & h2 + p {
        margin-top: 0;
    }
}

strong {
    font-weight: 700;
}

span.highlight {
    background-color: var(--color--brand--highlight);
    margin: 0 -0.1rem;
}

form + h2 {
    margin-top: 4rem;
}