* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  background: white;
  color: #0C1014;
  font-family: "Hanken Grotesk", Arial, sans-serif;
}

.page {
  position: relative;
  width: 100%;
  height: 100vh;
}


/* ============================================================
   LEFT SIDEBAR
   ============================================================ */

.site-header {
  position: fixed;

  top: 0;
  left: 0;

  width: 220px;
  height: 100vh;

  padding: 30px;

  background: white;

  z-index: 100;
}


/* ============================================================
   LOGO
   ============================================================ */

.logo {
  position: absolute;

  top: 30px;
  left: 30px;

  display: block;

  width: 160px;
}

.logo img {
  display: block;

  width: 160px;
  height: auto;
}


/* ============================================================
   NAVIGATION
   ============================================================ */

.main-nav {
  position: absolute;

  left: 30px;
  bottom: 110px;

  display: flex;
  flex-direction: column;

  width: 160px;
}

.main-nav a {
  display: flex;

  align-items: center;

  width: 160px;
  height: 50px;

  color: #0C1014;

  text-decoration: none;

  font-size: 25px;
  font-weight: 400;
  font-style: normal;

  line-height: 1;
}


/* ============================================================
   FOOTER / STUDIO TAG
   ============================================================ */

.site-footer {
  position: absolute;

  left: 30px;
  bottom: 30px;

  display: flex;
  flex-direction: column;

  gap: 0;

  width: 160px;

  font-family: "Hanken Grotesk", Arial, sans-serif;
  font-size: 15px;
  font-weight: 800;
  font-style: italic;

  line-height: 1.1;

  color: #B4B4B4;
}

.footer-left,
.footer-right {
  color: #B4B4B4;
}


/* ============================================================
   PROJECTS — MAIN VIEW
   ============================================================ */

.projects {
  position: fixed;

  top: 0;
  left: 220px;

  width: calc(100vw - 220px);
  height: 100vh;

  padding: 3.75px;

  display: flex;
  flex-direction: row;
  align-items: flex-start;

  gap: 3.75px;

  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-width: none;
}

.projects::-webkit-scrollbar {
  display: none;
}


/* ============================================================
   PROJECT SQUARE
   ============================================================ */

.project {
  position: relative;

  flex: 0 0 auto;

  width: calc(100vh - 7.5px);
  height: calc(100vh - 7.5px);

  overflow: hidden;

  display: block;

  text-decoration: none;

  opacity: 0;
}

.project.animate-in {
  animation-name: projectFadeIn;

  animation-duration: 0.4s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;

  animation-delay: var(--project-delay);
}

@keyframes projectFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


/* ============================================================
   PROJECT IMAGE
   ============================================================ */

.project > img {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;
}


/* ============================================================
   PROJECT HOVER
   ============================================================ */

.project-hover {
  position: absolute;

  inset: 0;

  opacity: 0;

  transition: opacity 0.4s ease;
}

.project:hover .project-hover {
  opacity: 1;
}


/* ============================================================
   PROJECT INFORMATION
   ============================================================ */

.project-info-projects {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  padding: 30px;

  color: white;

  opacity: 0;

  transition: opacity 0.4s ease;

  z-index: 2;
}

.project:hover .project-info-projects {
  opacity: 1;
}


/* ============================================================
   PROJECT NUMBER
   ============================================================ */

.project-number {
  position: absolute;

  top: 45px;
  left: 0;

  width: 100%;

  text-align: center;

  font-size: 25px;
  line-height: 1;

  font-weight: 800;
}


/* ============================================================
   PROJECT TITLE
   ============================================================ */

.project-title {
  position: absolute;

  top: 50%;
  left: 30px;

  width: calc(100% - 60px);

  transform: translateY(-50%);

  text-align: center;

  font-size: 50px;
  line-height: 1;

  font-weight: 800;
}


/* ============================================================
   PROJECT SUBTITLE
   ============================================================ */

.project-subtitle {
  display: block;

  font-size: 50px;
  line-height: 1;

  font-weight: 800;

  margin-top: 0;
}


/* ============================================================
   INDEX
   ============================================================ */

.project-info-index {
  display: none;
}

