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

.projects-page{
  width:70vw;
  max-width:1200px;

  margin:0 auto;

  padding-top:150px;
  padding-bottom:100px;
}


/* =========================================
   INTRO
   ========================================= */

.projects-intro{
  margin-bottom:120px;
}


.projects-label{
  margin-bottom:35px;

  font-size:13px;
  color:var(--grey);

  letter-spacing:.06em;
}


.projects-intro h1{
  margin:0;

  font-size:clamp(38px,4.2vw,64px);
  line-height:.95;
  font-weight:500;

  letter-spacing:-.065em;
}


.projects-intro-bottom{
  display:flex;

  justify-content:space-between;
  align-items:flex-end;

  gap:50px;

  margin-top:40px;
}


.projects-intro-bottom p{
  max-width:570px;

  margin:0;

  font-size:13px;
  line-height:1.7;
}


.projects-count{
  flex-shrink:0;

  font-size:10px;
  line-height:1.6;

  color:var(--grey);

  text-align:right;
}


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

.project{
  margin-bottom:180px;
}


.project-meta{
  display:grid;

  grid-template-columns:50px 1fr 1fr auto;

  gap:20px;

  align-items:baseline;

  margin-bottom:18px;

  padding-bottom:12px;

  border-bottom:1px solid rgba(26,26,26,.15);

  font-size:10px;
}


.project-number{
  color:var(--grey);
}


.project-place{
  font-weight:500;
}


.project-event{
  color:var(--grey);
}


.project-year{
  color:var(--grey);
}


/* =========================================
   IMAGE GALLERIES
   ========================================= */

.project-gallery{
  display:grid;
  gap:12px;
}


/* =========================================
   PLACEHOLDER IMAGES
   ========================================= */

.project-image{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;
}


/* =========================================
   PROJECT GALLERIES
   SAME LAYOUT FOR ALL PROJECTS
   ========================================= */

.project-gallery{

  display:grid;

  grid-template-columns:1.5fr .75fr;
  grid-template-rows:250px 250px;

  gap:12px;

}


/* =========================================
   IMAGES
   ========================================= */

.project-image{

  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

}


/* =========================================
   LARGE IMAGE
   ========================================= */

.project-gallery .project-image:first-child{

  grid-column:1;
  grid-row:1 / 3;

}


/* =========================================
   SMALL IMAGES
   ========================================= */

.project-gallery .project-image:nth-child(2){

  grid-column:2;
  grid-row:1;

}


.project-gallery .project-image:nth-child(3){

  grid-column:2;
  grid-row:2;

}


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

@media(max-width:700px){

  .project-gallery{

    display:grid;

    grid-template-columns:1fr;

    grid-template-rows:auto;

    gap:10px;

  }


  .project-gallery .project-image:first-child,
  .project-gallery .project-image:nth-child(2),
  .project-gallery .project-image:nth-child(3){

    grid-column:1;
    grid-row:auto;

    width:100%;
    height:auto;

    aspect-ratio:auto;

  }

}


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

@media(max-width:700px){

  .projects-page{

    width:auto;

    margin:0 20px;

    padding-top:120px;
    padding-bottom:70px;

  }


  .projects-intro{

    margin-bottom:80px;

  }


  .projects-intro h1{

    font-size:35px;

  }


  .projects-intro-bottom{

    flex-direction:column;

    align-items:flex-start;

    gap:25px;

  }


  .projects-count{

    text-align:left;

  }


  .project{

    margin-bottom:100px;

  }


  .project-meta{

    grid-template-columns:35px 1fr auto;

    gap:8px;

  }


  .project-event{

    grid-column:2;

  }


  .project-year{

    grid-column:3;
    grid-row:1;

  }


  .project-gallery{

    grid-template-columns:1fr;

    grid-template-rows:auto;

  }


  .image-placeholder,
  .gallery-one .image-placeholder:first-child,
  .gallery-two .image-placeholder:first-child,
  .gallery-three .image-placeholder:first-child,
  .gallery-four .image-placeholder:first-child{

    grid-column:auto;
    grid-row:auto;

    min-height:220px;

  }

}
/* =========================================
   MOBILE MENU BUTTON — HIDDEN ON DESKTOP
   ========================================= */

.menu-toggle,
.mobile-spacer{
  display:none;
}


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

@media (max-width:700px){

  .site-header{
    height:64px;
    padding:0 16px;
    display:grid !important;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
  }

  .site-header > .nav-link{
    display:none !important;
  }

  .menu-toggle{
    display:block !important;
    justify-self:start;

    width:24px;
    height:24px;
    margin:0;
    padding:0;

    border:0;
    background:none;

    color:var(--black);
    font-family:"JetBrains Mono", monospace;
    font-size:22px;
    line-height:24px;
pointer-events:auto;
    text-align:center;
    z-index:101;
  }

  .site-header .brand{
    grid-column:2;
    justify-self:center;
    transform:translateY(4px);
  }

  .site-header .brand-name{
    font-size:25px;
    line-height:1;
  }

  .site-header .brand-subtitle{
    margin-top:4px;
    max-width:180px;
    font-size:7px;
    line-height:1.2;
    white-space:normal;
    text-align:center;
  }

  .mobile-spacer{
    display:block !important;
    grid-column:3;
  }

}
/* =========================================
   MOBILE MENU
   ========================================= */

.mobile-menu{
  display:none;
}


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

@media (max-width:700px){

  .mobile-menu{

    position:fixed;

    inset:0;

    z-index:500;

    background:var(--off-white);

    padding:90px 25px 35px;

    flex-direction:column;

  }


  .mobile-menu.open{

    display:flex;

  }


  /* CLOSE BUTTON */

  .mobile-menu-close{

    position:absolute;

    top:17px;

    left:16px;

    width:28px;

    height:28px;

    padding:0;

    border:0;

    background:none;

    color:var(--black);

    font-family:"JetBrains Mono", monospace;

    font-size:30px;

    line-height:28px;

    cursor:pointer;

  }


  /* MENU LINKS */

  .mobile-menu-links{

    display:flex;

    flex-direction:column;

    gap:0;

  }


  .mobile-menu-links a{

    display:block;

    padding:15px 0;

    border-bottom:1px solid rgba(26,26,26,.18);

    color:var(--black);

    text-decoration:none;

    font-family:"JetBrains Mono", monospace;

    font-size:18px;

    line-height:1.3;

  }


  .mobile-menu-links a:first-child{

    border-top:1px solid var(--black);

  }


  .mobile-menu-links a:hover{

    color:var(--orange);

  }

}