@media screen and (max-width: 750px)
{

/* GREEN MODE
 * Images cannot be as tall (so you can see that there is more content afterward)
 * Logo and menu font shrinks a little so that it can fit on one line
 * Menu switches to column rather than row
 * Table of Contents becomes one column rather than two
 * Font size shrinks to avoid baby-book effect on the phone
 */

body
{
font-size: 16px;
}

article #content
{
/* background-color: lightgreen; */
margin-top: -3vh;
}

#staircase-spirit-nav
{
font-size: 30px;
}

#staircase-spirit-nav ul
{
flex-flow: column nowrap;
text-align: center;
}

#staircase-spirit-nav li a
{
/* half as much top/bottom padding, no side padding */
padding: 5px 0;
}

article figure img
{
max-height: 35vh;
}

figure.extra-large
{
left: 0;
right: 0;
margin-left: -15vw;
margin-right: 0;
}

.table-of-contents > ol
{
	column-count: 1;
}

}