/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

/* ----------------------------------------------------------------------------
	Contact Form */
.secret {
	position: absolute;
	left: -9999px;
}

:root {
	/* Site Max Width Override */
	--site-max: 1140px;

	/* Contact Form Alerts */
	--alert: rgb(158,158,158);
	--alert-txt: rgb(255,255,255);
	--alert-success: rgb(25,208,25);
	--alert-error: rgb(208,25,25);

	/* Fonts */
	--font-monospace: "Operator Mono SSm A", "Operator Mono SSm B", SFMono-Regular, Menlo, Consolas, Courier, monospace;
	--font-sans: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
	--font-sans-tabular: "Gotham SSm Tabular A", "Gotham SSm Tabular B", Helvetica, Arial, sans-serif;
	--font-serif: "Quarto A", "Quarto B", Georgia, serif;
	--font-serif-lining: "Quarto LF A", "Quarto LF B", Georgia, serif;

}

/* CSS Custom Properties - Default Theme */
.light-theme {
	--site-bkgd: rgb(255,255,255); /* white */
	--site-bkgd-trans: rgba(255,255,255,.9);
	--logo: rgb(15,20,26);
	--overset-txt: rgba(255,255,255,.75);
	--overlay: rgba(0,0,0,.12);
	--overlay-dark: rgba(0,0,0,.88);
	--overlay-bkgd: rgba(255,255,255,.75);
	--main-txt: rgb(15,20,26);
	--main-txt-invert: rgb(255,255,255,.85);
	--txt-selection: rgb(232,207,140);
	--meta-txt: rgba(28,37,46,.65);
	--head-txt: rgb(209,160,26);
	--action-focus: rgba(28,37.46,.25);
	--action-normal: rgb(15,20,26);
	--action-active: rgb(209,160,26);
	--footer-txt: rgba(15,20,26,.5);
	--keyline: rgba(220,220,220,.75);
	--field-border: rgb(228,228,228);
	--keyboard-bkgd: rgba(220,220,220,.5);
	--keyboard-border: rgb(180,180,180);
	--keyboard-keys: rgb(15,20,26);
	--line-anim: rgb(209,160,26);
	--highlight: rgba(209,160,26,1);
	--book-shdw: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

/* End of Custom Properties */

/* ----------------------------------------------------------------------------
	TEXT SELECTION */

::-moz-selection {
	color: var(--main-txt-invert);
	background: var(--txt-selection);
}

::selection {
	color: var(--main-txt-invert);
	background: var(--txt-selection);
}

/* ----------------------------------------------------------------------------
	DEFAULTS */

html {
	font-size: 62.5%; /* Reset to 10px baseline */
}

* {box-sizing: border-box;}

body {
	background-color: var(--site-bkgd);
	color: var(--main-txt);
	font-family: var(--font-sans);
	font-size: 1.6rem;
	font-weight: 400;
	font-style: normal;
	line-height: 2.4rem;
	margin: 0 auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

#fb-foot {
	display: inline;
	height: 0 !important;
}

/* ----------------------------------------------------------------------------
	TEXT DEFAULTS */

a {
	cursor: pointer;
	font-weight: 700;
}

a:link, a:visited {
	color: var(--action-normal);
	text-decoration: none;
}

a:hover, a:active {
	color: var(--action-active);
	text-decoration-thickness: .2rem;
	text-underline-offset: 4px;
	text-decoration-color: var(--action-normal);
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
}

h1, h2, h3 {
	font-family: var(--font-serif-lining);
	font-style: normal;
	font-weight: 700;
	letter-spacing: .25px;
	margin-bottom: 2.4rem;
}

h1 {
	font-size: 3.6rem;
	line-height: 4.4rem;
}

h1.section-title {
	margin-bottom: 0;
	position: relative;
}

/* remove this after fixing microseasons issue */
/*h1.section-title.spaced {margin-top: 5.6rem;}*/

h1.title {margin-bottom: 1rem;}
h1.title::after {
	color: var(--action-active);
	content: '.';
	margin-left: 0.2rem;
}

h1.spaced {margin-bottom: 2.4rem;}

h1.pad {margin-top: 3.2rem;}

h2 {
	font-size: 2.8rem;
	line-height: 3.2rem;
}

h3 {
	font-size: 2.4rem;
	line-height: 2.8rem;
	margin-bottom: 2.8rem;
}

h4 {
	font-size: 2.0rem;
	line-height: 2.4rem;
	margin-bottom: 1.2rem;
}

h5, h6 {
	font-size: 1.6rem;
	letter-spacing: 1px;
	line-height: 2.4rem;
	text-transform: uppercase;
}

h6 {
	font-size: 1.2rem;
	line-height: 1.8rem;
}

p {
	line-height: 2.4rem;
	margin-bottom: 2.4rem;
}

blockquote {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	letter-spacing: .5px;
	margin: 0;
	word-spacing: 2px;
}

sup {
	font-size: 1.2rem;
	padding: 0;
}

.review-item sup {
	padding-left: 0.4rem;
	vertical-align: top;
}

time,
.author {
	color: var(--meta-txt);
	display: block;
	font-family: var(--font-sans-tabular);
	font-style: normal;
	font-weight: 400;
	margin-bottom: 2.4rem;
}

figure {margin: 0;}

img {
	height: auto;
	vertical-align: top;
}

figcaption {
	color: var(--meta-txt);
	font-family: var(--font-monospace);
	font-size: 1.2rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.8rem;
	text-align: left;
	margin: 0.8rem auto;
	width: 84%;
}

figcaption em,
figcaption i {
	font-family: var(--font-monospace);
	font-style: italic;
	font-weight: 400;
}

@media only screen and (min-width: 40em) {
	figcaption {text-align: center;}
}

dt {
	font-family: var(--font-serif-lining);
	font-size: 2.0rem;
	font-weight: 700;
	letter-spacing: .5px;
	line-height: 2.4rem;
	margin-top: 3.6rem;
	margin-bottom: 1.2rem;
}

@media only screen and (min-width: 58em) {
	dt {
		font-size: 2.8rem;
		line-height: 3.2rem;
	}
}

dd {
	margin: 0;
	padding: 0;
}

/* ----------------------------------------------------------------------------
	CORE STRUCTURE */

main[role="main"] {
	margin: 0 auto;
	position: relative;
}

.container {
	margin-top: 7rem; /* approx. height of navbar */
	position: relative;
	width: 100%;
}

@media only screen and (min-width: 40em) {
	.container {
		margin-top: 7rem;
	}

	#homepage .container {margin-top: 18rem;}

	#homepage footer.site-footer .container {margin-top: 0;}
}

.inner-container {
	display: grid;
	margin: 0 auto;
	grid-template-columns: repeat(12, 1fr);
	grid-column-gap: 2rem;
	max-width: var(--site-max);
}

@media only screen and (min-width: 58em) {
	.inner-container.home {
		max-width: 100%;
	}
}

.inner-container > * {grid-column: 2 / 12;}

@media only screen and (min-width: 40em) {
	.inner-container > * {grid-column: 3 / 11;}
}

/* ----------------------------------------------------------------------------
	NAVIGATION */

.link-skipnav {
	position: absolute;
	left: -9999em;
}

header.mast {
	background: var(--site-bkgd-trans);
	display: flex;
	flex-flow: row nowrap;
	font-size: 1.6rem;
	margin: 0 auto;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 3;
}

header.mast ul {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
}

nav {
	flex: 1 auto;
	font-family: var(--font-sans);
	font-style: normal;
	font-weight: 400;
}

.logo {
	fill: var(--logo);
	flex: 0 0 220px;
	display: block;
	text-align: left;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 2rem 3rem 2rem 2.2rem;
}

.logo .b {stroke: var(--logo);}
.logo span {display: block; height: 0; text-indent: -9999em;}

ul.nav {
	display: none;
	flex-flow: column nowrap;
	align-content: flex-start;
	margin: 0;
	position: fixed;
	top: 7rem; /* 7.2rem or height of nav bar */
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
}

ul.nav > li {
	margin: 0;
	padding: 0;
}

ul.nav a {
	color: var(--action-normal);
	display: block;
	font-size: 3rem;
	line-height: 4rem;
	padding: 0rem 1.8rem;
	text-decoration: none;
	width: 100%;
}

ul.nav li a:hover,
ul.nav li a:active {
	color: var(--action-active);
}

nav .menu-button,
nav .menu-icon {
	display: flex;
	height: 4rem;
	padding: 0;
	position: fixed;
	top: 1rem;
	right: 1.8rem;
	justify-content: center;
	align-items: center;
	width: 4rem;
}

nav .menu-icon .navicon {
	background: var(--main-txt);
	display: block;
	height: 2px;
	position: relative;
	transition: background .2s ease-out;
	width: 2rem;
}

nav .menu-icon .navicon:before,
nav .menu-icon .navicon:after {
	background: var(--main-txt);
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	transition: all .2s ease-out;
	width: 100%;
}

nav .menu-icon .navicon:before {top: 5px;}
nav .menu-icon .navicon:after {top: -5px;}

nav .menu-label {display: none;}
nav .menu-button {display: none;}
nav .menu-button:checked ~ ul.nav {
	background: var(--site-bkgd-trans);
	display: flex;
}
nav .menu-button:checked ~ .menu-icon .navicon {background: transparent;}
nav .menu-button:checked ~ .menu-icon .navicon:before {transform: rotate(-45deg);}
nav .menu-button:checked ~ .menu-icon .navicon:after {transform: rotate(45deg);}
nav .menu-button:checked ~ .menu-icon:not(.steps) .navicon:before,
nav .menu-button:checked ~ .menu-icon:not(.steps) .navicon:after {top: 0;}

@media only screen and (min-width: 40em) {
	ul.nav a {
		font-size: 6.4rem;
		line-height: 8rem;
	}
}

@media only screen and (min-width: 65em) {
	header.mast {
		box-shadow: 1px 1px 4px 0 var(--keyline);
		bottom: auto;
	}

	ul.nav {
		display: flex;
		flex-flow: row nowrap;
		flex-direction: row;
		height: auto;
		justify-content: flex-end;
		margin: 0;
		padding-right: 1rem;
		position: initial;
	}

	ul.nav > li {
		background: none;
		flex: 0;
	}

	ul.nav a {
		display: flex;
		flex: 1;
		font-size: 1.2rem;
		justify-content: flex-end;
		letter-spacing: .5px;
		line-height: 2.4rem;
		padding: 2rem;
		text-transform: uppercase;
		width: auto;
	}

	ul.nav li a:hover,
	ul.nav li a:active {
		background-color: transparent;
		color: var(--action-active);
	}

	ul.nav li a:link.active,
	ul.nav li a:visited.active,
	ul.nav li a:hover.active,
	ul.nav li a:active.active {
		color: var(--action-active);
	}

	nav .menu-icon {display: none;}
}

/* ----------------------------------------------------------------------------
	HOMEPAGE */

.home .intro h1,
.home .intro h2 {
	font-weight: 400;
	max-width: 100%;
	text-wrap: pretty;
}

@media only screen and (min-width: 40em) {
	.home .intro h1,
	.home .intro h2 {max-width: 85%;}
}

@media only screen and (min-width: 58em) {
	.home .intro h1 {
		font-size: 7.2rem;
		line-height: 8rem;
	}
}

.projects-collection,
.projects-collection-grid {
	grid-column: 1 / span 12;
	margin: 4.8rem 0 0 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: auto;
	grid-template-areas:
		"f1 f1"
		"f1 f1"
		"f2 f3"
		"f4 f5";
}

figure.project-cover {
	margin: 0;
	padding: 0;
}

.projects-collection-grid article:first-child {
	grid-area: f1;
	width: 100%;
}

@media only screen and (min-width: 40em) {
	.projects-collection-grid article {width: 100%;}

	.projects-collection-grid article:first-child {
		grid-area: f1;
		width: 100%;
	}

	.projects-collection-grid {
		grid-column: 1 / span 12;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: auto;
		grid-template-areas:
			"f1 f1 f2 f3"
			"f1 f1 f4 f5";
		margin: 4.8rem 0 0 0;
	}
}

/* ----------------------------------------------------------------------------
	BLOG STRUCTURE & OVERRIDES */

article p {
	hanging-punctuation: first;
	margin: 0;
}

article p+p {
	margin-top: 2.4rem;
}

article em {
	font-family: var(--font-sans);
	font-style: italic;
}

h1.giant {
	font-size: 5.6rem;
	line-height: 6rem;
	margin-top: 6rem;
}

.intro h1::after,
h1.giant::after {
	color: var(--action-active);
	content: '.';
}

span.dot {
	color: var(--action-active);
}

@media only screen and (min-width: 40em) {
	h1.giant {
		font-size: 9rem;
		line-height: 9.6rem;
	}
}

@media only screen and (min-width: 58em) {
	h1.giant {
		font-size: 12rem;
		line-height: 12.8rem;
	}
}

article.notebook h2 {
	margin-top: 3.6rem;
	margin-bottom: 1.2rem;
}

.home,
.notebook,
.making,
.thinking,
.ethos,
.library-book,
.risograph,
.contact {padding-top: 3.6rem;}

@media only screen and (min-width: 40em) {
	.home,
	.notebook,
	.making,
	.thinking,
	.ethos,
	.risograph,
	.contact {padding-top: 0;}
}

/* ----------------------------------------------------------------------------
	ARTICLE INTRO & OUTRO */

.latest-timestamp {
	display: block;
	font-family: var(--font-sans-tabular);
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 2.8rem;
}

.short-outro {margin-top: 2.4rem;}

.outro {margin-top: 4.8rem;}

article.notebook .pad-top {
	padding-top: 2.4rem;
}

article .profile-meta {
	border-top: 1px solid var(--keyline);
	padding: 4.8rem 0 0 0;
}

.notebook figure.profile-portrait {
	margin: 0;
	padding: 0;
}

.notebook figure.profile-portrait img {
	display: inline-block;
	max-width: calc(100% - 2rem);
}

@media only screen and (min-width: 40em) {
	.notebook figure.profile-portrait img {
		max-width: calc(100% - 3rem);
	}
}

@media only screen and (min-width: 58em) {
 .notebook figure.profile-portrait img {
		max-width: calc(100% - 4rem);
	}
}

/* ----------------------------------------------------------------------------
	ARTICLE IMAGES */

.notebook figure {
	margin: 0 auto 2rem auto;
}

.inner-container figure img {
	border: none;
	display: block;
	margin: 0 auto;
	max-width: 100%;
}

.inner-container figure img[src$="svg"] {
	margin-bottom: 2.4rem;
	width: 100%;
}

.inner-container figure.wide,
.inner-container div.gallery {
	grid-column: 1 / 13;
	justify-self: center;
}

/* ----------------------------------------------------------------------------
	ARTICLE GALLERY SET */

.inner-container div.gallery {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: flex-start;
	margin-bottom: 2.4rem;
}

.inner-container div.gallery figure {
	margin-bottom: 1.2rem;
	text-align: center;
	width: 90%;
}

@media only screen and (min-width: 40em) {
	.inner-container div.gallery-split figure {
		margin: 0;
		margin-right: 2%;
		width: 49%;
	}

	.inner-container div.gallery-split figure:nth-child(2n+2) {margin-right: 0;}

	.inner-container div.gallery-thirds figure {
		margin: 0;
		margin-right: 2%;
		width: 32%;
	}

	.inner-container div.gallery-thirds figure:nth-child(3n+3) {margin-right: 0;}
}

/* ----------------------------------------------------------------------------
	ARTICLE INFO REVIEW GRIDS */

.inner-container div.entry-review-grid {margin-bottom: 2.4rem;}

.inner-container div.entry-review-grid,
.inner-container div.data-grid {
	grid-column: 2 / 12;
	display: flex;
	flex-flow: row wrap;
	margin-top: 2.4rem;
}

.review-item svg {fill: var(--highlight);}

.review-item,
.data-item {
	border-bottom: 1px solid var(--keyline);
	padding: 1rem 1rem 2rem 1rem;
	text-align: center;
	width: 50%;
}

.data-item {border: 0;}

.review-item figure,
.data-item figure {
	margin: 0 auto;
}

.data-icon svg {fill: var(--highlight);}

.review-icon, .data-icon {
	margin: 0;
	vertical-align: bottom;
	width: 40%;
}

.review-item:nth-child(odd) {border-right: 1px solid var(--keyline);}
.review-item:nth-last-child(-n+2) {border-bottom: none;}

article.notebook .review-item h3 {
	font-size: 5.6rem;
	line-height: 5.6rem;
	margin: 0 0 .8rem 0;
}

article.making .data-item h3 {
	font-size: 7.2rem;
	line-height: 6.4rem;
	margin: 0 0 .8rem 0;
}

article.notebook .review-item.with-icon h3
article.making .data-item.with-icon h3 {
	line-height: 2.4rem;
	margin-bottom: 2.4rem;
}

.review-item p,
.data-item p {
	color: var(--meta-txt);
	font-size: 1.2rem;
	letter-spacing: .3px;
	line-height: 1.6rem;
	margin: 0 auto;
	text-transform: uppercase;
	max-width: 85%;
}

.review-item sup {
	top: -.2rem;
	vertical-align: bottom;
}

@media only screen and (min-width: 40em) {
	.inner-container div.entry-review-grid,
	.inner-container div.data-grid {
		grid-column: 1 / 13;
	}

	.review-item:nth-child(even) {border-right: 1px solid var(--keyline);}
	.review-item:nth-last-child(-n+3) {border-bottom: none;}

	.review-item,
	.data-item {
		width: 33.3333%;
	}
}

@media only screen and (min-width: 58em) {
	.inner-container div.entry-review-grid,
	.inner-container div.data-grid {
		grid-column: 1 / 13;
	}

	.review-item {
		border-right: 1px solid var(--keyline);
	}

	.review-item:nth-last-child(-n+4) {border-bottom: none;}
	.review-item:nth-child(4n) {border-right: none;}

	.review-item,
	.data-item {
		width: 25%;
	}
}

/* ----------------------------------------------------------------------------
	ARTICLE PHOTO GALLERY */

/* TODO:
	 Consider reworking this unit to do something a little different */

.photo-gallery {
	display: flex;
	margin: 0 -10%;
	margin-top: 3.6rem;
	flex-flow: row wrap;
	justify-content: center;
	margin-bottom: 2.4rem !important;
}

.photo-unit {
	flex: 1;
	flex-flow: row wrap;
	position: relative;
	margin: 0 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.photo-unit figure {
	flex: 100% 1;
	margin: 0;
	display: block;
	box-sizing: border-box;
}

.photo-unit img {
	position: relative;
	transition: .2s;
	max-width: 100%;
	display: block;
	margin: auto;
}

/* ----------------------------------------------------------------------------
	ARTICLE SPECIALTY BYLINES */

.byline {
	font-size: 2rem;
	line-height: 3.2rem;
	margin-bottom: 3.6rem;
}

/* ----------------------------------------------------------------------------
	ARTICLE HEADINGS */

article.notebook header {
	margin-top: 1.6rem;
}

@media only screen and (min-width: 40em) {
	article.notebook header {
		margin-top: 6rem;
	}
}

article.notebook h3 {
	margin: 2.4rem 0 1.2rem 0;
}

article.notebook h4 {
	margin: 3.2rem 0 1.2rem 0;
}

/* ----------------------------------------------------------------------------
	ARTICLE LISTS & LINK PACKS */

.notebook ul {
	list-style-type: square;
	padding: 0 0 0 1.8rem;
}

.notebook li {margin-bottom: 1.8rem;}
.notebook li:last-child {margin-bottom: 0;}

/*.notebook li a:after {content: " ↗";}*/

/* ----------------------------------------------------------------------------
	ARTICLE QUOTES */

blockquote.quote {
	font-size: 3.6rem;
	margin: 2.4rem 0 0 0;
}

blockquote.quote.long {
	font-size: 3.2rem;
	margin: 2.8rem 0;
}

blockquote.quote.short {
	font-size: 7.2rem;
}

blockquote.quote.poetry {
	font-size: 2.4rem;
	font-style: normal;
}

blockquote.quote.block {
	font-size: 2rem;
	font-style: normal;
	margin: 2.4rem 0;
}

blockquote.quote.multiline {
	font-size: 2.8rem;
}

blockquote.quote.multiline li {
	font-size: 2rem;
	line-height: 2.4rem;
	font-style: normal;
}

blockquote.quote p {line-height: 4.4rem;}

blockquote.quote.long p {line-height: 4rem;}

blockquote.quote.short p {line-height: 8rem;}

blockquote.quote.block p {line-height: 2.8rem;}

blockquote.quote.poetry p {line-height: 3.2rem;}

@media only screen and (min-width: 40em) {
	blockquote.quote {
		font-size: 4.8rem;
	}

	blockquote.quote p {
		line-height: 5.6rem;
	}
}

.attributed-to-name {
	color: var(--meta-txt);
	display: block;
	font-family: var(--font-monospace);
	font-size: 1.4rem;
	font-style: normal;
	margin: 2.4rem 0;
}

.attributed-to-name::before {
	content: "— ";
}

/* ----------------------------------------------------------------------------
	CUSTOM VIDEO EMBEDS */

.player {
	grid-column: 1 / 13;
	display: block;
	margin: 2.4rem auto;
	max-width: 100%;
	width: 100%;
}

.player iframe,
.player video {
	display: block;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  max-width: 100%;
}

.placeholder-preview {background-color: var(--keyline);}

.ratio-superwide {aspect-ratio: 19/8;}
.ratio-16-9 {aspect-ratio: 16/9;}
.ratio-4-3 {aspect-ratio: 4/3;}
.ratio-4-1 {aspect-ratio: 4/1;}
.ratio-2-3 {aspect-ratio: 2/3;}
.ratio-1-1 {aspect-ratio: 1;}

/* ----------------------------------------------------------------------------
	MUSIC PLAYER EMBED */

.music-player {margin: 2.4rem 0;}

/* ----------------------------------------------------------------------------
	ARTICLE FOOTNOTES */

#footnotes {
	margin-top: 2.4rem;
	border-top: 1px solid var(--keyline);
	padding-top: 2.4rem;
}

#footnotes h3 {
	color: var(--meta-txt);
	font-size: 1.8rem;
	line-height: 2rem;
	margin-top: 0;
}

