@font-face {
  font-family: 'Atlas Grotesk';
  src: url("../fonts/AtlasGrotesk-Regular-Web.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'Atlas Grotesk';
  src: url("../fonts/AtlasGrotesk-RegularItalic-Web.woff") format("woff");
  font-weight: normal;
  font-style: italic; }

@font-face {
	font-family: TRMonoBeta;
	src: url('../fonts/TR_Mono_Beta_v2.2-Regular.woff') format('woff'),
       url('../fonts/TR_Mono_Beta_v2.2-Regular.woff2') format('woff2');
}

/* reset */

* {
	margin: 0px;
	padding: 0px;
}

.hide {
	display: none !important;
}

html {
	scroll-behavior: smooth;
}
.quickScroll {
	scroll-behavior: unset !important;
}
body, #instructions p {
	font-family: 'Atlas Grotesk', 'helvetica', 'arial', sans-serif;
	font-size: 16px;
	line-height: 24px;

	font-size: 1.125vw;
	line-height: 1.625vw;
	max-width: 100vw;
	overflow-x: hidden;
}

a {
	color: black;
	text-decoration: none;
	background: rgba(0,0,0,.124);
}

a:hover {
	color: white;
	text-decoration: none;
	background: rgba(0,0,0,1);
}


h1, .spread.image h2 {
	font-family: TRMonoBeta, 'courier', monospace;	
	text-transform: uppercase;
	font-size: 3em;	
	line-height: 1.25em;
	margin-bottom: 1.5em;
	font-weight: normal;
}

h3 {
	font-size: .8em; 
	margin-bottom: 1.5em;
}

#cover h1{
	font-size: 5.25em;	
	line-height: 1.1em;	
	margin-bottom: .5em;

	text-align: center;
}

#intro h1, #intro h2 {
	font-family: 'Atlas Grotesk', 'helvetica', 'arial', sans-serif;
	font-weight: normal;
	text-transform: none;
	font-size: 1.25em;
	line-height: 1.5em;
	margin-bottom: 0;
}

#intro h3 {
	margin: .25em 0em 1.625em;
}

p, ul, #print-all {
	font-family: TRMonoBeta, 'courier', monospace;	
	margin-bottom: 1.25em;
}

p.answer {
	font-family: 'Atlas Grotesk', 'helvetica', 'arial', sans-serif;
}

p.question {
	font-size: 1.04em;
	line-height: 1.625em;
}

#cover p, .colophon p, .colophon ul, .speaker, .notes, .footnotes {
	font-family: 'Atlas Grotesk', 'helvetica', 'arial', sans-serif;
	font-size: .8em;
}

#cover p, .colophon p, .colophon ul {
	line-height: 1.35em;
}

#toc ul {
	font-size: .8rem;
}

.endNote {
	font-family: TRMonoBeta, 'courier', monospace;		
	font-size: 1.5em;
	line-height: 1.125em;
}

.pageNum {
	font-family: 'Atlas Grotesk', 'helvetica', 'arial', sans-serif;
	font-size: 1.75em;
}



/* book effect */

#gutter {
	position: fixed;
    display: flex;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;	

    pointer-events: none;

    z-index: 100000;
}

.left-gutter {
    width: 50%;
    height: 100%;
    box-shadow: 0px 0 27px 0 black;
}

.right-gutter {
	width: 50%;
    height: 100%;
    box-shadow: 0px 0 27px 0 black;
}

/* background colors */

#background {
	position: fixed;
    display: flex;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;	

    pointer-events: none;

    z-index: 0;
}

.blue {
    width: 50%;
    height: 100%;
    background: blue;
}

.red {
	width: 50%;
    height: 100%;
    background: red;
}

/* back to top link */

a#up-arrow {
	position: fixed;
	display: block;
	bottom: 20px;
	right: 20px;
	z-index: 100000;
	background: none;
}

a#up-arrow:hover {
	color: black;
}

.printPreview a#up-arrow {
	display: none;
}

/* pages */

section {
	position: relative;
	z-index: 10000;
	mix-blend-mode: lighten;

	background: white;
}

.spread {
	width: calc(100vw - 3px);
	float:left;
	vertical-align: top;
	text-align: center;

	position: relative;
	
}

.page {
	width: calc(50vw - 6px);
	min-height: 100vh;

	box-sizing: border-box;
	padding: 40px 60px;

	display: inline-block;
	vertical-align: top;

	text-align: left;

	position: relative;
}

.spread.image h2 {
	text-align: center;
    width: 100%;
    max-width: 100%;
    position: absolute;
    bottom: .75em;
    z-index: 0;	
    margin-bottom: 0;
}

