@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=Playfair+Display:ital,wght@0,400;0,500;1,400&display=swap');


:root{

  --paper:#f7f4ee;
  --olive:#2a2f1a;
  --earth:#331200;
  --sand:#e5d5ba;
  --ink:#171714;

  --serif:"Playfair Display",Georgia,serif;
  --sans:"DM Sans",Arial,sans-serif;

}


*{
  box-sizing:border-box;
}


html{
  scroll-behavior:smooth;
}


html,
body{
  margin:0;
  padding:0;
}


body{

  background:var(--paper);
  color:var(--ink);

  font-family:var(--sans);
  font-weight:300;

  line-height:1.5;

}


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



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

.header{

  position:fixed;

  z-index:1000;

  top:0;
  left:0;

  width:100%;

  padding:24px 32px;

  display:flex;
  justify-content:space-between;
  align-items:center;

  color:#fff;

  mix-blend-mode:difference;

  font-size:9px;

  letter-spacing:.17em;

  text-transform:uppercase;

}


.logo{
  font-weight:500;
}


.header nav{

  display:flex;

  gap:25px;

}



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

.page{

  position:relative;

  width:100%;

  height:100vh;

  min-height:600px;

  overflow:hidden;

}



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

.hero{

  position:relative;

  height:100vh;

  min-height:600px;

  overflow:hidden;

  background:#111;

  color:#fff;

}


.hero .image-layer{

  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  z-index:1;

}


.hero .image-layer img{

  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  filter:grayscale(1);

}


.hero-text{

  position:absolute;

  z-index:5;

  left:7vw;

  bottom:13vh;

  color:#fff;

  transition:
    opacity .08s linear,
    transform .08s linear;

}


.eyebrow{

  margin:0 0 16px;

  font-size:9px;

  line-height:1.2;

  letter-spacing:.20em;

  text-transform:uppercase;

}


.hero h1{

  margin:0;

  font-family:var(--serif);

  font-size:clamp(55px,7.5vw,115px);

  font-weight:400;

  line-height:.94;

}



/* =====================================================
   SCROLL
===================================================== */

.scroll{

  position:absolute;

  z-index:20;

  left:50%;

  bottom:28px;

  transform:translateX(-50%);

  display:flex;

  align-items:center;

  gap:10px;

  color:#fff;

  font-size:9px;

  letter-spacing:.18em;

}


.scroll span:last-child{

  font-size:15px;

  animation:pulse 1.8s ease-in-out infinite;

}


@keyframes pulse{

  0%,100%{
    transform:translateY(0);
    opacity:.55;
  }

  50%{
    transform:translateY(5px);
    opacity:1;
  }

}



/* =====================================================
   IMAGE LAYER
===================================================== */

.image-layer{

  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  z-index:1;

  overflow:hidden;

  background:#111;

}


.image-layer img,
.image-layer video{

  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

}


.image-layer:after{

  content:"";

  position:absolute;

  inset:0;

  background:linear-gradient(
    180deg,
    rgba(0,0,0,.03),
    rgba(0,0,0,.20)
  );

  pointer-events:none;

}



/* =====================================================
   COPY
===================================================== */

.copy{

  position:absolute;

  z-index:10;

  opacity:0;

  transition:
    opacity .08s linear,
    transform .08s linear;

}


.copy h2,
.contact h2{

  margin:0;

  font-family:var(--serif);

  font-weight:400;

  line-height:.96;

}


.copy em{
  font-style:italic;
}


.copy>p:not(.eyebrow){

  max-width:360px;

  font-size:13px;

  line-height:1.6;

}



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

#intro{

  background:var(--paper);

}


.intro-copy{

  left:8vw;

  bottom:10vh;

  max-width:720px;

}


.intro-copy h2{

  font-size:clamp(
    54px,
    7vw,
    105px
  );

}


.intro-copy>p:last-child{

  margin-top:28px;

}



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

#fashion,
#family{

  background:var(--olive);

  color:#fff;

}


#food{

  background:var(--paper);

}


#content{

  background:var(--earth);

  color:#fff;

}


#about{

  background:var(--sand);

}



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

