/* V39 final corrections: menu polish, stable cards, and V38-colored info sections. */

:root{
  --v39-bg:#c5c2d1;
  --v39-text:#242020;
  --v39-muted:rgba(36,32,32,.62);
  --v39-line:rgba(36,32,32,.14);
}

/* Burger menu: always black, all projects included. */
.side-menu,
.side-menu *,
.side-menu a,
.side-menu .menu-sub{
  color:var(--v39-text)!important;
}
.side-menu .close-line{
  color:var(--v39-text)!important;
}
.side-menu .close-line::before,
.side-menu .close-line::after{
  background:var(--v39-text)!important;
  opacity:1!important;
}

/* Subtle bumpy hover on burger and close icon. */
@keyframes v39BurgerBump{
  0%{transform:translateY(-50%) scale(1)}
  38%{transform:translateY(-50%) scale(1.10)}
  64%{transform:translateY(-50%) scale(.96)}
  100%{transform:translateY(-50%) scale(1)}
}
@keyframes v39CloseBump{
  0%{transform:scale(1)}
  38%{transform:scale(1.10)}
  64%{transform:scale(.96)}
  100%{transform:scale(1)}
}
.menu-toggle,
.brand{
  will-change:transform;
}
body.menu-open .brand{
  opacity:0!important;
  pointer-events:none!important;
}
.menu-toggle:hover,
.menu-toggle:focus-visible,
.brand:hover,
.brand:focus-visible{
  animation:v39BurgerBump .46s cubic-bezier(.22,1,.36,1) both!important;
}
.side-menu .close-line:hover,
.side-menu .close-line:focus-visible{
  animation:v39CloseBump .46s cubic-bezier(.22,1,.36,1) both!important;
}

/* Project cards: no click indentation; navigation stays immediate and stable. */
.project-card.is-clicked{
  animation:none!important;
  transform:none!important;
}
.project-card:active{
  transform:none!important;
}

