:root {
        --background: #f3f6f9;
        --card: #ffffff;
        --heading: #17233c;
        --text: #4d5b70;
        --accent: #6f263d;
        --accent-dark: #531b2d;
        --border: #dce3eb;
    }

    * {
        box-sizing: border-box;
    }

    body {
        margin: 0;
        min-height: 100vh;
        display: grid;
        place-items: center;
        padding: 22px 16px;
        background: linear-gradient(135deg, #edf1f5 0%, #f9fafb 100%);
        color: var(--text);
        font-family: Arial, Helvetica, sans-serif;
        line-height: 1.45;
    }

    main {
        width: min(780px, 100%);
        overflow: hidden;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 18px;
        box-shadow: 0 14px 38px rgba(23, 35, 60, 0.12);
    }

    .content {
        padding: 34px 38px 26px;
    }

    .eyebrow {
        margin: 0 0 5px;
        color: var(--accent);
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    h1 {
        margin: 0;
        color: var(--heading);
        font-size: clamp(1.9rem, 4vw, 2.8rem);
        line-height: 1.05;
    }

    .role {
        margin: 9px 0 17px;
        color: var(--accent);
        font-size: 0.95rem;
        font-weight: 700;
    }

    .bio {
        margin: 0 0 19px;
        font-size: 0.9rem;
        max-width: 650px;
    }

    .cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 9px;
    }

    .card {
        padding: 10px 11px;
        background: var(--background);
        border: 1px solid var(--border);
        border-radius: 9px;
    }

    .card h3 {
        margin: 0 0 3px;
        color: var(--heading);
        font-size: 0.67rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    .card p {
        margin: 0;
        font-size: 0.78rem;
        line-height: 1.4;
    }

    .path-section {
        padding: 25px 38px 30px;
        border-top: 1px solid var(--border);
        background: #fafbfc;
    }

    .path-section h2 {
        margin: 0 0 12px;
        color: var(--accent);
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

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

    .path-step {
        padding: 10px 12px;
        background: var(--background);
        border: 1px solid var(--border);
        border-radius: 9px;
    }

    .path-year {
        color: var(--accent);
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        margin-bottom: 2px;
    }

    .path-title {
        color: var(--heading);
        font-weight: 700;
        font-size: 0.78rem;
        margin-bottom: 2px;
    }

    .path-detail {
        color: var(--text);
        font-size: 0.72rem;
        line-height: 1.4;
    }

    .links {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 15px;
        margin-top: 18px;
        margin-bottom: 16px;
        font-size: 0.78rem;
    }

    .links a {
        color: var(--accent);
        font-weight: 700;
        text-decoration: none;
    }

    .links a:hover {
        text-decoration: underline;
    }

    .back-link {
        display: inline-block;
        padding: 9px 14px;
        border-radius: 8px;
        background: var(--accent);
        color: #ffffff;
        font-size: 0.78rem;
        font-weight: 700;
        text-decoration: none;
        transition: background 0.2s ease, transform 0.2s ease;
    }

    .back-link:hover,
    .back-link:focus-visible {
        background: var(--accent-dark);
        transform: translateY(-1px);
    }

    .back-link:focus-visible {
        outline: 3px solid rgba(111, 38, 61, 0.28);
        outline-offset: 3px;
    }

    @media (max-width: 720px) {
        body {
            padding: 14px;
        }

        main {
            width: 100%;
        }

        .content {
            padding: 28px 22px 22px;
        }

        .path-section {
            padding: 22px;
        }

        .cards {
            grid-template-columns: 1fr;
        }

        .path {
            grid-template-columns: 1fr;
        }
    }