body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

main {
    flex-grow: 2; 
    max-width: var(--ok-body);
    padding: var(--ok-s-3);
    margin: auto;
}

#site-header, 
footer {
    background-color: var(--ok-bg-1); 
}

header .wrapper,
footer .wrapper {
    max-width: var(--ok-body);
    padding: var(--ok-s-3);
    margin: auto;
}

#title {
    font-size: var(--ok-fs-2);
    margin-top: var(--ok-s-2);
    margin-bottom: var(--ok-s-2); 
}

header nav ul li {
    text-transform: uppercase;
}

nav svg {
    display: inline;
    margin-right: var(--ok-s-3);
}
nav a:last-child svg {
    margin-right: 0;
}

/* Full height and width header */

.full #site-header {
  height: 60vh;
  opacity: 0.9;
  overflow: hidden;
}

.full #site-header .bg {
  background-image: url(/assets/bg.jpg);
  background-size: cover;
  background-position: center;
  width: 100vw;
  height: 60vh;
  display: flex;
  animation-duration: 60s;
}

.full #site-header .wrapper {
    text-align: center;  
    background-color: var(--ok-bg-0);
    opacity: 0.9;
    margin-top: 5em;
}

.full #site-header nav ul li {
    margin: 1em;    
}

@keyframes bg-movement {
  from {background-position: top left;}
  to {background-position: center;}
}

/* Tategaki header */

.tategaki {
    display: flex;
    flex-direction: row-reverse;    
    margin-top: var(--ok-s-4);
}

.tategaki header {
    writing-mode: vertical-rl;
    margin-left: var(--ok-s-4);
}

.tategaki h1 {
    margin-top:0;
    margin-left: var(--ok-s-2);
}

.tategaki li {
    margin-top: 0;
    margin-bottom: var(--ok-s-3);
}

/* Image cards for blog sections */

.image-card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--ok-s-3);
}
.image-card {
    display: block;
    max-width: calc(var(--ok-body) / 2);
    background-color: var(--ok-bg-1);
    border-radius: var(--ok-br);
}
.image-card:hover {
    text-decoration: none;
}
.image-card img {
    border-radius: var(--ok-br) var(--ok-br) 0 0;
    margin: 0 auto;
}
.image-card div {
    padding: var(--ok-s-3);
}
.image-card h4 {
    margin-top: var(--ok-s-0);
    color: var(--ok-tc-0);
}
.image-card p {
    text-align: center;
}
.image-card button {
    margin-bottom: var(--ok-s-0);
}

/* Articles */

#content aside {
    padding-left: var(--ok-s-5);
    color: var(--ok-tc-1);
}

@media (width >= 160ch) {
    #content aside {
        padding: var(--ok-s-3);
        position: absolute;
        margin-left: 78ch;
        max-width: 38ch;
    }
    
    #toc {
        padding: var(--ok-s-3);
        position: fixed;
        margin-left: -25ch;
        max-width: 25ch;
    }
}


#content .footnotes ol {
    padding-left: var(--ok-s-5);
    color: var(--ok-tc-1);     
    font-family: monospace;
}

.sidenav ul {
    margin-bottom: var(--ok-s-3);    
}

.sidenav ul ul {
    padding-left: var(--ok-s-3);
}

.sidenav ul ul ul {
    padding-left: var(--ok-s-3);
}

.blog h1 {
    font-size: var(--ok-fs-1);    
}

.article-list dd {
    padding-left: var(--ok-s-0);
}

/* Closed site */

#restricted main {
    display: flex;
    justify-content: center;
    align-items: center;
}

#restricted .message {
    padding: var(--ok-s-6);
    background-color:var(--ok-bg-0);
    display: flex;
    flex-direction: column;
    align-items: center;
}

#restricted form {
    display: flex;
    flex-direction: column;    
}



/* RTE styles */

.RTE [data-block=layout] {
    display: flex;
    flex-direction: row;
    gap: 24px;
}
.RTE .wrap-center {
  text-align: center;
}
.RTE .wrap-center img {
  margin-left: auto;
  margin-right: auto;
}
.RTE .wrap-center figcaption {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.RTE .float-left {
  float: left;
  margin-right: 1em;
  margin-bottom: 1em;
  max-width: 200px;
}
.RTE .float-right {
  float: right;
  margin-left: 1em;
  margin-bottom: 1em;
  max-width: 200px;
}
.RTE {
    --rte-outset-md: var(--ok-s-6);
}
.RTE .outset-right {
  position: relative;
  width: calc(100% + var(--rte-outset-md));
  max-width: calc(100% + var(--rte-outset-md));
  transform: translateX(var(--rte-outset-md)) translate3d(0, 0, 0);
  left: calc(var(--rte-outset-md) * -1);
}
.RTE .outset-left {
  width: calc(100% + var(--rte-outset-md));
  max-width: calc(100% + var(--rte-outset-md));
  transform: translateX(calc(var(--rte-outset-md) * -1)) translate3d(0, 0, 0);
}
.RTE .outset-both {
  position: relative;
  width: calc(100% + var(--rte-outset-md) + var(--rte-outset-md));
  max-width: calc(100% + var(--rte-outset-md) + var(--rte-outset-md));
  transform: translateX(-50%) translate3d(0, 0, 0);
  left: 50%;
}