:root {
  --page-padding: 3rem;
  --page-width: calc(100vw - (2 * var(--page-padding)));
  --text-color: #1a1a1a;
  --muted-color: #777;
  --line-color: #4b4b4b;
  --header-height: 6.5rem;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #fafafa;
  color: var(--text-color);
}


/* ==========================
   FIXED HEADER
   ========================== */

.project-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #fafafa;
  padding: 2rem var(--page-padding) 0;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line-color);
  padding-bottom: 0.7rem;
}

header h1 {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.2;
  color: #4b4b4b;
}

header h1 a {
  color: inherit;
  text-decoration: none;
}

.header-nav {
  display: flex;
  gap: 2.5rem;
}

.header-nav a {
  color: #4b4b4b;
  font-size: 1.5rem;
  font-weight: 300;
  text-decoration: none;
}

.header-nav a:hover {
  color: #000;
}


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

.project-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  padding-top: 1rem;
  padding-bottom: 0.8rem;
  width: 100%;
}

.project-nav-5 {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 1fr;
padding-top: 1rem;
padding-bottom: 0.8rem;
width: 100%;
}


.project-nav a,
.project-nav-5 a {
  color: #777;
  font-size: 1.5rem;
  font-weight: 300;
  text-decoration: none;
  opacity: 0.35;
  transition: opacity 0.25s ease, color 0.25s ease;
}



/* ==========================
   4-ITEM NAVIGATION
   ========================== */

.project-nav a:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

.project-nav a:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
}

.project-nav a:nth-child(3) {
  grid-column: 3;
  grid-row: 1;
  justify-self: start;
}

.project-nav a:nth-child(4) {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}


/* ==========================
   5-ITEM NAVIGATION
   ========================== */

.project-nav-5 a:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

.project-nav-5 a:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
}

.project-nav-5 a:nth-child(3) {
  grid-column: 3;
  grid-row: 1;
  justify-self: start;
}

.project-nav-5 a:nth-child(4) {
  grid-column: 4;
  grid-row: 1;
  justify-self: start;
}

.project-nav-5 a:nth-child(5) {
  grid-column: 5;
  grid-row: 1;
  justify-self: end;
}


/* ==========================
   ACTIVE
   ========================== */

.project-nav a.active,
.project-nav-5 a.active {
  opacity: 1;
  color: #4b4b4b;
}



/* ==========================
   PAGE
   ========================== */

.project-page {
  padding-top: var(--header-height);
}

.project-section {
  scroll-margin-top: var(--header-height);
  position: relative;
  width: 100%;
  padding: 3vw var(--page-padding) 0;
}


/* ==========================
   ELEMENT POSITIONING
   ========================== */

.project-item {
  display: block;
  max-width: 100%
}

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

.project-row {
  display: flex;
  align-items: flex-start;
  gap: 5vw;
}

.project-row.stack {
  flex-direction: column;
  gap: 5vw;
}

.vertical-divider {
  width: 1px;
  height: 5vw;
  background: transparent;
}



/* ==========================
   IMAGE / TEXT SIZE
   ========================== */

.size-0   { width: 0%; }
.size-5   { width: 5%; }
.size-10  { width: 10%; }
.size-15  { width: 15%; }
.size-20  { width: 20%; }
.size-25  { width: 25%; }
.size-30  { width: 30%; }
.size-35  { width: 35%; }
.size-40  { width: 40%; }
.size-45  { width: 45%; }
.size-50  { width: 50%; }
.size-55  { width: 55%; }
.size-60  { width: 60%; }
.size-65  { width: 65%; }
.size-70  { width: 70%; }
.size-75  { width: 75%; }
.size-80  { width: 80%; }
.size-85  { width: 85%; }
.size-90  { width: 90%; }
.size-95  { width: 95%; }
.size-100 { width: 100%; }


/* ==========================
   HORIZONTAL POSITION
   ========================== */

.pos-0   { margin-left: 0%; }
.pos-5   { margin-left: 5%; }
.pos-10  { margin-left: 10%; }
.pos-15  { margin-left: 15%; }
.pos-20  { margin-left: 20%; }
.pos-25  { margin-left: 25%; }
.pos-30  { margin-left: 30%; }
.pos-35  { margin-left: 35%; }
.pos-40  { margin-left: 40%; }
.pos-45  { margin-left: 45%; }
.pos-50  { margin-left: 50%; }
.pos-55  { margin-left: 55%; }
.pos-60  { margin-left: 60%; }
.pos-65  { margin-left: 65%; }
.pos-70  { margin-left: 70%; }
.pos-75  { margin-left: 75%; }
.pos-80  { margin-left: 80%; }
.pos-85  { margin-left: 85%; }
.pos-90  { margin-left: 90%; }
.pos-95  { margin-left: 95%; }
.pos-100 { margin-left: 100%; }