#footnotes p,
#footnotes ul,
#footnotes ol {
	color: var(--meta-txt);
	font-family: var(--font-monospace);
	font-size: 1.2rem;
	line-height: 1.8rem;
}

#footnotes ol {
	padding-left: 1.6rem;
}

#footnotes li {
	margin-bottom: 0.8rem;
}

/* ----------------------------------------------------------------------------
	ARTICLE MEDIA COLLECTIONS */

.media-collection {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-evenly;
	align-items: flex-start;
	align-content: flex-start;
	grid-column: 2 / 12;
	justify-self: flex-start;
	margin: 0;
	margin-top: 2rem;
	margin-bottom: 2rem;
	width: 100%;
	position: relative;
}

.media-collection figure {
	flex-shrink: 1;
	flex-grow: 1;
	flex-basis: 100%;
	margin: 0;
	margin-bottom: 2rem;
}

@media only screen and (min-width: 40em) {
	.media-collection {grid-column: 2 / 12;}

	.media-collection figure {
		flex-basis: calc(33.3333% - 2rem);
		margin-right: 2rem;
		width: calc(33.3333% - 2rem);
	}

	.media-collection figure:nth-child(3n) {margin-right: 0;}
}

@media only screen and (min-width: 58em) {
	.media-collection {grid-column: 1 / 13;}

	.media-collection figure {
		flex-basis: calc(25% - 2rem);
		margin-right: 2rem;
		width: calc(25% - 2rem);
	}

	.media-collection figure:nth-child(3n) {margin-right: 2rem;}
	.media-collection figure:nth-child(4n) {margin-right: 0;}
}

