:root{--font-sans:"Söhne", sans-serif;--font-serif:"Family", Georgia, serif;--white:#f5ebeb;--black:#1a1919;--animation-base-timing:0.2s;--border-color:var(--black);--border:1px solid var(--border-color);--border-rad:0rem;--step--2:clamp(0.72rem, 1.0819rem + -0.7721vi, 0.8889rem);--step--1:clamp(0.9rem, 1.1143rem + -0.4571vi, 1rem);--step-0:clamp(1.125rem, 1.125rem + 0vi, 1.125rem);--step-1:clamp(1.2656rem, 1.1049rem + 0.6429vi, 1.4063rem);--step-2:clamp(1.4238rem, 1.0421rem + 1.5268vi, 1.7578rem);--step-3:clamp(1.6018rem, 0.9213rem + 2.7221vi, 2.1973rem);--step-4:clamp(1.802rem, 0.7225rem + 4.3179vi, 2.7466rem);--step-5:clamp(2.0273rem, 0.4205rem + 6.4272vi, 3.4332rem)}html{color:var(--black);background-color:var(--white);font-family:var(--font-sans)}body{font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0 auto;display:flex;flex-direction:column;justify-content:center;overflow-x:hidden;text-wrap:pretty}html{scrollbar-gutter:stable;scrollbar-color:color-mix(in oklab,var(--black) 30%,transparent)var(--white);scrollbar-width:thin}main{padding:2em;max-width:1600px;margin:0 auto}header{margin-bottom:2em;display:flex;flex-direction:row;width:100%;justify-content:center;padding:2em;gap:2rem;flex-wrap:wrap;height:100%;background-color:var(--black);& .logo-container { display: flex; justify-content: center; align-items: center; align-self: center; flex-shrink: 0; & img, & svg { height: 1cm; width: 100%; fill: var(--white); } } & nav { display: flex; justify-content: center; height: fit-content; & ul { display: flex; gap: 1rem; list-style: none; padding: 0; & a { display: flex; align-items: center; text-decoration: none; color: var(--black); font: normal var(--step-1) / 1.1 var(--font-sans); padding: 0.5rem 1rem; border-radius: calc(var(--border-rad) / 2); border: var(--border); background-color: var(--white); min-height: 44px; min-width: 44px; transition: background-color var(--animation-base-timing), color var(--animation-base-timing); &:hover { background-color: var(--black); color: var(--white); } } } }}section.page-header{padding:1em 0 4em;border-top:var(--border);display:flex;gap:2rem;flex-wrap:wrap;width:100%;.header-wrapper { display: flex; gap: 2rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; width: 100%; } & .description { max-width: 45ch; hyphens: manual; text-wrap: pretty; & p { font: normal var(--step-1) / 1.5 var(--font-sans); margin-bottom: 2.25rem; line-height: 1.35; } & .pagelink { font-size: var(--step-1); } } & .title-wrapper { display: flex; flex-direction: column; gap: 0.005em; & h1 { font: normal var(--step-5) / 1.1 var(--font-serif); } & p.subtitle { font: normal var(--step-2) / 1.1 var(--font-sans); } }}ul.socials{padding:0;display:flex;justify-content:space-between;gap:.5em;list-style:none;& li { & a { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border: var(--border); background-color: var(--white); fill: var(--black); padding: 0.25em; min-width: 44px; min-height: 44px; border-radius: calc(var(--border-rad) / 2); color: var(--black); text-decoration: none; transition: background-color var(--animation-base-timing), fill var(--animation-base-timing), color var(--animation-base-timing); &.pagelink { aspect-ratio: 0; height: 2.875rem; padding: 0.25em 0.75em; letter-spacing: 0.05em; } & svg { width: 2.25em; height: 1.75em; } } }}.projects-list{display:flex;flex-wrap:wrap;gap:2em;justify-content:space-evenly;padding:0;.project-item { position: relative; flex: 1 0 calc(50% - 2em); box-sizing: border-box; border: var(--border); text-wrap: balance; hyphens: manual; list-style: none; background-color: var(--projcolor); color: var(--textcolor, var(--black)); border-radius: var(--border-rad); &:not(:has(.project-header .icon-wrapper)) .project-details { padding-left: 1em; } .project-tags { position: absolute; border-top-left-radius: calc(var(--border-rad) - 2px); display: flex; border-right: none; flex-wrap: wrap; z-index: 5; overflow: hidden; a { padding: 0.5em 1em; display: flex; align-items: center; border-radius: 0; border-right: var(--border); border-bottom: var(--border); width: fit-content; overflow: hidden; text-wrap: nowrap; background-color: var(--projcolor); min-height: 44px; min-width: 44px; transition: background-color var(--animation-base-timing), color var(--animation-base-timing); } } a { color: inherit; text-decoration: none; display: flex; height: 100%; flex-direction: column; border-radius: var(--border-rad); } img { aspect-ratio: 4/3; object-fit: cover; margin: 0; filter: sepia(30%) saturate(50%); height: auto; transition: filter var(--animation-base-timing), transform calc(var(--animation-base-timing) * 2); } .project-listing-image-wrapper { overflow: hidden; aspect-ratio: 4/3; border-bottom: var(--border); height: max-content; border-top-left-radius: var(--border-rad); border-top-right-radius: var(--border-rad); } .project-details { padding: 1rem 0.5rem; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-grow: 1; .project-header { display: flex; gap: 0.5em; align-items: center; } .project-title { display: flex; flex-direction: column; gap: 0.25rem; width: fit-content; h1 { font: normal var(--step-3) / 1.1 var(--font-serif); color: inherit; text-wrap: balance; min-width: clamp(13.875rem, 8.0179rem + 23.4286vi, 19rem); } p.project-subtitle { font: normal var(--step-0) / 1 var(--font-sans); text-wrap: nowrap; } } } }}p{font-size:var(--step-0)}.icon-wrapper{display:flex;align-items:center;justify-content:center;height:3rem;width:3rem;flex-shrink:0;fill:var(--black);& svg { width: 2.25em; height: 1.75em; vertical-align: -0.125em; fill: var(--black); } & .on-hover { display: none; }}footer{justify-content:center;margin-top:4em;padding-top:4em;border-top:var(--black)1px solid;gap:1.5em;display:none}h3{font:700 var(--step-1)/1.1 var(--font-sans);margin-bottom:1em}.project-description p{font:var(--step-1)/1.5 var(--font-sans);margin-bottom:1em}p+h3{margin-top:2em}::selection{background-color:var(--black);color:var(--white)}.project-item.link{height:auto}.taxonomy-list{& .project-item:nth-child(odd):last-child { max-height: 35rem; }}.link-list{.project-item { flex: 1 0 100% !important; }}.project-item:has(:not(.project-listing-image-wrapper:has(img))){.project-listing-image-wrapper { display: none; }}.project-icon icon-wrapper:not(:has(svg)){display:none}p.count{font:var(--step-2)/1.1 var(--font-sans)}.title-wrapper:has(p.count){flex-direction:row;justify-content:space-between;width:100%}.taxonomy-head{h1 { font-family: var(--font-sans) !important; font-size: var(--step-4) !important; }}.project-page-container{max-width:75ch;margin:0 auto;.page-header { margin-top: 2em; }}.project-gallery{margin-top:3em;padding-top:.5em;border-top:var(--border);img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 4/3; margin-top: 1em; } h2 { margin-bottom: 1.5em; font-weight: normal; font-size: var(--step-2); }}a.pagelink{color:var(--black);text-decoration:none;border:var(--border);padding:.4em 1em .5em;min-width:44px;min-height:44px;border-radius:calc(var(--border-rad)/2);background-color:var(--white);transition:background-color var(--animation-base-timing),color var(--animation-base-timing)}@media(any-hover:hover){section.page-header .socials a:hover{background-color:var(--black);fill:var(--white);color:var(--white)}.project-item a:hover{background-color:var(--black)!important;color:var(--white)!important;svg { fill: var(--white); } svg.on-hover { display: block; } svg:not(.on-hover) { display: none; } img { filter: grayscale(100%); transform: scale(1.025); }}.pagelink:hover{background-color:var(--black)!important;color:var(--white)!important}}