*
{
-webkit-text-size-adjust: none;
box-sizing: border-box;

--square-size: 2rem;
--half-square-size: calc( 0.5 * var(--square-size));
--quarter-square-size: calc( 0.25 * var(--square-size));

--content-top-margin: calc( 3 * var(--square-size) );
--content-left-margin: calc( 4 * var(--square-size) );

--content-width: calc( 24 * var(--square-size) );

--tooltipster-margin-left: var(--half-square-size);
--tooltipster-margin-right: var(--square-size);

--tooltipster-left-position: calc(var(--content-left-margin) + var(--content-width));

--tooltipster-width: round(down, calc(100vw - var(--tooltipster-left-position) - var(--tooltipster-margin-right) - var(--tooltipster-margin-left)), var(--square-size) );

--nextprevious-title-width: calc(var(--square-size) * 10);
--nextprevious-image-width: calc(var(--square-size) * 7);
--nextprevious-arrow-width: calc(var(--square-size) * 3);
--nextprevious-arrow-height: calc(var(--square-size) * 3);
--nextprevious-gap-width: calc(var(--square-size) * 1);

--asterisk_color: palevioletred;
--asterisk_color_hover: palevioletred;
}

}

@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;
}

body
{
margin: 0;
background-image:
	url(square2.png),
	url(paper2.png);

background-size: var(--square-size), auto;
font: 18px/var(--square-size) "Merriweather", serif;
}

* ::selection
{
background-color: teal;
color: white;
}

a, a i
{
color: palevioletred;
font-weight: 800;
}

a:hover
{
text-decoration-thickness: 5px;
}

code
{
text-wrap: nowrap;
}

article
{
/* border: 1px solid red;  test */
width: 100%;
}

header
{
background-color: teal;
color: #fff;
}

header h1
{
line-height: var(--square-size);
background-color: black;
margin: 0;
text-align: center;
letter-spacing: 0.4rem;
text-transform: uppercase;
width: 100%;
color: #fff;
display: inline-block;
padding: var(--half-square-size);
}

header h1 a
{
color: #fff;
text-decoration: none;
transition: all .25s;
font-weight: bold;
}

header h1 a:hover
{
text-shadow: 0 0 25px #fff;
}

article header h2
{
margin-top: 0;
margin-bottom: 0;
font-size: 2.2rem;
line-height: 2rem;
font-family: "Abril Fatface";
letter-spacing: 0.1rem;
}


article header
{
height: calc( 8 * var(--square-size));
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: stretch;
}

article header .header-text
{
align-self: flex-end;
margin: var(--half-square-size) calc( var(--square-size) * 2 );
margin-left: min( calc( var(--square-size) * 2 ), var(--content-left-margin))
}

.recap
{
margin-bottom: 0;
margin-top: 0;
font-style: italic;
line-height: 1.4;
}

.recap em, .recap i
{
color: white;
}

article header .header-image
{
height: 100%;
width: auto;
min-width: 34%;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}

article header h2
{
margin-top: 0;
}

article #info
{
text-transform: uppercase;
text-align: left;
font-style: italic;
font-size: .75em;
margin: var(--half-square-size);
margin-left: var(--content-left-margin);
flex: 0 0 auto;
line-height: 1.4rem;
max-width: var(--content-width);
}


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

#taglist li {
  display: inline;
}

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

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

.content
{
width: var(--content-width);
margin: var(--content-top-margin) 0 0 var(--content-left-margin);
}

.index-blurb
{
width: auto;
margin: var(--square-size);
padding: 0 calc( var(--square-size) * 3);
}

.index-blurb, .index-blurb p
{
margin-bottom: calc(var(--square-size) * 0.5);
}


/* Tooltip Boxes */

.tooltipster-base
{
margin: 0 var(--tooltipster-margin-left) 0 var(--tooltipster-margin-right);
left: var(--tooltipster-left-position) !important;
width: var(--tooltipster-width) !important;
padding: 0;
max-width: var(--content-width); /* it shouldn't be wider than the main text... right? */
/* height is set elsewhere to round up to nearest square */
text-shadow:
  0 0 1em white,
  0 0 0.2em white;
}

.tooltipster-box
{
/* if the height rounds up to the nearest square, have the stuff inside be centered */
display: flex;
flex-flow: column nowrap;
justify-content: space-around;
align-items: center;
}

.tooltipster-base p
{
margin-bottom: var(--half-square-size);
}

