.topnav {
    position: fixed;
    z-index: 5;
    width: max-content;
    max-width: calc(100% - var(--gutter) * 2);
    border-radius: var(--glass-radius);
    color: var(--ink);
}

.brand {
    display: none;
}

.topnav nav {
    display: flex;
    gap: var(--s-xxs);
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.topnav nav a,
.topnav nav p {
    flex-shrink: 0;
    color: inherit;
    font-size: var(--text-small);
    white-space: nowrap;
    text-decoration: none;
}

.topnav nav a:focus-visible {
    outline-offset: calc(var(--border-strong) * -1);
}

.footer {
    border-top: var(--border-width) solid var(--border);
}

.footer p {
    width: calc(100% - var(--edge-inset) * 2);
    margin-inline: auto;
    padding-block: var(--s-md);
    font-size: var(--text-small);
}

.page-header {
    padding-block: var(--s-section) var(--s-xxl);
}

.page-header .eyebrow {
    margin-bottom: var(--s-md);
}

.page-header h1 {
    max-width: var(--reading-width);
}

.back {
    display: inline-block;
    margin-bottom: var(--s-xl);
    font-size: var(--text-small);
}

.hero {
    --border: var(--hero-border);
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg);
}

.home {
    isolation: isolate;
}

.home .hero {
    background: transparent;
}

.home .sections,
.home .footer {
    background: var(--bg);
}

.background {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: clip;
    pointer-events: none;
}

.background img {
    width: 100%;
    height: calc(100% / var(--background-visible));
    object-fit: cover;
    object-position: center top;
}

.background::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--hero-overlay);
}

@media (max-width: 640px), (hover: none), (pointer: coarse) {
    /* Scroll with the document; toolbar changes must not resize the wallpaper. */
    .home > .background {
        position: absolute;
        bottom: auto;
        height: 100vh;
        height: 100lvh;
    }

    .home > .background img {
        height: 100%;
    }
}

.hero p {
    color: inherit;
}

.intro {
    flex: 1;
    display: flex;
    align-items: center;
    padding-block: var(--s-xl);
}

.intro>div {
    max-width: calc(var(--s-xxxl) * 5);
}

.intro h1 {
    margin-bottom: var(--s-lg);
}

.intro p {
    max-width: calc(var(--s-xxxl) * 4);
}

.intro .links {
    margin-top: var(--s-xl);
}

.shortcuts {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s-md);
    border-top: var(--border-width) solid var(--border);
    padding-block: var(--s-lg);
    font-size: var(--text-small);
}

.shortcuts nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-md) var(--s-xl);
}

/* Project previews and details. */
.spotlight {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--s-xxl) var(--s-xl);
}

.spotlight>article {
    --project-gap: var(--s-lg);
    display: grid;
    grid-template-columns: var(--project-image-size) minmax(0, var(--reading-width));
    grid-template-rows: 1fr auto;
    grid-template-areas: "image copy" "image links";
    align-items: start;
    justify-content: start;
    gap: var(--s-sm) var(--project-gap);
}

.spotlight>article>div,
.projects>article>div {
    grid-area: copy;
    min-width: 0;
}

.spotlight>article>.links {
    grid-area: links;
    align-self: end;
}

.thumbnail {
    grid-area: image;
    position: relative;
    display: block;
    align-self: start;
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--media-bg);
    border: var(--border-width) solid var(--border);
    border-radius: var(--s-lg);
}

.thumbnail img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.spotlight h3 {
    margin-bottom: var(--s-xs);
}

.spotlight .links {
    font-size: var(--text-small);
}

.experience {
    background: var(--surface);
}

.columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--golden-column));
    gap: var(--s-xxl);
}

.columns>div>.eyebrow {
    margin-bottom: var(--s-sm);
}

.jobs>article {
    display: grid;
    grid-template-columns: calc(var(--s-lg) * 2) minmax(0, 1fr);
    align-items: start;
    gap: var(--s-lg);
    padding-block: var(--s-xl);
}

.logo {
    width: calc(var(--s-lg) * 2);
    height: calc(var(--s-lg) * 2);
    object-fit: contain;
    background: #fff;
    padding: var(--s-xxs);
    border-radius: var(--radius);
}

.jobs h3 {
    margin-block: var(--s-xs);
}

.jobs .date {
    margin-top: var(--s-xs);
    font-size: var(--text-small);
}

