/* About Page */

.hero {
    display: flex;
    gap: 35px;
    margin-bottom: 55px;
    align-items: flex-start;
}

.hero-image img {
    width: 280px;
    height: 320px;
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.hero-content h1 {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: var(--fw-normal);
    color: var(--color-text-dark);
    margin-bottom: 20px;
    line-height: 1.35;
}

.hero-content p { margin-bottom: 16px; }

/* Jump Nav */
.jump-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    margin-bottom: var(--gap);
    font-size: var(--fs-nav);
}

.jump-nav .jump-label { color: var(--color-text-light); font-weight: var(--fw-semibold); }
.jump-nav a { color: var(--color-text-dark); text-decoration: none; font-weight: var(--fw-semibold); }
.jump-nav a:hover { text-decoration: underline; }

/* Sections */
.section {
    display: flex;
    margin-bottom: var(--gap);
}

.section-label {
    width: 170px;
    min-width: 170px;
    font-size: var(--fs-large);
    color: var(--color-text-light);
    padding-top: 2px;
}

.section-content {
    flex: 1;
    border-left: 4px solid var(--color-border-light);
    padding-left: 30px;
    margin-left: 20px;
}

.section-content p { margin-bottom: 16px; }
.section-content p:last-child { margin-bottom: 0; }

.section-content ul {
    list-style-type: disc;
    margin-left: 20px;
    margin-top: 16px;
}

.section-content li { margin-bottom: 8px; padding-left: 5px; line-height: 1.6; }

/* Experience */
.exp-block { margin-bottom: 25px; }
.exp-block:last-child { margin-bottom: 0; }
.exp-block h3 { font-size: var(--fs-base); font-weight: var(--fw-bold); margin-bottom: 3px; }
.exp-block .company { color: var(--color-text-muted); font-style: italic; margin-bottom: 8px; }
.exp-block ul { margin-top: 8px; }

/* Responsive */
@media (max-width: 768px) {
    .hero { flex-direction: column; }
    .hero-image img { width: 100%; max-width: 280px; height: auto; }
    .section { flex-direction: column; }
    .section-label { width: 100%; margin-bottom: 10px; }
    .section-content { border-left: none; border-top: 4px solid var(--color-border-light); padding-left: 0; padding-top: 15px; margin-left: 0; }
    .jump-nav { flex-wrap: wrap; gap: 15px; }
}