.page.index-mode .projects {
  position: fixed;

  top: 0;
  left: 220px;

  width: calc(100vw - 220px);
  height: 100vh;

  padding: 3.75px;

  display: flex;
  flex-direction: row;

  gap: 3.75px;

  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-width: none;
}

.page.index-mode .projects::-webkit-scrollbar {
  display: none;
}


/* ============================================================
   INDEX — VERTICAL PROJECT
   ============================================================ */

.page.index-mode .project {
  position: relative;

  flex: 0 0 auto;

  width: 60px;
  height: calc(100vh - 7.5px);

  overflow: hidden;

  background: white;

  opacity: 0;
}


/* ============================================================
   INDEX — HIDE SQUARE CONTENT
   ============================================================ */

.page.index-mode .project > img {
  display: none !important;
}

.page.index-mode .project-info-projects {
  display: none !important;
}


/* ============================================================
   INDEX — PROJECT COLOR
   ============================================================ */

.page.index-mode .project-hover {
  display: block;

  position: absolute;

  inset: 0;

  opacity: 1;

  z-index: 1;

  transition: opacity 0.4s ease;
}

.page.index-mode .project:hover .project-hover {
  opacity: 0;
}


/* ============================================================
   INDEX — INFORMATION CONTAINER
   ============================================================ */

.page.index-mode .project-info-index {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  display: block;

  color: white;

  font-size: 25px;
  line-height: 1;

  font-weight: 800;

  z-index: 2;

  transition: color 0.4s ease;
}


/* ============================================================
   INDEX — TOP GROUP
   ============================================================ */

.page.index-mode .project-index-top {
  position: absolute;

  top: 30px;
  left: 0;

  width: 100%;
  height: 140px;

  display: block;
}


/* ============================================================
   INDEX — TOP TEXTS
   ============================================================ */

.page.index-mode .index-year,
.page.index-mode .index-category {
  position: absolute;

  left: 50%;

  width: max-content;

  white-space: nowrap;

  font-size: 25px;
  line-height: 1;

  font-weight: 800;

  writing-mode: vertical-rl;

  transform: translateX(-50%) rotate(180deg);
}


/* YEAR */

.page.index-mode .index-year {
  top: 0;
}


/* CATEGORY */

.page.index-mode .index-category {
  top: 90px;
}


/* ============================================================
   INDEX — BOTTOM GROUP
   ============================================================ */

.page.index-mode .project-index-bottom {
  position: absolute;

  left: 0;
  bottom: 30px;

  width: 100%;
  height: 220px;

  display: block;
}


/* ============================================================
   INDEX — BOTTOM TEXTS
   ============================================================ */

.page.index-mode .index-title,
.page.index-mode .index-id {
  position: absolute;

  left: 50%;

  width: max-content;

  white-space: nowrap;

  font-size: 25px;
  line-height: 1;

  font-weight: 800;

  writing-mode: vertical-rl;

  transform: translateX(-50%) rotate(180deg);
}


/* TITLE */

.page.index-mode .index-title {
  bottom: 150px;
}


/* ID */

.page.index-mode .index-id {
  bottom: 0;
}


/* ============================================================
   INDEX — HOVER
   ============================================================ */

.page.index-mode .project:hover .project-info-index {
  color: #0C1014;
}


/* ============================================================
   INDEX — PROJECT COLORS
   ============================================================ */

.page.index-mode .project-eleven .project-hover {
  background: #4CAF50;
}

.page.index-mode .project-ten .project-hover {
  background: #2878B5;
}

.page.index-mode .project-nine .project-hover {
  background: #D94A3A;
}

.page.index-mode .project-eight .project-hover {
  background: #8057B8;
}

.page.index-mode .project-seven .project-hover {
  background: #D95F9B;
}

.page.index-mode .project-six .project-hover {
  background: #E5B52F;
}

.page.index-mode .project-five .project-hover {
  background: #20A6A6;
}

.page.index-mode .project-four .project-hover {
  background: #354B9A;
}

.page.index-mode .project-three .project-hover {
  background: #9A6245;
}

.page.index-mode .project-two .project-hover {
  background: #8BAF45;
}

.page.index-mode .project-one .project-hover {
  background: #EF7D0F;
}