/* ----------------------------------------------------------------------------
	TODO: FLEXBOX IMAGE GRIDS */

.image-grid {
	display: flex;
	flex-wrap: wrap;
	grid-column: 2 / 12;
}

.image-grid figure {
	height: 40vh;
	flex-grow: 1;
	margin-bottom: 0;
}

.image-grid img {
	max-height: 100%;
	min-width: 100%;
	object-fit: cover;
	vertical-align: bottom;
}

.image-grid div:last-child {flex-grow: 10;}

/* PORTRAIT VIEWPORT */
@media only screen and (max-aspect-ratio: 1/1) {
	.image-grid div {height: 30vh;}
}

/* SHORT SCREENS */
@media only screen and (max-height: 480px) {
	.image-grid div {height: 80vh;}
}

/* SMALL SCREEN + PORTRAIT */
@media only screen and (max-aspect-ratio: 1/1) and (max-width: 480px) {
	.image-grid {flex-direction: row;}
	.image-grid div {height: auto; width: 100%;}
	.image-grid img {width: 100%; max-width: 75vh; min-width: 0;}
}

/* ----------------------------------------------------------------------------
	GRID LISTINGS */

.listing-collection {
	grid-column: 2 / span 10;
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	grid-column-gap: 2rem;
}

.grid-list .item {
	border-top: 1px solid var(--keyline);
	padding: 1.2rem 0;
}

