/* Style-4
 * Almost the same as Style-3
 * I just moved the Comparison Slider CSS into it's own file
 *
 * Style-5
 * It is finally time for CSS variables
 * I also removed the stuff for Tumblr Post
 */
 
:root
{
--tooltipster-border-size: 0;
}

@font-face
{
font-family: 'Alte Haas Grotesk';
src: url('AlteHaasGroteskRegular.ttf') format('truetype');
font-weight: normal;
}

@font-face
{
font-family: 'Alte Haas Grotesk';
src: url('AlteHaasGroteskBold.ttf') format('truetype');
font-weight: bold;
}

@font-face
{
font-family: 'stairwell-icons';
src: url('stairwell-icons.ttf') format('truetype');
font-weight: normal;
font-display: block; /* keep invisible until the font is loaded */
}

html
{
-webkit-text-size-adjust: 100%;
box-sizing: border-box;
}

body
{
font: 21px/var(--line-height) "Arial", sans-serif;
letter-spacing: var(--letter-spacing);
color: var(--text_color_primary);
margin: 0;
background-color: var(--article_background_color);
}

a
{
color: var(--link_color_primary);
font-weight: bold;
}

a:hover
{
color: var(--link_hover_color_primary);
-webkit-transition: all 0.1s ease-out; 
-moz-transition: all 0.1s ease-out; 
-o-transition: all 0.1s ease-out; 
transition: all 0.1s ease-out;
}

#staircase-spirit-nav
{
background-color: var(--staircase-spirit-background-color);
border-bottom: 4px var(--staircase-spirit-border-color) solid;
width: 100%;
position: fixed;
top: 0;
left: 0;
font: bold 39px/1 "Alte Haas Grotesk";
text-transform: uppercase;
z-index: 99999999;
}

#staircase-spirit-nav header a
{
padding: 5px 20px;
}

#staircase-spirit-nav header a#logo
{
display: inline-block;
}

#staircase-spirit-nav header a#logo .decorative-icon
{
	font-family: "stairwell-icons";
	font-size: .8em;
}

#staircase-spirit-nav header a#logo .decorative-icon.before
{
	padding-right: .3em;
}


#staircase-spirit-nav a, #staircase-spirit-nav header a#logo, footer a
{
color: var(--staircase-spirit-text-color);
text-decoration: none;
display: inline-block;
padding: .1em .5em;
}

#staircase-spirit-nav a:hover, #staircase-spirit-nav header a#logo:hover, footer a:hover
{
/* intentionally swapped */
color: var(--staircase-spirit-background-color);
background-color: var(--staircase-spirit-text-color);
text-decoration: none;
}

#staircase-spirit-nav ul
{
list-style-type: none;
padding: 0;
margin: 0;
font-size: .75em;
position: fixed;
display: flex;
top: 0;
right: 0;
}

#staircase-spirit-nav li a
{
padding: 10px 30px;
}

/* The back to index button on non-article Staircase Spirit pages */
#back
{
float: right;
letter-spacing: -3px;
margin: 2em 0 1em;
padding: 0 1em;
font: bold 52px/1.5 "Alte Haas Grotesk", sans-serif;
text-decoration: none;
color: var(--figures_text_color);
background-color: var(--figures_background_color);
border-radius: 4px;
}

a#back:hover
{
color: var(--link_hover_color_primary);
background-color: var(--article_background_color);
transition: linear .2s;
}

article
{
position: absolute;
width: 100%;
}

article header
{
background-color: var(--titles_background_color);
color: var(--text_color_secondary);
margin: -5vh auto 0;
position: relative;
padding: 2%;
width: 55vw;
}

article header h1
{
font: normal 2.25em/1 "Abril Fatface", serif;
text-transform: uppercase;
text-align: center;
margin: 0;
}

article header.small h1
{
font-size: 3em;
}

article header .recap
{
font-style: italic;
letter-spacing: -1.5px;
text-align: center;
padding: 0;
margin: .5em 0 0 0;
line-height: var(--line-height);
font-size: 1.05em;
}

#taglist {
  display: inline;
  list-style: none;
  padding: 0;
}

#taglist li {
  display: inline;
}