.portrait {
    max-width: calc(var(--s-xxl) * 4);
    margin-top: var(--s-xl);
}

.portrait img {
    border-radius: var(--s-lg);
}

.skills section+section {
    margin-top: var(--s-xl);
    padding-top: var(--s-xl);
    border-top: var(--border-width) solid var(--border);
}

.skills h3 {
    margin-bottom: var(--s-sm);
}

.contact-banner {
    padding-block: var(--s-xxl);
    /*background: var(--surface);*/
}

.contact-banner .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-lg);
}

.projects {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: var(--s-xxl) var(--s-xl);
    padding-block: var(--s-xl) var(--s-section);
}

.projects>article {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "image" "copy";
    justify-items: center;
    gap: var(--s-lg);
}

.projects .thumbnail {
    width: min(100%, var(--project-image-size));
}

.projects h2 {
    font-size: var(--s-lg);
    text-align: center;
}

.projects>article>div>p,
.projects>article>.links {
    display: none;
}

/* Contact page. */
.contact-page {
    display: flex;
    flex-direction: column;
    /* Border-box includes the existing desktop and mobile navigation clearance. */
    min-height: 100vh;
    min-height: 100dvh;
}

.contact-page>main {
    flex: 1 0 auto;
}

.contact-page>.footer {
    flex-shrink: 0;
}

.contact-page .page-header {
    padding-block: var(--s-xl) var(--s-lg);
}

.contact {
    padding-bottom: var(--s-xl);
}

.contact>div {
    max-width: calc(var(--s-xxxl) * 6);
}

.contact section {
    padding-block: var(--s-lg);
}

.contact h2 {
    margin-bottom: var(--s-lg);
    font-size: var(--s-lg);
}

.email {
    display: inline-block;
    margin-bottom: var(--s-md);
    font-size: clamp(var(--s-md), 2.5vw, var(--s-lg));
}

/* Long-form project documentation. */
.article {
    display: grid;
    grid-template-columns: calc(var(--s-xxxl) * 2) minmax(0, var(--reading-width));
    justify-content: space-between;
    gap: var(--s-xxl);
    padding-block: var(--s-xl) var(--s-section);
    border-top: var(--border-width) solid var(--border);
}

.contents {
    align-self: start;
    position: sticky;
    top: var(--header-scroll-offset);
    display: flex;
    flex-direction: column;
    gap: var(--s-xs);
    font-size: var(--text-small);
}

.contents a {
    padding-block: var(--s-xxs);
}

.prose {
    min-width: 0;
}

.prose section+section {
    margin-top: var(--s-xxl);
    padding-top: var(--s-xxl);
    border-top: var(--border-width) solid var(--border);
}

.prose h2,
.prose h3,
.prose h4 {
    margin-block: var(--s-xl) var(--s-md);
}

.prose section> :first-child {
    margin-top: 0;
}

.prose p+p,
.prose ul {
    margin-top: var(--s-md);
}

.prose ul {
    padding-left: var(--s-lg);
    color: var(--text-dim);
}

.prose li+li {
    margin-top: var(--s-xs);
}

.prose code {
    color: var(--text-main);
    background: var(--surface);
    border-radius: var(--radius);
    padding-inline: var(--s-xxs);
    box-decoration-break: clone;
}

.prose pre {
    margin-block: var(--s-lg);
    padding: var(--s-md);
    overflow-x: auto;
    font: inherit;
    font-size: var(--text-small);
    background: var(--surface);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius);
}

.prose pre code {
    padding: 0;
    background: none;
    border-radius: 0;
}

.prose figure {
    margin-block: var(--s-xl);
}

.prose figure img {
    width: 100%;
    border: var(--border-width) solid var(--border);
    border-radius: var(--s-lg);
}

.prose figure iframe {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    box-sizing: border-box;

    border: var(--border-width) solid var(--border);
    border-radius: var(--s-lg);
}

.prose figcaption {
    margin-top: var(--s-sm);
    color: var(--text-dim);
    font-size: var(--text-small);
    text-align: center;
}

.prose table {
    width: 100%;
    margin-block: var(--s-lg);
    border-collapse: collapse;
    table-layout: fixed;
}

.prose caption {
    text-align: left;
    margin-bottom: var(--s-sm);
    color: var(--text-dim);
}

.prose th,
.prose td {
    padding: var(--s-sm);
    border-bottom: var(--border-width) solid var(--border);
    text-align: left;
    vertical-align: top;
}

