article {
    backdrop-filter: blur(var(--size-blur-glass));
    background-color: var(--color-transparent-glass);
    box-sizing: border-box;
    color: var(--color-font);
    height: var(--size-article-height);
    margin: 0 10px;
    padding-right: var(--size-width-scroll);
    padding-top: calc(var(--size-accent) * 2);
    padding: var(--size-accent);
    position: relative;
    transition: background-color var(--time-sky-transition),
        width var(--time-article-transition);
    width: var(--size-article-collapse-width);
    z-index: var(--z-index-content);
}

article::after {
    background-color: var(--color-font);
    border-radius: calc(var(--size-navigation-size) * 0.5);
    content: '';
    height: var(--size-navigation-size);
    left: 0;
    opacity: 0;
    position: absolute;
    top: -10px;
    transition: color var(--time-active-transition),
        opacity var(--time-active-transition);
    width: 100%;
}

article:first-of-type {
    clip-path: polygon(
        0 -2em,
        100% -2em,
        100% 100%,
        var(--size-accent) 100%,
        0 calc(100% - var(--size-accent)));
}

article:has(input:focus-visible)::after {
    background-color: var(--color-keyboard-focus);
}

article:has(input:checked) {
    width: var(--size-article-width);
}

article:has(input:checked) div {
    opacity: 1;
    transition-delay: var(--time-article-transition);
}

article:last-of-type {
    clip-path: polygon(
        0 -2em,
        calc(100% - var(--size-accent)) -2em,
        calc(100% - var(--size-accent)) 0,
        100% var(--size-accent),
        100% 100%,
        0 100%);
}

article:last-of-type::after {
    width: calc(100% - var(--size-accent));
}

article:last-of-type:first-of-type {
    clip-path: polygon(
        0 -2em,
        calc(100% - var(--size-accent)) -2em,
        calc(100% - var(--size-accent)) 0,
        100% var(--size-accent),
        100% 100%,
        var(--size-accent) 100%,
        0 calc(100% - var(--size-accent)));
}

article div {
    box-sizing: border-box;
    height: 100%;
    margin: 0;
    opacity: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 10px;
    transition: opacity var(--time-article-transition);
}

article div h2,
article div p {
    width: calc(var(--size-article-width) - var(--size-accent) - var(--size-width-scroll));
}

article div::-webkit-scrollbar {
    width: var(--size-width-scroll);
}

article div::-webkit-scrollbar-track-piece {
    background-color: rgb(0, 0, 0, 0);
}

article div::-webkit-scrollbar-thumb {
    background-color: var(--color-font);
    border-radius: var(--size-width-scroll);
}

article h2 {
    font-size: 2.75em;
    font-weight: 400;
    line-height: 1em;
    margin-bottom: var(--size-accent);
    margin: 0;
}

article label {
    font-size: 0.65em;
}

section:has(article input:focus-visible) article::after {
    opacity: 1;
}