#taglist li:after {
  content: ", ";
}

#taglist li:last-child:after {
    content: "";
}



article #content, #comments-wrapper
{
width: 55%;
padding: 4em 22.5%;
}

article #content
{
margin-top: -3em;
/*overflow: scroll; for Scrollbear - or maybe not */
}

article #info
{
text-transform: uppercase;
text-align: center;
font-style: italic;
font-size: .75em;
margin: .5em 0 1.5em;
}

article h2, article h3
{
margin-top: 2em;
clear: both;
}

/*

This makes sure that the heading of the anchor link is not lost behind the non-scrolling header of the entire page

Reference: https://stackoverflow.com/questions/4086107/html-positionfixed-page-header-and-in-page-anchors/28824157#28824157

*/

:target:before {
  content:"";
  display:block;
  height:50px; /* fixed header height*/
  margin:-50px 0 0; /* negative fixed header height */
}


/* Figures and Tooltip Boxes */
/* Tooltipster related CSS moved into Tooltipster folder */


article figure
{
background-color: var(--figures_background_color);
}

article figure, article figure a
{
color: var(--figures_text_color);
}

blockquote a
{
color: var(--text_color_secondary);
}

article figure
{
font-size: max(12px, .73em);
text-align: center;
margin: 2em auto;
padding: 1.5vw;
width: 50%;
clear: both;
}

article figure figure
{
width: 100%;
font-size: 1em;
/*padding: 8% 4% 4%;*/
padding: 0;
margin: 1em auto;
background-color: unset;
}

article figure figure:first-of-type
{
margin-top: 0;
}

/*
normally the padding is fine with an image
but if you want to put a figure in a figure
the padding is all wonked
*/
figure.container
{
padding: 0;
}

article figure img, article figure picture
{
width: 100%;
height: auto;
margin: 0 auto;
display: block;
object-fit: contain;

/* Fallbacks for the alt text */
color: var(--figures_text_color);
text-align: center;
}


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


article figure figcaption
{
margin: 1em 1em -.3em;
}

article figure figcaption a
{
color: var(--link_color_secondary);
}

article figure figcaption, blockquote
{
letter-spacing: -.75px;
}

.multiple
{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-items: flex-start;
    align-content: center;
}

.multiple > *
{
    flex: 1 1 auto;
	width: calc(50% - 2em);
	height: auto;
	max-height: none !important;
	max-width: none;
	margin: 1em;
}

/* Figures where the image is displayed as is (see the unicode article for example) */

article figure.fullsize
{
background-color: transparent;
}

article figure.fullsize img, article figure.fullsize picture
{
width: auto;
}

/* Figures where the image is displayed at full content width (see the graphs on bulbasaur's rant for example) */

article figure.large
{
width: calc(100% - 3vw);
}

article figure.large img, figure.extra-large img, article figure.large picture, figure.extra-large picture
{
max-height: 60vh;
}

/* Figures that bust out of the width of the content */

.data-table, figure.extra-large, .related-articles .article-select
{
	
/*
 * Bust out beyond the width of the #content
 * Reference: https://css-tricks.com/full-width-containers-limited-width-parents/
 */

width: 90vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -45vw;
margin-right: -45vw;
}

article figure.left, article figure.right
{
	width: 30%;
	margin-top: 0;
}

article figure.left
{
	float: left;
	margin-right: 2em;
	clear: left;
	margin-bottom: 1em;
}

article figure.right
{
	float: right;
	margin-left: 2em;
	clear: right;
}

/* Inverted figure or blockquote (transparent bg, suitable text color for article background color */

.invert
{
background-color: transparent;
}


/* 
the inverted figure/blockquote should use the suitable text color for itself
and also everything inside the inverted figure/blockquote
(including picture, figcaption, img with possible alt text showing if the image fails...)
*/
.invert, .invert *
{
color: var(--text_color_primary);
}


/* The boundaries of the image make its own shape, it shouldn't be cropped into a rectangle */
.invert img
{
object-fit: contain;
}