.tooltipster-base img
{
clear: both;
display: block;
margin: 0 auto;
margin-bottom: var(--square-size);
max-height: round( down, 25vh, var(--square-size) );
}

.tooltipster-base .calmquote
{
padding: 0;
}

.tooltipster-base .calmquote p
{
margin-top: 0;
}

.tooltipster-base figure
{
margin: 0;
}

.tooltipster-content div.figcaption a i
{
color: revert;
}

p
{
margin: var(--square-size) 0;
text-align: justify;
}

q
{
font: 300 1em/0 "Inter";
}

i
{
color: teal;
}

.tooltip-hook
{
display: inline-block;
transition: all .25s;
}

.tooltip-hook:hover
{
transform: rotate(360deg);

}

em
{
font-style: italic;
}

em
{
font-weight: 600;
}

dfn, strong
{
font-weight: 900;
}

.content p:first-of-type:first-letter
{
font-size: 5rem;
font-family: "Abril Fatface";
float: left;
margin-top: .25rem;
margin-right: var(--half-square-size);
}

.content blockquote p:first-of-type:first-letter, p.aside:first-of-type:first-letter
{
font-size: revert;
font-family: revert;
float: revert;
margin-top: revert;
margin-right: revert;
}

.aside
{
margin-left: calc( var(--square-size) * 2);
}

.calmquote
{
margin: 0 auto;
padding: var(--square-size);
width: round(down, 94%, var(--square-size));
}


.speaker
{
flex: 0 0 calc( var(--square-size) * 3) !important;
}


.quote-attribution, cite
{
/* this attempts to avoid line-breaks in strange places */
display:inline-block;
text-align: right;
width: 100%;
font-size: 0.85;
}

.quote-attribution::before
{
content: '- ';
}

.calmquote figcaption
{
border: 0;
}

article figure figure, article figure figure img, .gallery figure, .gallery figure img
{
box-shadow: none;
}

.calmquote figure figcaption
{
margin: 0;
}


h2
{
margin-top: calc( var(--square-size) * 2);
margin-bottom: var(--square-size);
font-weight: 900;
}


footer
{
width: 100%;
min-height: calc( 3 * var(--square-size));
background-color: #000;
color: #fff;

display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: stretch;
}

.mainfooter
{
width: calc( 18 * var(--square-size));
margin: var(--square-size) auto;
display: flex;
}

.mainfooter p
{
font-size: .85em;
line-height: 1.8;
}


footer p
{
margin: 0;
}

footer nav.buttonparty
{
display: flex;
flex-flow: column nowrap;
justify-content: space-around;
padding-left: var(--square-size);
width: fit-content;
}

/* Next Article Link */

/* changed structure in Stairwell v2026-004
.nextprevious {
  margin-top: calc(var(--square-size) * 1);
  margin-bottom: calc(var(--square-size) * 1);
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: flex-end;
  width: 100%;
  padding-left: calc( var(--content-left-margin) + var(--content-width) - var(--nextprevious-title-width) - var(--nextprevious-gap-width) - var(--nextprevious-image-width) );
  gap: var(--nextprevious-gap-width);

}
*/

.nextprevious {
  margin-top: calc(var(--square-size) * 1);
  margin-bottom: calc(var(--square-size) * 1);
  width: 100%;
  padding-left: calc( var(--content-left-margin) + var(--content-width) - var(--nextprevious-title-width) - var(--nextprevious-gap-width) - var(--nextprevious-image-width) );
  clear: both;
}

.nextprevious div.next {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: flex-end;
  gap: var(--nextprevious-gap-width);
}


.nextprevious a.next-title
{
line-height: 1.9rem;
font-size: 2rem;
text-align: right;
margin: 0;
padding: 0;
text-decoration: none;
font-family: "Abril Fatface";
text-transform: uppercase;
flex: 0 0 auto;
width: var(--nextprevious-title-width);
min-height: var(--square-size); /* calc-size fallback */
min-height: calc-size(auto, round(up, size, var(--square-size) ));
}


.nextprevious .label
{
display: block;
font-weight: 300;
font-style: italic;
font-family: "Merriweather";
text-transform: initial;
font-size: 1.8rem;
}

.nextprevious .title
{
font-style: normal;
}


.nextprevious img
{
display: block;
margin: 0;
box-shadow: .2rem .2rem 0.4rem #000;
width: var(--nextprevious-image-width);
height: calc( var(--square-size) * 3);
object-fit: cover;
}

