:root {
  --font: 'Inter', sans-serif;
  --ink: #000;
  --card: rgba(207, 171, 255, 0.2);
  --button: #2c2c2c;
  --button-text: #f5f5f5;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  min-height: 100vh;
  overflow-x: hidden;
  background: #fff;
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

.page {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1440px;
  min-height: 100vh;
  margin: 0 auto;
  background: #fff;
}

section { padding: 72px; width: 100%; }

/* Hero */
.hero { display: flex; align-items: center; gap: 48px; }
.hero-copy { display: flex; flex-direction: column; gap: 24px; flex: 1 1 auto; }
.hero-name { font-size: 72px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.hero-bio { font-size: 28px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.35; }
.hero-portrait { flex: 0 1 auto; width: 29.1667%; border-radius: 16px; }

/* About */
.bio { display: flex; flex-direction: column; gap: 32px; }
.section-title { font-size: 48px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.bio-row { display: flex; align-items: stretch; gap: 32px; width: 100%; }
.bio-text { flex: 1 1 0; display: flex; flex-direction: column; gap: 1.32em; font-size: 32px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.32; }
.bio-list { display: flex; flex-direction: column; gap: 0.5em; padding-left: 1.1em; margin-top: -0.66em; }
.bio-list li { padding-left: 0.2em; }
.bio-list li::marker { color: #8a5cd6; }
.skill-col { flex: 0 1 43.5185%; display: flex; }
.skill-col .skill-card { height: 100%; }
.skills-row { display: flex; align-items: stretch; gap: 24px; width: 100%; }
.skills-row .skill-card { flex: 1 1 0; }
.skill-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 32px; width: 100%;
  background: var(--card); border-radius: 16px;
}
.skill-title { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.skill-text { font-size: 24px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.35; }

/* Project highlight */
.project { display: flex; align-items: center; gap: 48px; }
.project-text { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; flex: 1 1 0; }
.project-label { font-size: 24px; letter-spacing: -0.005em; line-height: 1.3; }
.project-title { font-size: 48px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.project-company { font-size: 24px; letter-spacing: -0.01em; line-height: 1.35; }
.button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px; font-size: 16px; line-height: 1;
  color: var(--button-text); background: var(--button);
  border: 1px solid var(--button); border-radius: 8px;
}
.project-image { flex: 0 1 47.7778%; width: 47.7778%; border-radius: 16px; }

/* Responsive */
@media (max-width: 1100px) {
  section { padding: 56px 40px; }
  .hero-name { font-size: 56px; }
  .hero-bio { font-size: 22px; }
  .section-title, .project-title { font-size: 40px; }
  .bio-text { font-size: 26px; }
  .skill-title { font-size: 26px; }
  .skill-text, .project-label, .project-company { font-size: 20px; }
  .bio-row, .skills-row { width: 100%; }
}

@media (max-width: 768px) {
  section { padding: 40px 20px; }
  .hero, .project, .bio-row, .skills-row { flex-direction: column; align-items: stretch; }
  .hero { flex-direction: column-reverse; gap: 32px; }
  .hero-portrait { width: 60%; max-width: 280px; }
  .project-image { width: 100%; flex-basis: auto; }
  .skill-col { flex-basis: auto; }
  .hero-name { font-size: 44px; }
  .hero-bio { font-size: 19px; }
  .section-title, .project-title { font-size: 32px; }
  .bio-text { font-size: 21px; }
  .skill-card { padding: 24px; }
  .skill-title { font-size: 22px; }
  .skill-text, .project-label, .project-company { font-size: 17px; }
}