* {margin: 0; padding: 0; box-sizing: border-box;}
:root {--black: #111111; --white: #ffffff; --gray: #666666; --blue: #0066ff; --light-gray: #f5f5f5;}
html {font-size: 16px; scroll-behavior: smooth;}
body {font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--black); background: var(--white); line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased;}
.container {max-width: 960px; margin: 0 auto; padding: 0 32px;}
.nav {position: fixed; top: 0; width: 100%; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(0, 0, 0, 0.06); z-index: 1000;}
.nav .container {display: flex; justify-content: space-between; align-items: center; height: 72px;}
.nav-name {font-weight: 600; font-size: 17px; color: var(--black); text-decoration: none; transition: color 0.2s ease;}
.nav-name:hover {color: var(--blue);}
.nav-links {display: flex; gap: 32px;}
.nav-links a {font-size: 15px; color: var(--gray); text-decoration: none; transition: color 0.2s ease;}
.nav-links a:hover {color: var(--black);}
.hero {padding: 160px 0 120px;}
.hero-title {font-size: clamp(40px, 6vw, 56px); font-weight: 700; line-height: 1.2; margin-bottom: 24px; letter-spacing: -0.02em;}
.hero-subtitle {font-size: 20px; color: var(--gray); line-height: 1.6; margin-bottom: 32px; max-width: 640px;}
.social-links {display: flex; gap: 16px; margin-bottom: 32px;}
.social-icon {display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--gray); text-decoration: none; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 8px; transition: all 0.2s ease;}
.social-icon:hover {color: var(--blue); border-color: var(--blue); background: rgba(0, 102, 255, 0.04); transform: translateY(-2px);}
.social-icon svg {width: 20px; height: 20px;}
.cta {display: inline-block; padding: 14px 32px; background: var(--blue); color: var(--white); text-decoration: none; border-radius: 6px; font-weight: 600; font-size: 16px; transition: all 0.2s ease;}
.cta:hover {background: #0052cc; transform: translateY(-2px);}
.section {padding: 96px 0;}
.section-alt {background: var(--light-gray);}
.section-label {font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray); margin-bottom: 48px;}
.about-content {margin-bottom: 64px;}
.about-large {font-size: 28px; font-weight: 600; line-height: 1.4; margin-bottom: 32px; max-width: 720px; letter-spacing: -0.01em;}
.about-content p {font-size: 18px; line-height: 1.7; color: var(--gray); margin-bottom: 24px; max-width: 680px;}
.values {display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 48px; margin-top: 64px;}
.value h3 {font-size: 18px; font-weight: 600; margin-bottom: 12px; color: var(--black);}
.value p {font-size: 16px; line-height: 1.6; color: var(--gray);}
.project {margin-bottom: 80px; padding-bottom: 80px; border-bottom: 1px solid rgba(0, 0, 0, 0.06);}
.project:last-of-type {border-bottom: none; padding-bottom: 0;}
.project-header {display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; gap: 16px; flex-wrap: wrap;}
.project-header h3 {font-size: 28px; font-weight: 700; letter-spacing: -0.01em;}
.project-tag {display: inline-block; padding: 6px 14px; background: rgba(0, 102, 255, 0.1); color: var(--blue); border-radius: 4px; font-size: 13px; font-weight: 600;}
.project-description {font-size: 18px; line-height: 1.7; color: var(--gray); margin-bottom: 32px; max-width: 720px;}
.project-details {display: grid; gap: 32px; margin-top: 40px; margin-bottom: 32px;}
.detail-label {display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray); margin-bottom: 12px;}
.detail p {font-size: 16px; line-height: 1.7; color: var(--gray); max-width: 680px;}
.project-link {display: inline-flex; align-items: center; font-size: 16px; font-weight: 600; color: var(--blue); text-decoration: none; transition: gap 0.2s ease; gap: 8px;}
.project-link:hover {gap: 12px;}
.more-work {margin-top: 64px; padding-top: 64px; border-top: 1px solid rgba(0, 0, 0, 0.06);}
.more-work p {font-size: 18px; color: var(--gray);}
.more-work a {color: var(--blue); text-decoration: none; font-weight: 600;}
.more-work a:hover {text-decoration: underline;}
.timeline {max-width: 720px;}
.timeline-item {display: grid; grid-template-columns: 160px 1fr; gap: 48px; margin-bottom: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(0, 0, 0, 0.06);}
.timeline-item:last-child {border-bottom: none; padding-bottom: 0;}
.timeline-date {font-size: 15px; color: var(--gray); padding-top: 2px;}
.timeline-content h3 {font-size: 20px; font-weight: 600; margin-bottom: 8px;}
.timeline-org {font-size: 16px; color: var(--blue); font-weight: 600; margin-bottom: 12px;}
.timeline-content p {font-size: 16px; line-height: 1.7; color: var(--gray);}
.experience-note {margin-top: 48px; font-size: 16px;}
.experience-note a {color: var(--blue); text-decoration: none; font-weight: 600;}
.experience-note a:hover {text-decoration: underline;}
.focus-content {max-width: 720px;}
.focus-content p {font-size: 18px; line-height: 1.7; color: var(--gray); margin-bottom: 24px;}
.contact-content {max-width: 720px;}
.contact-methods {display: grid; gap: 32px; margin: 48px 0;}
.contact-method {display: grid; grid-template-columns: 120px 1fr; gap: 24px; text-decoration: none; transition: transform 0.2s ease;}
.contact-method:hover {transform: translateX(4px);}
.contact-label {font-size: 15px; color: var(--gray);}
.contact-value {font-size: 17px; font-weight: 600; color: var(--black);}
.contact-method:hover .contact-value {color: var(--blue);}
.location {font-size: 16px; color: var(--gray); margin-top: 48px; padding-top: 48px; border-top: 1px solid rgba(0, 0, 0, 0.06);}
.footer {padding: 64px 0; border-top: 1px solid rgba(0, 0, 0, 0.06);}
.footer p {font-size: 15px; color: var(--gray); text-align: center;}
@media (max-width: 768px) {
  .container {padding: 0 24px;}
  .nav .container {height: 64px;}
  .nav-links {display: none;}
  .hero {padding: 120px 0 80px;}
  .hero-title {font-size: 36px;}
  .hero-subtitle {font-size: 18px;}
  .section {padding: 64px 0;}
  .about-large {font-size: 24px;}
  .values {grid-template-columns: 1fr; gap: 32px;}
  .project {margin-bottom: 56px; padding-bottom: 56px;}
  .project-header h3 {font-size: 24px;}
  .timeline-item {grid-template-columns: 1fr; gap: 16px;}
  .timeline-date {font-size: 14px;}
  .contact-method {grid-template-columns: 1fr; gap: 8px;}
}

/* Hero with Photo */
.hero-wrapper {display: grid; grid-template-columns: 180px 1fr; gap: 48px; align-items: center;}
.hero-photo {width: 180px; height: 180px; border-radius: 50%; overflow: hidden; border: 3px solid var(--blue);}
.profile-img {width: 100%; height: 100%; object-fit: cover; display: block;}
.hero-text {max-width: 720px;}

@media (max-width: 768px) {
  .hero-wrapper {grid-template-columns: 1fr; gap: 32px; text-align: center;}
  .hero-photo {margin: 0 auto;}
  .hero-text {text-align: center;}
  .cta {display: block; text-align: center;}
}