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

body {
    font-family: 'Inter', sans-serif;
    background: #1a1a1a;
    color: #888;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

main {
    max-width: 740px;
    margin: 0 auto;
    padding: 72px 32px 80px;
}

/* Name */
.name {
    font-size: 1.1rem;
    font-weight: 500;
    color: #ccc;
    margin-bottom: 40px;
}

/* Intro */
.intro {
    font-size: 1.05rem;
    color: #ccc;
    line-height: 1.75;
    margin-bottom: 20px;
}

.intro em {
    font-style: italic;
    color: #ddd;
}

.intro:last-of-type {
    margin-bottom: 64px;
}

/* Links */
a {
    color: #ccc;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.2);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.15s;
}

a:hover {
    text-decoration-color: #ccc;
}

/* 3-column grid */
.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 48px;
}

.col-label {
    font-size: 0.82rem;
    color: #555;
    margin-bottom: 24px;
}

.item {
    margin-bottom: 24px;
}

.item a {
    font-size: 0.95rem;
    font-weight: 500;
    color: #eee;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.15);
}

.item a:hover {
    text-decoration-color: #eee;
}

.ext {
    font-size: 0.8rem;
    color: #555;
}

.item p {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.55;
    margin-top: 4px;
}

.skill-label {
    font-size: 0.78rem;
    color: #888;
    font-weight: 500;
    margin-bottom: 2px;
}

/* Sections */
section {
    margin-bottom: 40px;
}

h2 {
    font-size: 1.05rem;
    font-weight: 600;
    color: #eee;
    margin-bottom: 20px;
}

.body {
    font-size: 1rem;
    color: #999;
    line-height: 1.75;
}

.body a {
    color: #999;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.15);
}

.body a:hover {
    color: #ddd;
    text-decoration-color: #ddd;
}

/* Animations */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.name {
    animation: fadeUp 0.5s ease forwards;
}

.intro {
    opacity: 0;
    animation: fadeUp 0.5s ease forwards;
    animation-delay: 0.15s;
}

.intro:last-of-type {
    animation-delay: 0.25s;
}

.grid {
    opacity: 0;
    animation: fadeUp 0.5s ease forwards;
    animation-delay: 0.4s;
}

section {
    opacity: 0;
    animation: fadeUp 0.5s ease forwards;
    animation-delay: 0.55s;
}

section:last-of-type {
    animation-delay: 0.65s;
}

.item {
    transition: transform 0.15s ease;
}

.item:hover {
    transform: translateX(4px);
}

@media (max-width: 640px) {
    main {
        padding: 56px 20px 60px;
    }

    .grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .intro:last-of-type {
        margin-bottom: 48px;
    }
}