.nextprevious .arrow
{
  width: var(--nextprevious-arrow-width);
  height: var(--nextprevious-arrow-height);
  aspect-ratio: cos(30deg);
  clip-path: polygon(0 0,100% 50%,0 100%);
  background: black;
  margin: 0;
}

/* Next Article Animation */

.nextprevious *
{
  transition: transform .25s;
}

.nextprevious:hover .arrow
{
  transform: translateX(var(--square-size));
}

/* Next Article Responsiveness */

@media screen and (max-width: calc(6rem + 48rem + 2rem + 6rem + 2rem + 1rem + 1rem))
{
	
	/*
	 * There might not be enough room for the nextprevious arrow to the right of the content
	 * - move the whole nextprevious block to the left
	 * - it won't try to align with the content anymore
	 * - allow the title text to fill the available space
	 */
	
	.nextprevious
	{
		justify-content: flex-end;
		padding-left: 0
	}
	
	.nextprevious a.next-title
	{
		width: auto;
		flex: 1 1 auto;
		margin: 0;
		margin-left: var(--content-left-margin);
	}
	
	.nextprevious .arrow
	{
		/* animation distance plus a half square */
		margin-right: calc( var(--square-size) * 1.5);
	}
	
}


@media screen and (max-width: calc(2rem + 20rem + 14rem + 6rem + 3rem))
{
	
	/*
	 * The nextprevious title moves above the image and the arrow
	 */
	
	/* changed structure in Stairwell v2026-004
	.nextprevious
	{
		width: 100%;
		flex-wrap: wrap;
		padding-left: var(--square-size);
		padding-right: var(--square-size);
		justify-content: center;
		align-items: flex-start;
		gap: var(--half-square-size);
	}
	*/
	
	.nextprevious
	{
		width: 100%;
		padding-left: var(--square-size);
		padding-right: var(--square-size);
	}
	
	.nextprevious div.next
	{
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
		gap: var(--half-square-size);
	}
	
	.nextprevious a.next-title
	{
		margin: 0;
		padding: 0;
		width: 100%;
		min-width: 100%;
		text-align: center;
	}
	
	.nextprevious a.next-title .label
	{
		display: inline;
	}
	
	.nextprevious img
	{
		/* matching the arrow's margin but on the opposite side, for centering reasons */
		margin-left: calc( var(--square-size) * 1.5);
	}
}


@media screen and (max-width: 32rem)
{
	
	/*
	 * Nextprevious image and arrow shrink a bit
	 */
	 
	* {
		--nextprevious-image-width: calc(var(--square-size) * 6);
		--nextprevious-arrow-width: calc(var(--square-size) * 2);
	}
}

@media screen and (max-width: 27rem)
{
	
	/*
	 * Nextprevious image and arrow shrink even more
	 */
	 
	* {
		--nextprevious-image-width: calc(var(--square-size) * 4);
		--nextprevious-arrow-width: calc(var(--square-size) * 1);
	}
	.nextprevious img
	{
		margin: 0;
	}
	
	.nextprevious .arrow
	{
		margin: 0;
	}
}


/* Figures and Tooltip Boxes */

.gallery
{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  margin-bottom: var(--square-size);
}

.gallery figure
{
width: auto;
height: auto;
margin: var(--half-square-size);
padding: 0;
}

article figure, .gallery, .buttonjail
{
background: #333 url(paperdark.png);
box-shadow: 0 0 var(--half-square-size) #000 inset;
text-shadow:
	  0 0 1em black,
	  0 0 0.2em black;
}

article figure, .tooltipster-content
{
text-align: center;
font: italic 0.85rem/1.2rem "Inter", sans-serif;
}

article .left + p
{
/*text-align-last: right;*/
text-align-last: left;
}

/* things that need to be sized to the grid */

figure, table, .gallery, .tooltipster-base, .content, .nextprevious
{
height: calc-size(auto, round(up, size, var(--square-size) ));
}

.tooltipster-base
{
height: revert !important; /* fallback */
height: calc-size(auto, round(up, size, var(--square-size) )) !important;
}

article figure
{
width: round( down, 50%, var(--square-size) );
margin: var(--square-size) auto;
padding: calc( 0.5 * var(--square-size));
clear: both;
/* in case the figure enlarges to fit the grid pattern, flex to space evenly in the available space */
display: flex;
flex-flow: column nowrap;
justify-content: space-evenly;
}

article figure:has(figure.right)
{
display: block;
}