.pageNum {
	bottom: 1.25rem;
	left: 1.25rem;
	z-index: 1;
	position: absolute;
}

.endNote {
	text-transform: uppercase;
	text-align: center;
	position: absolute;
    width: 100%;
    box-sizing: border-box;
    padding: 1.5vw;
    bottom: 1.5em;	
}

.endNote a{
	display: block;
	background: none;
}

.pattern {
	/*background-image: url(../img/dots.png);*/
	background-repeat: repeat;
	background-size: 80px;
}

/* cover */

#cover .page {
	padding: 20px 40px;
}


#cover p{
	text-align: center;
	position: absolute;
	bottom: 10px;
	width: calc(100% - 80px);
}


/* toc */

#toc h1 {
	width: 100%;
	text-align: center;
}

#toc ul {
	margin: 40px 0px 0px;
}

#toc ul li {
	list-style-type: none;
}

.page-number-toc {
	width: 20px;
	text-align: center;
	margin-right: 1vw;
	display: inline-block;
}

#toc ul li a{
	background: none;
}

#toc ul li a:hover{
	color: black;
	opacity: .5;
}


/* intro */

#intro h1, #intro h2, #intro h3{
	padding: 0px 50px;
}



#intro p{
	margin-bottom: 0px; 
}

/* interviews */

p.question {
	text-indent: 60px;
	position: relative;
}

.speaker {
	position: absolute;
	left: -60px;
	top: 2px;
}

.columnScroll {
	position: relative;
	min-height: 100vh;
	min-width: 100vw;
}

.spread {
	overflow: hidden;
}

.spread.image img {
	display: block;
	width: 100vw;
	height: 100vh;
	object-fit: contain;
}

.columns {
	column-width: 50vw;
	height: 100vh;
	column-gap: 0;
	padding-top: 50px;
	padding-bottom: 50px;
	box-sizing: border-box;
	min-width: 50vw;
	position: absolute;
	top: 0;
	left: 0;
}

.columns.hasHeader {
	left: 100vw;
}

.columns p, .footnotes {
	margin-left: 50px;
	margin-right: 50px;
}

.breakStop {
	break-inside: avoid;
}

.breakStop.center {
	text-align: center;
}

.columns img {
	max-height: calc(95vh - 100px);
	width: auto;
}

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}

sub { 
  top: 0.4em; 
}



/* colophon */

.colophon h1 {
	width: 100%;
	text-align: center;
}

.colophon ul li {
	margin-bottom: .1rem;
	list-style-type: none;
}

/* 404 */

#not-found.page {
	width: calc(100vw - 12px);
	min-height: 100vh;
}

/* img */

img {
	width: auto;
	max-height: 100vh;
	z-index: 0;
}
/* for lazy loading */
img[src=""] { visibility: hidden; }


.spread.image h1 {
	text-align: center;
	width: 100%;
	max-width: 100%;
	position: absolute;
	top: .75em;
  	z-index: 0;
}

/* logos */

#logogrid {
	display: flex;
	flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

#logogrid img {
	max-width: 17vw;
	height: auto;

	padding: 3vh 1vw;
}

#logogrid img.single {
	max-width: 8vw;
}

#logogrid img.half {
	max-width: 3vw;
}


/* sections width */

section {
	width: 100vw;
	height:100vh;
	overflow-x: scroll;	
	overflow-y: hidden;
	scroll-behavior: smooth;
}

/*.page:hover {
	cursor: e-resize;
}
*/

/* print interface */

#controls {
	position: fixed;
	top: 0px;
	left: 0px;
	background-color: rgba(255,255,255,.98);
	z-index: 1000000;
	mix-blend-mode: normal;
	display: flex;
  	flex-direction: column;
  	justify-content: center;

  	opacity: 0;
  	pointer-events: none;
}

#controls.show {
	opacity: 1;
	pointer-events: all;
}

#print-check {
	column-count: 2;
	column-gap: 100px;
	list-style-type: none;
	line-height: 2.25em;
	padding: 0px 25vw;
}

input {
	margin-right: 12px;
	transform: scale(1.5);
}

#instructions {
	position: absolute;
	top: 10px;
	left: 20px;
	width: 60%;
	max-width: 800px;
	min-width: 200px;
}

#instructions p {
	font-size: 14px;
	line-height: 1.35em;
}

