:root{
  --bg: #f5f3ed;
  --text: #d3d3d3;
  --name: #ec9706;
  --bio: #4a4a4a;
  --gutter: clamp(10px, 1.6vw, 22px);
  --max-width: 1200px;
}

*{box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}


.layout{
  height:100vh;
  display:grid;
  grid-template-columns: 45% 55%; 
  gap:var(--gutter);
  align-items:center;
  padding:calc(var(--gutter) * 0.9) var(--gutter);
  max-width:var(--max-width);
  margin:0 auto;
} 


.left{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding-left:calc(var(--gutter) * 0.5);
}
.hero{
  max-width:44ch;
  text-align:left;
  margin:0;
}

.hello{
  margin:0;
  font-size:clamp(55px,6.4vw,60px);
  color:var(--text);
  font-weight:500;
  line-height:1;
  white-space:nowrap;
}
.intro{
  margin:6px 0 0 0;
  font-size:clamp(55px,6.4vw,60px);
  color:var(--text);
  font-weight:500;
  line-height:1;
  white-space:nowrap;
}
.name{
  margin:8px 0 0 0;
  font-size:clamp(55px,7.2vw,60px);
  color:var(--name);
  font-weight:800;
  line-height:1;
  white-space:nowrap;
} 

.bio{
  margin-top:12px;
  color:var(--bio);
  font-size:18px;
  line-height:1.6;
  text-align:left;
}
.bio p{margin:0 0 8px 0}  

.contact-btn{
  display:inline-block;
  margin-top:14px;
  padding:10px 14px;
  font-size:16px;
  color:var(--bio);
  text-decoration:none;
  border:1px solid rgba(74,74,74,0.12);
  border-radius:6px;
  background:transparent;
  transition:background-color .14s ease, color .14s ease, transform .12s ease;
} 
.contact-btn:hover,
.contact-btn:focus-visible{
  background:rgba(231,76,60,0.06);
  color:var(--name);
  transform:translateY(-3px);
} 

 .right{
  display:flex;
  align-items:center;
  justify-content:center;
}
.illustration{
  width:100%;
  height:auto;
  max-width:480px;
  max-height:78vh;
  display:block;
  object-fit:contain;
  animation: sway 2.5s ease-in-out infinite;
} 


@keyframes sway {
  0% { transform: translateX(-15px); }
  50% { transform: translateX(15px); }
  100% { transform: translateX(-15px); }
} 


@media (max-width:880px){

  .layout{grid-template-columns:45% 55%; padding:calc(var(--gutter) * 0.6) var(--gutter)}
  .hero{max-width:32ch}
  .illustration{max-width:360px; max-height:56vh}
  .name{font-size:clamp(44px,7vw,52px)}
  .hello,.intro{font-size:clamp(44px,6.6vw,50px)}
} 

@media (max-width:520px){

  .layout{padding:8px}
  .hello,.intro{font-size:clamp(30px,6.6vw,40px)}
  .name{font-size:clamp(32px,6.8vw,42px)}
  .bio{font-size:16px}
  .illustration{max-width:300px; max-height:46vh}
}


@media (prefers-reduced-motion: reduce){
  .illustration { animation: none; transform: none; }
  *{transition-duration:0.001ms!important}
}


.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}