.project-copy{

  left:7vw;

  bottom:9vh;

  max-width:400px;

  padding:34px 40px;

  background:rgba(
    247,
    244,
    238,
    .96
  );

  color:var(--ink);

}


#fashion .project-copy,
#family .project-copy{

  background:rgba(
    42,
    47,
    26,
    .95
  );

  color:#fff;

}


#content .project-copy{

  background:rgba(
    51,
    18,
    0,
    .95
  );

  color:#fff;

}


.number{

  display:block;

  margin-bottom:18px;

  font-size:9px;

  letter-spacing:.18em;

  opacity:.55;

}


.project-copy h2{

  font-size:clamp(
    54px,
    6.5vw,
    95px
  );

}


.project-links{

  display:flex;

  gap:24px;

  flex-wrap:wrap;

}


.project-copy a{

  display:inline-block;

  margin-top:30px;

  padding-bottom:7px;

  border-bottom:1px solid currentColor;

  font-size:9px;

  letter-spacing:.16em;

}


.food-copy{

  left:auto;

  right:7vw;

}



/* =====================================================
   FASHION
===================================================== */

#fashion{

  position:relative;

  overflow:hidden;

}


.fashion-images{

  position:absolute;

  inset:0;

  display:flex;

  justify-content:center;

  align-items:center;

  gap:3vw;

  padding:8vh 8vw;

  z-index:1;

}


.fashion-photo{

  position:relative;

  width:min(
    34vw,
    520px
  );

  aspect-ratio:5 / 7;

  overflow:hidden;

}


.fashion-photo img{

  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

}



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

#content{

  position:relative;

  height:100vh;

  min-height:700px;

  overflow:hidden;

}


.content-media{

  position:absolute;

  inset:0;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:4vw;

  padding:7vh 7vw;

  z-index:1;

}


.content-photo{

  width:min(
    32vw,
    480px
  );

  aspect-ratio:4 / 5;

  overflow:hidden;

}


.content-photo img{

  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

}


.content-reel{

  width:min(
    23vw,
    330px
  );

  aspect-ratio:9 / 16;

  overflow:hidden;

}


.content-reel video{

  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

}


.content-copy{

  left:7vw;

  bottom:8vh;

  z-index:10;

}



/* =====================================================
   ABOUT
===================================================== */

.about-copy{

  right:9vw;

  bottom:15vh;

  width:min(
    430px,
    40vw
  );

}


.about-copy h2{

  font-size:clamp(
    55px,
    6.5vw,
    95px
  );

}


.about-copy>p:not(.eyebrow){

  margin-top:28px;

}



/* =====================================================
   CONTACT
===================================================== */

.contact{

  position:relative;

  min-height:100vh;

  padding:7vh 7vw;

  display:flex;

  align-items:center;

  justify-content:center;

  background:var(--olive);

  color:#fff;

}


.contact-image{
  position:absolute;
  z-index:1;

  top:20px;
  left:20px;
  right:20px;
  bottom:20px;

  overflow:hidden;
}


.contact-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}


.contact-content{

  position:relative;

  z-index:2;

  width:100%;

  margin-top:40vh;

}


.contact h2{
  font-size:clamp(
    48px,
    6vw,
    85px
  );
}


.contact-links{

  display:flex;

  align-items:baseline;

  gap:35px;

  flex-wrap:wrap;

}


.email{
  width:fit-content;

  margin-top:45px;

  padding-bottom:8px;

  border-bottom:1px solid rgba(
    255,
    255,
    255,
    .55
  );

  font-family:var(--serif);

  font-size:clamp(
    16px,
    1.5vw,
    22px
  );
}


.whatsapp{

  display:inline-block;

  margin-top:45px;

  padding-bottom:8px;

  border-bottom:1px solid rgba(
    255,
    255,
    255,
    .55
  );

  font-size:9px;

  letter-spacing:.17em;

  text-transform:uppercase;

}


.social{

  display:flex;

  gap:30px;

  margin-top:45px;

  font-size:9px;

  letter-spacing:.17em;

  text-transform:uppercase;

}



/* =====================================================
   FLOATING WHATSAPP
===================================================== */

