/* ===== Base ===== */
*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  font-family: -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* ===== Full-screen hero ===== */
.hero{
  padding: 0;
}

.hero-btn{
  width: 100vw;
  height: 100vh;
  position: relative;   /* anchors absolute images */
  overflow: hidden;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

/* Both images fill the screen */
.hero-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 220ms ease;
}

/* Swap */
.hero-sketch{ opacity: 1; }
.hero-final{ opacity: 0; }
.hero-btn:hover .hero-final{ opacity: 1; }
.hero-btn:hover .hero-sketch{ opacity: 0; }

/* ===== Nav overlay (on top of hero) ===== */
.nav{
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 20;
  background: transparent;
}

.nav-left{
  display: flex;
  flex-direction: column;
  gap: 35px;          
}

.nav-link{
  font-family: "Roboto Mono", monospace;
  font-size: 28px;      /* 50px is huge—this is cleaner */
  letter-spacing: 0.04em;
  text-decoration: none;
  color: #11120D;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

.nav-link:hover{
  text-decoration: underline;
}

/* Logo bottom-right */
.logo{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 20;
  font-family: "Roboto Mono", monospace;
  font-size: 50px;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: #11120D;
  text-shadow: 0 2px 0px rgba(0,0,0,0.4);
}

/* Hide footer for this full-screen page */
.footer{ display: none; }

/* Mobile */
@media (max-width: 520px){
  .nav{ top: 16px; left: 16px; }
  .logo{ right: 16px; bottom: 16px; }
  .nav-link{ font-size: 18px; }
  .logo{ font-size: 18px; }
}

/* Projects page header */
.projects-head{
  padding: 34px 18px 8px;
}

.projects-title{
  margin: 0;
  text-align: center;
  font-size: 42px;
  letter-spacing: 0.02em;
}

/* Projects list */
.projects-list{
  padding: 10px 18px 26px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* One row */
.project-row{
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 28px;
  align-items: center;
}

.project-row.is-reverse{
  grid-template-columns: 1fr 190px;
}

.project-row.is-reverse .project-img{
  order: 2;
}

.project-img{
  display: block;
  width: 300px;
  height:300px;
  border: 1px solid rgba(17,18,13,0.15);
  overflow: hidden;
  background: #11120D; /* placeholder look */
}

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

.project-text h2{
  margin: 0 0 10px;
  font-size: 28px;
}

.project-text p{
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  max-width: 38ch;
  color: rgba(17,18,13,0.75);
}

/* Mobile */
@media (max-width: 520px){
.project-row{
  grid-template-columns: 160px 1fr;
}
.project-row.is-reverse{
  grid-template-columns: 1fr 160px;
}
.project-img{
  width: 160px;
  height: 160px;
  }
  
  
 .project-row.is-reverse .project-img{ order: 0; }
  
  
/* smooth hide/show */
.nav, .logo{
  transition: opacity 200ms ease, transform 200ms ease;
}

/* hidden state */
.is-hidden{
  opacity: 0;
  transform: translateY(-5px);
  pointer-events: none;
}

.logo.is-hidden{
  transform: translateY(5px);
}