#make-book {
	top: 8px;
	right: 8px;
	position: fixed;
	z-index: 10000000;
	margin: 0px;

	background-color:transparent;
	border-radius:6px;
	color:rgb(0, 0, 0);
	cursor:pointer;
	display:block;
	font-family:-apple-system, system-ui, Roboto, sans-serif;
	font-size:14px;
	font-stretch:100%;
	font-style:normal;
	font-weight:400;
	height:29px;
	line-height:19.6px;
	padding: 4px 8px;
	text-align:center;
	outline: none !important;	

	border: none;
}

#make-book.checklist {
	background-color:rgb(0, 0, 0);
	color:rgb(255, 255, 255);

}
.mobile #make-book {
	display: none;
}

#cancel {
	top: 12px;
    right: 120px;
	position: fixed;
	z-index: 10000000;
	font-size: 14px;
}

/* print cover */

#print-cover {
	font-size: 16px;
    background-color: white;
    position: relative;
    /* to account for bleed*/
    top: 0.125in;
    left: 0.125in;
    box-sizing: border-box;
}

#print-cover, #print-cover h1, #print-cover h2 {
	font-family: TRMonoBeta, 'courier', monospace;	
	font-size: 14pt;
	line-height: 17pt;
	font-weight: normal;
	text-transform: none;
}

/* images */

#print-cover .cover-logo {
	position: absolute;
	mix-blend-mode: multiply;
}

/* back */

.cover-back {
	position: absolute;
	left:0;
	width:4.25in;
	height:6.875in;
}

#cover-toc {
	list-style-type: none;
	margin: .3in;
}

.print-page-number {
	width: .425in;
	display: inline-block;
}

/* front */

.cover-front {
	position: absolute;
	right:0;
	width:4.25in;
	height:6.875in;
	display:grid;

	justify-items:center;
	align-items:center;
}

.cover-front h1 {
	position: absolute;
	top: .3in;
	left: .3in;
}
/* spine */

.spine {
	width: .382in;
	height: 6.875in;    

    position: absolute;
    top: 0px;
    left: 4.25in;

}

#print-cover .spine h2{
	font-size: 8pt;
}

#spine-title, #spine-timestamp {
	position: absolute;
    top: .15in;
    transform: rotate(90deg);
    transform-origin: center left;
    width: 6.375in;
    left: 50%;
}

#spine-timestamp {
	text-align: right;
}

/* devices */


@media only screen and (max-width: 1280px) {
	body:not(.printPreview) {
		font-size: 1.325vw;
		line-height: 2vw;

	}
}

@media only screen and (min-width: 800px) {
	.lastBeforeEndNote {
		margin-bottom:150px;
	}
}

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

	body:not(.printPreview) {
		font-size: 2.5vw;
		line-height: 3.5vw;
	}

	body:not(.printPreview) h1 {
		margin-top: .5em;
	}

	body:not(.printPreview) #cover h1, body:not(.printPreview) #toc h1{
		font-size: 3em;
	}	

	body:not(.printPreview) #cover p,
	body:not(.printPreview) .colophon p,
	body:not(.printPreview) .colophon ul,
	body:not(.printPreview) .speaker,
	body:not(.printPreview) h3 {
		font-family: 'Atlas Grotesk', 'helvetica', 'arial', sans-serif;
		font-size: .9em;
	}

	/* book effect */


	#gutter, #background, .empty {
		display: none;
	}

	/* sections */

	body:not(.printPreview) section {
		position: relative;
		z-index: 10000;
		mix-blend-mode: unset !important;

		background: white;
		height: auto;
		min-height: 100vh;
	}

	body:not(.printPreview) .spread {
		width: calc(200vw - 3px);
		display: inline-block;
		vertical-align: top;
		text-align: center;

		position: relative;

	}

	body:not(.printPreview) .page {
		width: calc(100vw - 6px);
		height: 100vh;
	}

	body:not(.printPreview) .columns {
		position: relative;
		height: auto;
		column-width: 100vw;
	}
	
	body:not(.printPreview) .columns.hasHeader {
    	left: 0vw;
	    padding-bottom: 150px;
	}

	/* cover */

	body:not(.printPreview) #cover h1:nth-child(2){
		margin-bottom: 100px;
	}

	/* img */

	body:not(.printPreview) img {
		width: calc(100% + 3px);
    	height: auto;
	}

	body:not(.printPreview) .spread.image h1 {
	    top: .125em;
	}


	/* single column */

	body:not(.printPreview) .spread {
		width: calc(100vw - 3px);
	}

	body:not(.printPreview) .page {
		width: calc(100vw - 6px);
		/*min-height: 100vh;*/
		height: auto;

		padding: 0px 20px;

	}

	body:not(.printPreview) .pageNum {
		bottom: auto;
		top: 1.25rem;
	}

	/* section widths */
	body:not(.printPreview) .scroll {
		width: 100vw !important;
		min-height: 100vh;
		padding: 0px 0px 100px;
	}		

	/* logos */

	body:not(.printPreview) #logogrid {
	    justify-content: space-between;
	}

	body:not(.printPreview) #logogrid img {
		max-width: 32vw;
	}


	body:not(.printPreview) #logogrid img.double {
		max-width: 22vw;
	}

	body:not(.printPreview) #logogrid img.single {
		max-width: 12vw;
	}

	body:not(.printPreview) #logogrid img.half {
		max-width: 8vw;
	}	

	/* background colors */

	body:not(.printPreview) section {
		background: red;
		mix-blend-mode: none;
	}

	body:not(.printPreview) section:nth-child(2n) {
		background: blue;
	}

	body:not(.printPreview) .scroll {
		background: white;
		mix-blend-mode: screen;
	}

