/* space-between, so the alphabet runs the full measure of the rule beneath it; the gap is only a floor */
.rail {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.9rem 0.6rem;
    padding-bottom: 1.2rem;
    margin-bottom: 2.6rem;
    border-bottom: 1px solid var(--rule);
    font-size: 1rem;
    font-style: italic;
    letter-spacing: 0.04em;
}

.rail a {
    color: var(--muted);
}

.rail a:hover {
    color: var(--accent);
}

.rail-empty {
    color: var(--rule);
}

.letters {
    display: flex;
    flex-direction: column;
    gap: 2.8rem;
}

.letter {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 1.5rem;
    scroll-margin-top: var(--bar);
}

.letter-mark {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 400;
    font-style: italic;
    color: var(--muted);
}

.letter-list {
    columns: 3;
    column-gap: 2.5rem;
    font-size: 1.06rem;
}

.letter-list>div {
    break-inside: avoid;
    padding-bottom: 0.45rem;
}

.archive .rail,
.archive .letters {
    max-width: none;
}

@media only screen and (min-width : 769px) {
    #container-chronology:has(.letters) {
        max-width: 64rem;
    }
}

@media only screen and (max-width : 768.99px) {
    .letter-list {
        columns: 2;
    }
}

/* The theme pages' window, with .letters as the list that scrolls */
@media only screen and (min-width : 512.01px) and (min-height : 32rem) {
    html:has(.letters) {
        overflow: hidden;
    }

    body:has(.letters) {
        height: 100vh;
    }

    /* Every flex item from the body down to the list must be allowed to shrink, or the overflow lands on the page */
    body:has(.letters) #container-parent {
        min-height: 0;
        padding-bottom: 0;
    }

    body:has(.letters) #container {
        flex: 1;
        min-height: 0;
    }

    body:has(.letters) #container-chronology {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    /* The list alone gives, or the alphabet is squeezed into fewer rows than it needs */
    body:has(.letters) h1,
    body:has(.letters) .rail {
        flex: 0 0 auto;
    }

    /* outline: none, since archive.html focuses it */
    body:has(.letters) .letters {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding-bottom: 7rem;
        scrollbar-width: thin;
        scrollbar-color: var(--rule) transparent;
        outline: none;
    }

    body:has(.letters) .letter {
        scroll-margin-top: 0;
    }
}

@media only screen and (max-width : 512px) {
    .letter-list {
        columns: 1;
    }

    /* Wrapped, space-between would justify the last row too */
    .rail {
        justify-content: flex-start;
        column-gap: 1rem;
    }

    .letter {
        display: block;
    }

    .letter-mark {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding-bottom: 0.9rem;
    }

    .letter-mark::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--rule);
    }
}