.single .grid-list .item {
	border-top: 0;
}

.grid-list {
	grid-column: 1 / span 10;
	display: grid;
}

.grid-list div.title-col h2.feeling-lucky {
	margin-top: 2.4rem;
	font-weight: 400;
}

@media only screen and (min-width: 40em) {
	.events,
	.books,
	.grid-list {
		grid-row: auto;
	}
}

.grid-list div.title-col h2 {
	font-size: 2rem;
}

.grid-list div {
	font-size: 1.4rem;
	line-height: 1.8rem;
}

.grid-list div.info-col,
.grid-list div.time-col {
	color: var(--meta-txt);
}

.grid-list time {margin: 0;}

.grid-list div.title-col {
	display: flex;
	align-self: flex-start;
	align-items: center;
	padding-right: 72px;
	position: relative;
	text-align: left;
}

.ethos .grid-list div.title-col h1 {
	font-size: 2.4rem;
	font-weight: 400;
	letter-spacing: .3px;
	line-height: 3.2rem;
}

.inner-container .grid-list figure.cover-preview {position: absolute; top: 0; right: 0; z-index: 1;}

.inner-container .grid-list figure.cover-preview img {
	display: block;
	margin: 0;
	max-width: 72px;
}

.grid-list div {align-self: center;}

@media only screen and (min-width: 40em) {
	.grid-list .item {
		display: grid;
		grid-template-columns: repeat(10, 1fr);
		grid-column-gap: 2rem;
	}

	.grid-list div.title-col {
		grid-column: 2 / span 5;
		padding-right: 0;
	}

	.grid-list div.info-col {grid-column: 7 / span 2;}
	.grid-list div.time-col {grid-column: 9 / span 2;}

	.grid-list div.info-col,
	.grid-list div.time-col {
		align-self: baseline;
		line-height: 2.4rem;
		margin-top: 2px; /* Minor tweak to align baselines */
	}

	.inner-container .grid-list figure.cover-preview {position: static;}

	.ethos .grid-list div.title-col {
		grid-column: 2 / span 10;
	}
}

.grid-list * {
	line-height: 2.4rem;
	margin: 0;
}

/* ----------------------------------------------------------------------------
	HERO IMAGES */

figure.hero {
	height: auto;
	margin: 0 auto;
	position: relative;
	width: 100%;
}

@media only screen and (min-width: 58em) {
	figure.hero {
		 max-width: 1600px;
	}
}

figure.hero img {
	display: block;
	max-width: 100%;
}

figure .photo-credit {
	display: block;
	font-size: 1.2rem;
	line-height: 1.8rem;
	margin: .4rem auto 2.4rem auto;
	max-width: 100%;
	padding: 0;
	position: relative;
}

figure .photo-credit,
figure .photo-credit a {
	color: var(--meta-txt);
}

/* ----------------------------------------------------------------------------
	CLIENTS BLOCK */

.about-clients {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: center;
	margin: 3.6rem 0;
}

.kit {
	border-top: 1px solid var(--keyline);
	padding: 3.6rem 0 0 0;
}

.client {
	margin: 0;
	padding: 0;
	text-align: center;
	width: 50%;
}

@media only screen and (min-width: 40em) {
	.client {
		margin: 0 .2rem;
		width: calc(50% - .4rem);
	}
}

@media only screen and (min-width: 58em) {
	.client {
		margin: 0 .4rem;
		width: calc(33.3333% - .8rem);
	}
}

.about-clients svg {
	fill: --var(main-txt);
	height: 48px;
	max-width: 100%;
}

/* ----------------------------------------------------------------------------
	RISOGRAPH PAGE */

.machine-name svg {
	margin: 2.4rem 0;
}

.machine-info {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
	margin-bottom: 2.4rem;
}

.machine-info article,
.machine-info figure {
	width: 100%;
}

@media only screen and (min-width: 40em) {
	.machine-info article,
	.machine-info figure {
		width: 50%;
	}

	figure.img-50 {
		margin-right: 4%;
		width: 46%;
	}
}

.available-colors {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
	margin-bottom: 2.4rem;
}

.ink {
	padding-bottom: 1.6rem;
	text-align: center;
	width: 25%;
}

.swatch {
	border: 1px solid rgb(255,255,255);
	border-radius: 50%;
	height: 72px;
	margin: 0 auto 1.2rem auto;
	width: 72px;
}

.ink h3 {
	font-size: 2rem;
	line-height: 2.4rem;
	margin-bottom: 1.2rem;
}

