@media (prefers-reduced-motion:no-preference) {
    html:focus-within {
        scroll-behavior: smooth;
    }
}

/* CSS reset */
/* Box sizing rules */
/*
--TODO: disabled as this affects the article automatic layout
*,
*::before,
*::after {
box-sizing: border-box;
}*/

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

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
    margin-block-end: 0;
}

dt {
    margin-bottom: 1rem;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
    list-style: none;
}

/* Set core body defaults */
body {
    font-family: 'Open Sans', sans-serif;
    min-height: 100vh;
    line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
    line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
    text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
    text-decoration-skip-ink: auto;
    text-decoration: none;
    color: currentColor;
}

/* Make images easier to work with */
img,
picture {
    max-width: 100%;
    display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
    font-family: inherit;
    font-size: inherit;
}

    /* Make sure textareas without a rows attribute are not tiny */
    textarea:not([rows]) {
        min-height: 10em;
    }

/* Anything that has been anchored to should have extra scroll margin */
:target {
    scroll-margin-block: 5ex;
}


/*************************************/
/* Styles below this */
/*************************************/

html {
    background-color: light-dark(var(--color-light), var(--color-dark)) !important;
    color: light-dark(var(--color-motion-grey), var(--color-light));
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    /*background-color: yellow !important;*/
}

footer,
header,
main,
nav {
    display: block;
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    font-family: 'GothamBook', Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: var(--s1);
}

section {
    margin: 0 auto;
    padding-top: var(--s5);
    padding-bottom: var(--s5);
}

.dark-bg {
    background-color: var(--color-motion-grey);
}

p {
    max-width: var(--measure);
    line-height: 1.8rem;
}

    p + p {
        padding-top: var(--s0);
    }

    p.highlight,
    span.highlight {
        color: var(--color-motion-orange);
    }

video {
    width: 100%;
    height: auto;
}


hr {
    width: 90vw;
    max-width: var(--grid-max);
    border: none;
    border-bottom: 1px solid var(--color-motion-orange);
}


/* Heading styling */
h1, h2, h3, h4 {
    font-family: 'Gabarito';
    font-weight: bold;
    margin: 0;
}

h1 {
    font-size: var(--s5);
}

h2 {
    font-size: var(--s3);
}

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

h4 {
    font-size: var(--s1);
}


/* Hyperlinks */
a.link {
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 0.4rem;
}

    a.link:hover {
        /*color: light-dark(var(--color-light), var(--color-dark));*/
        background-color: var(--color-link-hover-bg);
        color: var(--color-light);
        text-decoration-color: var(--color-link-hover-bg);
    }

address {
    margin-top: var(--s1);
}

/* Inputs */
input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    color: light-dark(var(--color-motion-grey), var(--color-light));
    border: none;
    box-shadow: inset 0 -1px 0 light-dark(var(--color-motion-grey), var(--color-light));
    padding: 1.5rem;
    font-size: var(--s0);
}

    input[type="search"]:focus {
        border: 0;
        outline: 0;
        box-shadow: inset 0 -1px 0 light-dark(var(--color-motion-grey), var(--color-light));
    }


/* Tables */
.table-wrapper {
    overflow: auto;
}

table {
    text-align: left;
    border-collapse: collapse;
    caption-side: bottom;
    width: min(65rem, 100%);
    table-layout: fixed;
    margin: 1rem 0;
}

thead,
tfoot {
    border-block-end: 2px solid light-dark(var(--color-table-light-border), var(--color-table-dark-border));
    background: light-dark(var(--color-table-light), var(--color-table-dark));
    color: light-dark(var(--color-dark), var(--color-light));
}

th,
td {
    border: 1px solid light-dark(var(--color-table-light-border), var(--color-table-dark-border));
    padding: 0.35rem 0.75rem;
}

th {
    padding: 0.75rem;
}

th,
caption {
    text-align: start;
}

thead th:not(:first-child),
td:not(:first-child) {
    text-align: end;
}

tbody tr:nth-child(even) {
    background: color-mix(in srgb, light-dark(var(--color-table-light), var(--color-table-dark)), transparent 60%);
}

th:first-of-type,
td:first-of-type {
    border-left: none;
}

