/* Sooper fonts */
/* I made these! */


/* Generated by Font Squirrel (http://www.fontsquirrel.com) on August 4, 2012 */

@font-face {
    font-family: 'SooperSansThick';
    src: url('/fonts/sooper/soopersans-thick-webfont.eot');
    src: url('/fonts/sooper/soopersans-thick-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/sooper/soopersans-thick-webfont.woff') format('woff'),
         url('/fonts/sooper/soopersans-thick-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
	}

@font-face {
    font-family: 'SooperSerifThinCondensed';
    src: url('/fonts/sooper/sooperserif-thincondensed-webfont.eot');
    src: url('/fonts/sooper/sooperserif-thincondensed-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/sooper/sooperserif-thincondensed-webfont.woff') format('woff'),
         url('/fonts/sooper/sooperserif-thincondensed-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
	}

@font-face {
    font-family: 'SooperSerifThinCondensed2x';
    src: url('/fonts/sooper/sooperserif-thincondensed2x-webfont.eot');
    src: url('/fonts/sooper/sooperserif-thincondensed2x-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/sooper/sooperserif-thincondensed2x-webfont.woff') format('woff'),
         url('/fonts/sooper/sooperserif-thincondensed2x-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
	}


/*
 * Web Font from fontspring.com
 *
 * Vendor:      Hoftype
 * License URL: http://www.fontspring.com/fflicense/hoftype
 *
 */


@font-face {
    font-family: 'CassiaWeb-full';
    src: url('/fonts/cassia-full/cassialig-web-full.eot');
    src: url('/fonts/cassia-full/cassialig-web-full.eot?#iefix') format('embedded-opentype'),
         url('/fonts/cassia-full/cassialig-web-full.woff') format('woff'),
         url('/fonts/cassia-full/cassialig-web-full.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'CassiaWeb-full';
    src: url('/fonts/cassia-full/cassialigita-web-full.eot');
    src: url('/fonts/cassia-full/cassialigita-web-full.eot?#iefix') format('embedded-opentype'),
         url('/fonts/cassia-full/cassialigita-web-full.woff') format('woff'),
         url('/fonts/cassia-full/cassialigita-web-full.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;

}

html {

	/* default background color */
	--light-gray: #e6e6e6;
	/* background-color in dark mode */
	--almost-black: #161616;

	/* default foreground color */
	--blackish: #222;
	/* foreground color in dark mode */
	--whiteish: #eee;
	
	/* accent colors */
	--cyan: #0092ff;
	--green: #71a300;
	--orange: #d46d00;
	--magenta: #ea3daa;
	--yellow: #b08900;
	
	/* for highlighting things! */
	--highlighter: rgba(255 255 200 / 0.75);
}

body {
	font-family: 'CassiaWeb-full', Georgia, serif;
	background-color: #e6e6e6;
	color: #222;
	margin: 0;
	padding-bottom: 3em;
	font-size: 1.15625rem; /* 18.5px */
	line-height: 1.6;
	min-width: 12rem;
	font-kerning: normal;
	}

* { box-sizing: border-box; }

.lights-out {
	background-color: #161616;
	color: #eee;
	}

.white-out {
	background-color: white;
	}

a {
	color: #0092ff;
	text-underline-offset: 0.1625em;
	text-decoration-color: rgb( 0 146 255 / 0.5 );
	}
	a:hover {
		text-decoration-color: rgb( 0 146 255 / 1 );
		}
	a:active {
		color: yellow;
		}
		 
.accent-color {
	color: #0092ff;
	}

.accent-background-color {
	background-color: #0092ff;
	}

.hide-text {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	}


/* https://moderncss.dev/12-modern-css-one-line-upgrades/#scroll-margin-topbottom */
[id] {
	scroll-margin-top: 2.5lh;
}


#e {
	display: block;
	width: 6em;
	height: 6em;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1em;
	}
	/* don't show our fallback img intitially if we're not going to need it */
	/* ie if modernizr has set the svg and js classes on the html element after detecting support */
	.js.inlinesvg #e-to-replace {
		display: none;
	}	
	@media all and (min-width: 32em) { #e {
			width: 7em;
			height: 7em;
			}}
	
	@media (min-width: 56em) { #e {
			width: 7.5em;
			height: 7.5em;
			}}

	#e-goes-here a:hover {
		border-bottom: none;
		}