article figure figure
{
width: 100%;
font-size: 1em;
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
{
width: 100%;
height: auto;
object-fit: contain;
margin: 0 auto;
display: block;
max-height: round(up, 45vh, var(--square-size)); /* it can be a little bigger than usual to match the squares */
box-shadow: 0 0 .4rem rgba(0,0,0,.5);

/* Fallbacks for the alt text */
color: #fff;
text-align: center;
}

article figure figcaption
{
margin: var(--half-square-size) 0 0;
padding: var(--quarter-square-size) var(--half-square-size);
border: 1px solid;
}

article figure figcaption, figure blockquote
{
color: #fff;
}

figure blockquote
{
margin: 0;
}

article figure figcaption i, figure blockquote i
{
color: #00e7e7;
}

article figure figcaption a, figure blockquote a
{
color: #ff93b6;
}

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

article figure.large img, figure.extra-large img
{
max-height: round(up, 60vh, var(--square-size)); /* it can be a little bigger than usual to match the squares */
}

/* Figures with Video */

.vjs-poster img
{
	max-height: unset;
}

figure:has(.video-js)
{
	width: fit-content; /* calc-size fallback */
	width: calc-size(fit-content, round(up, size, var(--square-size) ));
}

.video-js
{
	margin: 0 auto;
	max-width: 100%;
	height: fit-content;
}


/* 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 .left, article .right
{
width: round( down, 30%, var(--square-size) );
margin-top: 0;
}

article .left, .left
{
float: left;
margin-right: var(--square-size);
clear: left;
}

article .right, .right
{
float: right;
margin-left: var(--square-size);
clear: right;
}

footer .right
{
display: block;
float: right;
margin-left: var(--square-size);
clear: right;
}

html:has(.tiedlink1:hover) .tiedlink1, html:has(.tiedlink1:hover) .tiedlink1:not(.article-select) i
, html:has(.tiedlink2:hover) .tiedlink2, html:has(.tiedlink2:hover) .tiedlink2:not(.article-select) i
, html:has(.tiedlink3:hover) .tiedlink3, html:has(.tiedlink3:hover) .tiedlink3:not(.article-select) i
, html:has(.tiedlink4:hover) .tiedlink4, html:has(.tiedlink4:hover) .tiedlink4:not(.article-select) i
, html:has(.tiedlink5:hover) .tiedlink5, html:has(.tiedlink5:hover) .tiedlink5:not(.article-select) i
, html:has(.tiedlink6:hover) .tiedlink6, html:has(.tiedlink6:hover) .tiedlink6:not(.article-select) i
, html:has(.tiedlink7:hover) .tiedlink7, html:has(.tiedlink7:hover) .tiedlink7:not(.article-select) i
, html:has(.tiedlink8:hover) .tiedlink8, html:has(.tiedlink8:hover) .tiedlink8:not(.article-select) i
, html:has(.tiedlink9:hover) .tiedlink9, html:has(.tiedlink9:hover) .tiedlink9:not(.article-select) i
{
	background-color: palevioletred;
	color: white;
	text-decoration: none;
}

html:has(.tiedlink1:hover) .buttonparty .tiedlink1
, html:has(.tiedlink2:hover) .buttonparty .tiedlink2
, html:has(.tiedlink3:hover) .buttonparty .tiedlink3
, html:has(.tiedlink4:hover) .buttonparty .tiedlink4
, html:has(.tiedlink5:hover) .buttonparty .tiedlink5
, html:has(.tiedlink6:hover) .buttonparty .tiedlink6
, html:has(.tiedlink7:hover) .buttonparty .tiedlink7
, html:has(.tiedlink8:hover) .buttonparty .tiedlink8
, html:has(.tiedlink9:hover) .buttonparty .tiedlink9
, html:has(.tiedlink1:hover) .article-select .tiedlink1
, html:has(.tiedlink2:hover) .article-select .tiedlink2
, html:has(.tiedlink3:hover) .article-select .tiedlink3
, html:has(.tiedlink4:hover) .article-select .tiedlink4
, html:has(.tiedlink5:hover) .article-select .tiedlink5
, html:has(.tiedlink6:hover) .article-select .tiedlink6
, html:has(.tiedlink7:hover) .article-select .tiedlink7
, html:has(.tiedlink8:hover) .article-select .tiedlink8
, html:has(.tiedlink9:hover) .article-select .tiedlink9
, html:has(.tiedlink1:hover) .article-select.tiedlink1
, html:has(.tiedlink2:hover) .article-select.tiedlink2
, html:has(.tiedlink3:hover) .article-select.tiedlink3
, html:has(.tiedlink4:hover) .article-select.tiedlink4
, html:has(.tiedlink5:hover) .article-select.tiedlink5
, html:has(.tiedlink6:hover) .article-select.tiedlink6
, html:has(.tiedlink7:hover) .article-select.tiedlink7
, html:has(.tiedlink8:hover) .article-select.tiedlink8
, html:has(.tiedlink9:hover) .article-select.tiedlink9

{
background-color: unset;
}

.article-select.preshrink a
{
	width: calc( var(--square-size) * 7 ) !important;
	height: calc( var(--square-size) * 5 ) !important;
}

.article-select.preshrink b
{
	font-size: 1.2rem !important;
}

.article-select.preshrink .new::after, .article-select.preshrink .updated::after, ..article-select.preshrink .sneaky::after
{
	font-size: 1rem !important;
}


.buttonparty img
{
border: 3px solid black;
}

html:has(.tiedlink1:hover) .buttonparty .tiedlink1 img
, html:has(.tiedlink2:hover) .buttonparty .tiedlink2 img
, html:has(.tiedlink3:hover) .buttonparty .tiedlink3 img
, html:has(.tiedlink4:hover) .buttonparty .tiedlink4 img
, html:has(.tiedlink5:hover) .buttonparty .tiedlink5 img
, html:has(.tiedlink6:hover) .buttonparty .tiedlink6 img
, html:has(.tiedlink7:hover) .buttonparty .tiedlink7 img
, html:has(.tiedlink8:hover) .buttonparty .tiedlink8 img
, html:has(.tiedlink9:hover) .buttonparty .tiedlink9 img
{
border-color: palevioletred;
}

.article-select
{
margin-top: var(--half-square-size);
margin-bottom: var(--square-size);
font-family: revert !important;
}

.article-select i
{
font-family: "Inter" !important;
font-weight: normal
}

.article-select ul li
{
margin: var(--half-square-size) !important;
}

.article-select.right
{
margin-right: calc( var(--square-size) * -0.5) !important;
}

.article-select.left
{
margin-left: calc( var(--square-size) * -0.5) !important;
}

.article-select a
{
width:  round(down, 350px, var(--square-size)) !important;  /* it can be a little smaller than usual to match the squares */
height: round(up,   175px, var(--square-size)) !important;  /* it can be a little bigger than usual to match the squares  */
background-position: center center;
}

