:root {
    --story-width: 800px;
}

* {
    box-sizing: border-box;
}

.page-layout {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-areas:
    "left-rail main-content right-rail";
    margin: auto;
    max-width: 100%;
    gap: 4rem;
}

.left-rail {
    grid-area: left-rail;
}

.main-content {
    grid-area: main-content;
}

.right-rail {
    grid-area: right-rail;
}

article {
    margin-block: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

h2 {
    font-size: 1.8rem;
}

.contents-table, .meta-info {
    max-width: 90vw;
}

.mobile-toc {
    display: none;
}

.contents-table-header {
    font-size: 1.2rem;
}

.contents-table {
    width: 100%;
    padding-top: 2rem;
    position: sticky;
    top: var(--nav-height);
    padding-inline-start: 2rem;
    max-height: calc(100vh - var(--nav-height));
    overflow-y: auto;
}

.contents-table ol {
    border-inline-start: 2px solid #a3a3a3;
    padding-inline-start: 2rem;
}

.contents-table ol li {
    margin-block: 1rem;
    padding-inline-start: 0.5rem;
}

.meta-info {
    text-align: left;
    width: min(var(--story-width), 100%);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    font-style: italic;
}

.meta-info p {
    margin-left: 0.3rem;
}

.story-page-header {
    font-size: 2.5rem;
    text-align: center;
    margin: auto;
    max-width: 1000px;
    margin-block: 3rem;
}

.story-section {
    width: fit-content;
    max-width: var(--story-width);
}

.story-section * {
    margin-block-start: 2rem;
    max-width: 90vw;
    margin-inline: auto;
}

.story-section p a {
    word-wrap: break-word;
}

.story-section p {
    text-align: justify;
    font-size: 1.1rem;
}

.story-section img {
    display: block;
    margin: auto;
    height: auto;
    max-width: 100%;
}

.story-section ul,
.story-section ol {
    max-width: clamp(15rem, 35rem, 80vw)
}

.story-section li {
    margin-block-start: 0.8em;
}

.right {
    float: right;
}

.left {
    float: left;
}

figcaption {
    text-align: center;
    font-style: italic;
    font-size: 1rem;
}


/* Mobile: collapse to a single column. The left rail (TOC) appears above the
   article thanks to the natural DOM order. The right rail is hidden entirely
   because it carries no content and would waste vertical space. */
@media (max-width: 1100px) {
    .page-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "main-content";
    }

    .left-rail {
        display: none;
    }

    .right-rail {
        display: none;
    }

    .mobile-toc {
        display: block;
        max-width: 90vw;
        max-height: fit-content;
    }

    .contents-table {
        position: static;
        padding-top: 1.5rem;
        padding-inline-start: 0.5rem;
    }

    .meta-info {
        width: 100%;
    }

    .story-section {
        width: 100%;
        max-width: 100%;
    }

    .story-page-header {
        font-size: 1.8rem;
        margin-block: 1.5rem;
    }
}