/* Reuse the old site's richer content, recolored for the V38 visual world. */
.info-section,
.about-section,
.skills-section{
  min-height:auto!important;
  padding:clamp(150px,12vw,220px) clamp(48px,7vw,140px)!important;
  border-top:1px solid var(--v39-line)!important;
  background:var(--v39-bg)!important;
  color:var(--v39-text)!important;
}
.about-section{
  padding-top:clamp(172px,13vw,240px)!important;
}
.skills-section{
  padding-top:clamp(145px,11vw,210px)!important;
}
.info-inner,
.skills-section .info-inner{
  width:min(1320px,100%)!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:minmax(250px,360px) minmax(0,820px)!important;
  gap:clamp(86px,9vw,165px)!important;
  align-items:start!important;
}
.info-heading{
  padding-top:4px!important;
}
.info-kicker{
  display:flex!important;
  align-items:center!important;
  margin:0 0 44px!important;
  gap:16px!important;
  color:rgba(36,32,32,.52)!important;
  font-size:11px!important;
  line-height:1!important;
  letter-spacing:.18em!important;
  text-transform:uppercase!important;
  font-weight:400!important;
}
.info-kicker::before{
  content:""!important;
  display:block!important;
  width:34px!important;
  height:1px!important;
  background:rgba(36,32,32,.38)!important;
}
.info-title{
  max-width:420px!important;
  margin:0!important;
  color:var(--v39-text)!important;
  font-size:clamp(40px,3.85vw,70px)!important;
  line-height:1.04!important;
  letter-spacing:-.058em!important;
  font-weight:300!important;
}
.info-content{
  padding-top:clamp(58px,5.6vw,96px)!important;
}
.about-section .info-content,
.skills-section .info-content{
  padding-top:clamp(62px,5.8vw,104px)!important;
}
.info-copy{
  max-width:760px!important;
  color:var(--v39-muted)!important;
  font-size:clamp(15px,1vw,17px)!important;
  line-height:1.78!important;
  letter-spacing:-.018em!important;
  font-weight:300!important;
}
.info-copy p{
  margin:0 0 24px!important;
  max-width:720px!important;
}
.info-lead{
  margin:0 0 46px!important;
  max-width:760px!important;
  color:rgba(36,32,32,.88)!important;
  font-size:clamp(21px,1.55vw,30px)!important;
  line-height:1.30!important;
  letter-spacing:-.045em!important;
  font-weight:300!important;
}
.about-cards,
.skills-grid{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:0!important;
  margin-top:clamp(64px,6vw,92px)!important;
  border:0!important;
  border-top:1px solid var(--v39-line)!important;
}
.info-card,
.skill-card{
  min-height:0!important;
  padding:34px 0 36px!important;
  border:0!important;
  border-bottom:1px solid var(--v39-line)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  display:grid!important;
  grid-template-columns:minmax(170px,250px) minmax(0,1fr)!important;
  gap:clamp(36px,4vw,70px)!important;
  transition:opacity .35s var(--ease), transform .35s var(--ease)!important;
}
.info-card:hover,
.skill-card:hover{
  transform:none!important;
  background:transparent!important;
  opacity:.86!important;
}
.info-card h3,
.skill-card h3{
  margin:0!important;
  color:var(--v39-text)!important;
  font-size:clamp(18px,1.22vw,23px)!important;
  line-height:1.16!important;
  letter-spacing:-.035em!important;
  font-weight:300!important;
}
.info-card p,
.skill-card p{
  margin:0!important;
  max-width:560px!important;
  color:rgba(36,32,32,.56)!important;
  font-size:15px!important;
  line-height:1.68!important;
  letter-spacing:-.014em!important;
  font-weight:300!important;
}
.tools-strip{
  margin-top:clamp(44px,4vw,66px)!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:clamp(22px,2.4vw,38px)!important;
  flex-wrap:wrap!important;
  line-height:0!important;
}
.tools-strip::before,
.tools-strip::after{
  display:none!important;
  content:none!important;
}
.tools-strip img{
  width:44px!important;
  height:44px!important;
  object-fit:contain!important;
  display:block!important;
  flex:0 0 auto!important;
  opacity:.92!important;
  filter:none!important;
  image-rendering:auto!important;
  transition:opacity .28s var(--ease), transform .28s var(--ease)!important;
}
.tools-strip img:hover{
  opacity:1!important;
  transform:translateY(-2px)!important;
}
.contact-section{
  min-height:78vh!important;
  display:grid!important;
  place-items:center!important;
  text-align:center!important;
  padding:clamp(130px,10vw,180px) 24px 90px!important;
  background:var(--v39-bg)!important;
  color:var(--v39-text)!important;
  border-top:1px solid var(--v39-line)!important;
}
.contact-title{
  font-size:clamp(48px,7vw,110px)!important;
  letter-spacing:-.07em!important;
  margin:0 0 18px!important;
  font-weight:400!important;
  color:var(--v39-text)!important;
}
.contact-availability{
  margin:0 auto 22px!important;
  max-width:720px!important;
  color:var(--v39-muted)!important;
  font-size:clamp(15px,1.2vw,20px)!important;
  line-height:1.55!important;
  font-weight:300!important;
}
.contact-links{
  display:flex!important;
  gap:24px!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  color:var(--v39-muted)!important;
}
.contact-links a{
  border-bottom:none!important;
  padding-bottom:6px!important;
  transition:.35s var(--ease)!important;
}
.contact-links a:hover{
  color:var(--v39-text)!important;
}

@media (max-width:980px){
  .info-section,
  .about-section,
  .skills-section{
    padding:104px 22px 106px!important;
  }
  .info-inner,
  .skills-section .info-inner{
    grid-template-columns:1fr!important;
    gap:0!important;
  }
  .info-kicker{
    margin-bottom:28px!important;
  }
  .info-title{
    max-width:100%!important;
    font-size:clamp(40px,11vw,58px)!important;
  }
  .info-content,
  .about-section .info-content,
  .skills-section .info-content{
    padding-top:48px!important;
  }
  .info-lead{
    margin-bottom:32px!important;
    font-size:clamp(20px,6vw,27px)!important;
  }
  .about-cards,
  .skills-grid{
    margin-top:48px!important;
  }
  .info-card,
  .skill-card{
    grid-template-columns:1fr!important;
    gap:16px!important;
    padding:28px 0 30px!important;
  }
  .info-card p,
  .skill-card p{
    max-width:100%!important;
  }
  .tools-strip{
    margin-top:36px!important;
    gap:20px!important;
  }
  .tools-strip img{
    width:40px!important;
    height:40px!important;
  }
}