* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 100%;
    font: inherit;

    /* outline: solid 1px rgba(0,0,0,.2); */
}

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

:root {
    --maincolor: #310096;
    --bgcolor: #eee;
    --columnwidth: calc(100vw / 24 + 0px);
    --rowheight: calc(100vw / 24 + 0px);
}

html {
    font-size: 16px;
}

body {
    background-color: var(--bgcolor);
    background-image: url("data:image/svg+xml,%3Csvg width='1536' height='64' viewBox='0 0 1536 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23C8BEDC'%3E%3Cline x1='64' y1='0' x2='64' y2='64' stroke-width='1'/%3E%3Cline x1='128' y1='0' x2='128' y2='64' stroke-width='1'/%3E%3Cline x1='192' y1='0' x2='192' y2='64' stroke-width='1'/%3E%3Cline x1='256' y1='0' x2='256' y2='64' stroke-width='1'/%3E%3Cline x1='320' y1='0' x2='320' y2='64' stroke-width='1'/%3E%3Cline x1='384' y1='0' x2='384' y2='64' stroke-width='1'/%3E%3Cline x1='448' y1='0' x2='448' y2='64' stroke-width='1'/%3E%3Cline x1='512' y1='0' x2='512' y2='64' stroke-width='1'/%3E%3Cline x1='576' y1='0' x2='576' y2='64' stroke-width='1'/%3E%3Cline x1='640' y1='0' x2='640' y2='64' stroke-width='1'/%3E%3Cline x1='704' y1='0' x2='704' y2='64' stroke-width='1'/%3E%3Cline x1='768' y1='0' x2='768' y2='64' stroke-width='1'/%3E%3Cline x1='832' y1='0' x2='832' y2='64' stroke-width='1'/%3E%3Cline x1='896' y1='0' x2='896' y2='64' stroke-width='1'/%3E%3Cline x1='960' y1='0' x2='960' y2='64' stroke-width='1'/%3E%3Cline x1='1024' y1='0' x2='1024' y2='64' stroke-width='1'/%3E%3Cline x1='1088' y1='0' x2='1088' y2='64' stroke-width='1'/%3E%3Cline x1='1152' y1='0' x2='1152' y2='64' stroke-width='1'/%3E%3Cline x1='1216' y1='0' x2='1216' y2='64' stroke-width='1'/%3E%3Cline x1='1280' y1='0' x2='1280' y2='64' stroke-width='1'/%3E%3Cline x1='1344' y1='0' x2='1344' y2='64' stroke-width='1'/%3E%3Cline x1='1408' y1='0' x2='1408' y2='64' stroke-width='1'/%3E%3Cline x1='1472' y1='0' x2='1472' y2='64' stroke-width='1'/%3E%3Cline x1='0' y1='64' x2='1536' y2='64' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 100vw calc(100vw/24);
    background-repeat: repeat;
    overflow-x: hidden;

    font-family: 'Marr Sans';
    font-weight: 400;
    color: var(--maincolor);
    line-height: 1.3;
}

.vg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    overflow: hidden;
    pointer-events: none;
    opacity: .1;
    z-index: -1;
    will-change: transform;
}

.vg-horizontal {
    position: absolute;
    left: 0;
    width: 100%;
    height: 0;
    border-top: 1px solid var(--maincolor);
}

.vg-vertical{
    position: absolute;
    top: 0;
    height: 100%;
    width: 0;
    border-left: 1px solid var(--maincolor);
}

.hyphenate {
    hyphens: auto;
    overflow-wrap: break-word;
    word-break: normal;
}

.main {
    grid-column: span 24;
}

.grid {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
}

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

a {
    color: inherit;
}

a:hover {
    text-decoration: none;
}

::selection {
    background: var(--maincolor);
    color: var(--bgcolor);
}

img {
    max-width: 100%;
    width: 100%;
}

.hidden {
    /* display: none; */
    /* visibility: hidden; */

    /* clip-path: inset(100% 100% 100% 100%); */
    width: 0;
    height: 0;
    overflow: hidden;
    margin: 0 !important;
    padding: 0;
}



/* fonts */

@font-face {
    font-family: 'Marr Sans';
    src: url(../fonts/MarrSans-Regular-Web.woff2);
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: 'Marr Sans';
    src: url(../fonts/MarrSans-RegularItalic-Web.woff2);
    font-style: italic;
    font-weight: 400;
}

