:root {
    --colour-red: #E05755;
    --colour-yellow: #FCCA57;
    --colour-green: #7CC083;
    --colour-blue: #80A8D5;
    --colour-background: #F6F3EE; /* aka alt-100 */
    --colour-primary: #1E4B39; /* aka primary-800 */

    --colour-red: oklch(63.603% 0.17193 24.131);
    --colour-red-50: oklch(96.453% 0.01297 17.381);
    --colour-red-100: oklch(92.486% 0.02874 17.683);
    --colour-red-200: oklch(84.669% 0.0624 18.461);
    --colour-red-300: oklch(77.098% 0.09875 20.348);
    --colour-red-400: oklch(69.903% 0.13534 21.674);
    --colour-red-500: oklch(63.603% 0.17193 24.131);
    --colour-red-600: oklch(56.889% 0.20726 27.584);
    --colour-red-700: oklch(47.242% 0.17007 27.319);
    --colour-red-800: oklch(37.382% 0.13069 26.723);
    --colour-red-900: oklch(26.867% 0.08767 26.137);
    --colour-red-950: oklch(21.12% 0.06356 24.377);

    /*
    'paper': {  DEFAULT: '#F3F2F1',  50: '#FCFCFC',  100: '#F3F2F1',  200: '#D9D7D3',  300: '#BFBBB4',
    400: '#A6A096',  500: '#8C8478',  600: '#6E685E',  700: '#504B44',  800: '#312F2A',  900: '#131210',  950: '#040403'},
     */
    --colour-paper: oklch(96.164% 0.00172 67.802);
    --colour-paper-50: oklch(99.107% 0 none);
    --colour-paper-100: oklch(96.164% 0.00172 67.802);
    --colour-paper-200: oklch(87.961% 0.00587 84.568);
    --colour-paper-300: oklch(79.331% 0.01075 81.793);
    --colour-paper-400: oklch(70.791% 0.01589 80.69);
    --colour-paper-500: oklch(61.687% 0.02013 78.167);
    --colour-paper-600: oklch(51.974% 0.0171 80.653);
    --colour-paper-700: oklch(41.542% 0.01319 76.468);
    --colour-paper-800: oklch(30.551% 0.00922 88.755);
    --colour-paper-900: oklch(18.257% 0.00432 84.592);
    --colour-paper-950: oklch(10.584% 0.00421 107.1);

    --colour-primary: oklch(37.538% 0.05905 164.6);
    --colour-primary-50: oklch(88.059% 0.05048 169.13);
    --colour-primary-100: oklch(85.61% 0.06031 167.76);
    --colour-primary-200: oklch(80.761% 0.07902 167.57);
    --colour-primary-300: oklch(76.187% 0.09942 165.88);
    --colour-primary-400: oklch(71.589% 0.11573 164.15);
    --colour-primary-500: oklch(64.386% 0.10919 163.75);
    --colour-primary-600: oklch(55.801% 0.09349 163.99);
    --colour-primary-700: oklch(46.911% 0.07647 164.1);
    --colour-primary-800: oklch(37.538% 0.05905 164.6);
    --colour-primary-900: oklch(23.561% 0.03153 166.88);
    --colour-primary-950: oklch(15.723% 0.01687 166.13);

    --colour-alt: oklch(96.508% 0.00739 80.721);
    --colour-alt-50: oklch(99.155% 0.0017 67.802);
    --colour-alt-100: oklch(96.508% 0.00739 80.721);
    --colour-alt-200: oklch(88.896% 0.02419 79.733);
    --colour-alt-300: oklch(81.11% 0.03973 79.975);
    --colour-alt-400: oklch(73.272% 0.0572 79.446);
    --colour-alt-500: oklch(65.235% 0.07379 79.51);
    --colour-alt-600: oklch(55.068% 0.0633 80.671);
    --colour-alt-700: oklch(43.76% 0.0478 79.479);
    --colour-alt-800: oklch(32.03% 0.03213 78.083);
    --colour-alt-900: oklch(18.916% 0.0149 81.435);
    --colour-alt-950: oklch(10.727% 0.00946 89.258);

    /*--colour-primary-50: #f0f9f4;*/
    /*--colour-primary-100: #dcefe3;*/
    /*--colour-primary-200: #bbdfca;*/
    /*--colour-primary-300: #8dc8aa;*/
    /*--colour-primary-400: #5daa85;*/
    /*--colour-primary-500: #3b8e68;*/
    /*--colour-primary-600: #2a7153;*/
    /*--colour-primary-700: #225a43;*/
    /*--colour-primary-800: #1e4b39;*/
    /*--colour-primary-900: #183c2e;*/
    /*--colour-primary-950: #0d211a;*/

    /*--colour-alt-50: #f6f3ee;*/
    /*--colour-alt-100: #f0ece4;*/
    /*--colour-alt-200: #e1d7c7;*/
    /*--colour-alt-300: #cebca3;*/
    /*--colour-alt-400: #b99d7e;*/
    /*--colour-alt-500: #aa8665;*/
    /*--colour-alt-600: #9d7559;*/
    /*--colour-alt-700: #835f4b;*/
    /*--colour-alt-800: #6b4f41;*/
    /*--colour-alt-900: #574137;*/
    /*--colour-alt-950: #2e211c;*/
}

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

