/* About page — bio, gallery, work timeline (css/globalstyle.css, css/index.css) */

.bio {
max-width: 85ch;
margin-inline: auto;
padding: 2.5rem 0;
text-align: left;
}

/* Collage JPEG uses white gutters; blend so white matches --bg-base (see img/aboutmegallery.jpg) */
.about-gallery {
margin: 0 auto;
padding: 24px 0 72px;
max-width: 100%;
text-align: center;
background: var(--white);
isolation: isolate;
}

.about-gallery img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
margin: 0 auto;
border-radius: var(--radius);
mix-blend-mode: darken;
}

.work {
padding: 2.5rem 0;
margin-inline: 0;
max-width: 100%;
text-align: left;
--role-meta-width: clamp(220px, 26vw, 300px);
--role-gap: clamp(2.75rem, 5vw, 4.5rem);
}

.resume-link {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--link);
text-decoration: none;
margin-bottom: 48px;
transition: opacity 0.2s;
}

.resume-link:hover { opacity: 0.7; }

.resume-link svg { width: 12px; height: 12px; }

.experience-group {
display: grid;
grid-template-columns: var(--role-meta-width) 1fr;
column-gap: var(--role-gap);
row-gap: 0;
width: 100%;
max-width: none;
margin-inline: 0;
margin-bottom: 48px;
text-align: left;
justify-items: start;
}

.group-label {
grid-column: 1;
width: 100%;
white-space: nowrap;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--warm-gray);
margin-bottom: 24px;
padding-bottom: 10px;
border-bottom: 4px solid var(--mid-gray);
text-align: left;
}

.role {
grid-column: 1 / -1;
display: grid;
grid-template-columns: var(--role-meta-width) 1fr;
gap: var(--role-gap);
margin-bottom: 28px;
align-items: start;
justify-items: start;
width: 100%;
text-align: left;
}

.role-title {
color: var(--black);
margin-bottom: 3px;
}

.role-company {
color: var(--warm-gray);
}

.role-desc {
color: var(--text-body);
}

@media (max-width: 640px) {
.about-gallery {
    padding: 16px 0 56px;
}

.experience-group {
    grid-template-columns: 1fr;
}

.group-label {
    grid-column: 1;
}

.role {
    grid-template-columns: 1fr;
    gap: 6px;
    margin-bottom: 32px;
}
}