th:last-of-type,
td:last-of-type {
    border-right: none;
}

tr:first-of-type th,
tr:first-of-type td {
    border-top: none;
}

tr:last-of-type th,
tr:last-of-type td {
    border-bottom: none;
}

/*th:first-child {*/
/*position: sticky;*/
/*left: 0;
border-inline-end: none;
}

td:first-of-type,
:where(thead, tfoot) th:nth-child(2) {
border-inline-start: none;
}


th:first-child::after {
content: '';
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;
width: 1px;
height: 100%;
background: lightgrey;
}*/








/* Error */
.error {
    color: var(--color-error);
}

/* Linkbutton */
.linkbutton {
    display: inline-flex;
    border: none;
    background-color: light-dark(var(--color-motion-grey),var(--color-light)) !important;
    color: light-dark(var(--color-light),var(--color-motion-grey));
    font-family: 'Gabarito';
    font-weight: bold;
    font-style: normal;
    font-size: var(--s0);
    line-height: var(--s2);
    border-radius: 10px;
    padding: 1rem;
    text-decoration-line: none;
    vertical-align: middle;
}

    .linkbutton:hover {
        /*background-color: light-dark(var(--color-dark),var(--color-motion-light-grey)) !important;
color: var(--color-light) !important;*/
        background-color: var(--color-link-hover-bg) !important;
        color: var(--color-light) !important;
        transition: none;
    }

    .linkbutton.inverse {
        background-color: light-dark(var(--color-light), var(--color-motion-grey)) !important;
        color: light-dark(var(--color-motion-grey), var(--color-light));
    }

        .linkbutton.inverse:hover {
            /*background-color: light-dark(var(--color-motion-light-grey), var(--color-dark)) !important;
color: var(--color-light) !important;*/
            background-color: var(--color-link-hover-bg) !important;
            color: var(--color-light) !important;
            transition: none;
        }

    .linkbutton svg {
        width: 34px;
        height: 34px;
        margin-left: 2rem;
        margin-right: 0;
    }

    .linkbutton:first-child svg {
        width: 34px;
        height: 34px;
        margin-left: 0;
        margin-right: 2rem;
    }
    /* 
.linkbutton.back::before, button.back::before
{
display: inline-block;
width: var(--s2);
height:var(--s2);
content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg>');
} */

    .linkbutton.forward::after, button.forward::after {
        display: inline-block;
        width: var(--s2);
        height: var(--s2);
        content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /></svg>');
    }

    .linkbutton.download::after, button.download::after {
        background: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 8.25H7.5a2.25 2.25 0 0 0-2.25 2.25v9a2.25 2.25 0 0 0 2.25 2.25h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25H15M9 12l3 3m0 0 3-3m-3 3V2.25" /></svg>') center center no-repeat;
        content: '';
        display: inline-block;
        width: var(--s2);
        height: var(--s2);
        margin-left: 1rem;
    }

    .linkbutton.search::after, button.search::after {
        background: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" /></svg>') center center no-repeat;
        content: '';
        display: inline-block;
        width: var(--s2);
        height: var(--s2);
        margin-left: 1rem;
    }

    .linkbutton.linkedin::before {
        background: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M19 0h-14c-2.76 0-5 2.24-5 5v14c0 2.76 2.24 5 5 5h14c2.76 0 5-2.24 5-5v-14c0-2.76-2.24-5-5-5zm-11.5 19h-3v-9h3v9zm-1.5-10.28c-.97 0-1.75-.79-1.75-1.75s.78-1.75 1.75-1.75 1.75.79 1.75 1.75-.78 1.75-1.75 1.75zm13.5 10.28h-3v-4.5c0-1.07-.02-2.44-1.5-2.44-1.5 0-1.73 1.17-1.73 2.36v4.58h-3v-9h2.89v1.23h.04c.4-.76 1.38-1.56 2.84-1.56 3.04 0 3.6 2 3.6 4.59v5.74z"></path> </svg>') center center no-repeat;
        content: '';
        display: inline-block;
        width: var(--s2);
        height: var(--s2);
        margin-right: 1rem;
    }




