@import"https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap";@font-face{font-family:PP Pangram Sans;font-style:normal;font-weight:100 900;font-display:swap;src:local("PP Pangram Sans"),local("PPPangramSans-Regular")}:root{--base-100: #f4f4f2;--base-400: #1a1a1a}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Google Sans,sans-serif;background-color:var(--base-400);color:#fff}img{width:100%;height:100%;object-fit:cover}h1{text-transform:uppercase;font-size:clamp(3rem,5vw,7rem);font-weight:400;line-height:1}p{font-size:1.5rem;font-weight:500;line-height:1.25}section{position:relative;width:100%;height:100svh;padding:2rem;overflow:hidden}.site-header{position:fixed;top:2rem;left:2rem;z-index:200}.logo-link{display:inline-block;text-decoration:none;color:inherit}.logo-wordmark{display:inline-block;font-family:PP Pangram Sans,Plus Jakarta Sans,system-ui,sans-serif;font-weight:800;letter-spacing:-.03em;font-size:clamp(.95rem,2.2vw,1.35rem);line-height:1;padding:.55em .85em;border-radius:.45em;background-color:var(--base-100);color:var(--base-400);box-shadow:0 .15em .45em #0000001f;transition:background-color .25s ease,color .25s ease,box-shadow .25s ease}.logo-wordmark.logo-inverted{background-color:var(--base-400);color:var(--base-100);box-shadow:0 .2em .55em #0006}.intro,.outro{display:flex;justify-content:center;align-items:center;text-align:center}.intro{background-color:var(--base-100);color:var(--base-400)}.spotlight{background-color:#141414}.outro{background-color:var(--base-100);color:var(--base-400)}.project-images{position:absolute;top:0;left:50%;transform:translate(-50%);width:35%;padding:50svh 0;display:flex;flex-direction:column;gap:.5rem;z-index:-1}.project-img{width:100%;aspect-ratio:16/9;opacity:.5;transition:all .3s ease;overflow:hidden}.project-names{position:absolute;right:2rem;bottom:2rem;display:flex;flex-direction:column;align-items:flex-end}.project-names p{color:#4a4a4a;transition:color .3s ease}.project-index h1,.project-images,.project-names p{will-change:transform}@media(max-width:1000px){.site-header{top:1.25rem;left:1.25rem}.logo-wordmark{font-size:clamp(.8rem,4vw,1rem);padding:.45em .65em;border-radius:.4em}.project-images{width:calc(100% - 4rem);gap:25svh}.project-names p{color:#fff!important}}