.project-header { gap: 16px; }

/* About page */

.about-nav {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.about-nav a {
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 650;
}

.about-nav a:hover, .about-nav a.active { color: var(--text); }

.about-main {
    width: min(var(--max-width), calc(100% - 48px));
    margin: 0 auto;
}

.about-hero {
    padding: 90px 0 85px;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 70px;
    align-items: end;
    border-bottom: 1px solid var(--border);
}

.about-hero h1 { margin: 0; font-size: clamp(3rem, 7vw, 5.2rem); }
.about-lead { max-width: 520px; margin: 0; font-size: 1.12rem; }

.about-grid {
    padding: 85px 0;
    display: grid;
    grid-template-columns: 1.35fr 0.65fr;
    gap: 75px;
}

.about-story h2 { margin-bottom: 24px; }
.about-story h3 { margin-top: 30px; }
.about-story p:not(.eyebrow) { max-width: 700px; }
.about-gap { margin-top: 55px; }

.about-card {
    align-self: start;
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.about-card-icon {
    margin-bottom: 35px;
    color: var(--accent-hover);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 2rem;
    font-weight: 800;
}

.about-card h3 { margin-bottom: 12px; }

.skills-section {
    padding: 80px 0 100px;
    border-top: 1px solid var(--border);
}

.skills-section .section-heading { margin-bottom: 42px; }

.skills-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.skill-card {
    padding: 27px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(17, 26, 46, 0.55);
    transition: transform 200ms ease, border-color 200ms ease, background 200ms ease;
}

.skill-card:hover {
    transform: translateY(-4px);
    border-color: rgba(179, 154, 255, 0.4);
    background: var(--surface-hover);
}

.skill-card > span {
    color: var(--accent-hover);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.skill-card h3 { margin: 12px 0 8px; }
.skill-card p { margin: 0; }

.about-cta {
    padding: 100px 0 110px;
    border-top: 1px solid var(--border);
    text-align: center;
}

.about-cta p:not(.eyebrow) { margin: 0 auto 28px; }

@media (max-width: 800px) {
    .about-hero, .about-grid { grid-template-columns: 1fr; gap: 40px; }
    .about-hero { padding-top: 65px; }
}

@media (max-width: 600px) {
    .about-main { width: min(100% - 36px, var(--max-width)); }
    .skills-grid { grid-template-columns: 1fr; }
}