:root {
    --bg: #000;
    --surface: #0d0d0d;
    --text: #f2f2f2;
    --muted: #8c8c8c;
    --line: #262626;
    --btn-bg: #f2f2f2;
    --btn-text: #000;
    --display: "Unbounded",system-ui,sans-serif;
    --body: "Manrope",system-ui,sans-serif;
}

    :root[data-theme="light"] {
        --bg: #fff;
        --surface: #f3f3f3;
        --text: #000;
        --muted: #6b6b6b;
        --line: #dcdcdc;
        --btn-bg: #000;
        --btn-text: #fff;
    }

* {
    box-sizing: border-box
}

html {
    color-scheme: dark light
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 400 16px/1.6 var(--body);
    transition: background .25s,color .25s
}

a {
    color: inherit
}

:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 3px
}

.top, main, .foot {
    width: min(1000px,100% - 40px);
    margin-inline: auto
}

.top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px solid var(--line)
}

.logo {
    font: 800 20px var(--display);
    text-decoration: none;
    letter-spacing: -.02em
}

.tools {
    display: flex;
    gap: 8px
}

.chip {
    background: none;
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 99px;
    padding: 6px 14px;
    font: 700 13px var(--body);
    cursor: pointer;
    transition: border-color .15s
}

    .chip:hover {
        border-color: var(--text)
    }

.hero {
    padding: 72px 0 48px
}

    .hero h1 {
        font: 800 clamp(40px,9vw,96px)/1 var(--display);
        letter-spacing: -.04em;
        margin: 0 0 20px
    }

    .hero p {
        color: var(--muted);
        max-width: 46ch;
        margin: 0;
        font-size: 18px
    }

.list {
    border-top: 1px solid var(--line)
}

.row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 24px;
    align-items: center;
    padding: 28px 0;
    border-bottom: 1px solid var(--line);
    text-decoration: none
}

    .row h2 {
        font: 600 24px var(--display);
        margin: 0;
        letter-spacing: -.02em
    }

    .row p {
        margin: 4px 0 0;
        color: var(--muted)
    }

    .row .meta {
        grid-column: 1;
        color: var(--muted);
        font-size: 14px
    }

    .row .open {
        grid-row: 1/4;
        grid-column: 2;
        border: 1px solid var(--line);
        border-radius: 99px;
        padding: 10px 20px;
        font-weight: 700;
        transition: background .15s,color .15s,border-color .15s
    }

    .row:hover .open {
        background: var(--text);
        color: var(--bg);
        border-color: var(--text)
    }

.back {
    display: inline-block;
    margin: 36px 0 0;
    color: var(--muted);
    text-decoration: none;
    font-weight: 700
}

    .back:hover {
        color: var(--text)
    }

.detail h1 {
    font: 800 clamp(36px,7vw,72px)/1.05 var(--display);
    letter-spacing: -.03em;
    margin: 24px 0 12px
}

.detail .lead {
    font-size: 20px;
    max-width: 56ch;
    margin: 0 0 32px
}

.facts {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid var(--line);
    border-radius: 12px;
    margin: 0 0 32px;
    background: var(--surface)
}

    .facts div {
        padding: 16px 24px;
        flex: 1 1 140px
    }

    .facts dt {
        color: var(--muted);
        font-size: 13px
    }

    .facts dd {
        margin: 0;
        font-weight: 700
    }

.btn {
    display: inline-block;
    background: var(--btn-bg);
    color: var(--btn-text);
    text-decoration: none;
    font-weight: 700;
    padding: 16px 32px;
    border-radius: 99px;
    transition: transform .15s
}

    .btn:hover {
        transform: translateY(-2px)
    }

.detail h3 {
    font: 600 18px var(--display);
    margin: 48px 0 12px
}

.detail ul {
    padding-left: 20px;
    margin: 0;
    color: var(--muted)
}

.detail li {
    margin: 6px 0
}

.empty {
    padding: 48px 0;
    color: var(--muted)
}

.foot {
    padding: 48px 0;
    color: var(--muted);
    font-size: 14px
}

@media (max-width:560px) {
    .row {
        grid-template-columns: 1fr
    }

        .row .open {
            grid-row: auto;
            grid-column: 1;
            justify-self: start;
            margin-top: 8px
        }
}

@media (prefers-reduced-motion:reduce) {
    * {
        transition: none !important
    }
}