.article-select b
{
text-shadow: 0 0 0.25rem #000;
letter-spacing: -0.025rem !important;
}

.article-select .new::after, .article-select .updated::after, .article-select .sneaky::after
{
font-size: 1.25rem !important;
letter-spacing: -0.05rem;
font-family: "Inter";
font-weight: 300 !important;
border: 1px dotted black;
}

.article-select i
{
background-color: unset !important;
}

.article-select br
{
display: none;
}

.article-select a:hover::after
, html:has(.tiedlink1:hover) .article-select.tiedlink1 li
, html:has(.tiedlink2:hover) .article-select.tiedlink2 li
, html:has(.tiedlink3:hover) .article-select.tiedlink3 li
, html:has(.tiedlink4:hover) .article-select.tiedlink4 li
, html:has(.tiedlink5:hover) .article-select.tiedlink5 li
, html:has(.tiedlink6:hover) .article-select.tiedlink6 li
, html:has(.tiedlink7:hover) .article-select.tiedlink7 li
, html:has(.tiedlink8:hover) .article-select.tiedlink8 li
, html:has(.tiedlink9:hover) .article-select.tiedlink9 li

, html:has(.tiedlink1:hover) .article-select .tiedlink1
, html:has(.tiedlink2:hover) .article-select .tiedlink2
, html:has(.tiedlink3:hover) .article-select .tiedlink3
, html:has(.tiedlink4:hover) .article-select .tiedlink4
, html:has(.tiedlink5:hover) .article-select .tiedlink5
, html:has(.tiedlink6:hover) .article-select .tiedlink6
, html:has(.tiedlink7:hover) .article-select .tiedlink7
, html:has(.tiedlink8:hover) .article-select .tiedlink8
, html:has(.tiedlink9:hover) .article-select .tiedlink9
{
outline: var(--quarter-square-size) solid #000 !important;
outline-offset: var(--quarter-square-size) !important;
}

.timeline nav.article-select li
{
  border: 0;
  margin: 0;
  padding: 0;
}

