/* ==================================================
   VFG — SINGLE PROJECT
   ================================================== */


/* ==================================================
   BASE
   ================================================== */

.single-project{
  overflow:hidden;

  color:var(--black);
  background:var(--white);
}


/* ==================================================
   HERO
   ================================================== */

.project-hero{
  padding:
    clamp(8rem,12vw,11rem)
    var(--pad)
    clamp(4rem,7vw,7rem);
}


/* TOP */

.project-hero__top{
  display:flex;

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

  gap:2rem;

  margin-bottom:
    clamp(
      3rem,
      6vw,
      6rem
    );
}


/* BACK */

.project-back{
  display:inline-flex;

  align-items:center;

  min-height:44px;

  font-size:.75rem;
  font-weight:800;

  letter-spacing:.06em;

  text-transform:uppercase;
  text-decoration:none;
}


/* META */

.project-hero__meta{
  display:flex;

  flex-wrap:wrap;
  justify-content:flex-end;

  gap:.5rem 1.5rem;

  font-size:.75rem;
  font-weight:800;

  text-transform:uppercase;
}


/* TITLE */

.project-hero__title{
  max-width:12ch;

  margin:0;

  overflow-wrap:anywhere;

  font-family:var(--font-display);

  font-size:
    clamp(
      5rem,
      12vw,
      12rem
    );

  line-height:.78;
  letter-spacing:-.035em;

  text-transform:uppercase;
}


/* INTRO */

.project-hero__intro{
  max-width:680px;

  margin:
    clamp(2rem,4vw,4rem)
    0;

  font-size:
    clamp(
      1.2rem,
      2vw,
      1.8rem
    );

  font-weight:600;

  line-height:1.35;
}


/* HERO IMAGE */

.project-hero__media{
  margin:
    clamp(3rem,6vw,6rem)
    0
    0;

  overflow:hidden;

  border:5px solid var(--black);

  background:var(--cream);
}

.project-hero__media img{
  width:100%;
  height:auto;
}


/* ==================================================
   CONTENT
   ================================================== */

.project-content{
  width:
    min(
      calc(100% - 2.5rem),
      1400px
    );

  margin-inline:auto;

  padding:
    clamp(2rem,5vw,5rem)
    0
    clamp(6rem,10vw,10rem);
}


.project-content > *{
  max-width:760px;

  margin-inline:auto;
}


.project-content > .alignwide{
  max-width:1200px;
}


.project-content > .alignfull{
  width:100%;
  max-width:none;
}


.project-content p,
.project-content li{
  font-size:
    clamp(
      1rem,
      1.2vw,
      1.15rem
    );

  line-height:1.65;
}


.project-content h2,
.project-content h3{
  font-family:var(--font-display);

  line-height:.9;

  text-transform:uppercase;
}


.project-content h2{
  margin-top:
    clamp(
      4rem,
      7vw,
      7rem
    );

  font-size:
    clamp(
      3rem,
      6vw,
      6rem
    );
}


.project-content h3{
  margin-top:3rem;

  font-size:
    clamp(
      2rem,
      4vw,
      4rem
    );
}


.project-content figure{
  margin-top:
    clamp(
      2rem,
      5vw,
      5rem
    );

  margin-bottom:
    clamp(
      2rem,
      5vw,
      5rem
    );
}


.project-content img{
  width:100%;
  height:auto;
}


.project-content .wp-block-gallery{
  max-width:1200px;
}


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

.project-navigation{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr);

  min-height:320px;

  border-top:4px solid var(--black);
}


.project-navigation__item{
  display:flex;

  flex-direction:column;
  justify-content:center;

  min-width:0;

  padding:
    clamp(
      2rem,
      5vw,
      5rem
    );
}


.project-navigation__item +
.project-navigation__item{
  border-left:4px solid var(--black);
}


.project-navigation__item--next{
  align-items:flex-end;

  text-align:right;
}


.project-navigation__item span{
  margin-bottom:.75rem;

  font-size:.7rem;
  font-weight:800;

  letter-spacing:.08em;

  text-transform:uppercase;
}


.project-navigation__item a{
  max-width:10ch;

  overflow-wrap:anywhere;

  font-family:var(--font-display);

  font-size:
    clamp(
      2.5rem,
      5vw,
      5rem
    );

  line-height:.85;

  text-transform:uppercase;
  text-decoration:none;
}


/* ==================================================
   <= 900
   ================================================== */

@media(max-width:900px){

  .project-hero__title{
    font-size:
      clamp(
        4.8rem,
        14vw,
        8rem
      );
  }

  .project-navigation{
    min-height:260px;
  }

}


/* ==================================================
   <= 768
   ================================================== */

@media(max-width:768px){

  .project-hero{
    padding:
      7rem
      1.25rem
      4rem;
  }


  .project-hero__top{
    flex-direction:column;

    gap:1rem;

    margin-bottom:3rem;
  }


  .project-hero__meta{
    justify-content:flex-start;

    font-size:.7rem;
  }


  .project-hero__title{
    max-width:none;

    font-size:
      clamp(
        3.7rem,
        18vw,
        6rem
      );

    line-height:.8;
  }


  .project-hero__intro{
    margin:2rem 0;

    font-size:1.15rem;
  }


  .project-hero__media{
    margin-top:3rem;

    border-width:3px;
  }


  .project-content{
    width:
      calc(
        100% - 2.5rem
      );

    padding-top:2rem;
  }


  .project-content h2{
    font-size:
      clamp(
        2.8rem,
        13vw,
        4.7rem
      );
  }


  .project-content h3{
    font-size:
      clamp(
        2rem,
        10vw,
        3.4rem
      );
  }


  .project-navigation{
    grid-template-columns:1fr;

    min-height:0;
  }


  .project-navigation__item{
    min-height:210px;

    padding:
      2.5rem
      1.25rem;
  }


  .project-navigation__item +
  .project-navigation__item{
    border-top:3px solid var(--black);
    border-left:0;
  }


  .project-navigation__item--next{
    align-items:flex-start;

    text-align:left;
  }


  .project-navigation__item a{
    max-width:12ch;

    font-size:
      clamp(
        2.5rem,
        13vw,
        4rem
      );
  }

}


/* ==================================================
   <= 390
   ================================================== */

@media(max-width:390px){

  .project-hero__title{
    font-size:
      clamp(
        3.2rem,
        17vw,
        4.5rem
      );
  }


  .project-navigation__item{
    min-height:180px;
  }

}