/* TODO: should this also be made non-specific to figure? */
figure:not(.invert) figure.invert
{
	
/*
 * Usually invert figure will be transparent
 * to get the background color of the page
 * but if it is inside another (non-inverted) figure
 * make it flip.
 */

background-color: var(--article_background_color);
}

/* Larger divider pictures that drive a point */

article figure.callout
{
width: 70%;
margin: 4em auto;
}

article figure.callout img, article figure.callout picture
{
    max-height: 65vh; /* it can be a little bigger than usual */
}

/*Multiple imgs for a figure row (see Entei page with slidy puzzles) */

.multipicture img, .multipicture picture
{
max-width: 20%;
margin: 0 1%;
display: inline;
}

/* Side-by-side Comparison */
/* NOTE: if you change these, also change the media query for .parallel below */

.comparison
{
display: flex;
flex-flow: nowrap;
align-content: space-between;
justify-content: center;

/*
 * For some reason this breaks the height later?
 * align-items: center;
 */
 
}

.comparison > *
{
flex: 1 1 auto;
margin: 0 .75vw;
}

.comparison[data-number-of-images="2"] > *
{
width: 50%;
}

/*
.comparison > a:first-of-type
{
	margin-left: 0;
	border: 10px solid cyan;
}
.comparison > a:last-of-type
{
	margin-right: 0;
	border: 10px solid red;
}
*/

.comparison > *:first-child
{
	margin-left: 0;
}

.comparison > *:last-child
{
	margin-right: 0;
}


.comparison img, .comparison picture
{
object-fit: cover;
height: 100%;
}

/* Object position of img or (?)picture */

.align-top
{
object-position: top;
}

.align-top-right
{
object-position: top right;
}

.align-left
{
object-position: left;
}

/* Vertically Stacked Comparison or the Responsive "Parallel" Comparison */


/*
article figure .vertical a:not(:first-of-type) img,
article figure .vertical a:not(:first-of-type) picture,
article figure .parallel a:not(:first-of-type) img,
article figure .parallel a:not(:first-of-type) picture
{
margin-top: 0.5em;
border: 10px solid orange;
}
*/

article figure .vertical a:not(:first-child) img,
article figure .vertical img:not(:first-child),
article figure .vertical a:not(:first-child) picture,
article figure .vertical picture:not(:first-child),
article figure .parallel a:not(:first-child) img,
article figure .parallel img:not(:first-child),
article figure .parallel a:not(:first-child) picture,
article figure .parallel picture:not(:first-child)
{
margin-top: 0.5em;
}

article figure .vertical img,
article figure .vertical picture,
article figure .parallel img,
article figure .parallel picture
{
object-fit: cover;
}

@media screen and (max-width: 1100px) and (min-width: 500px) 
{
	/* between blue mode and lavender mode */
	/* parallel will use all the same rules as .comparison */
	/* NOTE: if you change these, also change the media query for .comparison above */
	/* TODO: is there a nicer way to share the same rules across media queries? */
	/* TODO: Move into separate blue mode css? */

	article figure .parallel
	{
	display: flex;
	flex-flow: nowrap;
	align-content: space-between;
	justify-content: center;
	}
	
	.parallel > *
	{
	flex: 1 1 auto;
	margin: 0 .75vw;
	}
	
	/*
	.parallel > *:first-of-type
	{ margin-left: 0; }
	.parallel > *:last-of-type
	{ margin-right: 0; }
	*/
	
	.parallel > *:first-child
	{
		margin-left: 0;
	}

	.parallel > *:last-child
	{
		margin-right: 0;
	}

	.parallel img, .parallel picture
	{
	object-fit: cover;
	height: 100%;
	}

	/*
	article figure .parallel a:not(:first-of-type) img,
	article figure .parallel a:not(:first-of-type) picture
	{
	margin-top: 0;
	}
	*/
	
	article figure .parallel a:not(:first-child) img,
	article figure .parallel img:not(:first-child),
	article figure .parallel a:not(:first-child) picture,
	article figure .parallel picture:not(:first-child)
	{
	margin-top: 0;
	}
	
}

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

