/* layout only: the rail, the reading column, the footer */

.l-shell {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    gap: 0;
    min-block-size: 100vh;
    max-inline-size: 1180px;
    margin-inline: auto;
}

.l-rail {
    border-inline-start: 1px solid var(--tone-edge);
    padding: 2.4em 1.8em;
    position: sticky;
    inset-block-start: 0;
    align-self: start;
    max-block-size: 100vh;
    overflow-y: auto;
}

.l-rail__mark {
    display: flex;
    align-items: center;
    gap: 0.55em;
    text-decoration: none;
    color: inherit;
    margin-block-end: 2em;
}

.l-rail__mark svg {
    inline-size: 30px;
    block-size: 30px;
    color: var(--tone-mark);
    flex: none;
}

.l-rail__mark b {
    display: block;
    font-size: var(--step-1);
    font-weight: 700;
}

.l-rail__mark small {
    display: block;
    font-size: 0.72em;
    color: var(--tone-quiet);
    line-height: 1.4;
}

.l-rail__menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.l-rail__menu li {
    margin-block-end: 0.15em;
}

.l-rail__menu a {
    display: block;
    padding: 0.4em 0.6em;
    margin-inline-start: -0.6em;
    text-decoration: none;
    color: var(--tone-quiet);
    border-radius: 3px;
}

.l-rail__menu a:hover {
    color: var(--tone-text);
    background: var(--tone-mark-soft);
}

.l-rail__menu a[aria-current="page"] {
    color: var(--tone-text);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--tone-mark);
}

.l-rail__foot {
    margin-block-start: 2.4em;
    font-size: 0.76em;
    color: var(--tone-quiet);
    line-height: 1.6;
}

.l-main {
    padding: 3.4em 3em 5em;
    min-inline-size: 0;
}

.l-read {
    max-inline-size: 68ch;
}

.l-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.6em;
    align-items: start;
    margin-block: 2em;
}

.l-stack > * + * {
    margin-block-start: 1.6em;
}

.l-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
}

.l-foot {
    border-block-start: 1px solid var(--tone-edge);
    padding: 1.6em 3em;
    max-inline-size: 1180px;
    margin-inline: auto;
    font-size: 0.85em;
    color: var(--tone-quiet);
}

.l-foot a {
    color: var(--tone-quiet);
}

@media (max-width: 900px) {
    .l-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .l-rail {
        position: static;
        max-block-size: none;
        border-inline-start: 0;
        border-block-end: 1px solid var(--tone-edge);
        padding: 1.4em 1.2em;
    }

    .l-rail__mark {
        margin-block-end: 1em;
    }

    .l-rail__menu {
        display: flex;
        flex-wrap: wrap;
        gap: 0.3em 1em;
    }

    .l-rail__foot {
        display: none;
    }

    .l-main {
        padding: 2em 1.2em 3.5em;
    }

    .l-split,
    .l-pair {
        grid-template-columns: minmax(0, 1fr);
    }

    .l-foot {
        padding-inline: 1.2em;
    }
}

.l-rail__chapters {
    margin-block: 2em 0.6em;
    font-size: 0.72em;
    letter-spacing: 0.12em;
    color: var(--tone-quiet);
}

.l-rail__toc {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: chapter;
    font-size: 0.86em;
}

.l-rail__toc li {
    counter-increment: chapter;
    margin-block-end: 0.4em;
}

.l-rail__toc a {
    color: var(--tone-quiet);
    text-decoration: none;
}

.l-rail__toc a::before {
    content: counter(chapter) " ";
    color: var(--tone-edge);
}

.l-rail__toc a:hover {
    color: var(--tone-text);
}

.l-figure {
    margin: 2em 0;
    color: var(--tone-mark);
}

.l-figure svg {
    inline-size: 100%;
    block-size: auto;
    display: block;
}

.l-figure figcaption {
    margin-block-start: 0.6em;
}

.l-chapter {
    display: block;
    font-size: 0.55em;
    letter-spacing: 0.12em;
    color: var(--tone-quiet);
    font-weight: 400;
    margin-block-end: 0.2em;
}