body {
  margin: 0;
  padding: 0;
  background-color: #e6e6e5;
  max-width: 4000px;
  margin: 0 auto;
  font-family: San, sans-serif;
  cursor: none;
  transition: background-color 0.6s ease, color 0.6s ease;
  scroll-behavior: smooth;
}

body.dark-mode {
  background-color: #000;
  color: #fafafa;
}

#mode-toggle-dark {
  background: none;
  border: none;
  font-family: inherit;
  font-size: inherit;
  text-transform: uppercase;
  cursor: none;
  color: black;
  text-align: right;
}

body.dark-mode #mode-toggle-dark {
  color: #fff;
}

body.dark-mode a,
body.dark-mode h1,
body.dark-mode p,
body.dark-mode em,
body.dark-mode button,
body.dark-mode summary,
body.dark-mode select {
  color: #fafafa;
}

body.dark-mode .project-list {
  background-color: #000;
}

body.dark-mode details,
body.dark-mode select,
body.dark-mode .filter-btn {
  border-bottom: 0.5px solid #fafafa;
}

/* -------- CURSOR ----------- */
/* --------------------------- */
.custom-cursor {
  position: fixed;
  width: 13px;
  height: 13px;
  background-color: blue;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1);
  z-index: 1000;
  transition: transform 0.3s ease;
}
/* -------- CURSOR ----------- */
/* --------------------------- */

/* .position {
  left: 0;
  right: 0;
  position: fixed;
  bottom: 15px;
  margin-bottom: 0.8em;
  font-family: San, sans-serif;
  font-size: 0.8rem;
  line-height: 1.2;
  z-index: 90;
} */

/*  ------------ NAV ------------ */
/* ------------------------------ */
.nav-container {
  position: fixed;
  top: 1rem;
  left: 0;
  right: 0;
  margin-bottom: 0.8em;
  font-family: San, sans-serif;
  font-size: 0.8rem;
  line-height: 1.2;
  z-index: 90;
  align-items: baseline;
}

.logo {
  grid-column: span 9;
}
#logo-animation {
  align-self: flex-start;
  width: 160px;
}
#logo-animation svg {
  transition: filter 0.5s ease;
}

.nav-container a {
  font-family: San, sans-serif;
  font-size: 0.8rem;
  text-decoration: none;
  color: #000;
  transition: 0.3s ease;
  text-transform: uppercase;
  align-content: center;
  text-align: right;
  cursor: none;
}
.nav-container a:hover {
  color: blue;
}

/*  ------------ END NAV ------------ */
/* ------------------------------ */

/* ============ ARCHIVE PAGE ============ */
.project-list {
  top: 0;
  position: sticky;
  z-index: 10;
  background-color: #e6e6e5;
  padding: 4em 0 0 0;
  margin-top: 13em;
  transition: 0.6s ease;
}

.filters {
  margin-bottom: 1.5rem;
  font-size: 0.8rem;
  align-items: baseline;
}

.filters select,
.filters button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 0.5px solid black;
  border-radius: 0;
  text-transform: uppercase;
  padding: 0.5rem 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8rem;
  text-align: left;
  color: black;
}

em {
  border: none;
  border-radius: 0;
  text-transform: uppercase;
  padding: 0.3rem 0;
  font-family: inherit;
  font-size: 0.8rem;
  text-align: left;
  color: black;
}

#filter-local,
#filter-category {
  grid-column: span 2;
}

/* TEMP — hide All/Featured buttons */
.filter-buttons {
  display: none;
}

/* TEMP — hide project counter */
#project-counter {
  display: none;
}

.archive-list {
  display: flex;
  flex-direction: column;
  padding: 0 1rem 2rem 1rem;
  gap: 0.5rem;
}

.archive-list details {
  border-bottom: 0.5px solid black;
  font-size: 0.8rem;
  color: black;
  transition: color 0.3s ease;
  padding: 13px 0;

  /* TEMP — lock projects (not clickable) */
  pointer-events: none;
}

.archive-list details:hover summary {
  color: blue;
}

summary {
  list-style: none;
  display: block;
  text-transform: uppercase;
  transition: color 0.3s ease;
  line-height: 1.5;
}

summary::-webkit-details-marker {
  display: none;
}

/* Updated column order */
.archive-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 20px;
}

.collab {
  grid-column: span 1;
  text-transform: none;
}

.year {
  grid-column: span 1;
}

.title {
  grid-column: span 4;
}

.local {
  grid-column: span 2;
}

.category {
  grid-column: span 2;
}

.status {
  grid-column: span 2;
}

/* Expanded content */
.project-content {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 13px;
  margin-top: 1rem;
  font-size: 0.8rem;
  line-height: 1.5;
}

.project-content p {
  grid-column: 4 / span 2;
}

.project-content img:first-child {
  grid-column: span 2;
}

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

.project-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.project-info a {
  text-decoration: none;
  text-transform: uppercase;
}

/* Featured project style */
.featured-project .project-content {
  margin-top: 0.5rem;
}

/* ============ TABLET ============ */
@media (max-width: 900px) {
  .status {
    display: none;
  }

  .collab,
  #filter-collaboration {
    grid-column: span 2;
  }
}

/* ============ MOBILE ============ */
@media (max-width: 720px) {
  .nav-container {
    align-items: center;
  }
  .custom-cursor {
    display: none;
  }

  .logo {
    grid-column: span 2;
  }
  #logo-animation {
    align-self: stretch;
    width: 175px;
  }

  .archive-grid {
    grid-template-columns: repeat(5, 1fr);
    column-gap: 10px;
  }

  .collab,
  .local,
  .category,
  .status {
    display: none;
  }

  .archive-grid > .title {
    grid-column: span 4;
  }
  .archive-list details[open] > *:not(summary) {
    display: none;
  }

  .project-content p {
    grid-column: 1 / span 5;
  }

  .project-content img {
    grid-column: span 5;
  }

  /* .filters select:nth-of-type(1), 
  .filters button:nth-of-type(3) {
    display: none;
  } */

  em {
    display: none;
  }

  #filter-local {
    grid-column: 1 / span 2;
  }
}