.timeline nav
{
  margin: var(--square-size);
}

nav.left, nav.right
{
/* allow room for the outline hover */
margin-right: var(--square-size);
width: fit-content;
}

nav.right + nav.right, nav.left + nav.left
{
  margin-top: var(--square-size);
  margin-bottom: var(--square-size);
}

nav.article-select.left ul li, nav.article-select.right ul li
{
margin: 0;
}



/* Inverted figure (transparent bg, black text; see the Pokepelago picture in the game currencies article) */

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


article figure.invert img /* so that alt text is readable */
{
color: #000;
background-color: #fff; 
}


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 be white.
 */

background-color: #fff;
}

/* Larger divider pictures that drive a point */

article figure.callout
{
width: 70%;
}

article figure.callout img {
	max-height: round(up, 65vh, var(--square-size)); /* it can be a little bigger than usual to match the squares */
}

/* 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;
align-items: flex-start;
}

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

.comparison > *:first-of-type
{ margin-left: 0; }
.comparison > *:last-of-type
{ margin-right: 0; }

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

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

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

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


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

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

/* Special cases */


.levels-comparison img
{
	object-fit: contain;
}

.levels-comparison .comparison
{
	align-items: end;
}

@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;
	align-items: flex-start;
	}
	
	.parallel > *
	{
	flex: 1 1 auto;
	margin: 0 .75vw;
	}
	
	.parallel > *:first-of-type
	{ margin-left: 0; }
	.parallel > *:last-of-type
	{ margin-right: 0; }

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

	article figure .parallel a:not(:first-of-type) img
	{
	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? */
	
	article figure .comparison
	{
	display: block;
	}
	
	.comparison > *
	{
	margin: 0 auto;
	}
	
	article figure .comparison a:not(:first-of-type) img
	{
	margin-top: 0.5em;
	}
	
	.comparison img
	{
	object-fit: cover;
	height: auto;
	}
}

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


/* Name Options Table */

table.name-options
{
width: round( down, 100%, var(--square-size));
text-align: center;
border: 0;
padding: 0;
border-spacing: var(--half-square-size);
border-collapse: separate;
font-weight: bold;
}

table.name-options.japanese-gen1
{
padding-bottom: var(--half-square-size);
}


/*
@supports not (width: calc-size(auto, size))
{
	
	table.name-options
	{
	padding-bottom: var(--half-square-size);
	}
}
*/

th
{
font-weight: bolder;
}

tr, th, td
{
padding: 0;
min-height: var(--square-size);
background-color: white;
}

td.red-hero
{
color: #c60a0a !important;
}

td.green-hero
{
color: #01733c !important;
}

td.blue-hero
{
color: #003fd0 !important;
}

td.yellow-hero
{
color: #806601 !important;
}

td.other-hero
{
color: black !important;
}

.red-game td
{
background-color: #ffd9d9 !important;
}

.red-game th
{
background-color: #ec4a4a !important;
}

.green-game td
{
background-color: #c4ead8 !important;
}

.green-game th
{
background-color: #3bb57b !important;
}

.blue-game td
{
background-color: #c6d5f9 !important;
}

.blue-game th
{
background-color: #527ee5 !important;
}

.yellow-game td
{
background-color: #fff4ba  !important;
}

.yellow-game th
{
background-color: #ffe141 !important;
color: black !important
}


/* TIMELINE */

ol.timeline
{
padding-left: 0;
margin: var(--square-size) 0;
}

ol.timeline li
{
/* as flex container */
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
font-size: .9em;
letter-spacing: -.5px;
	
/* as itself */
margin: 0;
padding: var(--square-size) 0 var(--square-size) var(--square-size);
border-left: var(--square-size) solid;
}

ol.timeline a
{
  height: 0;
}

ol.timeline li img
{
border-radius: 100px;
border: 2px solid var(--text_color_dark);
margin: 0 var(--square-size) 0 0;
height: calc( var(--square-size) * 4 );
width: calc( var(--square-size) * 4 );

/* fit WITHIN the 4x4 squares and don't overlap the neighbor */
transform: scale(.9);
}


ol.timeline li .image-and-date, ol.timeline li .date-and-blurb
{
/* as flex container */
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-content: flex-start;
}

ol.timeline li .when
{
font-weight: bold;
font-size: 1.1em;
margin: 0;
text-transform: uppercase;
letter-spacing: revert;
}

