*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family: Helvetica, Arial, sans-serif;
  height:100vh;
  overflow:hidden;
}

.wrapper{
  display:flex;
  width:100vw;
  height:100vh;
}

/* MENU */
.nav{
  width:35%;
  padding:56px;
  position:relative;
}

.gray{background:#d2d2d2;color:#000}
.white{background:#fff;color:#000}

.logo{
  position:absolute;
  top:25vh;
  left:56px;
  font-family: Geneva, Helvetica, Arial, sans-serif;
  font-weight:700;
  font-size:clamp(52px, 5.5vw, 92px);
  letter-spacing:.03em;
  line-height:1;
  white-space:nowrap;
}

.menu{
  margin-top:calc(25vh + 96px);
}

.menu a{
  display:block;
  font-size:14px;
  margin-bottom:16px;
  cursor:default;
  text-decoration:none;
  color:inherit;
  opacity:.4;
  transition:opacity .2s ease;
}

.menu a:hover{opacity:.7}

.menu a.active{
  opacity:1;
  font-weight:500;
}

/* CONTENT */
.content{
  width:65%;
  padding:56px 56px 48px 56px;
  overflow:hidden;
}

.theme-gray{background:#d2d2d2;color:#000}
.theme-white{background:#fff;color:#000}

.page{display:none;height:100%}
.page.active{display:block}

/* HOME */
.home{
  width:100%;
  height:100%;
  position:relative;
  transform:translateY(-1.5%);
}

.home img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:0;
  transition:opacity .8s ease;
}

.home img.active{opacity:1}

/* SECTIONS (ADS / PEOPLE / PERSONAL) */
.section{
  height:100%;
  display:flex;
  flex-direction:column;
}

.section-text{
  min-height:120px;
  font-size:13.5px;
  line-height:1.7;
  letter-spacing:.02em;
  opacity:.6;
  margin-bottom:40px;
}

.section-text::after{
  content:'';
  display:block;
  margin-top:24px;
}

/* PROJECT GRID — 2 COLUNAS */
.project-list{
  flex:1;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:32px;
  overflow-y:auto;
  align-content:start;
}

/* PROJETOS: mostrar só 1 thumb por projeto */
.project img{
  display:none;
}

.project img:first-child{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  cursor:pointer;
}

/* GALLERY */
.gallery{
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.viewer{
  position:relative;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.viewer img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

/* GALLERY THUMBS */
.gallery-thumbs{
  margin-top:32px; /* respiro entre imagem grande e thumbs */
  max-height:180px;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(90px,1fr));
  gap:14px;
  overflow-y:auto;
}

.gallery-thumbs img{
  width:100%;
  opacity:.5;
  cursor:pointer;
}

.gallery-thumbs img.active{opacity:1}

/* TEXT */
.text{
  max-width:640px;
  font-size:14.5px;
  line-height:1.8;
  letter-spacing:.01em;
}

#bio .text{
  font-size:15px;
  line-height:1.85;
}