/* parallel switches back to a stack (defined above, not here) */
/* comparison becomes a stack */
/* TODO: is there a nicer way to share the same rules across media queries? */
/* TODO: Move into (new) lavender mode css? */
	
	article figure .comparison
	{
	display: block;
	}
	
	.comparison > *
	{
	margin: 0 auto;
	}
	
	/*
	article figure .comparison a:not(:first-of-type) img,
	article figure .comparison a:not(:first-of-type) picture
	{
	margin-top: 0.5em;
	}
	*/
	
	article figure .comparison a:not(:first-child) img,
	article figure .comparison img:not(:first-child),
	article figure .comparison a:not(:first-child) picture,
	article figure .comparison picture:not(:first-child)
	{
	margin-top: 0.5em;
	}
	
	.comparison img, .comparison picture
	{
	object-fit: cover;
	height: auto;
	}
}

article figure.sprite img, img.sprite, article figure.sprite picture, picture.sprite
{
image-rendering: pixelated;
max-width: 100%;
width: auto;
}


/* Pre, blockquote */

blockquote, pre
{
background-color: var(--titles_background_color);
color: var(--text_color_secondary);
font-size: .8em;
padding: 1em 2em;
clear: both;
}


pre
{
letter-spacing: 0;
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

code
{
font-family:'Courier New';
}

figure.quote
{
	width: 90%;
}

.quote, .quote blockquote, .calmquote, .calmquote blockquote, .defaultquote, .defaultquote blockquote
{
	text-align: left;
	font-size: 21px;
}

.quote figcaption, .calmquote figcaption, .defaultquote figcaption
{
	text-align: right;
}

.quote blockquote::first-letter
{
	float: left;
	font-family: Georgia;
	font-size: 75px;
	line-height: 60px;
	padding-top: 4px;
	padding-right: 8px;
	padding-left: 3px;
}

cite
{
font-size: .85em;
}

.quote-attribution, cite
{
/* this attempts to avoid line-breaks in strange places
but it isn't really working...
display:inline-block;
width: 100%;
*/
text-align: right;
}

figure.quote figcaption::before, figure.calmquote figcaption::before, figure.defaultquote figcaption::before, .quote-attribution::before
{
content: '- ';
}

/* We'll keep the dash from the figcaption::before, so we don't need another from the quote-attribution */
figure.calmquote figcaption .quote-attribution::before
{
content: unset !important;
}

/* don't put a citation for another figure inside the figure.quote */

figure.quote figure figcaption:before, figure.calmquote figure figcaption:before, figure.defaultquote figure figcaption:before
{
content: unset;
}

.quote figure figcaption, .calmquote figure figcaption, .defaultquote figure figcaption
{
text-align: center;
font-size: .73em;
}

/* Other text */

.note
{
	font-size: 80%;
}

.insult
{
	font-family: "Comic Sans MS", cursive, sans-serif;
}

.calmquote, .defaultquote
{
margin: 1em auto;
padding: 3%;
width: 94%;
overflow: hidden;
}

.calmquote *:first-of-type, .defaultquote *:first-of-type
{
margin-top: 0;
}

.calmquote blockquote, .defaultquote blockquote
{
padding: 0;
margin: .5em 1em;
}

.quote blockquote, .calmquote blockquote, .defaultquote blockquote
{
clear: none;
}

.calmquote blockquote, .calmquote figcaption, .defaultquote blockquote, .defaultquote figcaption
{
font-size: .8em;
}

/* Comments */

#comments-wrapper
{
padding-top: 3em;
background-color: var(--article_background_color) !important;
}

/* Footer */

footer
{
text-transform: uppercase;
text-align: center;
font: bold 1.5em/1.5 "Alte Haas Grotesk", Arial, sans-serif;
}

footer ul
{
margin: 2em;
padding: 0;
list-style-type: none;
}

footer .otherarticles
{
font-size: 1em;
}

.dangerspoiler, .icon-paragraph
{
	display: flex;
	align-items: center;
	margin: 0 auto;

	background-color: var(--titles_background_color);
	color: var(--text_color_secondary);
	padding: .5em 1.5em;
	font-size: .9em;
	margin-bottom: 2em;
}

.dangerspoiler:before, .dangerspoiler p, .icon-paragraph p
{
	display: block;
    padding: 0.5em 1em;
    width: 100%;
}

.dangerspoiler:before
{
  content: ' ';
  flex: 0 2 150px;
  background: url(danger.png) no-repeat center;
  min-height: 91px;
  background-size: contain;
}

/*Continue reading */

.continue
{
display: block;
background-color: var(--titles_background_color);
color: var(--text_color_secondary);
padding: .5em 1.5em;
font-size: 2em;
text-align: center;
margin: 2em;
}

/* Navigation between parts */

.part-nav
{
margin: 1em auto 3em;
padding: 0;
list-style: none;
text-align: center;
}

.part-nav li
{
display: inline-block;
width: 20%;
border: 5px solid var(--titles_background_color);
padding: 1em 0;
margin: 1%;
font-size: 1.5em;
text-transform: uppercase;
font-family: "Alte Haas Grotesk", Arial, sans-serif;
-webkit-transition: all 0.1s ease-out; 
-moz-transition: all 0.1s ease-out; 
-o-transition: all 0.1s ease-out; 
transition: all 0.1s ease-out;
}

.part-nav li:not(.part-nav-current)
{
background-color: var(--titles_background_color);
color: var(--text_color_secondary);
}

.part-nav li a
{
text-decoration: none;
}

.part-nav li:not(.part-nav-current) a:not(:hover)
{
color: inherit;
}

.part-nav li:not(.part-nav-current):hover, .part-nav li:not(.part-nav-current):hover a
{
transform: scale(1.1);
color: var(--link_hover_color_primary) !important;
}

/* Neverending Story quote formatting (see the Entei movie page) */

.neverending-story-format p
{
margin: 0;
text-indent: 1em;
font-family: "Georgia", serif;
letter-spacing: -.5px;
}

/* Starting blips for Conan episode reviews */

.blip dt
{
font-weight: bold;
}

.blip dt:after
{
content: ":";
}

.blip dd
{
margin-top: calc( var(--line-height) * -1em); /* -1.5em; */
margin-left: 7.5em;
}

/*Comparison figures */


.callout-like
{
max-width: 90%;
max-height: 300px !important;
}

/* Amcharts */

.amcharts
{
margin: 0 auto;
background-color: var(--article_background_color);
width: 100%;
height: 400px;
}

/* Video */

.video-js
{
margin: 4em auto;
width: 100%;
max-height: 50vh;
}

.video-js + figcaption
{
margin-top: -2em;
}

/* Audio */
.audio-wrapper
{
text-align: center;	
}

.audio-wrapper audio
{
width: 100%;
}

/* Article headers, v2 */

#top-picture
{
background-color: inherit;
height: 65vh;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

article header h1 span
{
display: inline-block;
}

/*
Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements#specifying_a_uniform_font_size_for_h1
*/

:where(h1)
{
  margin-block: 0.67em;
  font-size: 2em;
}

/* Related articles */

.related-articles
{
margin-top: 4em;
}

.related-articles h2
{
text-align: center;
}

/* Also in the pokemon movies tag: */

.related-articles h2
{
text-transform: capitalize;
}

.related-articles h2::before, .related-articles h2::after
{
text-transform: none;
}

.related-articles h2::before
{
content: "Also in the ";
}

.related-articles h2::after
{
content: " tag:";
}

/* titles for lists */

ul[title]::before, ol[title]::before
{
content: attr(title);
/* then add some nice styling as needed, eg: */
display: block;
font-weight: bold;
margin-left: -40px; /* undo list padding */
padding-bottom: 4px;
}

/* Really wide screens, when the text takes up less room */
/* Callouts may become floats to one side or the other */
/* TODO: is there a nicer way to share the same rules across media queries? */
/* TODO: Move into (new) color (red?) mode css? */

@media screen and (min-width: 2500px)
{
	article figure.callout.defer-left, article figure.callout.defer-right
	{
		width: 30%;
		margin-top: 0;
	}
	
	article figure.callout.defer-left
	{
		float: left;
		margin-right: 2em;
		clear: left;
		margin-bottom: 1em;
	}

	article figure.callout.defer-right
	{
		float: right;
		margin-left: 2em;
		clear: right;
	}
}