:root {
		--body-font: "akkurat", "-apple-system", helvetica, arial, san-serif;
		
		--color-bg-primary: #000;
		--color-bg-secondary: #000;
		
		--color-text-primary: rgba(255,255,255,0.6);
		--color-text-secondary: #999;
	  }


	  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
	  body, html { -webkit-font-smoothing: antialiased; }

	  body {
		background-color: var(--color-bg-primary);
		font-family: var(--body-font);
		line-height: 1.2;
		font-size: 1rem;
		color: var(--color-text-primary);
		text-transform: lowercase;
		text-align: left;
		min-height: 100vh;
		min-height: 100dvh;
		display: flex;
		flex-direction: column;
		transition: ease-in-out all 1s;
	  }

	  h1, h2, h3, h4 {
		font-size: unset;
		font-weight: 400;
	  }
	  
	  p {
		line-height: 1.6;
		/* letter-spacing: -0.008em; */
		font-weight: 400;
		margin-bottom: 0.2rem;
		/* filter: drop-shadow(0 0 1px rgba(0,0,0,0.2)) */
		  }

	  small {
		font-size: 0.7rem;
	  }

	  a {
		color: var(--color-text-primary);
		text-decoration: underline;
		text-decoration-color: transparent;
		transition: color 0.4s ease, text-decoration-color 0.4s ease;
	  }

	  a:hover {
		color: var(--color-text-primary);
		mix-blend-mode: normal;
		text-decoration-color: currentColor;
	  }

	  .bg-video {
		  position: fixed;
		  top: 50%;
		  left: 50%;
		  min-width: 100%;
		  min-height: 100%;
		  width: auto;
		  height: auto;
		  transform: translate(-50%, -50%);
		  object-fit: cover;
		  z-index: -2;
		  filter: grayscale(1);
		}

		.bg-overlay {
		  position: fixed;
		  top: 0;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  /* background-color: color(display-p3 0.385 0.541 0.625 / 0.3); */
		  background-color: rgba(0,0,0,0.9);
		  z-index: -1;
		  backdrop-filter: blur(32px);
		}
		
		.bg-overlay:before {
		  content: "";
		  position: absolute;
		  inset: 0;
		  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 2000 2000' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
		  opacity: 0.10;
		  pointer-events: none;
		}

	  .parent-grid {
		width: 100%;
		max-width: 1280px;
		z-index: 1;
		display: grid;
		grid-template-columns: 1fr;
		align-content: start;
		gap: 2rem;
		padding: 2rem;
		padding-top: calc(2rem + env(safe-area-inset-top));
		/* mix-blend-mode: soft-light; */
		flex: 1 0 auto;
	  }

	  @media (min-width: 640px) {
		  
		  body {
			  font-size: 0.8rem;
		  }
		  
		.parent-grid {
		  grid-template-columns: repeat(3, 1fr);
		}
		.masonry-item:first-of-type {
			grid-column: 1 / -1;
		}
	  }

	  @media (min-width: 1024px) {
		.parent-grid {
		  /* 5 equal columns at desktop scale */
		  grid-template-columns: repeat(5, 1fr);
		}
		.masonry-item:first-of-type {
			grid-column: auto;
		}
	  }

	  .masonry-item {
		min-width: 0;
		opacity: 0;
		animation: fade-in-up 1.2s ease forwards;
	  }

	  .masonry-item:nth-of-type(1) { animation-delay: 0s; }
	  .masonry-item:nth-of-type(2) { animation-delay: 0.24s; }
	  .masonry-item:nth-of-type(3) { animation-delay: 0.48s; }
	  .masonry-item:nth-of-type(4) { animation-delay: 0.72s; }
	  .masonry-item:nth-of-type(5) { animation-delay: 0.96s; }
	  .masonry-item:nth-of-type(6) { animation-delay: 1.2s; }
	  .masonry-item:nth-of-type(7) { animation-delay: 1.44s; }
	  .masonry-item:nth-of-type(8) { animation-delay: 1.68s; }

	  @keyframes fade-in-up {
		from {
		  opacity: 0;
		  transform: translateY(8px);
		}
		to {
		  opacity: 1;
		  transform: translateY(0);
		}
	  }

	  @media (prefers-reduced-motion: reduce) {
		.masonry-item {
		  animation: none;
		  opacity: 1;
		}
	  }

	  .footer {
		  width: 100%;
		  /* mix-blend-mode: soft-light; */
		  padding: 2rem;
		  padding-bottom: calc(2rem + env(safe-area-inset-bottom));
		  flex-shrink: 0;

	  }