ol.timeline li .image-and-date. ol.timeline li img
{
/* whaaat is this */
margin: 0.5em 1em 0 0;
}


ol.timeline li .what
{
margin: 0;
padding: 0;
}

ol.timeline li.narration
{
font-style: italic;
border-left-style: dotted;
padding-left: 3.5em;
}

/* REFERENCE LIST and UPDATES PAGE */

.ring-list
{
margin: var(--square-size) 0 0 var(--square-size);
padding-left: 0;
}

.ring-list li
{
margin-bottom: var(--square-size);
list-style: none;
}

.ring-list > li::before, .ring-list > li li::before
{
display: inline-block;
content: "";
width: var(--square-size);
height: var(--square-size);
position: absolute;
margin-left: calc( var(--square-size) * -1);
border-radius: 100%;
transform: scale(0.4);
border: 5px solid teal;
box-sizing: border-box;
}

.ring-list li ul
{
margin-left: calc( var(--square-size) * -0.25);
}

.ring-list li ul li
{
margin: 0;
}

#updates-page
{
	margin: 0;
}

/* LINKS PAGE */

.buttonjail
{
	display: flex;
	flex-flow: column nowrap;
	padding: calc( var(--square-size) * 1 );
	width: 100%;
	margin-bottom: calc( var(--square-size) * 1 );
	min-height: calc( var(--square-size) * 9 );
}

.containment
{
	width: 100%;
	display: flex;
	flex-flow: row nowrap;
	width: fit-content;
	margin: 0 auto;
}

.cell
{
	margin: var(--half-square-size);
	display: flex;
	align-items: center;
	justify-content: center;
}


.buttonjail img
{
	min-width: unset;
	min-height: unset;
	max-width: unset;
	max-height: unset;
	width: auto;
	height: auto;
}

/* RESPONSIVENESS */

@media screen and (max-width: calc(8rem + 48rem + 2rem + 250px + 1rem))
{
	
	/* 
	 * It was (max-width: 1200px) but damn the spec, calc is more accurate.
	 * We no longer have room for the tooltip on the right...
	 * We can make more room by shrinking the left margin of the content...
	 */
	 
	* {
		--content-left-margin: calc( 3 * var(--square-size) );
	}
}


@media screen and (max-width: calc(6rem + 48rem + 2rem + 250px + 1rem))
{
	
	/* 
	 * We can make more room by shrinking the left margin of the content...
	 */
	
	* {
		--content-left-margin: calc( 2 * var(--square-size) );
	}
}

@media screen and (max-width: calc(4rem + 48rem + 2rem + 250px + 1rem))
{
	
	/* 
	 * We can make more room by shrinking the left margin of the content...
	 */
	
	* {
		--content-left-margin: calc( 1 * var(--square-size) );
	}
}

@media screen and (max-width: calc(2rem + 48rem + 2rem + 250px + 1rem))
{
	
	/*
	 * Now we really no longer have room for the tooltip on the right...
	 * - Move it to the middle
	 * - give it a background like the figures
	 * Let the content be centered-ish in the available space (rounded so that it will start on a square, and favor extra space being on the right)
	 * Header image needs to do something else
	 */
	 
	* {
		--content-left-margin: round( down, calc( calc( 100vw - var(--content-width) ) / 2.0), var(--square-size) );
		
		--tooltipster-margin-left: auto;
		--tooltipster-margin-right: auto;
		--tooltipster-left-position: round(down, 25%, var(--square-size));
		--tooltipster-width: round(up, 50%, var(--square-size));
	}
	
	.tooltipster-base
	{
    background: #333 url(paperdark.png);
	box-shadow: 0 0 var(--half-square-size) #000 inset;
    color: white;
	padding: var(--square-size) !important;
	margin: 0 auto;
	text-shadow:
		  0 0 1em black,
		  0 0 0.2em black;
	}
	
	.tooltipster-base i
	{
	color: #00e7e7;
	}
	
	/* header style changes */
	
	article header
	{
		height: calc( 12 * var(--square-size));
	}
	
	article header .header-text
	{
		order: 2;
		background-color: teal;
		width: fit-content; /* calc-size fallback */
		width: calc-size(fit-content, round(up, size, var(--square-size) ));
		max-width: var(--content-width);
		padding: var(--half-square-size);
		position: absolute;
		margin-left: var(--content-left-margin);
		margin-bottom: var(--square-size);
	}
	
	article header .header-image
	{
		order: 1;
		width: 100%;
		min-width: revert;
		background-position: center center;
	}
	
}