.prose th {
    font-weight: 500;
    background: var(--surface);
}

.prose th:first-child,
.prose td:first-child {
    width: calc(100% / var(--golden-ratio) / var(--golden-ratio) / var(--golden-ratio));
}

.prose .architecture th:first-child {
    width: calc(100% / var(--golden-ratio) / var(--golden-ratio));
}

.note {
    border-left: var(--border-strong) solid var(--text-dim);
    padding-left: var(--s-lg);
    margin-block: var(--s-xl);
}

@media (min-width: 1600px) {
    .intro {
        padding-block: var(--s-xxl);
    }
}

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

@media (max-width: 900px) {

    .spotlight,
    .projects {
        --project-image-size: var(--project-image-size-mobile);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--s-xl) var(--s-lg);
    }

    .spotlight>article,
    .projects>article {
        grid-template-columns: minmax(0, var(--reading-width));
        grid-template-rows: auto auto;
        grid-template-areas: "image" "copy";
        justify-items: center;
        row-gap: var(--s-sm);
    }

    .spotlight .thumbnail {
        width: min(100%, var(--project-image-size));
    }

    .spotlight>article>div>p,
    .spotlight>article>.links {
        display: none;
    }

    .spotlight h3 {
        margin-bottom: 0;
        text-align: center;
    }

    .columns {
        grid-template-columns: 1fr;
        gap: var(--s-xl);
    }

    .skills>div:first-child {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--s-xxxl);
        align-items: center;
        gap: var(--s-lg);
    }

    .portrait {
        margin-top: 0;
    }

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

    .contents {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--s-sm) var(--s-lg);
    }

    .prose {
        max-width: var(--reading-width);
    }
}

@media (max-width: 640px) {
    .intro {
        padding-block: var(--s-xxl) var(--s-lg);
    }

    .intro h1 {
        font-size: clamp(var(--s-xl), 10.5vw, var(--s-xxl));
    }

    .shortcuts {
        padding-block: var(--s-md);
    }

    .shortcuts p {
        display: none;
    }

    .article {
        gap: var(--s-xl);
    }
}

/* Keep hero content clear of the floating navigation. */
@media screen and (width > 640px) {
    :root {
        --desktop-nav-space: calc(var(--header-height) + var(--border-width));
    }

    body {
        padding-top: var(--desktop-nav-space);
    }

    body.home {
        padding-top: 0;
    }

    .topnav {
        top: calc((var(--header-height) - var(--nav-capsule-height)) / 2);
        right: max(var(--gutter), calc((100% - var(--width)) / 2));
    }

    .hero {
        padding-top: var(--desktop-nav-space);
    }
}

@media screen and (max-width: 640px) {
    :root {
        --header-height: var(--nav-capsule-height);
        --header-scroll-offset: var(--s-xl);
        --mobile-nav-space: calc(var(--header-height) + var(--s-md) * 2 + env(safe-area-inset-bottom, 0px));
    }

    html {
        scroll-padding-bottom: calc(var(--mobile-nav-space) + var(--s-md));
    }

    body {
        padding-bottom: var(--mobile-nav-space);
    }

    body.home {
        padding-bottom: 0;
    }

    .home .footer {
        padding-bottom: var(--mobile-nav-space);
    }

    .topnav {
        bottom: calc(var(--s-md) + env(safe-area-inset-bottom, 0px));
        inset-inline: 0;
        margin-inline: auto;
    }

    .hero {
        padding-bottom: var(--mobile-nav-space);
    }
}

@media print {
    .home>.background {
        display: none;
    }

    .hero {
        min-height: calc(100vh - var(--header-height) - var(--border-width));
        min-height: calc(100dvh - var(--header-height) - var(--border-width));
    }

    .topnav {
        position: static;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: var(--s-xs) var(--s-xl);
        width: auto;
        max-width: none;
        min-height: var(--header-height);
        padding: var(--s-xs) var(--gutter);
        border-bottom: var(--border-width) solid var(--glass-edge-bright);
        border-radius: 0;
    }

    .brand {
        display: block;
        color: inherit;
        font-size: var(--text-brand);
        font-weight: 700;
        letter-spacing: calc(var(--tracking-tight) / 4);
        text-decoration: none;
    }

    .topnav nav {
        width: auto;
        flex-wrap: wrap;
    }
}