html{
  box-sizing: border-box;
  background-color: white;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

html::-webkit-scrollbar, 
body::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

body{
  margin: 0px;
  background-color: white;
}

body.misc-page {
  background-color: black;
  color: white; /* optional: make text white on black background */
}

html.misc-page {
  background-color: black;
  color: white; /* optional: make text white on black background */
}

.navbar{
  height: 68px;
  font-family: Circular,Helvetica,sans-serif;
  box-sizing: border-box;
  width: 100vw;
  display: flex;
  padding: 12px;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  background-color: rgba(255, 255, 255, 0.1); /* 20% opacity white */
  backdrop-filter: blur(10px); /* blur background behind navbar */
  -webkit-backdrop-filter: blur(100px); /* for Safari */
  z-index: 200;
}

.navbar-left {
  font-weight: 200;
  display: flex;
  gap: 12px; /* spacing between buttons */
}

/* name goes to the right automatically because of space-between */
.navbar-right {
  font-weight: 700;
}

.nav-button {
  background: #fff;               /* white background */
  border-radius: .375rem;
  border: .125rem solid #000;     /* black border everywhere */
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  font-family: Circular,Helvetica,sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
  padding: 10px;
  position: relative;
  text-align: left;
  text-decoration: none;
  transform: translateZ(0) scale(1);
  transition: transform .2s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  color: #000;                     /* text color black */
}


.nav-button:not(:disabled):hover {
  transform: scale(1.05);
}

.nav-button-80:not(:disabled):hover:active {
  transform: scale(1.05) translateY(.125rem);
  filter: blur(2px);
}

.nav-button-80:focus {
  outline: 0 solid transparent;
}

.nav-button:focus:before {
  content: "";
  left: calc(-1*.375rem);
  pointer-events: none;
  position: absolute;
  top: calc(-1*.375rem);
  transition: border-radius;
  user-select: none;
}

.nav-button:focus:not(:focus-visible) {
  outline: 0 solid transparent;
}

.nav-button:focus:not(:focus-visible):before {
  border-width: 0;
}

.nav-button:not(:disabled):active {
  transform: translateY(.125rem);
}

/* target only the text inside the button */
.nav-button span {
  display: inline-block;
  transition: filter 0.3s ease; /* smooth blur animation */
}

.nav-button:hover span {
  filter: blur(2px);
}

.nav-button.active span {
  filter: blur(2px);
}

.footer {
  font-family: Circular,Helvetica,sans-serif;
  box-sizing: border-box;
  width: 100vw;
  display: flex;
  padding: 12px;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  background-color: rgba(255, 255, 255, 0.1); /* 20% opacity white */
  backdrop-filter: blur(10px); /* blur background behind navbar */
  -webkit-backdrop-filter: blur(100px); /* for Safari */
  z-index: 100;
  bottom: 0;
  font-size: 8px;
}

.footer-left {
  margin-left: 12px;
}

.footer-right {
  margin-right: 12px;
}

#random-images-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 10;
  background: transparent; /* no grey behind images */
}

#random-images-container img {
  max-width: 200px;
  transition: transform 2s ease, opacity 2s ease;
  position: absolute;
}

#hover-images-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 10;
  background: transparent; /* no grey behind images */
}

#hover-images-container img {
  max-width: 200px;
  transition: transform 10s ease, opacity 10s ease;
  position: absolute;
}

/* Container below fixed navbar */
.work-list {
  display: flex;
  flex-direction: column;
  gap: 20px; /* space between projects */
  padding: 78px 12px 20px 12px;
  font-family: Circular, Helvetica, sans-serif;
}

.work-item,
.work-item-no-hover {
  font-family: Circular,Helvetica,sans-serif;
  display: flex;                /* make title and year on the same line */
  justify-content: space-between; /* title left, year right */
  align-items: center;          /* vertically center them */
  text-decoration: none;        /* remove underline from <a> */
  color: inherit;               /* inherit text color */
  padding: 12px 0;              /* optional vertical spacing */
}

.work-item:hover {
  transform: translateX(5px);
  font-style: italic;
}

.work-title {
  font-family: Circular,Helvetica,sans-serif;
  font-size: 3rem;
  font-weight: 700;
}

.work-year {
  font-family: Circular,Helvetica,sans-serif;
  font-size: 3rem;
  font-weight: 700;
  color: #000;
}

/* Marquee */
.marquee {
  font-family: Circular, Helvetica, sans-serif;
  position: fixed;
  top: 68px; /* below navbar */
  left: 0;
  width: 100%;
  height: 60px;
  background: white;
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 50;
}

.marquee-index {
  font-family: Circular, Helvetica, sans-serif;
  position: fixed;
  top: 68px; /* below navbar */
  left: 0;
  width: 100%;
  height: 60px;
  background: black;
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 50;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 10s linear infinite; 
}

.marquee-text {
  font-size: 3rem;
  font-weight: 700;
  color: black;          
  white-space: nowrap; 
}

.marquee-text-index {
  font-size: 3rem;
  font-weight: 700;
  color: white;          
  white-space: nowrap; 
}

/* seamless right-to-left animation */
@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

*{
  padding: 0;
  margin: 0;
}

.media-gallery {
  margin-left: 20px;
  margin-right: 20px;
  padding-top: 152px;
  padding-bottom: 20px; /* increased bottom padding */
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* increase gap between items */
}

.media-item {
  position: relative; /* required for aspect ratio trick for videos */
  width: 100%;
  margin-bottom: 24px; /* spacing below each item */
  display: block;
}

.media-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.media-item.video-embed {
  padding-bottom: 100%; /* 1:1 aspect ratio */
}

.media-item.video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.gallery-column {
  flex: 1 1 calc((100% - 48px) / 2); /* adjust for increased gap */
}

.title-fixed {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 78px 12px 20px 12px;
  box-sizing: border-box;
  z-index: 100; /* below navbar */
  width: 100%;
}

/* Description below title */
.project-description {
  font-family: Circular,Helvetica,sans-serif;
  padding: 0px 12px 20px 12px;
  font-weight: bold;
  font-size: 1.2rem;
  line-height: 1.6;
}

/* Gallery 2-column layout */
.project-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: calc(100% - 24px);
  margin: 0 12px 0px 12px;
}

.project-gallery-about, .project-gallery-xenon {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: calc(100% - 24px);
  margin: 0 12px 0px 12px;
}

.project-gallery-xenon .project-item:last-child {
  grid-column: span 2;
}


.project-item {
  width: 100%;
  display: flex;
  overflow: hidden;
}

.project-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.project-gallery {
  grid-auto-rows: auto;
}

.project-gallery::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.project-gallery-about::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.project-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 equal columns */
  gap: 20px;                              /* same as gallery gap */
  width: calc(100% - 24px);               /* match gallery width */
  margin: 20px 12px 80px 12px;               /* same horizontal margins as gallery */
  font-family: Circular, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 1.2rem;
  line-height: 1.3;
  box-sizing: border-box;
}

.meta-column p {
  margin-bottom: 4px; 
}

.meta-title-space {
  margin-top: 1.2rem;
}

.project-video, .single-img {
  padding-left: 12px;
  padding-right: 12px;
  margin-bottom: 20px; /* distance before meta section */
}

.project-video video, .single-img img {
  width: 100%;   /* make video responsive */
  height: auto;
  display: block;
}

#work-container {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

#work-container.loaded {
  opacity: 1;
  transform: translateY(0);
}