@media screen and (max-width: calc(2rem + 48rem + 2rem))
{
	
	/*
	 * Time for the content to use all the available width
	 * Figures move to the middle, but still have some negative space
	 * Link previews stay on the sides, but shrink a bit
	 */
	 
	* {
		--content-left-margin: var(--square-size);
		--content-width: round( down, calc(100vw - var(--square-size) - var(--square-size)), var(--square-size));
		--content-top-margin: 0;
	}
	
	#updates-page
	{
		margin-top: var(--square-size);
	}
	
	p
	{
	text-align: left;
	}
	
	article .left + p
	{
	text-align-last: left;
	}
	
	.content
	{
    margin: var(--content-top-margin) 0 0 var(--content-left-margin);
	padding: 0;
	}
	
	article figure.left, article figure.right
	{
	clear: both;
	float: none;
	margin: var(--square-size) auto 0 auto;
	}
	
	.article-select.left a, .article-select.right a
	, .article-select:has(.tiedlink1) a
	, .article-select:has(.tiedlink2) a
	, .article-select:has(.tiedlink3) a
	, .article-select:has(.tiedlink4) a
	, .article-select:has(.tiedlink5) a
	, .article-select:has(.tiedlink6) a
	, .article-select:has(.tiedlink7) a
	, .article-select:has(.tiedlink8) a
	, .article-select:has(.tiedlink9) a
	{
		width: calc( var(--square-size) * 7 ) !important;
		height: calc( var(--square-size) * 5 ) !important;
	}
	
	.article-select.left b, .article-select.right b
	{
		/* double check with Rosy, do we need this rule? */
		font-size: .5em;
	}
	
	article figure.left, article figure.right, article figure.callout
	{
		width: round( down, 50%, var(--square-size) );
		padding: var(--half-square-size);
	}

	article figure.left img, article figure.right img
	{
		/* match the height of callout images */
		max-height: round(up, 65vh, var(--square-size));
	}	
}

@media screen and (max-width: 40rem)
{
	
	/*
	 *  Shrink font for phone
	 *  Content becomes fully centered on the screen, and might go off-grid on the right side
	 *  Header no longer aligns to the content but also goes centered
	 */
	 
	*
	{
		--square-size: 1.5rem;
	}

	body
	{
		font-size: 0.85rem;
	}
	
	article figure
	{
		font-size: 0.75rem;
	}
	
	figcaption
	{
		line-height: 1rem;
	}
	
	header h1
	{
		letter-spacing: 0.3rem;
		padding-left: 2px;
		padding-right: 2px;
	}
	
	.content
	{
		margin: 0;
		width: 100%;
		padding: var(--square-size);
	}
	
	article header
	{
		justify-content: center;
	}
	
	article header .header-text
	{
		margin-left: 0;
		margin-right: 0;
		width: auto;
		min-width: auto;
		max-width: 90%;
	}
	
	/*
	 * Figures use more of the available width
	 */

	article figure.left, article figure.right, article figure.callout
	{
	width: calc( 100% - var(--square-size) - var(--square-size) );
	}
	
	/* index style changes */
	
	.mainfooter
	{
		display: block;
		margin: var(--square-size);	
	}
	
	footer nav.buttonparty
	{
		padding-left: 0;
		flex-flow: column nowrap;
		justify-content: center;
		width: 100%;
		text-align: center;
		gap: 0 2rem;
		margin-top: 1rem;
	}
	
	.index-blurb
	{
		padding: 0 var(--square-size);
	}
	
	.containment
	{
		flex-flow: column wrap;
	}
	
	/* article select style changes */
	
	.article-select
	{
		margin-bottom: var(--half-square-size);
	}
	
	.article-select.left
	{
		margin-right: var(--half-square-size);
	}
	
	.article-select.right
	{
		margin-left: var(--half-square-size);
	}
		
	.article-select.left b, .article-select.right b
	, .tiedlink1 b
	, .tiedlink2 b
	, .tiedlink3 b
	, .tiedlink4 b
	, .tiedlink5 b
	, .tiedlink6 b
	, .tiedlink7 b
	, .tiedlink8 b
	, .tiedlink9 b
	{
		font-size: 1.2rem !important;
	}
	
	.article-select .new::after, .article-select .updated::after, .article-select .sneaky::after
	{
		font-size: 1rem !important;
	}
	
	article #info
	{
		line-height: 1rem;
	}

	
}