body {
  margin: 0;
  background-color: #000;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: #fff; text-decoration: none; }
a:hover { text-decoration: underline; }

main { max-width: 900px; margin: 0 auto; padding: 0 20px; }

/* HERO */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 0;
}

.hero .photo img { width: 260px; height: 300px; object-fit: cover; border-radius: 0; }

.hero .name { font-size: 42px; font-weight: 490; margin: 10px 0 4px; }
.hero .role { font-size: 18px; color: #aaa; margin-bottom: 8px; }
.hero .desc { font-size: 16px; max-width: 600px; margin: 0 auto; }

.hero .hero-links { margin-top: 10px; display: flex; gap: 16px; font-size: 24px; }
.hero-links a { color: #fff; }
.hero-links a.cv-icon img { width: 24px; height: 24px; transform: translateY(3px); }

/* Sections */
section { padding: 60px 0; border-top: 1px solid #333; }
section h2 { font-size: 34px; font-weight: 315; margin-bottom: 16px; }
section p, section ul { font-size: 18px; font-weight: 250; max-width: 900px; margin: 0 auto; margin-left: 30px; }
section ul { padding-left: 20px; }

#education { border-top: none; }
#education p { margin-bottom: 8px; }

/* Vertical name */
.vertical-name {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  position: fixed;
  top: 25px;
  left: 15px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 23px;
  font-weight: 150;
  letter-spacing: 1.5px;
  color: #fff;
  z-index: 100;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Section buttons */
.section-buttons {
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  position: fixed;
  bottom: 10px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 300;
  font-size: 15.2px;
  line-height: 1.2;
  letter-spacing: 1px;
  color: #fff;
  z-index: 90;
  transition: transform 0.3s ease, opacity 0.3s ease;
  align-items: flex-end;
}

.section-buttons a { color: #fff; text-decoration: none; }
.section-buttons a:hover { text-decoration: underline; }

.scrolled .vertical-name { transform: translateX(-120%); opacity: 0; }
.scrolled .section-buttons { transform: translateX(120%); opacity: 0; }

/* Publications */
.publication { margin-bottom: 24px; }
.pub-type { font-size: 22px; font-weight: 450; margin-bottom: 4px; margin-left: 15px; }
.pub-title { font-size: 18px; font-weight: 250; margin-bottom: 4px; }
.pub-authors { font-size: 17px; color: #aaa; margin-bottom: 4px; }
.pub-conference { font-size: 16px; font-style: italic; color: #ccc; margin-bottom: 8px; }

/* Work & Projects */
.work-item { margin-bottom: 20px; }
.work-title { font-size: 18px; font-weight: 500; margin-bottom: 4px; }
.work-desc { font-size: 17px; color: #aaa; margin-left: 20px; list-style-type: disc; }

html { scroll-behavior: smooth; }

@media (max-width: 600px) {
  .hero {
    min-height: auto;
    display: flex;
    justify-content: flex-start; 
    padding-top: 75px;           
    padding-bottom: 40px;        
  }

  .hero .photo img {
    width: 180px;            
    height: 200px;
  }

  .hero .name {
    font-size: 28px;         
    margin: 12px 0 6px;
  }

  .hero .role {
    font-size: 16px;
    margin-bottom: 8px;
  }

  .hero .desc {
    font-size: 14px;
    max-width: 90%;
    margin-bottom: 12px;
  }

  .hero .hero-links {
    font-size: 20px;
    gap: 12px;
    margin-top: 3px;
  }

  .vertical-name {
    font-size: 18px;
    font-weight: 300;
    top: 10px;
  }

  .section-buttons {
    font-size: 14px;
    bottom: 10px;
    gap: 4px;
  }

  section h2 {
    font-size: 24px;
  }

  section p, section ul {
    font-size: 16px;
    margin-left: 15px;
  }

  .pub-type { font-size: 18px; }
  .pub-title { font-size: 16px; }
  .pub-authors { font-size: 14px; }
  .pub-conference { font-size: 14px; }

  .work-title { font-size: 16px; }
  .work-desc { font-size: 14px; }
}