body:not(.vertical) { 
    touch-action: pan-y;
}
body.vertical { 
    touch-action: pan-x;
}
body article img {
    margin-left: 2em;
    vertical-align: middle;
}
body.vertical article img:not(.norotate) {
    transform-origin: left top;
    transform:translate(80%, 0) rotate(90deg) ;
    margin-left: 0;
    margin-top: 2em;
}
body article img.nomargin {
    margin: 0;
}

nav#content-list {
    writing-mode: horizontal-tb;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
nav#content-list > div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0.3em 0.5em;
    margin: 0 auto;
}
body.vertical nav#content-list > div {
    margin: 0 auto 0 20em;
}
nav#content-list > div > div {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 0.3em;
}
nav#content-list > div > div a {
    margin-left: .5em;
    padding: 0 3px;
    border: outset 2px;
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    text-wrap: nowrap;
}
nav#content-list > div > div a:first-child {
    margin-left: 0;
}
nav#content-list .current {
    font-weight: bold;
}

nav#content-list:not(.view) {
    display: none;
}
nav#content-list.view  {
    display: flex;
}

@media screen and (max-width: 599px) {
    h1 { letter-spacing: 0; }
    html:has(body.vertical) {
        overflow-y: hidden;
    }
    body.vertical {
        overflow-y: hidden;
    }
    nav#content-list {
        width: auto;
    }
    body:not(.vertical) nav#content-list {
        top: 2.5em;
        right: 0;
    }
    body.vertical nav#content-list {
        top: 0;
        right: 2.5em;
    }
    nav#content-list > div {
        align-items: flex-start;
        padding: 5px;
        max-width: 95%;
    }
    body:not(.vertical) nav#content-list > div {
        justify-content: flex-start;
        flex-direction: column;
        margin: 0 0 0 auto;
    }
    body.vertical nav#content-list > div {
        justify-content: flex-end;
        flex-direction: row;
        max-height: 95%;
        margin: 0 0 auto auto;
    }
    body.vertical nav#content-list > div > div {
        writing-mode: vertical-rl;
        max-height: 95%;
    }
    body:not(.vertical) nav#content-list a {
        margin-bottom: 0.5em;
    }
    body.vertical nav#content-list a {
        margin-top: 0.5em;
        padding: 3px 0;
    }
    body.vertical nav#content-list > div > div a:first-child {
        margin-left: 0.5em;
    }
    body.vertical nav#content-list div#navi {
        order: 5;
    }
    body.vertical nav#content-list div#prologue {
        order: 4;
    }
    body.vertical nav#content-list div#early {
        order: 3;
    }
    body.vertical nav#content-list div#middle {
        order: 2;
    }
    body.vertical nav#content-list div#after {
        order: 1;
    }
    nav#content-list > div > div {
        flex-wrap: wrap;
    }
}