/*	section .page-number {
		color: red;
		mix-blend-mode: none;
	}

	section:nth-child(2n) .page-number {
		color: blue;
		mix-blend-mode: none;
	}
*/

	body:not(.printPreview) #print-check {
		column-count: 2;
		column-gap: 100px;
		list-style-type: none;
		line-height: 1.5em;
		padding: 0px 5vw;
	}

	#not-found.page {
		width: calc(100vw - 12px);
		min-height: 100vh;
		padding: 0px;
	}

	#not-found.page h1 {
		padding: 20px;
		margin: 0px;
	}


}

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

	body:not(.printPreview) #instructions {
		top: auto;
		bottom: 10px;
		width: calc(100vw - 20px);
		max-width: 100vw;
		min-width: 100vw;
	}

	body:not(.printPreview) #instructions p{
		width: calc(100vw - 30px);
	}

	body:not(.printPreview) #print-check {
		line-height: 2.5em;
    	column-count: 2;
    	padding: 0px 5vw;
    	font-size: 1em;
	}

		
}

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

	body:not(.printPreview) {
		font-size: 3.75vw;
		line-height: 5.5vw;
	}

	body:not(.printPreview) #print-check {
    	column-count: 1;
    	padding: 0px 0px 0px 5vw;
    	line-height: 2.125em;
    	font-size: .825em;
	}


		
}

@media only screen and (max-height: 700px) {

	#toc ul {
		columns: 2;
	}

		
}



@media only print {
	#background, .blue, .red, #gutter {
		display: none;
	}

}

.printPreview section, .printPreview #gutter {
	display: none;
}

/* printing type */

.📖-page, .📖-page .pageNum {
	font-size:9pt;
	line-height: 12pt;
}

.📖-page p.question{
	font-size:8.75pt;
	line-height: 12pt;
	text-indent: 30px;
}

.📖-page .speaker{
	left: -30px;
}

.📖-page .footnotes {
	margin-left: 0px;
	margin-right: 0px;
}


/* end printing type */

.📖-page .page {
	width: unset;
	padding: unset;
	min-height: unset;
}
.📖-page .spread {
	width: unset;
	float:unset;
	height: 100%;
	text-align: left;
}
.📖-page .spread.image h1 {
    right: 12pt;
    max-width: unset;
    width:unset;
    top: 44pt;
    font-size: 2.5em;
    left:50%;
    white-space: normal;
    text-align: center;
}
.📖-page .spread.image h2 {
	font-family: TRMonoBeta, 'courier', monospace;
	right:0;
	left:50%;
	text-align: center;
	bottom:0.75in;
	font-size:2.5em;
	position: absolute;
	font-weight: 100;
	width:50%;
}

.📖-page .spread.image img.double {
	width:100%;
	height:100%;
	object-fit: contain;
	max-height: unset;
	top:0;
	left:0;
	position: absolute;

}
.📖-page .spread.image img.single {
	width:50%;
	height:100%;
	left:0;
	top:0;
	position: absolute;
	right:unset;
	object-fit: contain;
	max-height: unset;

}

.📖-page .pageNum {
	bottom: 0px;
	left: 0px;
}

.📖-page #logogrid img {
	max-width: 1.325in;
    max-height: 0.7in;
    padding: 0.125in;
}
.📖-running-header {
    position: absolute;
    text-align: left !important;
    bottom: 18pt !important;
    font-size:9pt !important;
    top:unset !important;
    font-size:1em;
}
.📖-footnote {
	font-family: TRMonoBeta, 'courier', monospace;
    margin-bottom: 1.25em;
    font-size: 1.25em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.25em;
}
.📖-footnote span {
	display: block;
}
.📖-page .breakStop img {
	width:100%;
}
.pageNum-2 {
	display: none;
}