@font-face {
    font-family: 'Marr Sans';
    src: url(../fonts/MarrSans-Medium-Web.woff2);
    font-style: normal;
    font-weight: 500;
}

@font-face {
    font-family: 'Marr Sans Condensed';
    src: url(../fonts/MarrSansCondensed-Medium-Web.woff2);
    font-style: normal;
    font-weight: 500;
}

@font-face {
    font-family: 'Marr Sans Condensed';
    src: url(../fonts/MarrSansCondensed-Semibold-Web.woff2);
    font-style: normal;
    font-weight: 600;
}

@font-face {
    font-family: 'Marr Sans Condensed';
    src: url(../fonts/MarrSansCondensed-Bold-Web.woff2);
    font-style: normal;
    font-weight: 700;
}

@font-face {
    font-family: 'Exposit';
    src: url(../fonts/Exposit-Regular.woff2);
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: 'JetBrains-Mono';
    src: url(../fonts/JetBrainsMono-Regular.woff2);
    font-style: normal;
    font-weight: 400;
}

.exposit {
    font-family: 'Exposit';
    font-weight: 400;
}

.italic {
    font-family: 'Marr Sans';
    font-weight: 400;
    font-style: italic;
}

.medium {
    font-family: 'Marr Sans';
    font-weight: 500;
}

.condbold {
    font-family: 'Marr Sans Condensed';
    font-weight: 700;
}

.condsemibold {
    font-family: 'Marr Sans Condensed';
    font-weight: 600;
}

.condmedium {
    font-family: 'Marr Sans Condensed';
    font-weight: 500;
}

.mono {
    font-family: 'JetBrains-Mono', monospace;
    font-size: 1rem;
    /* font-family: 'Indicate Mono'; */
    /* font-family: 'Scope'; */
    /* font-family: "JetBrains Mono", monospace; */
}

.text-s1 { font-size: 1rem; } /* 16px, Meta */
.text-s2 { font-size: 1.25rem; } /* 20px, General text */
.text-s3 { font-size: 1.5rem; } /* 24px, Subpage text */
.text-s4 { font-size: 1.75rem; } /* 28px, Link lists */
.text-s5 { font-size: 2rem; } /* 32px, Navi, descriptions, action title, project text */
.text-s6 { font-size: 2.5rem; } /* 40px, Headings, subpage desc, buttons */
.text-s7 { font-size: 3rem; } /* 48px, Publication title */
.text-s8 { font-size: 5rem; } /* 80px, Project title */
.text-s9 { font-size: 7rem; } /* 112px, Project subpage title */




/* logo */
a.logo {
    pointer-events: auto;
    text-decoration: none;
    /* width: calc(5 * var(--columnwidth)); */
    height: var(--rowheight);
    /* outline: solid 1px red; */
    display: flex;
    top: 0;
    /* margin-top: .8vw; */

    z-index: 700;

    transition: all .3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: fixed;

    will-change: transform;
}

.logo-canvas {
    display: block;
    /* outline: solid 1px green; */
    height: 100%;
    width: auto;
    margin-left: 2.8vw;
    pointer-events: none;
    /* margin-top: .5vw; */

    /* transform-origin: center; */

    /* transition: all .2s; */

    will-change: transform;
}

.logo-sitetitle {
    display: flex;
    user-select: none;
    align-self: center;
    /* margin-left: -3vw; */
    position: absolute;
    left: 7vw;
    height: calc(1 * var(--rowheight) + 0px);
    /* align-items: flex-end; */
    align-items: center;

    /* outline: solid 1px red; */

    transition: none;
}

a.logo:not(.logo--home) {
    position: fixed;
    top: 0;
    z-index: 850;
}

/* .body--stickynav a.logo:not(.logo--home) .logo-canvas { */
.body--stickynav a.logo:not(.logo--home) {
    /* transform: scale(.85) translateX(-7%); */
    /* transform: scale(.85); */
    transform: scale(.9);
    /* margin-left: 5px; */
}

/* .body--stickynav a.logo:not(.logo--home) .logo-canvas {
    outline: solid 4px red;
} */

.body--stickynav a.logo .logo-canvas {
}



/* menu */

