.sidebar {
    display: none;
}

.content {
    padding: var(--margin-d2);
	padding-left: calc(var(--margin) * 3);
}

/* animated element */
.site-title {
    position: fixed;
    width: max-content;
    aspect-ratio: 1/1;
    visibility: hidden;
    z-index: 2;
    top: 0;
    left: 0;
}

.site-title > .rotation-wrapper {
    position: relative;
    background-color: white;
    transition: transform 0.5s var(--expoEaseOut) 0s, visibility 0s 0.5s;
    transform-origin: bottom left;
    transform: rotate(0deg);
    visibility: hidden;
    padding: var(--margin-d2);
	top: -50%;
}

.site-title.is-active > .rotation-wrapper {
    transition-delay: 0s;
    transform: rotate(90deg);
    visibility: visible;
}

.site-title > .rotation-wrapper > a {
    display: block;
    transform: rotate(180deg);
}

@media (min-width: 768px) {
    .sidebar {
        display: block;
        position: fixed;
        pointer-events: none;
        width: 40%;
        height: 100svh;
        top: 0px;
        bottom: 0px;
        z-index: 1;
    }

    .sidebar.is-active {
        pointer-events: all;
    }

    .content {
        width: 60%;
        margin-left: 40%;
        padding: 0;
    }

    /* placeholder */
    .sidebar > .site-title-placeholder {
        position: relative;
        width: max-content;
        aspect-ratio: 1/1;
        visibility: hidden;
        pointer-events: none;
		margin-bottom: var(--margin-d2);
    }

    .sidebar > .site-title-placeholder > .rotation-wrapper {
        position: relative;
        top: calc(-50% - var(--margin-d2));
        transform-origin: bottom left;
        transform: rotate(90deg);
        padding: var(--margin) var(--margin-d2);
    }

    .sidebar > .site-title-placeholder > .rotation-wrapper > a {
        display: block;
    	transform: rotate(180deg);
    }

    .sidebar > .navigation {
        padding-left: var(--margin-x4);
    }

    /* https://css-tricks.com/staggered-css-transitions/ */
    .sidebar > .navigation > .navigation_item {
        transition: all 0.3s ease-in-out;
        transition-delay: var(--delay); /* comes from HTML */
        transform: translateX(-5%);
        opacity: 0;
    }

    .sidebar.is-active > .navigation > .navigation_item {
        transition-delay: var(--delay); /* comes from HTML */
        transform: translateX(0);
        opacity: 1;
    }

    .site-title > .rotation-wrapper {
		padding: var(--margin);
        top: -50%;
    }
}

@media (min-width: 1024px) {
    .sidebar {
        width: 30%;
    }

    .content {
        width: 70%;
        margin-left: 30%;
        padding: 0;
    }

}

@media (min-width: 1280px) {
    .sidebar {
        width: 25%;
    }

    .content {
        width: 75%;
        margin-left: 25%;
    }

	.site-title > .rotation-wrapper {
        top: calc(-50% - var(--margin-d2));
    }
}