.page {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 64px;
    max-width: 960px;
    margin: 0 auto;
    padding: 60px 24px 100px;
    align-items: start;

    @media (max-width: 720px) {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 40px 20px 80px;
    }
}

aside {
    position: sticky;
    top: 60px;

    @media (max-width: 720px) {
        position: static;
    }

    > header {
        margin-bottom: 40px;
    }
}

.brand {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.3em;
    margin: 0 0 6px;
    font-size: var(--fs-lg);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;

    a {
        view-transition-name: title;
        color: var(--text-muted);
        font-weight: 500;
        text-decoration: none;
        transition: filter 0.15s ease;

        &:hover,
        &:focus-visible {
            filter: brightness(0.75);
        }
    }

    .sep {
        color: var(--text-faint);
        font-weight: 400;
        user-select: none;
    }

    .current {
        color: var(--text-color);
        font-weight: 700;
    }
}

.tagline {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--text-dim);
}

.toc {
    h2 {
        margin: 0 0 14px;
        font-size: var(--fs-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text-faint);
    }

    ol {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    li a {
        display: flex;
        align-items: baseline;
        gap: 8px;
        padding: 5px 0;
        font-size: var(--fs-sm);
        color: var(--text-muted);
        text-decoration: none;
        transition: color 0.15s;

        &:hover,
        &:focus-visible {
            color: var(--text-color);
        }
    }

    li span {
        min-width: 12px;
        font-size: var(--fs-xs);
        color: var(--text-faint);
        font-variant-numeric: tabular-nums;
        flex-shrink: 0;
    }
}

main {
    min-width: 0;

    > p {
        font-size: var(--fs-md);
        line-height: 1.6;
        color: var(--text-secondary);

        + p {
            margin-top: 1em;
        }

        a {
            color: var(--text-color);
            text-decoration: none;
            transition: filter 0.3s;

            &:hover,
            &:focus-visible {
                filter: brightness(0.8);
            }
        }
    }
}

.section {
    margin-top: 52px;
    scroll-margin-top: 20px;

    &:first-child {
        margin-top: 36px;
    }

    > header {
        display: flex;
        align-items: baseline;
        gap: 12px;
        margin-bottom: 6px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--border-color);

        span {
            font-size: var(--fs-lg);
            font-weight: 700;
            color: var(--text-faint);
            font-variant-numeric: tabular-nums;
            line-height: 1;
        }

        h2 {
            margin: 0;
            font-size: var(--fs-lg);
            font-weight: 700;
            line-height: 1.2;
        }
    }

    > p {
        margin: 0 0 28px;
        font-size: var(--fs-sm);
        line-height: 1.6;
        color: var(--text-dim);
    }

    article {
        margin-bottom: 26px;

        &:last-child {
            margin-bottom: 0;
        }

        h3 {
            display: flex;
            align-items: baseline;
            gap: 8px;
            margin: 0 0 8px;
            font-size: var(--fs-md);
            font-weight: 600;

            span {
                min-width: 22px;
                font-size: var(--fs-xs);
                color: var(--text-faint);
                font-variant-numeric: tabular-nums;
                flex-shrink: 0;
            }
        }

        p {
            margin: 0 0 10px;
            font-size: var(--fs-sm);
            line-height: 1.6;
            color: var(--text-secondary);

            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}

.refs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 0;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;

    li {
        font-size: var(--fs-xs);
        color: var(--text-muted);

        a {
            color: inherit;
            text-decoration: none;

            &:hover,
            &:focus-visible {
                text-decoration: underline;
            }
        }

        &:not(:last-child)::after {
            content: "";
            display: inline-block;
            width: 3px;
            height: 3px;
            margin: 0 8px;
            border-radius: 50%;
            background: var(--text-faint);
            vertical-align: middle;
        }
    }
}

.closing > p {
    margin: 0 0 14px;
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--text-secondary);

    &:last-child {
        margin-bottom: 0;
    }
}

.section .quote {
    margin: 14px 0 0;
    padding: 0 0 0 16px;
    border-left: 2px solid var(--border-color);

    p {
        margin: 0 0 6px;
        font-size: var(--fs-sm);
        font-style: italic;
        line-height: 1.6;
        color: var(--text-dim);

        &:last-child {
            margin-bottom: 0;
        }
    }

    footer {
        font-size: var(--fs-xs);
        line-height: 1.5;
        color: var(--text-faint);

        cite {
            font-style: normal;
        }
    }

    + .quote {
        margin-top: 12px;
    }
}