a:not([class]) {
    text-decoration-skip-ink: auto;
    color: currentColor;
}

html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

body {
    margin: 0;
    min-height: 100vh;
    line-height: 1.5;
    font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    border-top: 0.75rem solid transparent;
    border-image-source: linear-gradient(to right, var(--colour-red) 0%, var(--colour-yellow) 25%, var(--colour-green) 55%, var(--colour-blue) 100%);
    border-image-slice: 100% 0;
    background-color: var(--colour-background);
    color: var(--colour-paper-900);
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

ul {
    padding: 0;
}

input, button,
textarea, select {
    font-family: inherit;
    font-size: inherit;
}

img {
    max-width: 100%;
    height: auto;
    background-repeat: no-repeat;
    background-size: cover;
}

h2, h3 {
    text-wrap: balance;
}

p {
    font-size: 0.875rem;
    line-height: 1.5rem;
    margin: 0;
}

.prose {
    & > p {
        margin: 1rem 0;
    }
}

@media (width >= 40rem) {
    p {
        font-size: 1rem;
    }
}

.logo-header {
    display: flex;
    padding: 2rem;
}

@media (width >= 32rem) {
    .logo-header {
        padding: 4rem 2rem;
        align-items: center;
        justify-content: center;

        & > .wrapper {
            flex: 1;
        }
    }
}

.top-bar {
    padding: 3rem 1rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;

    & > .left {
        flex: 1;
        justify-content: start;
        display: flex;
    }
}

@media (width >= 64rem) {
    .top-bar {
        padding: 3rem 4rem;
    }
}

.logo {
    display: flex;
    gap: 0.5rem;

    & > img {
        width: 5rem;
    }
}

.btn {
    text-decoration: none;
    display: inline-flex;
    height: 3rem;
    min-height: 3rem;
    cursor: pointer;
    user-select: none;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    padding-inline: 1rem;
    line-height: 1em;
    border: 1px solid var(--colour-primary);
    color: var(--colour-alt-50);
    background-color: var(--colour-primary);

    &:hover {
        background-color: var(--colour-primary-700);
    }

    &.-outline {
        background-color: transparent;
        color: var(--colour-primary);
    }

    &.-outline:hover {
        background-color: var(--colour-alt-50);
    }

    &.-light {
        border: 1px solid var(--colour-alt-50);
        background-color: var(--colour-alt-50);
        color: var(--colour-primary);
    }

    &.-light:hover {
        background-color: var(--colour-alt-100);
    }

    &.-active .spinner {
        display: block;
    }

    &.-active span {
        display: none;
    }
}

.button-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;

    &.-fill .btn {
        flex: 1;
    }

    & > .-grow {
        flex-grow: 1;
    }
}

