:root {
    --ink: #17212b;
    --navy: #14212e;
    --paper: #f6f5f0;
    --soft: #e7e9e5;
    --accent: #62e2ff;
    --line: rgba(20, 33, 46, .17);
}

* {
    box-sizing: border-box;
}

html {
    background: var(--paper);
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;
    color: var(--ink);
    background: var(--paper);
    font-family: Manrope, Arial, sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

.portfolio-shell {
    min-height: 100svh;
}

.period,
.card-heading span {
    font: 500 10px/1.25 "DM Mono", monospace;
    letter-spacing: .08em;
}

.content-panel {
    width: min(1400px, 100%);
    margin: 0 auto;
    padding: clamp(20px, 3vw, 52px);
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    padding-bottom: 18px;
    margin-bottom: clamp(20px, 2.5vw, 38px);
}

.site-name {
    display: block;
    font-size: 22px;
    line-height: 1;
    letter-spacing: -.07em;
    font-weight: 800;
}

.name-lockup p {
    margin: 7px 0 0;
    color: #647079;
    font: 500 10px "DM Mono", monospace;
    text-transform: uppercase;
}

.name-lockup p span {
    color: #9ca4a9;
    padding: 0 3px;
}

.resume-button {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 11px 14px 11px 17px;
    background: var(--accent);
    border-radius: 100px;
    font-weight: 800;
    font-size: 12px;
    transition: transform .2s ease, background .2s ease;
}

.resume-button:hover {
    transform: translateY(-3px);
    background: #aeedff;
}

.resume-button span {
    font-size: 17px;
}

.dashboard {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: clamp(12px, 1.4vw, 22px);
    align-items: start;
}

.card {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 15px;
    padding: clamp(17px, 1.65vw, 28px);
    background: #fbfbf8;
    box-shadow: 0 8px 24px rgba(20, 33, 46, .035);
    transition: transform .2s ease, box-shadow .2s ease;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(20, 33, 46, .09);
}

.intro,
.achievements {
    grid-column: 1 / -1;
}

.intro {
    background: var(--accent);
    border-color: var(--accent);
}

.section-kicker {
    margin: 0;
    color: #53606a;
}

.intro-text {
    font-size: clamp(14px, 1.55vw, 18px);
    line-height: 1.33;
    letter-spacing: -.04em;
    margin: 14px 0 20px;
    max-width: 800px;
}

.profiles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.profiles a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(20, 33, 46, .25);
    border-radius: 50px;
    padding: 7px 10px;
    font: 500 10px "DM Mono", monospace;
}

.profiles a:hover {
    background: var(--navy);
    color: #fff;
}

.experience {
    grid-column: 1;
    grid-row: 2;
}

.projects {
    grid-column: 2;
    grid-row: 2;
}

.skills {
    grid-column: 1;
    grid-row: 3;
}

.education {
    grid-column: 2;
    grid-row: 3;
}

.achievements {
    grid-row: 4;
}

.card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    padding-bottom: 12px;
    margin-bottom: 13px;
}

.card-heading span {
    color: #7b858b;
}

.period {
    color: #56626b;
}

.experience article {
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
}

.experience article:last-child {
    border: 0;
}

.experience article p,
.education-list article p:last-child,
.project-item p,
.achievement-grid p {
    font-size: 11px;
    line-height: 1.5;
    color: #667078;
    margin: 10px 0;
}

.tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.tags span {
    background: var(--soft);
    border-radius: 3px;
    font: 500 9px "DM Mono", monospace;
    padding: 5px 6px;
}

.project-item {
    padding: 4px 0 13px;
}

.project-item+.project-item {
    border-top: 1px solid var(--line);
    padding-top: 14px;
}

.project-item h2,
.education-list h2 {
    font-size: 14px;
    letter-spacing: -.04em;
    margin: 0;
}

.project-bottom {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    font: 500 9px "DM Mono", monospace;
    color: #53606a;
}

.project-bottom a {
    color: var(--ink);
    font-weight: 500;
}

.project-bottom a:hover {
    text-decoration: underline;
}

.skill-list {
    display: grid;
    gap: 0;
}

.skill-list p {
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    line-height: 1.55;
}

.skill-list p:first-child {
    padding-top: 2px;
}

.skill-list p:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.skill-list strong {
    font: 500 10px "DM Mono", monospace;
    color: #53606a;
}

.education-list {
    display: grid;
    gap: 15px;
}

.education-list article+article {
    border-top: 1px solid var(--line);
    padding-top: 15px;
}

.education-list h2 {
    margin: 8px 0;
}

.achievement-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.achievement-grid article+article {
    border-left: 1px solid var(--line);
    padding-left: 20px;
}

.achievement-grid strong {
    font-size: 13px;
    letter-spacing: -.03em;
}

@media (max-width:899px) {
    .content-panel {
        padding: 20px;
    }

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

    .experience,
    .projects,
    .skills,
    .education,
    .achievements {
        grid-column: auto;
        grid-row: auto;
    }

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

    .achievement-grid article:nth-child(3) {
        border-left: 0;
        padding-left: 0;
    }

    .achievement-grid article:nth-child(n+3) {
        border-top: 1px solid var(--line);
        padding-top: 14px;
    }
}

@media (max-width:460px) {
    .achievement-grid {
        grid-template-columns: 1fr;
    }

    .achievement-grid article+article {
        border-left: 0;
        border-top: 1px solid var(--line);
        padding: 14px 0 0;
    }

    .profiles a span {
        display: none;
    }

    .topbar {
        padding-bottom: 15px;
    }
}