.menu {
    /* grid-column: 13 / span 12; */
    grid-column: 1 / span 24;
    height: var(--rowheight);
    line-height: var(--rowheight);
    text-transform: uppercase;
    align-items: flex-end;
    justify-items: end;
    justify-content: flex-end;
    /* outline: solid 1px red; */
    display: flex;

    position: sticky;
    top: 0;
    z-index: 800;

    background: transparent;
    border-bottom: solid 1px transparent;
    transition: all .2s;

    /* font-size: 2rem; */
}

.menu-hamburger {
    display: none;
    padding: 0 1.5rem;
    appearance: none;
    border: none;
    background: none;
    color: var(--maincolor);
    cursor: pointer;
    position: absolute;
    right: 0;
    font-size: 3rem;
}

.menu ul {
    list-style-type: none;
    display: flex;
    
    /* gap: 2.5vw;
    margin-right: 2.5vw; */
    
    gap: 1.7vw;
    margin-right: 1.7vw;

    /* outline: solid 1px blue; */

    transition: all .2s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition: all .2s;
}

.menu a {
    text-decoration: none;
    font-weight: bold;
    position: relative;
    display: flex;
    justify-content: center;
    color: transparent;
    user-select: none;
    
    letter-spacing: .02em;
}

.menu a:after {
    content: attr(title);
    font-weight: normal;
    text-align: center;
    position: absolute;
    color: var(--maincolor);

    letter-spacing: 0em;
}

.menu li {
    position: relative;
}

.menu .current:after {
    content: '●';
    position: absolute;
    text-align: center;
    /* outline: solid 1px red; */
    width: 100%;
    left: 0;
    /* top: 1.6rem; */
    /* top: calc(.5 * var(--rowheight)); */
    top: calc(.485 * var(--rowheight) + 0px);
    pointer-events: none;

    transition: all .1s;
}

.body--stickynav .menu {
    background: var(--bgcolor);
    border-bottom: solid 1px var(--maincolor);
}

.body--stickynav:not(.body--mobilemenu) .menu ul {
    /* outline: solid 1px red; */
    transform: scale(.95);
}

.body--stickynav .logo {
}

.body--stickynav .menu .current:after {
    top: calc(.485 * var(--rowheight) + 0px);
    top: calc(.34 * var(--rowheight) + 0px);
    /* top: 0; */
}



/* header */

.header {
    grid-column: span 24;
}

.header-sitetitle {
    /* outline: solid 1px red; */
    font-size: 20.8vw;
    margin-left: -1.6vw;
    grid-column: 13 / span 12;
    height: calc(7 * var(--rowheight) + 0px);
}

.header-pagetitle {
    grid-column: 3 / span 20;
    font-size: 15vw;
}

.header-description {
    grid-column: 13 / span 12;
    /* margin-bottom: calc(1 * var(--rowheight)); */
    margin-bottom: calc(2 * var(--rowheight) + 0px);
    text-indent: var(--columnwidth);
    /* padding-right: calc(.4 * var(--columnwidth) + 0px); */
    /* margin-top: var(--rowheight); */
}

.header-description p {
    /* margin-top: -1.94rem; */
    margin-top: -2.1rem;
}

.header-fhp {
    /* outline: solid 1px red; */
    grid-column: 23 / span 2;
    height: calc(1 * var(--rowheight) + 0px);
    display: flex;
    align-content: center;
    align-items: center;
    margin-top: calc(-2 * (var(--rowheight)) + 0px);
    margin-bottom: calc(2 * (var(--rowheight)) + 0px);
}

.header-fhp svg {
    max-height: 100%;
}



/* tiles */

.tiles {
    grid-column: 2 / span 22;
    grid-auto-flow: row;
    /* grid-auto-rows: var(--rowheight); */
    
    /* margin-bottom: calc(2 * (var(--rowheight))); */
    margin-bottom: calc(1 * (var(--rowheight)) + 0px);

    /* outline: solid 1px green; */
}

.tiles-row {
    grid-column: span 22;
    margin-bottom: var(--rowheight);
    align-items: flex-start;
    /* justify-items: center; */
    /* grid-auto-rows: var(--rowheight); */

    /* outline: solid 1px red; */
}

.tiles-row:not(:has(.tile)) {
    display: none;
}

