@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
    --ink: #171717;
    --paper: #f4f1ea;
    --lime: #d9f55a;
    --muted: #6d6b63;
    --line: rgba(23, 23, 23, .16);
}

* {
    box-sizing: border-box;
}

body {
    background: var(--paper);
    color: var(--ink);
    display: flex;
    flex-direction: column;
    font-family: 'Space Grotesk', sans-serif;
    margin: 0;
    min-height: 100vh;
    padding: 120px 32px 60px;
    position: relative;
}

body::before,
body::after {
    background: var(--lime);
    content: '';
    height: 18px;
    position: absolute;
    width: 18px;
}

body::before {
    left: 32px;
    top: 32px;
}

body::after {
    bottom: 32px;
    right: 32px;
}

header {
    margin: 0 auto 44px;
    max-width: 1080px;
    width: 100%;
}

nav {
    display: grid;
    gap: 18px 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 auto;
    max-width: 900px;
}

.project {
    display: grid;
    gap: 10px;
    grid-auto-rows: 1fr;
    height: 100%;
}

.project a {
    align-items: center;
    background: var(--ink);
    border: 1px solid var(--ink);
    color: var(--paper);
    display: flex;
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    justify-content: space-between;
    min-height: 78px;
    padding: 20px 24px;
    position: relative;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.project a::after {
    color: var(--lime);
    content: '↗';
    font-family: 'DM Mono', monospace;
    font-size: 1.2rem;
}

.project a:hover,
.project a:focus-visible {
    background: var(--lime);
    color: var(--ink);
    outline: none;
    transform: translateY(-4px);
}

.project a:hover::after,
.project a:focus-visible::after {
    color: var(--ink);
}

.project p {
    color: var(--muted);
    display: flex;
    font-family: 'DM Mono', monospace;
    font-size: .76rem;
    line-height: 1.6;
    margin: 0;
    padding: 0 8px 12px;
    min-height: 0;
}

.project p::before {
    color: #9caf2e;
    content: '— ';
}

@media (max-width: 650px) {
    body {
        padding: 100px 24px 48px;
    }

    body::before {
        left: 24px;
        top: 24px;
    }

    body::after {
        bottom: 24px;
        right: 24px;
    }

    nav {
        grid-template-columns: 1fr;
    }

    .project a {
        min-height: 64px;
    }
}