/* About and Contact pages. */

.about, .contact {
    max-width: 760px;
    margin: 0 auto;
    padding: 140px var(--gutter) 40px;
    text-align: center;
}
.about h1, .contact h1 { font-size: clamp(2rem, 6vw, 2.8rem); font-weight: 800; margin-bottom: 18px; }

.avatar {
    width: 200px;
    height: 200px;
    margin: 0 auto 28px;
    overflow: hidden;
    border: 3px solid var(--ink);
    border-radius: 50%;
    background: var(--bg);
}
.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 38% 0;
    transform: scale(1.5);
    transform-origin: 38% 20%;
}
:root[data-theme='dark'] .avatar img { filter: invert(1); }

.about-body { margin: 0 auto 28px; color: var(--muted); }
.skills {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin-top: 48px;
    text-align: left;
}
.skill-group { padding: 18px 20px; border: 2px solid var(--line); border-radius: var(--radius); }
.skill-group h2 { font-size: 1.05rem; margin-bottom: 12px; }
.skill-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.skill-group li { padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; }

.contact p { margin: 0 0 32px; color: var(--muted); }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; text-align: left; }
.contact-list li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    padding: 16px 20px;
    border: 2px solid var(--line);
    border-radius: var(--radius);
}
.contact-list span { color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; }
.contact-list a { text-decoration: none; border-bottom: 2px solid var(--accent); overflow-wrap: anywhere; }