.tile {
    min-height: calc(3 * var(--rowheight) + 0px);
    height: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    text-decoration: none;
    /* transition: all .2s ease-out; */
    transition: all .3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

a.tile:hover {
    transform: scale(1.05);
    transform: scale(1.1);
    z-index: 100;
}

.tile--project {
    /* grid-column: span 14; */
    grid-column: span 15;
    /* border-radius: 12px; */
    border-radius: 24px;
    background-size: cover;
    background-size: 100%;
    background-position: center;
    min-height: calc(8 * var(--rowheight) + 0px);
    /* background-size: 101%; */
}

.tile--project:hover {
    /* transform: rotate(0deg) scale(.98) !important; */
    transform: rotate(0deg) !important;
    background-size: 107%;
}

.tile-projectinfo {
    margin-top: auto;
    /* height: 33%; */
    background: linear-gradient(180deg, transparent 0%, var(--projectcolor) 75%);
    border-radius: inherit;
    color: #fff;
    padding: 6rem 4rem 1.5rem 2rem;
    /* text-shadow: rgba(0,0,0,.5) 0px 2px 8px; */
}

.tile-projectinfo p {
    margin-top: .4em;
}

.tile--course, .tile--activity {
    grid-column: span 6;
    /* height: calc(6 * var(--rowheight)); */
    /* height: calc(5 * var(--rowheight)); */
}

.tile--course h2, .tile--activity h2 {
    /* padding: 0 1.5rem; */
    padding: 0 1rem 1rem 1rem;
    line-height: 1.1;
    min-height: calc(1.5 * var(--rowheight) + 0px);
}

.tile--course h2+div, .tile--activity h2+div {
    /* padding: 0 1.5rem 2rem 1.5rem; */
    /* padding: 0 1rem 1rem 1rem; */
    padding: 0 1rem .5rem 1rem;
    text-indent: calc(2 * var(--columnwidth) - 1rem + 0px);

    /* margin-top: -1.16rem; */
}

.tile--course br+a {
    /* display: inline-block; */
}

/* .tile--course br+a span { */
.tile--course a span {
    font-family: system-ui, sans-serif;
}

.tile--publication {
    grid-column: span 7;
    border: solid 1px var(--maincolor);
    background: var(--bgcolor);
    /* height: calc(8 * var(--rowheight)); */
}

.tile--publication h2 {
    /* padding: 1rem; */
    /* padding: calc(.5 * var(--rowheight)) 1rem calc(.5 * var(--rowheight)) 1rem; */
    /* padding: calc(.5 * var(--rowheight)) 1rem 0rem 1rem; */
    padding: 0rem 1rem;
    line-height: 1.1;
    /* min-height: calc(3.5 * var(--rowheight)); */
    margin-bottom: calc(1 * var(--rowheight) + 0px);
    /* outline: solid 1px red; */
}

.tile--publication div {
    /* padding: 0 1rem 2rem 1rem; */
}

.tile--publication .tile-publisher {
    padding: calc(.5 * var(--rowheight) + 0px) 1rem 0rem 1rem;
}

.tile--publication .tile-text {
    text-indent: calc(2 * var(--columnwidth) - 1rem + 0px);
    padding: 0 1rem .5rem 1rem;
}

.tile-meta {
    height: calc(var(--rowheight) / 2 + 0px);
    align-content: center;
    white-space: nowrap;

    /* text-overflow: ellipsis; */
    overflow: hidden;
}

.tile--publication .tile-meta {
    border-bottom: solid 1px var(--maincolor);
    padding: 0 1rem;
}

.tile--activity .tile-meta, .tile--course .tile-meta {
    /* padding: 0 1.5rem; */
    padding: 0 1rem;
}



/* tiles: specific grid placement */

/* Specific tile placement */
.tiles-row .tile:nth-child(1).tile--course, .tiles-row .tile:nth-child(1).tile--activity {
    grid-column: 2 / span 6;
}

.tiles-row .tile:nth-child(2).tile--course, .tiles-row .tile:nth-child(2).tile--activity {
    grid-column: 9 / span 6;
}

.tiles-row .tile:nth-child(3).tile--course, .tiles-row .tile:nth-child(3).tile--activity {
    grid-column: 16 / span 6;
}

.tiles-row .tile:nth-child(1).tile--project {
    /* grid-column: 1 / span 14; */
    grid-column: 1 / span 15;
    margin-left: calc(-.5 * var(--columnwidth) + 0px);
}

.tiles-row .tile:nth-child(2).tile--project {
    /* grid-column: 9 / span 14; */
    grid-column: 8 / span 15;
    margin-left: calc(.5 * var(--columnwidth) + 0px);
}

.tiles-row .tile:nth-child(1).tile--publication {
    grid-column: 1 / span 7;
}

.tiles-row .tile:nth-child(2).tile--publication {
    grid-column: 9 / span 7;
    margin-left: calc(var(--columnwidth) * -.5 + 0px);
    margin-right: calc(var(--columnwidth) * .5 + 0px);
}

.tiles-row .tile:nth-child(3).tile--publication {
    grid-column: 16 / span 7;
}

/* Adjust placements when a project is in the row */
.tiles-row:has(.tile--project) .tile:nth-child(2).tile--activity, 
.tiles-row:has(.tile--project) .tile:nth-child(2).tile--course {
    grid-column: 16 / span 6;
}

.tiles-row:has(.tile--project) .tile:nth-child(2).tile--publication {
    grid-column: 16 / span 7;
    margin: 0;
}

/* Adjust vertical placement for activities and courses */
/* .tiles-row:has(.tile--project) .tile--activity, .tiles-row:has(.tile--project) .tile--course {
    margin-top: var(--rowheight);
}

.tiles-row:has(.tile--publication) .tile--activity, .tiles-row:has(.tile--publication) .tile--course {
    margin-top: var(--rowheight);
} */



/* corners */
/* add span in the beginning of box */
.cornerbox {
    position: relative;
}

.cornerbox::before,
.cornerbox::after,
.cornerbox > span::before,
.cornerbox > span::after {
    content: "";
    position: absolute;
    width: calc(.5 * var(--columnwidth) + 0px);
    height: calc(.5 * var(--rowheight) + 0px);
    border: 1px solid var(--maincolor);
}

.cornerbox::before {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
}

.cornerbox::after {
    top: 0;
    right: 0;
    border-left: none;
    border-bottom: none;
}

.cornerbox span::before {
    bottom: 0;
    left: 0;
    border-right: none;
    border-top: none;
}

.cornerbox span::after {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
}


/* footer */
.footer {
    grid-column: 2 / span 22;
    padding: 0 var(--rowheight);
    height: var(--rowheight);
    line-height: var(--rowheight);
    margin-bottom: var(--rowheight);
    /* outline: solid 1px red; */
}

.footer a {
    text-decoration: none;
}

.footer-fhp {
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: .93em;
}

.footer ul {
    display: flex;
    list-style-type: none;
}

.footer li:not(:last-of-type):after {
    content: '•';
    width: 3ch;
    display: inline-block;
    text-align: center;
}


@media (min-width: 1950px) {
    html {
        font-size: 19px;
    }
}

@media (min-width: 1800px) {
    html {
        font-size: 18px;
    }
}

@media (min-width: 1700px) {
    html {
        font-size: 17px;
    }
}


@media (max-width: 1500px) {
    html {
        font-size: 14px;
    }
}

@media (max-width: 1250px) {
    .header-description {
        grid-column: 9 / span 16;
    }

    .header-fhp {
        grid-column: 22 / span 4;
    }

    .body--stickynav .menu .current:after {
        opacity: 0;
    }
}

@media (max-width: 1100px) {
    html {
        font-size: 12px;
    }
}


@media (max-width: 900px) {
    /* html {
        font-size: 12px;
    } */

    .tile--project {
        grid-column: 2 / span 20 !important;
        /* margin: 0 !important; */
        min-height: calc(11 * var(--rowheight) + 0px);
        background-size: cover !important;

        /* transform: none !important; */
    }

    .tile--publication {
        grid-column: 2 / span 20 !important;
    }

    .tiles-row .tile:nth-child(2).tile--publication {
        margin-left: 0;
    }

    .tile--activity, .tile--course {
        grid-column: 3 / span 18 !important;
        margin: 0 !important;
    }

    .tiles-row {
        /* outline: solid 1px red; */
        margin: 0;
    }

    .tile {
        margin-bottom: calc(2 * var(--rowheight) + 0px) !important;
    }

    .tile--project+.tile--project {
        margin-top: calc(-2 * var(--rowheight) + 0px);
    }

    /* .tiles-row:has(.tile:last-of-type.tile--project) + .tiles-row:has(.tile:first-of-type.tile--project) {
        margin-top: calc(-2 * var(--rowheight));
    } */

    .tile-meta {
        height: calc(var(--rowheight) / 1 + 0px);
    }

    a.logo--home {
        left: calc(1 * var(--columnwidth) + 0px) !important;
        top: calc(2 * var(--rowheight) + 0px) !important;
    }

    .header {
    }

    .header-sitetitle {
        grid-column: 9 / span 16;
        /* margin-top: var(--rowheight); */
    }

    .header-fhp {
        grid-column: 20 / span 3;
        /* outline: solid 1px red; */
    }
}

@media(min-width: 901px) {
    .tile--project {
        height: calc(8 * var(--rowheight) + 0px) !important;
    }
}

@media (max-width: 730px) {
    a.logo:not(.logo--home) {
        /* outline: solid 1px red; */
        height: calc(3 * var(--rowheight) + 0px);
        width: 35vw;
    }

    a.logo:not(.logo--home) .logo-canvas {
    }

    a.logo:not(.logo--home) .logo-sitetitle {
        left: calc(3.5 * var(--columnwidth) + 0px);
        font-size: 9vw;
    }

    .menu {
        height: calc(3 * var(--rowheight) + 0px);
    }

    .menu ul {
        display: none;

        background: var(--maincolor);
        position: fixed;
        inset: 0;
        width: 100%;
    }

    .menu ul a {
        color: var(--bgcolor);
        font-weight: normal;
    }

    .body--mobilemenu .menu ul a {
        transform: scale(0);
        animation: scaleAppear .2s forwards cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .menu ul a:after {
        display: none;
    }

    .menu-hamburger {
        display: block;
        z-index: 600;
        height: calc(3 * var(--rowheight) + 0px);

        /* outline: solid 1px red; */
    }

    .body--mobilemenu {
        overflow: hidden;
    }

    .body--mobilemenu .menu-hamburger {
        color: var(--bgcolor);
    }

    .body--mobilemenu .menu ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
        justify-content: center;
        z-index: 500;
        font-size: 14vw;
        line-height: 1;
        /* padding: 2em 2em 2.5em 2em; */
        padding: 2em 2em 2em 2em;
    }

    .menu li.current:after {
        display: none;
    }

    .menu li.current a {
        color: var(--bgcolor);
        font-weight: bold;
        /* border-bottom: so; */
        /* text-decoration: underline; */
        /* border-bottom: solid 1px var(--bgcolor); */
    }

    .body--mobilemenu .logo-sitetitle {
        color: var(--bgcolor);
    }

    .menu-hamburger span+span {
        display: none;
    }

    .body--mobilemenu .menu-hamburger span {
        display: none;
    }

    .body--mobilemenu .menu-hamburger span+span {
        display: block;
    }

    /* .body--mobilemenu .logo-canvas { */
    .body--mobilemenu .logo {
        filter: brightness(0) invert(1);
    }

    .header-description {
        grid-column: 2 / span 22;
        padding: 0;
        margin-top: calc(3 * var(--rowheight) + 0px);
        text-indent: calc(2 * var(--columnwidth) + 0px);
    }

    /* manual font size adjustments */
    .text-s9 {
        font-size: 5rem;
        /* text-s8 */
    }

    .text-s8 {
        font-size: 4rem;
        /* between text-s7 and text-s8 */
    }

    .tile-projectdescription {
        /* usually text-s5 */
        font-size: 1.5rem;
        /* text-s3 */
    }

    .header-projectdescription {
        /* usually text-s6 */
        font-size: 1.75rem;
        /* text-s4 */
    }

    .footer {
        height: calc(4 * var(--rowheight) + 0px);
        margin-bottom: calc(2 * var(--rowheight) + 0px);
    }

    .footer ul {
        display: block;
    }

    .footer li:after {
        display: none !important;
    }

    .header-fhp {
        grid-column: 20 / span 4;
        /* outline: solid 1px red; */
        height: calc(2 * var(--rowheight) + 0px);
    }
}

@media (min-width: 731px) {
    .menu .current a {
        color: var(--maincolor);
    }
    
    .menu .current a:after {
        color: transparent;
    }
    
    .menu a:hover {
        color: var(--maincolor);
    }
    
    .menu a:hover:after {
        color: transparent;
    }
}

@media (max-width: 600px) {
    html {
        font-size: 10px;
    }
}

@keyframes scaleAppear {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

@media (any-pointer: coarse) {
    .vg {
        opacity: .07;
    }
}