/* ==========================
   HORIZONTAL POSITION — RIGHT
   ========================== */

.pos-r-0   { margin-left: auto; margin-right: 0%; }
.pos-r-5   { margin-left: auto; margin-right: 5%; }
.pos-r-10  { margin-left: auto; margin-right: 10%; }
.pos-r-15  { margin-left: auto; margin-right: 15%; }
.pos-r-20  { margin-left: auto; margin-right: 20%; }
.pos-r-25  { margin-left: auto; margin-right: 25%; }
.pos-r-30  { margin-left: auto; margin-right: 30%; }
.pos-r-35  { margin-left: auto; margin-right: 35%; }
.pos-r-40  { margin-left: auto; margin-right: 40%; }
.pos-r-45  { margin-left: auto; margin-right: 45%; }
.pos-r-50  { margin-left: auto; margin-right: 50%; }
.pos-r-55  { margin-left: auto; margin-right: 55%; }
.pos-r-60  { margin-left: auto; margin-right: 60%; }
.pos-r-65  { margin-left: auto; margin-right: 65%; }
.pos-r-70  { margin-left: auto; margin-right: 70%; }
.pos-r-75  { margin-left: auto; margin-right: 75%; }
.pos-r-80  { margin-left: auto; margin-right: 80%; }
.pos-r-85  { margin-left: auto; margin-right: 85%; }
.pos-r-90  { margin-left: auto; margin-right: 90%; }
.pos-r-95  { margin-left: auto; margin-right: 95%; }
.pos-r-100 { margin-left: auto; margin-right: 100%; }


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

.project-title h2 {
  margin: 0;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.15;
  color: #4b4b4bd0;
}

.project-year {
  margin-top: 0.4rem;
  font-size: 1rem;
  color: #555;
}


/* ==========================
   DESCRIPTION
   ========================== */

.project-description p,
.gallery-text,
.book-section p {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.4;
  color: #4b4b4bd0;
}

.project-description h2 {
  margin: 0 0 1rem 0;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.15;
  color: #4b4b4bd0;
}


/* ==========================
   GALLERY
   ========================== */

.gallery-section {
  padding-top: 0vw;
  padding-bottom: 10vw;
}

.gallery-row {
  margin-top: 4vw;
}


/* ==========================
   VIDEO
   ========================== */

.video-section {
  min-height: 80vh;
  
}

.video-section h2 {
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  color: #4b4b4bd0;
}

.video-section p {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.2;
  color: #4b4b4b;
}

.video-container video {
  display: block;
  width: 100%;
  height: auto;
}


/* ==========================
   BOOK
   ========================== */

.book-section {
  padding-bottom: 5vw;
}

.book-row {
  margin-top: 8vw;
}

.book-section h2 {
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  color: #4b4b4bd0;
}

.book-section p {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.2;
  color: #4b4b4b;
}


/* ==========================
   FOOTER
   ========================== */


footer {
  display: flex;
  align-items: center;
  padding: 1rem var(--page-padding);
  color: #555;
}

footer .left {
  font-size: 0.8rem;
}

footer .right {
  margin-left: auto;
  text-align: right;
}

footer a {
  color: #4b4b4b;
  font-size: 1.5rem;
  font-weight: 300;
  text-decoration: none;
}



/* ==========================
   MOBILE
   ========================== */

@media (max-width: 768px) {
  :root {
    --page-padding: 1.25rem;
    --header-height: 7rem;
  }

  .project-header {
    padding-top: 0.75rem;
  }

  .header-nav {
    gap: 1.5rem;
  }

  .project-nav a {
    font-size: 0.7rem;
  }

  .project-section {
    padding-top: 8vw;
    padding-bottom: 20vw;
  }

  .size-30,
  .size-40,
  .size-50,
  .size-60 {
    width: 80vw;
  }

  .pos-0,
  .pos-10,
  .pos-20,
  .pos-30,
  .pos-40,
  .pos-50,
  .pos-60 {
    margin-left: 0;
  }

  .project-title h2 {
    font-size: 1.5rem;
  }

  footer {
    grid-template-columns: 1fr;
    gap: 1rem;
    text-align: left;
  }

  footer .middle,
  footer .right {
    text-align: left;
  }
}