header .big-h {
	text-align: center;
	}

.big-h {
	font-family: 'SooperSansThick', 'Helvetica', sans-serif;
	line-height: 1;
	font-weight: bold;
	font-size: 2.5em;
	margin: 0.1em 0;
	}
	@media (min-width: 32em) {
		.big-h {
			font-size: 3em;
		}
	}
	@media (min-width: 40em) {
		.big-h {
			font-size: 3.5em;
		}
	}
	
.little-h {
	font-family: 'SooperSerifThinCondensed', 'Courier New', 'Courier', serif;
	font-weight: normal;
	font-size: 2.5em;
	line-height: 1;
	}
	.little-h code {
		font-size: 0.625em;
	}
	
.tiny-h {
	font-family: 'SooperSerifThinCondensed', 'Courier New', 'Courier', serif;
	font-weight: normal;
	font-size: 2em;
	line-height: 1;
	}
	.tiny-h code {
		font-size: 0.625em;
	}

.center {
	text-align: center;
	}

.lights-out .big-h:not(a), .lights-out .little-h:not(a) {
	color: white;
	}

section > .little-h {
	margin-top: 5rem;
	text-transform: uppercase;
	}


.info-line {
	font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
	color: #666;
	font-size: 0.9rem;
	line-height: 1.25;
	}
	.info-line.center { margin-left: 0; }
	
	.lights-out .info-line {
		color: #444;
		}
	.info-line:not(.footnotes) li {
		display: inline;
		}
	.info-line:not(.footnotes) li:before {
		content: " — ";
		}
	.info-line:not(.footnotes) li:first-child:before {
		content: none;
		}
		



em {
	font-style: italic;
	}

			blockquote {
				padding-left: 1em;
				margin: 2em 0;
				border-left: 3px solid #aaa;
			}


blockquote p {
	margin-left: 1em;
	}
blockquote p:first-child:before {content: '“'}
blockquote p:last-child:after {content: '”'}

address {
	margin: 1em auto;
}


.top-text {
	font-family: 'SooperSerifThinCondensed';
	font-weight: normal;
	width: 100%;
	font-size: 2.25em;
	font-weight: normal;
	line-height: 1;
	margin-bottom: 0.5em;
	margin-top: 0;
	padding-left: 0;
	}
	.top-text > * { display: inline-block; }
	.top-text > *:after {content: ", ";}
	.top-text > *:last-child:after {content: none;}
	
	@media (min-width: 28em) { nav ul.top-text {
		margin-bottom: 1em;
		}}
	
	@media (min-width: 48em) { .top-text {
		font-size: 2em;
		}}


/* typesetting finickiyness */


/* citations in things that don't have italics */
.big-h cite, .little-h cite, .thumb-h cite {font-style: normal;}
.big-h cite:before, .little-h cite:before, .thumb-h cite:before {content: '“'}
.big-h cite:after, .little-h cite:after, .thumb-h cite:after {content: '”'}


/* small caps what what */

.small-caps {
	font-variant: all-small-caps; /* will give fake small caps in a font without opentype small caps feature/glyphs so... don't use those */
	font-size: 1.05em;
	letter-spacing: 0.05em;
}

/* code */

code, var {
	background-color: #ddd;
	padding: .1875em .375em; /* has to be this big to cover up link underline when they're links! */
	border-radius: .25em;
	font-family: monospace;
	white-space: nowrap;
	}
var {
	font-style: normal;
}
pre {
	background-color: #ddd;
	padding: 1em 1.5em;
	border-radius: 1em;
	overflow: scroll;
	tab-size: 2;
	}
	pre code, code pre { white-space: pre; }
	pre code { padding: 0; }
	.info-line code, .info-line pre {
		background-color: #eee;
	}



/* footnotes */

sup { /* fakes, overwritten with real opentype glyphs later, if they exist and are supported */
	font-size: 65%;
	vertical-align: super;
	line-height: 0;
	}