.spinner {
    display: none;
    width: 1.25rem;
    height: 1.25rem;
    animation: spin 1s linear infinite;

    & > circle {
        stroke: var(--colour-primary-600);
    }

    & > path {
        fill: var(--colour-primary-50);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.title {
    font-size: 1.75rem;
    line-height: 1.2;
    color: var(--colour-primary);
}

@media (width >= 64rem) {
    .title {
        font-size: 2.75rem;

        &.-smaller {
            font-size: 2rem;
        }
    }
}

.subtitle {
    font-weight: normal;
    font-size: 1rem;
    color: var(--colour-paper-700);
    margin: 1rem 0;
    text-wrap: balance;
    line-height: 1.5;
}

@media (width >= 64rem) {
    .subtitle {
        font-size: 1.5rem;
        margin: 2rem 0;
    }
}

.content-section {
    padding: 3rem 1rem;

    &.-dark {
        background-color: var(--colour-primary);
        padding-top: 1rem;
    }

    &.-dark .title {
        color: var(--colour-alt-50);
    }

    &.-dark .subtitle {
        color: var(--colour-alt-200);
    }

    &.-dark .prose {
        color: var(--colour-alt-200);
    }

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

.dark-divider {
    display: block;
    color: var(--colour-primary);
    margin-bottom: -0.25rem;
}

.light-divider {
    display: block;
    color: var(--colour-background);
    background-color: var(--colour-primary);
    margin-top: -0.25rem;

    & > path {
        stroke: currentColor;
    }
}

@media (width >= 64rem) {
    .content-section {
        padding: 3rem 4rem;
        font-size: 1rem;
        margin-bottom: 3rem;

        &.-divided {
            margin-bottom: 0;
        }
    }
}

.two-col {
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

@media (width >= 64rem) {
    .two-col {
        flex-direction: row;
        gap: 5rem;

        & > div {
            width: 50%;
        }

        &.-flip {
            flex-direction: row-reverse;
        }
    }
}

.image-grid {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-inline: -3rem;

    & > img {
        object-fit: cover;
        width: 100%;
        border-radius: 1rem;
    }

    & > img:nth-child(2n) {
        margin-top: -2rem;
    }
}

@media (width >= 40rem) {
    .image-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (width >= 64rem) {
    .image-grid {
        gap: 2rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-inline: 0;
        margin-right: -3rem;
    }
}

.single-image {
    max-width: 32rem;

    & > img {
        object-fit: cover;
        width: 100%;
        border-radius: 1rem;
    }
}

@media (width >= 64rem) {
    .single-image {
        max-width: none;
    }
}

footer {
    margin: 4rem 0 2rem;
    padding: 1rem 0;
}

.footer-logo {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: var(--colour-paper-500);

    & > img {
        max-width: 2rem;
    }
}

.footer-nav {
    display: flex;
    font-size: 0.8rem;
    color: var(--colour-paper-500);
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
}

.form-card {
    padding: 1rem;
    margin-inline: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: var(--colour-paper-50);
    border-radius: 1rem;

    & > .form-title {
        margin: 0;
    }

    &.-thin {

    }
}

@media (width >= 32rem) {
    .form-card {
        padding: 2rem;

        &.-thin {
            max-width: 32rem;
            margin-inline: auto;
        }
    }
}

form > .form-input {
    margin-bottom: 1rem;
}

.form-input {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    & > input {
        height: 3rem;
        padding: 0 0.5rem;
        border-radius: 0.5rem;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border-style: solid;
        border-width: 1px;
        background-color: white;
        border-color: var(--colour-paper-200);
    }

    & > .help {
        font-size: 0.875rem;
    }

    & > .error {
        color: var(--colour-red-700);
        background-color: var(--colour-red-50);
        padding: 0.25rem 0.5rem;
    }
}

.form-error {
    color: var(--colour-red-700);
    background-color: var(--colour-red-50);
    padding: 0.25rem 0.5rem;
    margin: 0.5rem 0 1rem;
}

.card {
    background: var(--colour-alt-50);
    border-radius: 1rem;
    padding: 1rem;
    margin: 2rem 0;
}

.auth-wrapper {
    margin-block: 2rem;
}

.button-spinner {
    width: 1.25rem;
    height: 1.25rem;
    color: white;
    animation: spin 1s linear infinite;

    & > circle {
        opacity: 0.25;
    }

    & > path {
        opacity: 0.75;
    }
}