.whatsapp-float{

  position:fixed;

  z-index:2000;

  right:32px;

  bottom:28px;

  padding-bottom:7px;

  border-bottom:1px solid currentColor;

  color:#fff;

  mix-blend-mode:difference;

  font-size:9px;

  letter-spacing:.17em;

  text-transform:uppercase;

  transition:opacity .3s ease;

}


.whatsapp-float:hover{

  opacity:.5;

}



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

footer{
  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:20px 32px;

  background:var(--olive);
  color:rgba(255,255,255,.5);

  font-size:8px;
  letter-spacing:.15em;
  text-transform:uppercase;
}
/* =========================
   CONTENT — SOCIAL FEED
========================= */

#content{
  position:relative;
  height:100vh;
  min-height:700px;
  overflow:hidden;

  background:var(--earth);
  color:#fff;
}

.content-visuals{
  position:absolute;
  z-index:1;

  left:50%;
  top:50%;

  transform:translate(-50%,-50%);

  display:flex;
  align-items:flex-start;
  justify-content:center;

  gap:2.2vw;
}

/* FOTOS 4:5 */

.content-photo{
  position:relative;

  width:min(22vw,330px);
  aspect-ratio:4 / 5;

  overflow:hidden;
}

.content-photo img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;
}

/* REEL 9:16 */

.content-reel{
  position:relative;

  width:min(20vw,300px);
  aspect-ratio:9 / 16;

  overflow:hidden;

 
  margin-left:3.5vw;
}

.content-reel video{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;
}

/* TEXTO */

#content .project-copy{
  z-index:10;
}


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

@media(max-width:800px){

  .header{

    padding:18px;

  }


  .header nav{

    display:none;

  }


  .page,
  .hero{

    height:100vh;

    min-height:600px;

  }


  .hero-text{

    left:7vw;

    bottom:13vh;

  }


  .hero h1{

    font-size:15vw;

  }


  .scroll{

    bottom:22px;

  }


  .intro-copy{

    left:7vw;

    right:7vw;

    bottom:8vh;

  }


  .intro-copy h2{

    font-size:14vw;

  }


  .project-copy{

    left:7vw;

    right:7vw;

    bottom:6vh;

    max-width:none;

    padding:28px 30px;

  }


  .project-copy h2{

    font-size:14vw;

  }


  .food-copy{

    left:7vw;

    right:7vw;

  }


  /* FASHION */

  .fashion-images{

    gap:3vw;

    padding:8vh 5vw;

  }


  .fashion-photo{

    width:43vw;

    aspect-ratio:5 / 7;

  }


  /* CONTENT */

  .content-media{

    gap:3vw;

    padding:6vh 5vw;

    align-items:center;

  }


  .content-photo{

    width:47vw;

  }


  .content-reel{

    width:30vw;

  }


  .content-copy{

    left:7vw;

    right:7vw;

    bottom:5vh;

  }


  /* ABOUT */

  .about-copy{

    left:7vw;

    right:7vw;

    bottom:6vh;

    width:auto;

    padding:28px;

  }


  .about-copy h2{

    font-size:14vw;

  }


  /* CONTACT */

  .contact{

    padding:5vh 7vw;

    min-height:100vh;

  }



.contact-image{
  top:15px;
  left:15px;
  right:15px;

  aspect-ratio:3 / 2;
  height:auto;
}


  .contact-content{

    margin-top:32vh;

  }


  .contact h2{
  font-size:12vw;
}


  .contact-links{

    gap:18px;

  }


  .email{

    font-size:22px;

  }


  .whatsapp{

    margin-top:45px;

  }


  .social{

    margin-top:40px;

  }


  .whatsapp-float{

    right:18px;

    bottom:22px;

  }


  footer{

    padding:18px;

    flex-direction:column;

    gap:8px;

  }
  #content{
  min-height:700px;
}

.content-visuals{
  top:42%;
  gap:3vw;

  transform:translate(-50%,-50%);
}

.content-photo{
  width:25vw;
}

.content-reel{
  width:25vw;
  margin-left:2vw;
}

#content .project-copy{
  bottom:5vh;
}

}