*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --unit: 8px;
    --bg: #ffffff;
    --text: #000000;
    --grey: #6e6e73;
    --link: #0066cc;
    --link-hover: #0077ed;
    --page-bg: #000000;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

html {
    background-color: var(--page-bg);
}

body {
    font-family: "InterVariable", "Inter", -apple-system, BlinkMacSystemFont,
        "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: var(--bg);
    color: var(--text);
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: -0.01em;
    max-width: 1216px;
    margin: 0 auto;
    padding: calc(var(--unit) * 8) calc(var(--unit) * 8);
    min-height: 100vh;
    box-shadow: 0 0 0 calc(var(--unit) * 16) var(--bg);
}

main {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;
    column-gap: calc(var(--unit) * 16);
}

header {
    grid-column: 1;
    grid-row: 1;
    margin-top: calc(var(--unit) * 22);
    margin-bottom: calc(var(--unit) * 8);
}

h1 {
    font-size: 3rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: calc(var(--unit) * 1);
}

.subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    color: #FF7D11;
    letter-spacing: -0.01em;
}

.bio {
    grid-column: 1;
    grid-row: 2;
    columns: 1;
    column-gap: calc(var(--unit) * 8);
    column-fill: balance;
    font-family: "InterDisplay", "InterVariable", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.75rem;
    line-height: 2.25rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    font-feature-settings: "kern", "liga", "pnum";
    orphans: 3;
    widows: 3;
}

.bio p {
    margin-bottom: 1.5em;
    break-inside: avoid;
}

.bio a {
    color: var(--link);
    text-decoration: none;
}

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

.links {
    grid-column: 2;
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-top: calc(var(--unit) * 22);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 2rem;
    letter-spacing: 0.01em;
}

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

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

@media (max-width: 1024px) {
    body {
        padding: calc(var(--unit) * 4) calc(var(--unit) * 4);
    }

    header {
        margin-top: calc(var(--unit) * 8);
    }

    .links {
        font-size: 1.125rem;
        line-height: 1.6;
    }
}

@media (max-width: 640px) {
    body {
        padding: calc(var(--unit) * 2) calc(var(--unit) * 3);
    }

    main {
        display: flex;
        flex-direction: column;
    }

    header {
        margin-top: calc(var(--unit) * 8);
        margin-bottom: calc(var(--unit) * 4);
    }

    .bio {
        columns: 1;
    }

    .links {
        margin-top: calc(var(--unit) * 6);
        padding-top: 0;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0 calc(var(--unit) * 3);
        font-size: 1rem;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --page-bg: #000000;
        --bg: #1c1c1e;
        --text: #f5f5f7;
        --grey: #98989d;
        --link: #2997ff;
        --link-hover: #6cb6ff;
    }
}