* { box-sizing: border-box; }

:root {
  --background:#151515;
  --panel:#171717;
  --panel-deep:#0d0d0d;
  --text:#f4f4f0;
  --muted:rgba(244,244,240,.66);
  --subtle:rgba(244,244,240,.42);
  --line:rgba(244,244,240,.22);
}

html { scroll-behavior:smooth; }

body {
  margin:0;
  background:var(--background);
  color:var(--text);
  font-family:"IBM Plex Sans",Helvetica,Arial,sans-serif;
  font-size:15px;
  line-height:1.55;
}

/* FIXED */
html,
body,
body * {
  cursor:url("popcorn-pixel-cursor.png") 10 10, auto;
}

a { color:inherit; }

.site-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2rem;
  padding:1rem 1.25rem;
  border-bottom:1px solid var(--line);
}

.site-header a { text-decoration:none; }

.site-title,
nav a {
  font-size:.78rem;
}

.site-title { letter-spacing:.015em; }

nav {
  display:flex;
  gap:.9rem;
}

nav a:hover,
nav a:focus-visible,
nav a[aria-current="page"] {
  text-decoration:underline;
  text-underline-offset:.22rem;
}

main {
  padding:0 1.25rem;
}

.minimal-page {
  min-height:calc(100vh - 60px);
  padding:6rem 0 4rem;
}

.minimal-block {
  max-width:580px;
}

h1 {
  margin:0 0 2.5rem;
  font-size:1rem;
  font-weight:400;
}

.minimal-block p {
  margin:0 0 1.25rem;
}

.text-link {
  text-underline-offset:.2rem;
}

.contact-block {
  margin:2.75rem 0 2rem;
  padding-top:1rem;
  border-top:1px solid var(--line);
}

.contact-block h2 {
  margin:0 0 .6rem;
  font-size:.78rem;
  font-weight:400;
}

.contact-block p {
  margin:0;
}

.contact-block a {
  text-underline-offset:.2rem;
}

.projects-intro {
  padding:2.6rem 0 1.4rem;
}

.minimal-projects-intro h1 {
  margin-bottom:.55rem;
}

.projects-intro p {
  margin:0;
  color:var(--muted);
  font-size:.75rem;
}

.project-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}

.project-card {
  min-width:0;
  aspect-ratio:4/3;
  overflow:hidden;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--panel-deep);
}

.project-toggle {
  position:relative;
  display:block;
  width:100%;
  height:100%;
  padding:0;
  overflow:hidden;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
}

.project-image,
.project-description {
  position:absolute;
  inset:0;
  transition:opacity 200ms ease;
}

.project-image {
  display:block;
  background-position:center;
  background-size:cover;
  opacity:1;
}

/* FIXED */

.project-image-1 {
  background-image:url("laurel-hardy.png");
}

.project-image-2 {
  background-image:url("ann-demeulemeester.png");
}

.project-image-3 {
  background-image:url("outrider.png");
}

.project-image-4 {
  background-image:url("lilith.png");
}

.project-toggle:hover .project-image {
  opacity:.9;
}

.project-description {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:clamp(1.35rem,3vw,2.35rem);
  overflow-y:auto;
  background:var(--panel);
  color:var(--text);
  text-align:left;
  opacity:0;
  pointer-events:none;
}

.project-title {
  display:block;
  margin:0 0 .45rem;
  max-width:100%;
  font-size:clamp(1.2rem,2vw,1.55rem);
  font-weight:500;
  line-height:1.2;
}

.project-title em {
  font-style:italic;
  font-weight:400;
}

.project-meta {
  display:block;
  margin-bottom:.18rem;
  color:var(--muted);
  font-size:.79rem;
  line-height:1.45;
}

.project-role {
  display:block;
  margin-bottom:1.2rem;
  color:var(--subtle);
  font-size:.79rem;
  line-height:1.45;
}

.project-copy {
  display:block;
  max-width:38rem;
  font-size:clamp(.84rem,1vw,.96rem);
  line-height:1.68;
}

.project-link {
  position:relative;
  z-index:2;
  display:inline-block;
  width:fit-content;
  margin-top:auto;
  padding-top:1.4rem;
  color:var(--muted);
  font-size:.78rem;
  text-decoration:none;
  border-bottom:1px solid transparent;
}

.project-link:hover,
.project-link:focus-visible {
  color:var(--text);
  border-bottom-color:currentColor;
}

.project-close {
  display:block;
  margin-top:.8rem;
  color:var(--subtle);
  font-size:.7rem;
}

.project-card.is-open .project-image {
  opacity:0;
}

.project-card.is-open .project-description {
  opacity:1;
  pointer-events:auto;
}

.project-toggle:focus-visible {
  outline:2px solid var(--text);
  outline-offset:-4px;
}

footer {
  padding:3rem 1.25rem 1.5rem;
  color:var(--muted);
  font-size:.72rem;
}

@media (max-width:760px) {

.site-header{
align-items:flex-start;
flex-direction:column;
gap:.5rem;
padding:.9rem 1rem;
}

main{
padding:0 1rem;
}

.minimal-page{
min-height:auto;
padding:4rem 0 3rem;
}

.projects-intro{
padding:2.25rem 0 1.25rem;
}

.project-grid{
grid-template-columns:1fr;
}

.project-card{
aspect-ratio:5/4;
}

.project-description{
padding:1.35rem;
}

footer{
padding:2.5rem 1rem 1.25rem;
}

}

@media (prefers-reduced-motion:reduce){

*,
*::before,
*::after{

scroll-behavior:auto !important;
transition-duration:.01ms !important;

}

}