/* Button styling */
button {
    display: grid;
    column-gap: 1rem;
/*    grid-template-columns: 1fr 36px;*/
    grid-template-columns: 1fr ;
    align-items: center;
    text-align: center;
    background-color: #eee5;
    border: none;
    font-family: 'Gabarito';
    font-weight: bold;
    font-size: var(--s0);
    border-radius: 5px;
    color: #fff;
    margin-top: 1rem;
    padding: 1rem 2rem;
    cursor: pointer;
}

    button > svg:only-child {
        grid-column: 1 / -1;
        width: 36px;
        height: 36px;
        margin: 0;
    }

    button > span:only-child {
        grid-column: 1 / -1;
    }

    button > svg:not(:only-child) {
        width: var(--s2);
        height: var(--s2);
    }

        button > svg:not(:only-child):first-child {
            justify-self: start;
        }

        button > svg:not(:only-child):last-child {
            justify-self: end;
        }

    button:hover {
        background-color: var(--color-light);
        color: var(--color-motion-grey);
    }



/* Base image */
img {
    aspect-ratio: 16/9;
    object-fit: scale-down;
    width: 100%;
}

    img.cover {
        object-fit: cover;
    }


/* Brand colours */
.motion-grey {
    background-color: var(--color-motion-grey);
}

    .motion-grey * {
        color: var(--color-light);
    }

.motion-orange {
    background-color: var(--color-motion-orange);
}


/* Figure and Figcaption */
figure {
    margin: 0;
    width: 100%;
}

    figure img {
        /*aspect-ratio: 80/31;*/
        object-fit: cover;
    }

figcaption {
    color: light-dark(var(--color-motion-grey), var(--color-light));
    font-style: italic;
    font-size: small;
}

.people figure img {
    aspect-ratio: 4/3;
    object-fit: initial;
}

.people h3 {
    color: var(--color-motion-orange);
}

/* Padding and Margins */
.pad-l {
    padding: 20vh 0;
}

.pad-m {
    padding: 10vh 0;
}

.pad-s {
    padding: 5vh 0;
}

.pad-xs {
    padding: 2vh 0;
}

.pad-no {
    padding: 0;
}

/* Scroll watcher */
.scroll-watcher {
    height: 5px;
    position: fixed;
    top: 0;
    z-index: 1000;
    background-color: var(--color-motion-orange);
    width: 100%;
    scale: 0 1;
    transform-origin: left;
    animation: scroll-watcher linear;
    animation-timeline: scroll(y);
}

@keyframes scroll-watcher {
    to {
        scale: 1 1;
    }
}

/* Product filter styles */

.filters ul {
    list-style-type: none;
    font-size: var(--s0);
    padding: 0px;
    color: light-dark(var(--color-motion-grey), var(--color-light));
}

    .filters ul li {
        margin: 3rem 1rem;
        line-height: 1.5rem;
    }

        .filters ul li label input {
            margin-right: 1rem;
        }

.filters form {
    padding: 0 0 3rem 0;
}


/* Page article */

article.page-content {
    margin: 2vh auto;
    padding-block-end: var(--s4);
    padding-inline: var(--s3);
    max-width: var(--grid-max);
    column-width: var(--measure);
    column-gap: var(--s2);
    /*column-rule: 1px solid var(--color-motion-orange); */
}

    article.page-content .pre-title {
        color: var(--color-motion-orange);
    }

        article.page-content .pre-title + h1 {
            padding-top: var(--s-5);
        }

    article.page-content p {
        margin-top: 0;
        orphans: 3;
    }


    /* indent first character of new paragraph where more than one paragraph exists */
    /* article.page-content p + p {
text-indent: 2ch; 
} */
    article.page-content > img {
        aspect-ratio: initial;
        border-width: 0;
        content-visibility: auto;
        max-inline-size: 100%;
        block-size: auto;
    }

    /*article.page-content>figure 
{
margin: var(--s1) 0;
padding: 0;
break-after: column; 
}*/

    article.page-content > figure {
        margin: var(--s5) auto;
        column-span: all;
    }

    article.page-content h1 + figure {
        margin-top: 0;
    }

    article.page-content > figure > figcaption {
        text-indent: 2ch;
        font-size: var(--s0);
    }

    article.page-content > figure > img {
        margin: 0;
        padding: 0;
        /*aspect-ratio: 16/9;*/
        aspect-ratio: 16/9 auto;
        object-fit: contain;
    }

    article.page-content .back {
        column-span: all;
        margin: var(--s4) auto;
    }

    article.page-content hr {
        clear: both;
        display: block;
        height: 1px;
        margin-block: var(--s2);
        margin-inline: 0;
        padding: 0;
        border: 0;
        border-top: 1px solid var(--color-motion-orange);
    }

