@layer pages {
    /* The marketing page keeps color-scheme: light because four of its five sections are full-bleed
       high-key photographs. This page is text on a surface, so it is the one page dark is honest on. */
    :root {
        color-scheme: light dark;
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --accent: #7fc3cb;
            --action: #6b9ea4;
            --action-hover: #9fd4da;

            --ink: #e8e6e3;
            --ink-strong: #f2f0ed;
            --ink-muted: #b3aeaa;
            --ink-faint: #8d8884;

            --surface: #16181a;
            --surface-sunken: #1f2325;
            --backdrop: rgb(22 24 26 / 0.95);
            --rule: #3a3f42;
        }
    }

    /* Narrower than the marketing container: this page is a document, not a landing page. */
    .resume .section__inner {
        width: min(100% - (2 * var(--space-s)), 52rem);
    }

    .resume__head {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--space-s);
        padding-bottom: var(--space-s);
        border-bottom: 1px solid var(--rule);
    }

    .resume__contact {
        max-width: none;
        text-align: right;
    }

    .resume__block {
        margin-top: var(--space-l);
    }

    .resume h2 {
        font-size: var(--step-2);
        margin-bottom: var(--space-s);
    }

    .role + .role {
        margin-top: var(--space-m);
    }

    .role__title {
        font-size: var(--step-1);
    }

    .role__meta {
        max-width: none;
        color: var(--ink-muted);
        font-size: var(--step--1);
    }

    .role p,
    .role ul {
        margin-top: var(--space-2xs);
    }

    .role ul {
        padding-left: var(--space-m);
    }

    .role-list {
        margin-top: var(--space-m);
        list-style: none;
    }

    .role-list li {
        display: grid;
        grid-template-columns: 8em 1fr;
        gap: var(--space-2xs);
    }

    .role-list li + li {
        margin-top: var(--space-3xs);
    }

    .role-list__when {
        color: var(--ink-muted);
        font-variant-numeric: tabular-nums;
    }

    @media (width < 34rem) {
        .role-list li {
            grid-template-columns: 1fr;
            gap: 0;
        }
    }

    .resume__updated {
        margin-top: var(--space-l);
        color: var(--ink-faint);
        font-size: var(--step--1);
    }
}