:root {
    --paper: #2e2e2e;
    --ink: #f0f0ed;
    --muted: #b7b7b2;
    --line: #555550;
    --green: #5bc0de;
    --coral: #ff9b42;
    --yellow: #f3d35a;
    --blue: #4d83b5;
}

body {
    background: #191919;
    color: var(--ink);
}

h1,
h2,
h3,
.site-header,
.eyebrow,
.project-meta,
.archive-card,
.project-facts,
.catalog-tools,
.external-links,
.button,
.text-link,
.row-arrow {
    font-family: Consolas, "Courier New", monospace;
}

h1,
h2,
h3 {
    font-weight: 700;
    letter-spacing: -.055em;
}

.site-header {
    background: #1f1f1f;
    border-bottom-color: var(--coral);
}

.wordmark-mark {
    border-color: var(--green);
    color: var(--green);
}

.site-header nav {
    color: #d5d5d1;
}

.site-header nav a:hover {
    color: var(--yellow);
}

.hero {
    position: relative;
    background-color: #303030;
    background-image: linear-gradient(90deg, transparent 0 25px, #515151 25px 26px, transparent 26px), repeating-linear-gradient(0deg, transparent 0 31px, #ffffff08 31px 32px);
}

.hero::before {
    content: "01";
    position: absolute;
    top: 52px;
    left: 7px;
    color: #777;
    font: 12px Consolas, "Courier New", monospace;
}

.hero h1 {
    text-shadow: 0 1px 0 #000;
}

h1 em {
    color: var(--yellow);
}

.lede,
.page-intro > p:last-child,
.project-deck,
.catalog-row > div > p:last-child,
.project-card p,
.prose-columns p,
.markdown-body {
    color: #c9c9c4;
}

.button-primary {
    background: #151515;
    border-left-color: var(--coral);
    color: #fff;
}

.button-primary:hover {
    background: #07559b;
}

.text-link,
.markdown-body a,
.external-links a {
    color: var(--green);
}

.eyebrow,
.project-meta {
    color: var(--coral);
}

.archive-card {
    background: #202020;
    border-top-color: var(--green);
    box-shadow: 10px 10px 0 #111;
}

.archive-label,
.archive-card dt {
    color: var(--green);
}

.archive-count,
.archive-card dd {
    color: var(--yellow);
}

.featured {
    background: #242424;
}

.project-card {
    border-top-color: #5b5b56;
}

.project-art {
    border-bottom-color: var(--coral);
}

.project-art span {
    color: var(--yellow);
    opacity: .8;
}

.art-green {
    background: #272727;
}

.art-coral {
    background: #383838;
}

.art-blue {
    background: #484848;
}

.project-card > a {
    color: var(--green);
}

.archive-intro {
    background: #202020;
    border-top: 1px solid #4b4b47;
    border-bottom: 4px solid var(--coral);
}

.archive-intro .eyebrow {
    color: var(--yellow);
}

.archive-intro > p:last-child {
    color: #c2c2bd;
}

.site-footer {
    background: #171717;
    color: #aaa;
}

.site-footer .external-links a {
    color: #a8cbd5;
}

.listing-page,
.project-page,
.prose-page {
    background: #2e2e2e;
    box-shadow: 0 0 0 100vmax #2e2e2e;
}

.page-intro {
    border-left: 3px solid var(--coral);
    padding-left: 20px;
}

.catalog-tools {
    background: #252525;
    border-color: #555;
    border-top-color: var(--green);
}

.catalog-tools input,
.catalog-tools select {
    background: #191919;
    border-color: #5c5c58;
    color: #f0f0ed;
}

.catalog-result,
.catalog-row > div > p:last-child {
    color: #bcbcb7;
}

.catalog-row {
    border-top-color: #52524e;
}

.catalog-row:hover {
    background: #ffffff05;
}

.row-arrow {
    border-color: #686862;
    color: var(--green);
}

.row-arrow:hover {
    background: #07559b;
    color: #fff;
}

.alternate-title {
    color: var(--yellow);
    font-family: Consolas, "Courier New", monospace;
}

.project-layout {
    border-top: 1px dotted #666;
    padding-top: 30px;
}

.markdown-body h2 {
    border-top-color: #575752;
    color: #fff;
}

.markdown-body h2::before,
.markdown-body h3::before {
    content: "# ";
    color: var(--coral);
}

.markdown-body code {
    background: #1b1b1b;
    color: var(--yellow);
}

.project-facts {
    background: #222;
    border-top-color: var(--green);
}

.project-facts h2,
.project-facts dt {
    color: var(--green);
}

.project-facts dd {
    color: var(--yellow);
}

.project-facts dl div,
.content-notice,
.prose-columns section,
.video-card {
    border-color: #555550;
}

.content-notice {
    background: #3d2420;
}

.video-card .button-primary,
.markdown-body a.button-primary {
    color: #fff;
}

.prose-columns section {
    border-top-style: dotted;
}

.catalog-empty {
    background: #252525;
    border-color: #555;
}

@media (max-width: 800px) {
    .site-header nav {
        border-top-color: #4b4b47;
    }

    .hero {
        background-image: repeating-linear-gradient(0deg, transparent 0 31px, #ffffff08 31px 32px);
    }

    .hero::before {
        display: none;
    }
}

@media (min-width: 801px) {
    .hero {
        min-height: 320px;
        padding-top: 24px;
        padding-bottom: 28px;
    }

    .hero h1 {
        font-size: clamp(43px, 4.8vw, 62px);
    }

    .lede {
        margin-top: 18px;
        font-size: 17px;
    }

    .hero-actions {
        margin-top: 20px;
    }

    .archive-card {
        padding: 22px 24px;
    }

    .archive-count {
        margin-top: 10px;
        font-size: 62px;
    }

    .archive-caption {
        margin: 8px 0 16px;
    }

    .archive-card dl {
        margin-top: 14px;
    }

    .archive-card dl div {
        padding: 5px 0;
    }

    .featured {
        padding-top: 28px;
        padding-bottom: 48px;
    }

    .section-heading {
        margin-bottom: 20px;
    }

    .section-heading h2 {
        font-size: clamp(34px, 3.5vw, 46px);
    }

    .project-art {
        height: 92px;
        padding: 12px;
    }

    .project-art span {
        font-size: 40px;
    }

    .project-card h3 {
        margin-top: 7px;
        font-size: 22px;
    }

    .project-card p {
        margin-top: 8px;
        margin-bottom: 10px;
        min-height: 66px;
    }
}