article.page-content {
    margin-block-end: var(--s5);
}

    article.page-content h1,
    article.page-content h2,
    article.page-content h3,
    article.page-content blockquote {
        padding: var(--s2) 0;
        column-span: all;
    }

    article.page-content h2 {
        margin-top: var(--s4);
    }

    article.page-content h3 {
        margin-top: var(--s2);
    }

    article.page-content blockquote {
        align-content: center;
    }


    article.page-content blockquote {
        clear: both;
        margin: 0 auto;
        margin-block: var(--s5);
        margin-inline: 0;
        padding: 0;
        column-span: all;
        text-align: center;
    }

        article.page-content blockquote p {
            font-size: var(--s2);
            line-height: 1.2;
            font-style: italic;
            margin: 0 auto;
            color: var(--color-motion-orange);
        }

        article.page-content blockquote cite {
            color: light-dark(var(--color-motion-grey), var(--color-light));
            display: block;
            font-style: normal;
            margin-top: var(--s-2);
        }

    article.page-content li + li {
        padding-top: var(--s0);
    }

/* 

 article.page-content:has(> figure) 
 {
display: flex;
flex-wrap: wrap;
gap: 0 var(--s2); 
}

 article.page-content:has(> figure) main {
flex: 1;
margin-block-end: var(--s2);
margin-inline: 0;
padding-block-start: var(--s2);
min-width: min(100%, 30rem); } 


article.page-content:has(> figure) figure {
flex: 4;
min-width: min(100%, 30rem);
margin: 0; 
} */

/* History page */
.history {
    border-left: 4px solid var(--color-motion-orange);
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    background: transparent;
    color: light-dark(var(--color-motion-grey), var(--color-light));
    margin: 50px auto;
    letter-spacing: 0.5px;
    position: relative;
    line-height: 1.4em;
    font-size: 1.03em;
    padding: 50px;
    list-style: none;
    text-align: left;
    font-weight: 100;
    max-width: var(--grid-max);
}

    .history > .event {
        border-bottom: 1px dashed fade( light-dark(var(--color-motion-grey), var(--color-light)), 10%);
        padding-bottom: calc(50px * 0.5);
        padding-top: calc(50px * 0.5);
        margin-bottom: 50px;
        position: relative;
    }

    .history > .event > h2 {
        color: var(--color-motion-orange);
    }

.person-profile {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--s5);
    margin-bottom: var(--s5);
    justify-items: center;
}

    .person-profile > .image > img {
        aspect-ratio: initial;
        object-fit: cover;
        max-width: 350px;
        border-radius: 50%;
    }

    .person-profile > .profile {
        padding-left: 2rem;
    }


/* Contact */
.contact {
    border: 1px solid light-dark(var(--color-motion-medium-grey), var(--color-motion-light-grey));
    padding: var(--s2) var(--s1);
    margin: var(--s1) 0;
    max-width: var(--grid-max);
    display: grid;
    grid-gap: var(--grid-gap);
    grid-template-columns: 1fr 3fr;
}

    .contact input[type=submit] {
        padding: 1em 2em;
        width: fit-content;
    }

        .contact input[type=submit]:hover {
            cursor: pointer;
        }

        .contact input[type=submit]:disabled {
            background-color: var(--color-disabled) !important;
            cursor: wait;
        }

    .contact .right {
        justify-self: flex-end;
    }



    .contact input[type=text], input[type=email], select, textarea {
        width: 100%;
        padding: 12px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        resize: vertical;
    }

    /* Style the label to display next to the inputs */
    .contact label {
        padding: 12px 12px 12px 0;
        display: inline-block;
    }

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {

    .contact {
        grid-template-columns: 1fr;
        row-gap: var(--s0);
    }
}