.footnote-hr {
	width: 20%;
	height: 1px;
	border: 0;
	background-color: #ccc;
	margin-top: 4rem;
	}
	.lights-out .footnote-hr {
		background-color: #444;
		}

.footnotes {
	margin-top: 2em;
	}
	.footnotes li {
		list-style: decimal;
		margin: 1rem;
		line-height: 1.5;
		}
	.footnote-return-link {
		margin-left: 0.5em;
		}


/* fancy "real" footnote marks (& custom fractions & anything sup/sub) */

@supports (font-variant-position: super) and (font-variant-position: sub) {

	sub, sup { /* undo fake stuff */
		vertical-align: baseline;
		font-size: 100%;
		line-height: inherit;
	}

	/* still not supported in Chrome, 2018-01-26 */
	sub { font-variant-position: sub; }
	sup { font-variant-position: super; }

}

/* for Chrome, still, 2018-01-26 
   delete this when Chrome supports font-variant-position */
@supports ( not ( (font-variant-position: super) and (font-variant-position: sub) ) ) and ( (font-feature-settings: "sups") and (font-feature-settings: "subs") ) {

	sub, sup {
		vertical-align: baseline;
		font-size: 100%;
		line-height: inherit;
	}

	sub { font-feature-settings: "subs"; }
	sup { font-feature-settings: "sups"; }

}


/* asterisms (for dividing sections of articles, kinda like an hr...) */

.asterism, .lights-out .asterism {
	margin-top: 6rem;
	margin-bottom: 6rem;
	text-align: center;
	color: #888; /* same as info line */
	}

footer p {
	margin-top: 2em;
	text-align: center;
	}	
		
footer {
	clear: both;
	}

small {
	display: block;
	width: 100%;
	text-align: center;
	}


/* bodytext paragraphs */


article p {
 	margin: 1rem 0;
 	}
 
article ul, article ol {
	padding-left: 1em;
	list-style: disc;
	}
	article header ul, article header ol {
		padding-left: 0;
		}

article > *:not(.wide) {
 	max-width: calc( 100% - 3rem );
	margin-left: 1.5rem;
	margin-right: 1.5rem;
	}

audio {
	display: block;
	}

.pagination {
	text-align: center;
	text-transform: uppercase;
	margin-top: 3em;
	margin-bottom: 3em;
	}
	.pagination.newer {
		margin-top: 1em;
		margin-bottom: 1em;
	}

iframe { margin-top: 1em; }

.spinner {
	min-height: 32px;
	background-image: url(/images/16x16-Spinner.gif);
	background-repeat: no-repeat;
	background-position: center;	
}

picture {
	display: contents;
}

/* LET'S SET THE METER OF THE TYPE AND THE ROOT BODY FONT-SIZE ACROSS ALL REASONABLE WINDOW SIZES */

/* default is 16px/1rem working our way down from that to super small sizes */


@media (max-width: 15em) {
	body {
		font-size: 0.9375rem; /* 15x */
		}	
	}


@media (max-width: 13em) {
	body {
		font-size: 0.875rem; /* 14px */
		line-height: 1.5;
		}	
	}


@media (max-width: 28em) {
	p {
		-webkit-hyphens: auto;
		hyphens: auto;
		}
}

/* default is 19px / 1.1875 rem  working our way up from that... */

@media (min-width: 28em) {
	article > *:not(.wide) {
		max-width: 24rem;
		margin-left: auto;
		margin-right: auto;
		}
	}	

@media (min-width: 40em) {
	body {
		line-height: 1.7;
		}
	article > *:not(.wide) {
		max-width: 32rem;
		}	
	}

@media (min-width: 48em) {
	body {
		line-height: 1.8;
		}
	article > *:not(.wide) {
		max-width: 36rem;
		}
	}


@media (min-width: 60em) {
	body {
		font-size: 1.25rem; /* 20px */
		}
	article > *:not(.wide) {
		max-width: 42rem;
		}
	}

@media (min-width: 72em) {
	body {
		font-size: 1.375rem; /* 22px */
		}
	article > *:not(.wide) {
		max-width: 48rem;
		}
	}

figure {
	margin: 0;
}