.ink ul {
	color: var(--meta-txt);
	font-size: 1.2rem;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

@media only screen and (min-width: 58em) {
	.ink h3 {
		font-size: 2.4rem;
		line-height: 3.2rem;
	}

	.swatch {
		height: 108px;
		width: 108px;
	}
}

/* ----------------------------------------------------------------------------
	SPECIALTY STYLES */

.small-print {
	font-size: 1.4rem;
	line-height: 1.8rem;
	margin: 0;
}

.small-print p {
	color: var(--meta-txt);
	line-height: 1.8rem;
}

.space-out {margin-bottom: 2rem;}

/* ----------------------------------------------------------------------------
	PROJECTS GRID */

.inner-container.making-grid {
	margin-bottom: -3.6rem; /* Override margin just for this page */
	max-width: 100%;
}

.projects-grid {
	grid-column: 1 / span 12;
	display: flex;
	flex-direction: row;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
}

.project {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 100%;
}

@media only screen and (min-width: 40em) {
	.project {
		flex-basis: 50%;
	}
}

@media only screen and (min-width: 58em) {
	.project {
		flex-grow: 0;
		flex-shrink: 0;
		flex-basis: 33.3333%;
	}
}

.project figure {
	margin: 0;
	padding: 0;
}

.project figure img {max-width: 100%;}

/* ----------------------------------------------------------------------------
	FILTERS (for MAKING or OTHER) */

.filters {
	margin-top: 1.6rem;
	margin-bottom: 4.8rem;
}

.filters h2 {
	font-family: var(--font-sans);
	font-size: 1.4rem;
	font-weight: 400;
	letter-spacing: 1px;
	margin-top: 1.2rem;
	margin-bottom: 0;
	position: relative;
	text-transform: uppercase;
}

.filters h2 a.reset {
	font-size: 1.6rem;
	letter-spacing: 0;
	margin-left: .4rem;
	padding: 0;
	text-transform: none;
}

.filters ul {
	columns: 2 auto;
	column-fill: balance;
	column-gap: 0;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.filters li {margin: 0;}

.filters li.active-filter a {
	background-color: var(--main-txt);
	border-radius: 4px;
	color: var(--site-bkgd);
	padding: 2px 6px;
}

@media only screen and (min-width: 40em) {
	.filters ul {columns: 3 auto;}
}

@media only screen and (min-width: 58em) {
	.filters ul {
		columns: 4 auto;
		column-gap: 2rem;
	}
}

/* ----------------------------------------------------------------------------
	ETHOS */

.ethos h2 {max-width: 85%;}

/* ----------------------------------------------------------------------------
	MAKING */

article.making header {
	margin-top: 1.6rem;
}

@media only screen and (min-width: 40em) {
	article.making header {
		margin-top: 8.4rem;
	}
}

article h2.subtitle {font-weight: 400;}

article.making p {margin-bottom: 2.4rem;}
article.making p+p {margin-top: 0;}

.inner-container.making figure.wide {
	grid-column: 1 / 13;
	margin: 0;
	margin-bottom: 2rem;
	justify-self: center;
}

.inner-container .half-left,
.inner-container .half-right {
	margin: 0;
	margin-bottom: 2rem;
}

.inner-container .half-left img,
.inner-container .half-right img {
	margin: 0;
}

@media only screen and (min-width: 40em) {
	.inner-container .half-left,
	.inner-container .half-right {
		margin: 0;
		margin-bottom: 2rem;
	}
}

.inner-container .half-left,
.inner-container .half-right {
	grid-column: 1 / 13;
}

.making aside {
	grid-column: 2 / 12;
	margin-bottom: 1.2rem;
}

.making aside p {margin: 0;}

.inner-container .narrow-left,
.inner-container .narrow-right {
	font-size: 1.4rem;
	grid-column: 2 / 12;
	margin: 0;
	padding: 0;
	padding-bottom: 1.2rem;
}

@media only screen and (min-width: 40em) {
	.inner-container .half-left {
		grid-column: 1 / 7;
	}

	.inner-container .half-right {
		grid-column: 7 / 13;
	}

	.making aside {
		grid-column: 3 / 9;
		margin-bottom: 2.4rem;
	}

	.inner-container .narrow-left {
		grid-column: 3 / 6;
		padding: 0;
		padding-top: 4.8rem;
	}

	.inner-container .narrow-right {
		grid-column: 8 / 11;
		padding: 0;
		padding-top: 4.8rem;
	}
}

/* ----------------------------------------------------------------------------
	PROJECT METADATA */

.additional-info {
	border-top: 1px solid var(--keyline);
	font-size: 1.4rem;
	line-height: 1.8rem;
	padding-top: 2.4rem;
}

.meta-info {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-column-gap: 2rem;
}

.meta-info h3 {
	font-size: 1.8rem;
	line-height: 1.8rem;
	margin-bottom: 0.4rem;
}

.meta-info p,
.meta-info ul,
.meta-info time {
	line-height: 2rem;
	margin-bottom: 1.2rem;
}

.meta-info time {color: var(--main-txt);}

.meta-edition-summary {
	line-height: 2rem;
	padding-bottom: 1.8rem;
}

ul.meta-list {
	list-style-type: none;
	margin-top: 0;
	padding: 0;
}

p.roles span+span::before,
p.genre span+span::before {content: ", ";}

p.roles span:last-child::before {content: ", and ";}

.copyright-notice p+p {margin-top: 0;}

.meta-info-col.col-one {grid-column: 1 / span 4;}

.meta-info-col.col-two {grid-column: 5 / span 4;}

.copyright-notice,
.meta-info-col.col-three {
	padding-top: 2.8rem;
	grid-column: 1 / span 8;
}

.copyright-notice {padding-top: 0;}

.meta-info-col.col-three {padding-top: 0;}

@media only screen and (min-width: 40em) {
	.meta-info-col.col-one {grid-column: 1 / span 4;}

	.meta-info-col.col-two {grid-column: 5 / span 4;}

	.copyright-notice, .meta-info-col.col-three {grid-column: 1 / span 8;}
}

@media only screen and (min-width: 58em) {
	.meta-info-col.col-one {grid-column: 1 / span 2;}

	.meta-info-col.col-two {grid-column: 3 / span 2;}

	.copyright-notice, .meta-info-col.col-three {grid-column: 5 / span 3;}
}

/* ----------------------------------------------------------------------------
	PAGINATION CONTROLS */

.page-actions,
.pagination-controls {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	align-content: flex-start;
	border-top: 1px solid var(--keyline);
	font-size: 1.4rem;
	line-height: 2rem;
	margin-top: 2.4rem;
	padding-top: 2.4rem;
}

.no-js button.load-more,
.js-on .pagination-controls.ethos-pagination,
.js-on .pagination-controls.documenting-pagination {
	display: none;
}

.page-actions {
	border-top: none;
	padding-top: 0;
}

@media only screen and (min-width: 40em) {
	.pagination-controls {
		font-size: 1.8rem;
		line-height: 2.4rem;
	}
}

.next {
	margin-right: 1rem;
	text-align: left;
}

.page-counter {
	font-size: 1.4rem;
	text-align: center;
}

.prev {
	margin-left: 1rem;
	text-align: right;
}

.next,
.prev {
	flex-basis: calc(50% - 1rem);
}

.with-counter .next,
.with-counter .prev,
.page-counter {
	flex-basis: calc(33% - 1rem);
}

.page-counter,
.next a,
.prev a {
	display: block;
	line-height: 2rem;
}

@media only screen and (min-width: 40em) {
	.next a,
	.prev a {
		display: block;
		font-size: 2.4rem;
		line-height: 2.8rem;
	}
}

@media only screen and (min-width: 40em) {
	.page-counter {
		font-size: 1.6rem;
	}
}

/* ----------------------------------------------------------------------------
	LIBRARY PAGINATION */

.navigation-controls {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: baseline;
	align-content: space-between;
	position: absolute;
	top: 44vh;
	width: 100%;
	z-index: 2;
}

.navigation-controls .prev,
.navigation-controls .next {
	display: block;
	flex-basis: auto;
	margin: 0;
	width: auto;
}

.navigation-controls .prev {
	padding-right: 5%;
}

.navigation-controls .prev a,
.navigation-controls .next a {
	background: var(--overlay);
	border-radius: 50%;
	display: block;
	font-size: 3.6rem;
	font-weight: 700;
	line-height: 1;
	padding: .9rem 1.2rem 0 1.2rem;
	vertical-align: middle;
	width: 6rem;
	height: 6rem;
}

.navigation-controls .prev a:link,
.navigation-controls .prev a:visited,
.navigation-controls .next a:link,
.navigation-controls .next a:visited {background: var(--overlay);}

.navigation-controls .prev a:hover,
.navigation-controls .prev a:active,
.navigation-controls .next a:active,
.navigation-controls .next a:hover {background: var(--overlay-dark);}

.navigation-controls .next {
	padding-left: 5%;
}

/* ----------------------------------------------------------------------------
	FRIENDS */
.besties,
.ut-friends {grid-column: 2 / span 10;}

.besties {
	text-align: left;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
}

.bestie {
	margin: 0;
	padding-bottom: 2rem;
	position: relative;
	text-align: center;
	width: 100%;
}

.bestie figure {
	display: block;
	margin: 0;
}

@media only screen and (min-width: 40em) {
	.bestie {
		margin-right: 2%;
		width: 49%;
	}

	.bestie:nth-child(even) {margin-right: 0;}

}

@media only screen and (min-width: 58em) {
	.bestie {
		margin-right: 1%;
		margin-left: 1%;
		width: 32%;
	}

	.bestie:nth-child(2n) {margin-right: 1%;}
	.bestie:nth-child(2n+1) {margin-left: 1%;}
	.bestie:nth-child(3n) {margin-right: 0;}
	.bestie:nth-child(3n+1) {margin-left: 0;}
}

.cols {
	columns: 2;
	column-gap: 2rem;
}

.ut-designers {
	margin-bottom: 3.6rem;
}

.ut-designers a,
.ut-friends a {
	font-weight: 400;
}

.ut-friends h3 {
	margin-top: 2rem;
	margin-bottom: 1.6rem;
}

.cols ul,
.cols li {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

@media only screen and (min-width: 40em) {
	.cols {
		columns: 3;
		column-gap: 4rem;
		column-rule: 1px solid var(--keyline);
	}
}

@media only screen and (min-width: 58em) {
	.cols {
		columns: 4;
		column-gap: 4rem;
		column-rule: 1px solid var(--keyline);
	}
}

/* ----------------------------------------------------------------------------
	THINKING */

.events,
.books {
	grid-column: 1 / span 10;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: flex-start;
}

.deck {padding-bottom: 2rem;}

@media only screen and (min-width: 40em) {
	.deck {
		margin-right: 1%;
		margin-left: 1%;
		width: 48%;
	}

	.deck:nth-child(2n) {margin-right: 0;}
	.deck:nth-child(2n+1) {margin-left: 0;}

	.deck div {padding: 1rem 0;}
}

@media only screen and (min-width: 58em) {
	.deck {
		margin-right: 1%;
		margin-left: 1%;
		width: 32%;
	}

	.deck:nth-child(2n) {margin-right: 1%;}
	.deck:nth-child(2n+1) {margin-left: 1%;}
	.deck:nth-child(3n) {margin-right: 0;}
	.deck:nth-child(3n+1) {margin-left: 0;}

	.deck div {padding: 1rem 2rem;}
}

div.short-intro {
	margin-top: 1.6rem;
	margin-bottom: 4.8rem;
}

.listing-collection div.short-intro {
	grid-column: 1 / span 10;
}

.listing-collection h1.inset-title {
	grid-column: 1 / span 10;
	margin-top: 4.8rem;
	grid-row: 1;
}

.listing-collection.books-collection h1.inset-title {margin-bottom: 0;}

@media only screen and (min-width: 40em) {
	.listing-collection h1.inset-title,
	.listing-collection div.short-intro {
		grid-column: 2 / span 8;
	}
}

.listing-collection h1.first {margin-top: 0;}

.deck h2 {
	font-size: 2rem;
	line-height: 2.4rem;
	margin-top: .8rem;
	margin-bottom: .8rem;
}

@media only screen and (min-width: 40em) {
	.deck h2 {margin-top: 0;}
}

.deck time,
.deck p {
	font-size: 1.4rem;
	line-height: 1.8rem;
	margin: .4rem 0 0 0;
}

.deck figure {margin: 0;}
.deck figure img {max-width: 100%;}

.location::before {content: "(";}
.location::after {content: ")";}

@media only screen and (min-width: 40em) {
	.location {
		display: block;
	}

	.location::before {content: "";}
	.location::after {content: "";}
}

.kit {
	margin-top: 4.8rem;
}

.meta {
	color: var(--meta-txt);
	font-family: var(--font-monospace);
	font-size: 1.4rem;
	padding: 2rem;
}

.posted {
	border-bottom: 1px solid var(--keyline);
	margin-bottom: 2.4rem;
	padding: 2rem 0;
}

/* ----------------------------------------------------------------------------
	PROJECTS */

.project-info {
	margin-top: 3.6rem;
}

.item {
	line-height: 2.8rem;
}

.item-def {font-weight: 700;}

/* ----------------------------------------------------------------------------
	CONTACT FORM */

.field abbr {
	color: rgba(255,40,40,1);
	text-decoration: none;
}

.field label,
.field input,
.field textarea {
	display: block;
	font-size: 1.4rem;
	line-height: 1.8rem;
}

.field label {
	font-size: 1.8rem;
	font-weight: 700;
	margin: 2.4rem 0 .8rem 0;

}

.field input {
	line-height: 2.4rem;
	width: 75%;
}

.field textarea {
	height: 18rem;
	width: 75%;
}

.field input,
.field textarea {
	border-color: var(--field-border);
	border-style: solid;
	border-width: 1px;
}

.alert {
	background-color: var(--alert-bkgd);
	color: var(--alert-txt);
	font-weight: 700;
	padding: 1.6rem;
}

.alert.success {
	background-color: var(--alert-success);
}

.alert.error {
	background-color: var(--alert-error);
}

.alert p {margin: 0;}

/* ----------------------------------------------------------------------------
	BUTTONS */

a,
button,
input[type="submit"] {
	transition: all 0.3s ease-in-out 0s;
}

.button,
.download-link,
button.button,
input[type="submit"] {
	background: var(--action-active);
	border: none;
	border-radius: 7px;
	color: var(--site-bkgd);
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 2.4rem;
	margin: 0;
	padding: .8rem 1.2rem;
}

.button,
.download-link,
input[type="submit"] {
	margin-top: 2.4rem;
}

.button:link,
.button:visited,
.download-link:link,
.download-link:visited {
	background: var(--action-active);
	color: var(--site-bkgd);
}

.button:hover,
.download-link:hover,
button.button:hover,
input[type="submit"]:hover {
	background: var(--action-normal);
}

.button:active,
.download-link:active,
button.button:active,
input[type="submit"]:active {
	background: var(--action-focus);
}

/* ----------------------------------------------------------------------------
	QUICK LINKS */
.quick-links {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	align-content: flex-start;
	list-style-type: none;
	margin: 0 -1rem;
	padding: 0;
}

.quick-links a {
	border-bottom: 1px solid;
	border-color: var(--keyline);
	display: block;
	font-weight: 400;
	padding: 1rem;
}

.quick-links .quick-link-item:nth-last-child(1) a {border-bottom: 0;}

.quick-links a:link,
.quick-links a:visited {}

.quick-links a:hover {
	background: var(--action-active);
	border-color: var(--action-active);
	color: var(--site-bkgd);
}
.quick-links a:active {
	background: var(--action-normal);
	color: var(--site-bkgd);
}

.quick-links a:active span {color: var(--site-bkgd);}

.quick-link-item {width: 100%;}

.quick-links a span {
	display: block;
	color: var(--meta-txt);
	font-size: 1.4rem;
}


/* ----------------------------------------------------------------------------
	COLOPHON */

.inner-container.colophon figure.wide {
	margin: 0 0 3.6rem 0;
}

.specimen {
	margin: 0;
	width: 100%;
}

.inner-container.colophon {column-gap: 0;}

.inner-container.colophon figure.half-left,
.inner-container.colophon figure.half-left img[src$="svg"] {margin-bottom: 0;}

/* ----------------------------------------------------------------------------
	FOOTER */

footer[role="contentinfo"] {
	border-top: 1px solid var(--keyline);
	clear: both;
	margin: 3.6rem auto 0 auto;
	overflow: hidden;
	position: relative;
	width: 100%;
}

footer[role="contentinfo"] .container {
	display: grid;
	margin: 0 auto;
	grid-template-columns: repeat(12, 1fr);
	gap: 2rem;
	max-width: var(--site-max);
	padding-top: 4.8rem;
}

.profile-meta {
	grid-column: 2 / 12;
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	grid-column-gap: 0;
	overflow: hidden;
	position: relative;
	width: 100%;
}

@media only screen and (min-width: 40em) {
	.profile-meta {
		grid-column: 3 / 11;
		display: grid;
		grid-template-columns: repeat(10, 1fr);
	}
}

.profile-portrait {
	margin: 0;
	grid-column: 1 / span 4;
	grid-row: 1;
}

@media only screen and (min-width: 40em) {
	.profile-portrait {
		grid-column: 1 / span 3;
	}
}

@media only screen and (min-width: 58em) {
	.profile-portrait {
		grid-column: 1 / span 2;
	}
}

.profile-portrait img {
	border-radius: 50%;
	max-width: calc(100% - 2rem);
}

@media only screen and (min-width: 40em) {
	.profile-portrait img {
		max-width: calc(100% - 3rem);
	}
}

@media only screen and (min-width: 58em) {
	.profile-portrait img {
		max-width: calc(100% - 4rem);
	}
}

.profile-meta-info {
	grid-column: 5 / span 6;
	grid-row: 1;
	width: 100%;
}

@media only screen and (min-width: 40em) {
	.profile-meta-info {
		grid-column: 4 / span 7;
	}
}

@media only screen and (min-width: 58em) {
	.profile-meta-info {
		grid-column: 3 / span 8;
	}
}

.profile-meta-info h2 {
	margin-bottom: 0.8rem;
}

.profile-meta-info p {
	font-size: 1.4rem;
	line-height: 2rem;
	margin: 0;
}

@media only screen and (min-width: 40em) {
	.profile-meta-info p {
		font-size: 1.6rem;
		line-height: 2.4rem;
		margin: 0;
	}
}

/* ----------------------------------------------------------------------------
	LIBRARY */

.collection {
	grid-column: 1 / span 12;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: flex-end;
	align-content: flex-end;
}

.collection .book {
	border-bottom: 1px solid var(--keyline);
	cursor: pointer;
	display: block;
	margin-top: 2.4rem;
	width: 50%; /* 2 across */
}

.book-cover-details-preview,
.book-meta-details {
	max-width: 100%;
}

.book-cover-details-preview img {
	box-shadow: 0 5px 15px 0 rgba(0,0,0,0.4);
	max-width: 100%;
}

.book-meta-details {
	margin: 1rem 0 0 0;
}

.book-meta-details h3.book-details__title {
	font-size: 3.2rem;
	line-height: 3.6rem;
	margin-bottom: 1.8rem;
}

.book-meta-details dl {
	margin: 0;
	padding: 0;
}

.book-meta-details dt {
	font-size: 1.8rem;
	line-height: 1.8rem;
	margin: 1.8rem 0 0 0;
}

.book-meta-details dd {
	font-size: 1.4rem;
	line-height: 1.8rem;
}

@media only screen and (min-width: 40em) {
	.book-cover-details-preview {width: 40%;}

	.book-meta-details {
		margin: 0;
		width: 56%;
	}
}

.collection .book:hover {opacity: .9;}

.collection .book img {
	box-shadow: var(--book-shdw);
}

@media only screen and (min-width: 40em) {
	.collection .book {
		width: 25%; /* 4 accross */
	}
}

@media only screen and (min-width: 58em) {
	.collection .book {
		width: 16.66667%; /* 6 across */
	}
}

/* ----------------------------------------------------------------------------
	LIBRARY BOOK DETAILS */

.book-details {position: relative;}

.library-book .book-details figure {
	margin-top: 3.6rem;
	margin-bottom: 4.8rem;
}

.library-book .book-details .meta-info-col.col-one {grid-column: 1 / span 4;}
.library-book .book-details .meta-info-col.col-two {grid-column: 5 / span 4;}
.library-book .book-details .meta-info-col.col-three {grid-column: 1 / span 4;}
.library-book .book-details .meta-info-col.col-four {grid-column: 5 / span 4;}

@media only screen and (min-width: 40em) {
	.library-book .book-details .meta-info-col.col-one {grid-column: 1 / span 2;}
	.library-book .book-details .meta-info-col.col-two {grid-column: 3 / span 2;}
	.library-book .book-details .meta-info-col.col-three {grid-column: 5 / span 2;}
	.library-book .book-details .meta-info-col.col-four {grid-column: 7 / span 2;}
}

.cover-large img {
	width: auto;
	box-shadow: var(--book-shdw);
}

/* ----------------------------------------------------------------------------
	COLOPHON */

.tools {
	column-count: 1;
	column-width: 100%;
	column-gap: 0;
	margin-bottom: 2.4rem;
}

.tools .item {
	margin: 0;
	width: 100%;
}

.tools ul {
	list-style-type: none;
	margin-top: .8rem;
	padding-left: 0;
}

.tools h3 {
	font-family: var(--font-sans);
	font-size: 2rem;
	margin-bottom: 0;
}

@media only screen and (min-width: 40em) {
	.tools {
		column-count: 2;
		column-gap: 2rem;
		column-width: 50%;
	}
}

@media only screen and (min-width: 58em) {
	.tools {
		column-count: 3;
		column-width: 33.3333%;
	}
}

/* ----------------------------------------------------------------------------
	ELSEWHERE LINKS */

footer .elsewhere-links {
	border-top: 1px solid var(--keyline);
	padding-top: 1.6rem;
	position: relative;
	font-size: 1.3rem;
	grid-row: 2;
	grid-column: 3 / span 8; /* Inherits from .profile-meta */
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: baseline;
	align-content: flex-start;
	width: 100%;
}

footer .elsewhere-link {
	text-align: center;
	width: 20%;
}

@media only screen and (min-width: 58em) {
	footer .elsewhere-links {
		grid-template-columns: repeat(5, 1fr);
	}
}

footer .elsewhere-links a {font-weight: 400;}

footer .elsewhere-links span {display: none;}

@media only screen and (min-width: 40em) {
	footer .elsewhere-links span {display: block;}
}

@media only screen and (min-width: 48em) {
	footer .elsewhere-links span {display: inline;}
	footer .elsewhere-links svg {width: 2rem;}
}

footer .elsewhere-links svg {
	margin-top: 0;
	vertical-align: middle;
	width: 3rem;
	transition: all 0.3s ease-in-out 0s;
}

footer .elsewhere-links a:link svg,
footer .elsewhere-links a:visited svg {fill: var(--action-normal);}
footer .elsewhere-links a:hover svg,
footer .elsewhere-links a:active svg {fill: var(--action-active);}

/* ----------------------------------------------------------------------------
	OUTLINKS */

a.outlink::after,
a.search::after {
	content: ' ';
	background-color: #fff;
	display: inline-block;
	position: relative;
	height: .75em;
	width: .75em;
	top: 0;
	transition: all 0.3s ease-in-out 0s;
}

a.outlink::after {
	-webkit-mask-image: url(/assets/img/outlink-arrow.svg);
	mask-image: url(/assets/img/outlink-arrow.svg);
	left: 6px;
}

a.search::after {
	-webkit-mask-image: url(/assets/img/search.svg);
	mask-image: url(/assets/img/search.svg);
	left: 6px;
	height: 1em;
	width: 1em;
	top: 1px;
}

a.outlink:link::after,
a.outlink:visited::after,
a.search:link::after,
a.search:visited::after {background-color: var(--action-normal);}

a.outlink:hover::after,
a.outlink:active::after,
a.search:hover::after,
a.search:active::after {background-color: var(--action-active);}

/* ----------------------------------------------------------------------------
	COPYRIGHT */

.copyright {
	clear: both;
	color: var(--meta-txt);
	font-size: 1.2rem;
	line-height: 1.8rem;
	margin: 2.4rem auto 0 auto;
	padding: 1.2rem;
	text-align: center;
	width: 100%;
}

.copyright span {display: block;}

.copyright a:link,
.copyright a:visited {
	color: var(--meta-txt);
	text-decoration: none;
	text-decoration-color: var(--meta-txt);
}

/* ----------------------------------------------------------------------------
	Project Awards Info */

.awards-info {
	border-top: 1px solid var(--keyline);
	font-size: 1.25rem;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: flex-start;
	gap: 2rem;
	padding-top: 1.6rem;
	width: 100%;
}

.awards-info svg {
	fill: var(--main-txt);
	margin: 0;
	margin-bottom: .75rem;
	max-height: 6rem;
	width: 6rem;
}

/* ----------------------------------------------------------------------------
 DARK MODE THEME */

.dark-theme {
	--site-bkgd: rgb(0,10,30);
	--site-bkgd-trans: rgba(0,10,30,.8);
	--logo: rgba(255,255,255,.75);
	--overset-txt: rgba(255,255,255,.75);
	--main-txt: rgb(255,255,255);
	--overlay: rgba(255,255,255,.12);
	--overlay-dark: rgba(255,255,255,.88);
	--txt-selection: rgb(232,207,140);
	--main-txt-invert: rgb(255,255,255,.85);

	--meta-txt: rgba(255,255,255,.5);
	--head-txt: rgba(255,255,255,.5);

	--action-focus: rgba(209,160.26,.25);
	--action-normal: rgb(255,255,255);
	--action-active: rgb(209,160,26);
	--footer-txt: rgba(255,255,255,.5);

	--keyline: rgba(255,255,255,.15);
	--highlight: rgba(209,160,26,1);
	--field-border: rgb(24,24,24);
	--line-anim: rgba(209,160,26,.75);

	--keyboard-bkgd: rgba(70,110,220,.5);
	--keyboard-border: rgb(0,30,130);
	--keyboard-keys: rgb(0,10,30);
}

.dark-theme header.mast {
	box-shadow: none;
}

.dark-theme img {
	opacity: .85;
	transition: opacity .5s ease-in-out;
}
.dark-theme img:hover {
	opacity: 1;
}

.risograph svg {fill: var(--main-txt);}

.dark-theme div.client,
.dark-theme div.client svg,
.dark-theme .risograph svg,
.dark-theme .machine-info svg,
.dark-theme .icon img {fill: var(--main-txt);}

/* ----------------------------------------------------------------------------
 FANCY (ANIMATED) GRADIENT TEXT */

.fancypants p {
	--bg-size: 400%;
	--color-one: rgb(209,160,26);
	--color-two: rgb(209,50,26);
	background: linear-gradient(
		45deg,
		var(--color-one),
		var(--color-two),
		var(--color-one)
		) 0 0 / var(--bg-size) 100%;
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
}

@media (prefers-reduced-motion: no-preference) {
	.fancypants p {
		-webkit-animation: movebkgd 12s linear infinite;
						animation: movebkgd 12s linear infinite;
	}
	@-webkit-keyframes movebkgd {
		to {background-position: var(--bg-size) 0;}
	}
	@keyframes movebkgd {
		to {background-position: var(--bg-size) 0;}
	}
}

/* ----------------------------------------------------------------------------
	 KEYBOARD KEYS */

kbd {
	background-color: var(--keyboard-bkgd);
	border: 1px solid var(--keyboard-border);
	border-radius: 6px;
	box-shadow: inset 0 -2px var(--keyboard-border);
	color: var(--keyboard-keys);
	display: inline-block;
	font-family: var(--font-monospace);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 2rem;
	padding: 1px 6px;
	vertical-align: middle;
}

/* ----------------------------------------------------------------------------
	 SEARCH FORM */

.search form {
	display: flex;
	margin-bottom: 2.4rem;
}

.search form input {
	background: #fff;
	border: 1px solid var(--keyline);
	border-radius: 3rem;
	font-size: 3rem;
	margin-right: 2rem;
	padding: .5rem 2rem;
	width: 70%;
}

.search .button {
	font-size: 2.4rem;
	font-weight: 700;
}

/* ----------------------------------------------------------------------------
 MICROSEASON INFO */

.microseasons {
	color: var(--meta-txt);
	grid-column: 1 / span 12;
	margin: 0 0 4.8rem 0;
}

.ms__season {
	border-bottom: 1px solid var(--keyline);
	color: var(--background);
	padding: 2.4rem;
}

.ms__season, .ms__season-info {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: baseline;
}

dl.ms__season, .ms__season dt, .ms__season dd, .ms__season time {margin: 0;}

.ms__season dt {
	font-family: var(--font-sans);
	font-size: 1.6rem;
	font-weight: 400;
}

.ms__name, .ms__translated {padding-right: 1.6rem;}


/* ----------------------------------------------------------------------------
 THEME TOGGLE */

.no-js .theme-switcher {display: none;}

.theme-switcher {
	padding: 2rem 0;
	text-align: center;
}

.theme-switcher button {
	padding: 1rem 2rem;
	border: 0;
	border-radius: 5px;
}

/* The switch - the box around the slider */
.switch {
	position: relative;
	display: flex;
	margin: 0 auto;
	width: 6rem;
	height: 2.4rem;
}

/* Hide default HTML checkbox */
.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

/* The slider */
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgb(255,255,255);
	-webkit-transition: 0.3s;
	transition: 0.4s;
}

.slider::before {
	position: absolute;
	content: "";
	height: 3.6rem;
	width: 3.6rem;
	left: 0;
	bottom: 4px;
	top: 0;
	bottom: 0;
	margin: auto 0;
	-webkit-transition: 0.3s;
	transition: 0.3s;
	box-shadow: 0 0 5px rgba(0,0,0,.5);
	background: var(--site-bkgd) url('/assets/img/dark.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 28px;
}

input:checked + .slider {background-color: rgb(0,0,30);}
input:focus + .slider {box-shadow: 0 0 1px #2196f3;}

input:checked + .slider::before {
	-webkit-transform: translateX(2.4rem);
	-ms-transform: translateX(2.4rem);
	transform: translateX(2.4rem);
	background: rgb(255,255,255) url('/assets/img/light.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 28px;
}

/* Rounded sliders */
.slider.round {border-radius: 36px;}
.slider.round::before {border-radius: 50%;}