@charset="utf-8";

:root {
	--sidepadding-large: 10%;
	--sidepadding-small: 5%;

	--tinyletterspacing: 0.4px;
	--tinyExtraLetterspacing: 0.01rem;

	--fontScaleMinSize : 2;
	--fontScaleMaxSize : 3;

	--midBreakpoint : 35rem;
	--maxBreakpoint : 70;

	--bp-medium-large : 70rem;

	--logoSize : 2.4rem;
	--logoCircleSize : .6rem;
}

@media (prefers-color-scheme: light) {
	:root {
		--background: #FEFEFE;

		--offwhite: #F5F5F5;
		--lightgray: #E2E2E2;
		--rulegray: #A4A4A4;
		
		--dark: #303030;
		--medium-dark: #666666;
		--blue: #A0EFFF;
	}

	.logo .circle-logo svg circle {
		stroke: var(--dark);
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--background: #090909;

		--offwhite: #111111;
		--lightgray: #303030;
		--rulegray: #666666;
		
		--dark: #BBBBBB;
		--medium-dark: #A4A4A4;
		--blue: #A0EFFF;
	}

	.logo .circle-logo svg circle {
		stroke: var(--dark);
	}
}

* {
  box-sizing: border-box;
  -webkit-font-variant-ligatures: common-ligatures;
          font-variant-ligatures: common-ligatures;
  /*border: dotted red 1px;*/
}

::-moz-selection {
  background: rgba(63, 148, 166, .3); /* WebKit/Blink Browsers */
}

::selection {
  background: rgba(63, 148, 166, .3); /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: rgba(63, 148, 166, .3); /* Gecko Browsers */
}

html[dir=ltr] {
	text-align: right;
}

html,
body {
  padding: 0;
  margin: 0;
  color: var(--dark);
  background-color: var(--background);
}

a:link, 
a:visited {
	text-decoration: none;
	color: var(--dark);

	will-change: color, font-variation-settings;
	transition: color 0.08s linear, font-variation-settings 0.2s linear;
}
a:hover, a:focus, a:active {
	text-decoration: none;
	transition: color 0.08s linear, font-variation-settings 0.2s linear;
}


/* Base colors for site sections like about */
.about a:link, .about a:visited {
	color: #3F94A6;
}
.about a:hover, .about a:focus, .about a:active {
	color: #013945;
}

.background {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: -100;
}
.background canvas {
	min-width: 100%; 
	width: 100%; 
	height: 100%;
	z-index: -100;
}

#container {
	width: 100%;
	height: 100%; /* TODO: Make this height than the viewport to account for people scrolling in the negatives; */
	position: fixed;
	z-index: -1000;
	top: 0;
	pointer-events: none;
	content-visibility: auto;

	-webkit-animation: fadein 3s;
			animation: fadein 3s;
}
#container-events {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 100;
	top: 0;
	pointer-events: none;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Micro */
.icon.divider {
	min-width: 1.1rem;
	margin: 0 .6rem 0 .7rem;
}
.icon.divider svg {
	margin-bottom: .22rem;
	height: 6.8px;
}
.icon.divider svg g {
	fill: var(--lightgray);
}
.flip-icon {
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	-webkit-filter: FlipH;
	        filter: FlipH;
	-ms-filter: "FlipH";
}
.icon.clear-padding {
	margin-left: 0.02rem;
	margin-bottom: -0.02rem;
}
.icon.clear-padding svg {
    margin-bottom: -.1rem;
}

/* Nav */
nav {
	font-family: "FKGroteskVariableTrialGX";

	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	margin: 1rem var(--sidepadding-small) 0 var(--sidepadding-small);

	color: var(--dark);
}

@-webkit-keyframes rotation {
	from {
		-webkit-transform: translateX(100%) rotateY(180deg);
		        transform: translateX(100%) rotateY(180deg);
	}
	to {
		-webkit-transform: translateX(-100%) rotateY(-180deg);
		        transform: translateX(-100%) rotateY(-180deg);
	}
}

.logo {
	font-size: 2rem;
	font-family: "FKGroteskVariableTrialGX";
	font-variation-settings: "wght" 300;
	position: relative;
	height: var(--logoSize);
	width: var(--logoSize);

	transition: font-variation-settings 1s linear;
}
/*.logo a:link, .logo a:visited {
	color: var(--dark);
}
.logo a:hover, .logo a:active, .logo a:focus {
	-webkit-transform: rotateX(180deg);
	        transform: rotateX(180deg);

	font-variation-settings: "wght" 1000;
	-webkit-animation: rotation 5s infinite linear;
}*/

.circle-link {
	transform: scale(.85, .85);
}
.circle-link * {
	transition: transform .3s cubic-bezier(.25, .46, .45, .94);
}

.logo .circle-link {
	display: grid;
	align-items: center;
	grid-column: 1;
	grid-row: 1;
	height: var(--logoSize);
    width: var(--logoSize);
}

/* Logo */
.logo .circle-logo {
	width: var(--logoCircleSize);
	height: var(--logoCircleSize);
    justify-self: center;
    position: relative;
}
.logo .circle-logo > * {
	display: grid;
}

.logo .circle-center {
	position: absolute;
	display: grid;
}
.logo .circle-center svg {
	width: var(--logoCircleSize);
	height: var(--logoCircleSize);
}

.logo .circle-top {
	position: absolute;
	/*top: -.75rem;*/
	transform: translate3d(0, -.75rem, 0);
}
.logo .circle-top svg {
	width: var(--logoCircleSize);
	height: var(--logoCircleSize);
}
a.logo-link:hover .circle-logo .circle-top , 
a.logo-link:active .circle-logo .circle-top , 
a.logo-link:focus .circle-logo .circle-top {
	transform: translate3d(0.68rem, 0.45rem, 0);
}

.logo .circle-right {
	position: absolute;
    transform: translate3d(0.68rem, 0.45rem, 0);
}
.logo .circle-right svg {
	width: var(--logoCircleSize);
	height: var(--logoCircleSize);
}
a.logo-link:hover .circle-logo .circle-right , 
a.logo-link:active .circle-logo .circle-right , 
a.logo-link:focus .circle-logo .circle-right {
	transform: translate3d(-0.68rem, 0.45rem, 0);
}

.logo .circle-left {
	position: absolute;
    transform: translate3d(-0.68rem, 0.45rem, 0);
}
.logo .circle-left svg {
	width: var(--logoCircleSize);
	height: var(--logoCircleSize);
}
a.logo-link:hover .circle-logo .circle-left , 
a.logo-link:active .circle-logo .circle-left , 
a.logo-link:focus .circle-logo .circle-left {
	transform: translate3d(0, -.75rem, 0);
}

.glitch {
	position: relative;
    text-decoration: none;
    color: #fff;
    transition: transform .2s cubic-bezier(.25, .46, .45, .94);
}
.glitch:after {
	position: absolute;
	content: 'A';
	z-index: -1;
	top: 0%;
	left: 0%;
	color: var(--dark-text);
	z-index: -2;
	transition: transform .2s cubic-bezier(.25, .46, .45, .94);
}
.glitch:before {
	position: absolute;
	content: 'A';
	z-index: -1;
	top: 0%;
	left: 0%;
	color: var(--dark-text);
	transition: transform .2s cubic-bezier(.25, .46, .45, .94);
}
.glitch:hover {
    font-variation-settings: 'wght' 100;
}
.glitch:hover:after {
    transform: translate(-.08rem, 0rem);
    /*transform: rotate(45deg);*/
}
.glitch:hover:before {
    transform: translate(.08rem,  0rem);
    /*transform: rotate(-45deg);*/
}



.nav-items {
	display: -ms-grid;
	display: grid;
	align-items: center;

	grid-column: 2 / -1;

	justify-content: end;
	-ms-grid-columns: ( minmax(1rem, 4.5rem) )[auto-fit];
	    grid-template-columns: repeat( auto-fit, minmax(1rem, 4.5rem) );
	letter-spacing: var(--tinyletterspacing);
	text-align: right;
	font-size: .95rem;
	height: var(--logoSize);
}
.nav-items div {
    text-align: center;
    min-width: 4rem;
    justify-self: flex-end;
}
.nav-items a:link, .nav-items a:visited {
	font-family: "FKGroteskVariableTrialGX";
	font-variation-settings: "wght" 400;

	color: var(--dark);
}
a.active:link, a.active:visited {
	font-family: "FKGroteskVariableTrialGX";
	font-variation-settings: 'wght' 1000;
}
.nav-items a:hover, .nav-items a:active, .nav-items a:focus {
	font-family: "FKGroteskVariableTrialGX";
	font-variation-settings: 'wght' 1000;

	color: var(--dark);
}

@media (min-width: 35rem) {
	.logo {
		font-size: 2.6rem;
	}
	.circle-link {
		transform: scale(1, 1);
	}
	nav {
		margin: 5rem var(--sidepadding-large) 0 var(--sidepadding-large);
	}
	.nav-items {
		-ms-grid-columns: ( minmax(1rem, 8rem) )[auto-fit];
		    grid-template-columns: repeat( auto-fit, minmax(1rem, 8rem) );
		font-size: 1rem;
	}
}


.intro {
	display: -ms-grid;
	display: grid;
	align-items: center;
	/*grid-template-columns: repeat(2, minmax(250px, 1fr));*/
	-ms-grid-columns: 0;
	    grid-template-columns: 0;

	margin: 0 var(--sidepadding-small);

	padding-top: 3rem;
	padding-bottom: 1.6rem;
	border-bottom: dotted var(--lightgray) 1px;

	color: var(--dark);
}
.intro .name {
	font-variant-ligatures: normal;
	font-family: "Cambon Thin";
	font-weight: 300;
	font-size: 3rem;
	line-height: 1;
	letter-spacing: -.08rem;
	z-index: 100;
   	white-space: nowrap; 
   	grid-row: 1;
}
.intro .stats {
	font-family: SoLow-Trial;
	font-weight: 300;

	text-align: left;

	font-size: 9.5rem;
   	line-height: 1;
   	
   	grid-row: 1;
   	grid-column: 1;

	-webkit-text-stroke-width: 1px;
  	-webkit-text-stroke-color: var(--lightgray);

   	white-space: nowrap; 
   	color: rgba(100, 100, 100, 00);

   	display: none;
}

.intro-secondary {
	margin: 1.5rem var(--sidepadding-small) 0 var(--sidepadding-small);
}
.intro-tertiary {
	margin: 0 var(--sidepadding-small) 0 var(--sidepadding-small);
}
.intro-tertiary .extra-info {
	font-size: 0.8rem;
	line-height: 1.4;
	 letter-spacing: var(--tinyletterspacing); 
	font-family: "BC Liguria";
	-webkit-font-feature-settings: 'case' on;
	        font-feature-settings: 'case' on; 
	font-weight: 300;

	padding: 6px 7px 4px 7px;
	/*margin-left: -.4rem;*/
	/*margin-top: -1px;*/
	display: inline-block;
	/*border: dashed 1px var(--lightgray);*/
	background-color: var(--offwhite);
	border-radius: 3px;
	opacity: .9;
}


.intro-secondary .stat:last-of-type {
	margin-left: 2rem;
}
.stats-secondary {
display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}
.stats-secondary .stat {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	align-items: baseline;
}

.stats-secondary .num {
	font-size: 1.2rem;
	/* letter-spacing: var(--tinyletterspacing); */
	font-family: "BC Liguria";
	-webkit-font-feature-settings: 'case' on;
	        font-feature-settings: 'case' on; 
	font-weight: 300;
}

.stats-secondary .type {
	font-size: 1.2rem;
	/* letter-spacing: var(--tinyletterspacing); */
	font-family: "Cambon Light";
	font-weight: 200;
}

@media (min-width: 35rem) {
	.intro {
		margin: 0 var(--sidepadding-large);
		padding-bottom: 2rem;
		padding-top: 6rem;
	}
	.intro .name {
		font-size: calc( 3rem + (5 - 3) * ( (100vw - 35rem) / ( 80 - 35) ));
		/*font-size: 6rem;*/
	}
	.intro .stats {
		/*font-size: 5.8rem;*/
	}
	.intro-secondary {
		margin: 1.5rem var(--sidepadding-large) 0 var(--sidepadding-large);
	}
	.intro-tertiary {
		margin: 0 var(--sidepadding-large) 0 var(--sidepadding-large);
	}
	.intro-secondary .stat:last-of-type {
		margin-left: 2rem;
	}
}

.tiles {
	margin-top: 1.6rem;
	margin-bottom: 3rem;

	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 2.6rem 0;

	grid-template-rows: auto;
	justify-content: stretch;
}
.tile {
	grid-column: 1;
	display: grid;
}

.tile .tile-title a {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	align-items: baseline;
	margin: 1rem var(--sidepadding-small) 0 var(--sidepadding-small);
}
.tile .tile-media {
	background-color: #000000; /* Default bg that will get restyled based on the Markdown front matter */ 
	height: 100%;
	overflow: hidden;
	border-radius: 1px;
	position: relative;
	transition: opacity 0.2s linear;
	will-change: opacity;

	/* Default aspect ratio */
	aspect-ratio: 2/1.2;
}
.tile-media .videoWrapper {
	height: 100%;
}
.tile-media img,
.tile-media .videoWrapper video {
	width: 100%;
	height: 100%;
}

/* For loading */
.tile, .tile-work-media {
	opacity: 0;
	transition: opacity 0.2s linear;
}

/* Sizes for the home view */

/* Gives a little bit of padding within the grid */
.tile-media.contain img,
.tile-media.contain .videoWrapper video {
	-o-object-fit: contain;
	   object-fit: contain;
	-o-object-position: 50% 50%;
	   object-position: 50% 50%;
	padding: 1.4rem 1.4rem;
}

/* Same as contain, but rounds the corners */
/* Needs additional adjustments to the width */
.tile-media.contain-roundcorners {
	padding: 1.4rem 0;
}

.tile-media.contain-roundcorners img,
.tile-media.contain-roundcorners .videoWrapper video {
	-o-object-fit: contain;
	   object-fit: contain;
	-o-object-position: 50% 50%;
	   object-position: 50% 50%;
	margin: 0 auto;
	width: auto;
	display: flex; /* ... Not sure why this works */
}
.tile-media.contain-roundcorners img,
.tile-media.contain-roundcorners .videoWrapper video {
	border-radius: 1.2rem;
}


/* Same as contain and roundcorners, but rounds the corners at a smaller */
.tile-media.contain-roundcorners-small {
	padding: 1.4rem 0;
}

.tile-media.contain-roundcorners-small img,
.tile-media.contain-roundcorners-small .videoWrapper video {
	-o-object-fit: contain;
	   object-fit: contain;
	-o-object-position: 50% 50%;
	   object-position: 50% 50%;
	margin: 0 auto;
	width: auto;
	display: flex; /* ... Not sure why this works */
}
.tile-media.contain-roundcorners-small img,
.tile-media.contain-roundcorners-small .videoWrapper video {
	border-radius: 1rem;
}

/* Gives a large amount of paiing within the grid */
.tile-media.contain-large img,
.tile-media.contain-large .videoWrapper video {
	-o-object-fit: contain;
	   object-fit: contain;
	-o-object-position: 50% 50%;
	   object-position: 50% 50%;
	padding: 4vw 0;
}

/* Causes the image to have no margins and be full height */
.tile-media.fill img,
.tile-media.fill .videoWrapper video {
	margin: 0 auto;
	-o-object-fit: contain;
	   object-fit: contain;
	-o-object-position: 50% 50%;
	   object-position: 50% 50%;
/*	height: auto;
	width: 100%;*/
}

/* Causes the image to full the container */
.tile-media.cover img,
.tile-media.cover .videoWrapper video {
	-o-object-fit: cover;
	   object-fit: cover;
	-o-object-position: 50% 50%;
	   object-position: 50% 50%;
}





/* Handles hover / tap events when someone has clicked it */
.icon-pointer {
	width: 1.7rem;
	height: 1.7rem;
	position: absolute;
	bottom: 0rem;
	right: 0rem;
	-webkit-transform: translate3d(0rem, 0rem, 0);
	        transform: translate3d(0rem, 0rem, 0);
	opacity: 0;
	transition: opacity 0.4s linear, -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.4s linear;
	transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.4s linear, -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.icon-pointer svg,
.icon-pointer svg g, 
.icon-pointer svg rect {
	fill: var(--rulegray);
}
.tile-media:hover .icon-pointer {
	opacity: .8;
	-webkit-transform: translate3d(-.5rem, -.5rem, 0);
	        transform: translate3d(-.5rem, -.5rem, 0);
}
.tile-media:hover {
	opacity: .85;
}

.tile-title a:hover,
.tile-title a:active,
.tile-title a:focus {
	color: var(--lightgray);
}
.tile-title a svg g {
	fill: var(--lightgray);
	transition: fill 0.08s linear;
}


.tile-title .num {
	font-size: 1.2rem;
	font-family: "BC Liguria";
	-webkit-font-feature-settings: 'case' on;
	        font-feature-settings: 'case' on; 
	font-weight: 300;
}

.home-view .tile-title a:hover,
.home-view .tile-title a:active,
.home-view .tile-title a:focus {
	color: rgba(80,80,80,.5);
}

.tile-title .name {
	font-size: 1.2rem;
	font-family: "Cambon Light";
	font-weight: 200;
	text-transform: uppercase;
}
.posts {
	padding: 0 0 1.2rem 0;
	border-top: dotted var(--lightgray) 1px;
}
.post-preview {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-gap: 2rem;
	margin: 2rem var(--sidepadding-small);
}
.post-preview .meta-info {
	font-size: .8rem;
	font-family: "BC Liguria";/* TODO: Try both; */
	font-family: "FKGroteskVariableTrialGX";
	letter-spacing: var(--tinyletterspacing);
	font-variant-numeric: tabular-nums;

	-webkit-font-feature-settings: 'ss12' on, 'ss13' on;

	        font-feature-settings: 'ss12' on, 'ss13' on;
	font-weight: 100;
	font-variation-settings: "wght" 100;

	-webkit-font-feature-settings: 'case' on;
	        font-feature-settings: 'case' on; 
}
.post-preview .post-content {
	font-size: 1.2rem;
	font-family: "Cambon Thin";
	font-weight: 200;

	-ms-grid-column: 2;

	-ms-grid-column-span: 5;

	grid-column: 2 / 7;

	/* Adjustment to align with the other typeface */
	margin-top: -0.45rem;
}
.post-preview .post-content a:hover,
.post-preview .post-content a:active, 
.post-preview .post-content a:focus {
	color: var(--lightgray);
}
.home-view .post-preview .post-content a:hover,
.home-view .post-preview .post-content a:active, 
.home-view .post-preview .post-content a:focus {
	color: rgba(80,80,80,.5);
}

.post-preview .post-content .post-summary {
	font-size: 0.9rem;
	font-variation-settings: "wght" 100;
	font-family: "FKGroteskVariableTrialGX";
	line-height: 1.5;
	margin-top: 0.6rem;
	opacity: .9;
}

@media (min-width: 35rem) {
	.posts {
		padding: 2rem 0 2.2rem 0;
	}
	.post-preview {
		-ms-grid-columns: 1fr 1fr 1fr;
		    grid-template-columns: 1fr 1fr 1fr;

		margin: 3rem 0;
	}
	.post-preview .meta-info {
		font-size: 1.2rem;
		font-weight: 200;
		font-variation-settings: "wght" 200;

		-ms-grid-column: 1;

		-ms-grid-column-span: 1;

		grid-column: 1 / 2;
		margin-left: calc(var(--sidepadding-large) * 3.2);
	}
	.post-preview .post-content {
		font-size: 1.8rem;
		font-weight: 200;

		-ms-grid-column: 2;

		-ms-grid-column-span: 2;

		grid-column: 2 / 4;
		margin-right: calc(var(--sidepadding-large) * 2);

		/* Adjustment to align with the other typeface */
		margin-top: -.75rem;
	}
}
@media (min-width: 70rem) {
	.post-preview .meta-info {
		font-size: 1rem;
	}
	.post-preview .post-content {
		font-size: 2.2rem;

		/* Adjustment to align with the other typeface */
		margin-top: -1.3rem;
	}
}

/* This isn't looking great... maybe we need more material */
footer {
	background-color: rgba(100,100,100,.03);
	padding: 3rem var(--sidepadding-small) 3.4rem;
	color: var(--dark);
}
footer.bar-white {
	background-color: var(--offwhite);
}
.message {
	/*font-family: SoLow-Trial;*/
	/* font-family: "FKGroteskVariableTrialGX"; */
	letter-spacing: .01rem;
	font-weight: 300;
	font-size: 1.2rem;
	margin-bottom: 1.5rem;
	max-width: 46rem;
}
.bottom {
	/*display: flex;*/
}

footer .links {
	margin-left: -.25rem;
}

/* To center the variable font */
footer .links a:link:nth-of-type(1) {
	min-width: 3rem;
}
footer .links a:link:nth-of-type(2) {
	min-width: 4rem;
}
footer .links a:link:nth-of-type(3) {
	min-width: 4.5rem;
}
footer .links a:link:nth-of-type(4) {
	min-width: 5.25rem;
}
footer .links a:link,
footer .links a:visited {

	color: var(--lightgray);

	display: inline-block;
	text-align: center;

	font-size: .9rem;
	font-weight: 300;
	font-variation-settings: "wght" 300;
	font-family: "FKGroteskVariableTrialGX";
	line-height: 2;

	flex: 1 50%;
	color: var(--dark);
	letter-spacing: var(--tinyletterspacing);
	margin-right: 0.3rem;
	margin-left: 0.3rem;
}
footer .links a:hover,
footer .links a:focus,
footer .links a:active {
	font-variation-settings: "wght" 1000;
}
footer .links a:first-of-type {
	margin-left: 0;
}
.copyright {
	font-size: .7rem;
	line-height: 1.6;
	font-family: "BC Liguria";
	-webkit-font-feature-settings: 'case' on;
	        font-feature-settings: 'case' on; 
	font-weight: 300;
	margin-top: 1rem;
	color: var(--rulegray);
}

@media (min-width: 35rem) {
	.tile {
		
	}

	footer {
		padding: 4rem var(--sidepadding-large) 4.1rem;
	}
	footer.compressed {
		padding: 3rem var(--sidepadding-large) 3.4rem;
	}
}
@media (min-width: 50rem) {

	/* Switch to full grid layout */
	.tiles {
		margin-top: 3rem;
		margin-bottom: 4rem;

		display: grid;
		grid-template-columns: calc(var(--sidepadding-small) - 2.5rem) 1fr 1fr 1fr 1fr calc(var(--sidepadding-small) - 2.5rem);
		grid-gap: 3rem 2.5rem;
	}

	.tile {
		
	}
	.tile .tile-title a {
		margin: 1rem 0 0 0;
	}
	.tile .tile-title a,
	.tile .tile-title {
  		display: flex;
		align-items: baseline;
	}
	.tile-media {
		background-color: #000;
		object-fit: cover;
	}
	.tile-title .name {
		max-width: 12rem;
	}

	/* Specific compositional tile adjustments */
	.tile.one-up {
		grid-column: 2 / 6;
	}
	.tile.one-up .tile-media {
		aspect-ratio: 4/2.1;
	}

	.tile.one-up-hero {
		grid-column: 1 / 7;
	}
	.tile.one-up-hero .tile-media {
		aspect-ratio: 1/4;
	}

	.tile.two-up-left {
		grid-column: 2 / 4;
	}
	.tile.two-up-left .tile-media {
		aspect-ratio: 1;
	}

	.tile.two-up-right {
		grid-column: 4 / 6;
	}
	.tile.two-up-right .tile-media {
		aspect-ratio: 1;
	}

	.tile.vertical {
	}
	.tile.vertical .tile-media {
		aspect-ratio: 4.1/5;
	}
}

@media (min-width: 80rem) {

	.tiles {
		grid-template-columns: calc(var(--sidepadding-large) - 2.5rem) 1fr 1fr 1fr 1fr calc(var(--sidepadding-large) - 2.5rem);
		margin-top: 4rem;
		margin-bottom: 5rem;
	}
	.bottom {
  		display: flex;
	}

	footer {
		padding: 7rem var(--sidepadding-large) 7rem;
	}
	footer .links {
		margin-left: -1rem;
	}
	footer .links a:link, footer .links a:visited {
		margin-right: 0.6rem;
		margin-left: 0.6rem;
	}
	.copyright {
		text-align: right;
		flex: 1 50%;
		margin-top: .4rem;
	}
	.message {
		font-size: 1.2rem;
	}

}



/* Writing */

.view-header {
	display: -ms-grid;
	display: grid;
	align-items: center;
	/*grid-template-columns: repeat(2, minmax(250px, 1fr));*/

	margin: 0 var(--sidepadding-small);

	/*padding-bottom: 1.2rem;*/
	padding-top: 1.8rem;
	/*border-bottom: dotted var(--lightgray) 1px;*/

	color: var(--dark);
}
.view-label {
	font-family: "Cambon Thin";
	font-weight: 200;

	font-size: 2rem;
	line-height: 1.2;
	letter-spacing: -.04rem;

	padding-top: 1.8rem;
}
.pagination {
	font-variation-settings: "wght" 400;
	font-family: "FKGroteskVariableTrialGX";
    letter-spacing: var(--tinyletterspacing);
	font-size: 1rem;
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin: 2rem 0 2.2rem 0;
}
.pagination a:active,
.pagination a:focus,
.pagination a:hover {
	font-variation-settings: "wght" 800;
}
.next {
	align-self: flex-end;
}
.prev {
	align-self: flex-start;
}
.disabled {
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	color: var(--lightgray);
}

@media (min-width: 35rem) {
	.view-header {
		margin: 0 var(--sidepadding-large);
		padding-top: 4rem;
	}
	.view-label {

		/*padding-top: 0;*/
		/* Min font size,  */
		font-size: calc( 2rem + (3 - 2) * ( (100vw - var(--midBreakpoint)) / ( var(--maxBreakpoint) - 35) ));
		font-size: 3rem;
	}
	.pagination {
	    margin: 2rem 0 4rem 0;
	}
}
@media (min-width: 70rem) {
	.view-header {
		align-self: flex-start;
	}

}

.writing {
	margin: 0 var(--sidepadding-small) 2rem var(--sidepadding-small);
}
.social {
	margin: 1.2rem var(--sidepadding-small) 1.4rem var(--sidepadding-small);
	padding: 1.2rem 0 1.35rem 0;
	border-bottom: dotted var(--lightgray) 1px;
	border-top: dotted var(--lightgray) 1px;
	justify-items: start;
    align-items: baseline;
    justify-content: start;
}
.currently {
	font-family: "Lector";
	text-transform: uppercase;
	font-size: 1rem;
    letter-spacing: var(--tinyletterspacing);
	-webkit-font-feature-settings: 'case' on;
        font-feature-settings: 'case' on;

    -ms-grid-column: 1;

    -ms-grid-column-span: 2;

    grid-column: 1 / 3;
    -ms-grid-row: 1;
    grid-row: 1;
    margin-bottom: 0.3rem;
}
.current-col-one {
	-ms-grid-row: 2;
	grid-row: 2;
}
.current-col-two {
	-ms-grid-row: 3;
	grid-row: 3;
}
.experiences .col-two .col-label:not(:first-of-type) {
	margin-top: 2.2rem; /* Extra margin for Speaking header */
	margin-bottom: 1.1rem;
}
.social-relation div {
	display: inline-block;
	/*border: dotted red 1px;*/
}
.social-name {
	text-transform: uppercase;
	font-size: 1rem;
	margin-top: 1rem;

	letter-spacing: var(--tinyletterspacing);
}

/* Nix the extra margin on the first one only */
.current-col-one .social-relation:nth-of-type(1) .social-name {
	margin-top: 0;
}
.social-name a:link,
.social-name a:visited {
	font-variation-settings: "wght" 400;
	font-family: "FKGroteskVariableTrialGX";
}
.social-name a:hover,
.social-name a:focus,
.social-name a:active {
	color: var(--lightgray);
	/*font-variation-settings: "wght" 400;*/
}
.icon-arrow {
	margin: 0 .65rem 0 .5rem;
}
.icon-arrow svg {
	height: 12px;
}
.icon-arrow svg path {
	fill: var(--lightgray);
}
.social-reason {
	font-size: 1.1rem;
	font-family: "Cambon Light";
}
@media (min-width: 35rem) {
	.writing {
		margin: 0 var(--sidepadding-large);
	}
	.social {
		margin: 2rem var(--sidepadding-large) 2rem var(--sidepadding-large);
	}
	.about .current-col-one {
	    -ms-grid-column: 1;
	    -ms-grid-column-span: 4;
	    grid-column: 1 / 5; /* Adjust horizontal grid placement on about page */
	}
}


@media (min-width: 50rem) {
	.social {
		grid-gap: 2.5rem;
		display: -ms-grid;
		display: grid;
		-ms-grid-row: 1;
		grid-row: 1rem;
	}
	.social .social-relation:nth-of-type(even) {
		margin-top: 1rem;
	}
	.social-name {
		margin-top: 0.15rem;
	}
	.currently {
	    -ms-grid-column: 1;
	    -ms-grid-column-span: 2;
	    grid-column: 1 / 3;
	    -ms-grid-row: 1;
	    grid-row: 1;
	    margin-bottom: 0;
	}
	.current-col-one {
		-ms-grid-column: 3;
		-ms-grid-column-span: 2;
		grid-column: 3 / 5;
		-ms-grid-row: 1;
		grid-row: 1;
	}
	.current-col-two {
		-ms-grid-column: 5;
		-ms-grid-column-span: 4;
		grid-column: 5 / 9;
		-ms-grid-row: 1;
		grid-row: 1;
	}
}
@media (min-width: 70rem) {
	.icon-arrow svg {
		height: 14px;
	}
	.social-name {
		font-size: 1.2rem;
		font-family: "FKGroteskVariableTrialGX";
		text-transform: uppercase;
		letter-spacing: var(--tinyletterspacing);
	}
	.social-reason {
		font-size: 1.35rem;
		font-family: "Cambon Light";
	}
	.currently {
	    font-size: 1.2rem;
	}
}

.article {
	display: -ms-grid;
	display: grid;
	grid-gap: 0.5rem;
	margin: 2.1rem 0 2rem 0;
	padding: 0 0 2rem 0;
	border-bottom: dotted var(--lightgray) 1px;
}
.push-container {
display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
	align-items: baseline;

	min-width: 9rem;
}
.article-meta .tags {
	font-size: 1.1rem;
	font-family: "Cambon Light";
	font-weight: 200;
	text-transform: uppercase;
	flex-basis: auto;
	margin-top: 0.4rem;
}
.tags p {
	margin: 0;
}
.article-meta .tags a:link,
.article-meta .tags a:visited {
	display: inline-block;
}
.article-meta .tags a:hover,
.article-meta .tags a:focus,
.article-meta .tags a:active {
	color: var(--lightgray);
}
.article-meta .date {
	font-size: 1.2rem;
	font-family: "BC Liguria";
	-webkit-font-feature-settings: 'case' on;
	        font-feature-settings: 'case' on;
	font-weight: 300;
	white-space: nowrap;
	flex-basis: 0; /* Sets the width of the container to match the content */
	order: 2;
}
.article-meta .icon {
	order: 1;
}


@media (max-width: 70rem) {
	.article-meta .icon {
		margin-left: 0;
	}
}

.article-preview {
	-ms-grid-column: 1;
	grid-column: 1;
	-ms-grid-row: 2;
	grid-row: 2;
	-webkit-font-feature-settings: 'case' on;
	        font-feature-settings: 'case' on; 
}
.article-preview h1 { /* Use a shader for changing the background based on the article that’s in view */
	font-family: "FKGroteskVariableTrialGX";
	font-weight: 500;
	font-variation-settings: "wght" 500;
	margin: 0.4rem 0 0 0;
	line-height: 1.2;
	font-size: 1.45rem;
	transition: font-variation-settings .2s linear;
	/*transition: all 0.2s;*/
}
.article-preview a:hover h1,
.article-preview a:active h1,
.article-preview a:focus h1  {
	font-variation-settings: "wght" 600;
}
.article-preview p {
	margin: .5rem 0 0 0;
	font-family: "Lector";
	font-size: 1.1rem;
	line-height: 1.5;
	/*max-width: 50rem;*/
}
.article-preview .read-time {
	font-size: 0.7rem;
	font-variation-settings: "wght" 400;
	font-family: "FKGroteskVariableTrialGX";
	text-transform: uppercase;

	letter-spacing: var(--tinyletterspacing);
	font-variant-numeric: lining-nums;
	
	opacity: .8;

	color: var(--medium-dark);
	border: dotted .5px var(--medium-dark);

	padding: .1rem 0.4rem .12rem 0.4rem;
    border: dotted 1px var(--medium-dark);
    border-radius: 3px;

    /*margin-left: 0.3rem;
    position: relative;
    top: -.18rem;
    display: inline-block;*/
    display: block;
    margin-top: 1rem;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content
}

@media (min-width: 70rem) {
	/* Break the meta information later */	
	.article-meta {
	display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
	}
	.article-meta-shift {
	display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
		justify-content: flex-end;
		align-items: flex-start;

		/* Align right */
		margin-left:auto; 
		margin-right:0;
		margin-bottom: 0.2rem;
	}
	
	.article-meta .date {
		order: 1;
	}
	.article-meta .icon {
		/* Center the icon in the case the date string content is longer than normal */
		flex-basis: auto;
		margin: 0 auto;
		order: 2;
	}
}

@media (min-width: 45rem) {
	.article {
		-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
		    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-gap: 2.5rem;
		margin: 4rem 0;
		padding: 0 0 4rem 0;

		border-top: none;
	}
	.article-meta {
		align-items: baseline;
		-ms-grid-column: 1;
		-ms-grid-column-span: 3;
		grid-column: 1 / 4;
		-ms-grid-row: 1;
		grid-row: 1;
	}
	.article-meta .tags {
		font-size: 1.2rem;
		text-transform: uppercase;
	}
	.article-preview {
		grid-column: 9 / -6;
		-ms-grid-row: 1;
		grid-row: 1;
	}

	.article-preview h1 {
		margin: -.4rem 0 0 0;
	}
}
@media (min-width: 70rem) {
	.article-tags.tags {
		margin-top: -0.25rem;
	}
	.article-preview h1 {
		font-size: 2.15rem;
		font-weight: 300;
		font-variation-settings: "wght" 300;
	}
	.article-preview p {
		font-size: 1.2rem;
		line-height: 1.6;
	}
}

/* Work / Casestudies */
.work {
	margin: 0 0 2rem 0;
	padding: 0 0 2rem 0;
}
.work-item {
	grid-gap: 0.5rem;
	margin: 0 0 2rem 0;
	padding: 0 0 2rem 0;
	border-bottom: dotted var(--lightgray) 1px;
	width: 100%;

	-ms-grid-rows: 1fr;

	    grid-template-rows: 1fr;
	-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.social-work {
	margin-bottom: 0.4rem;
	border-bottom: none;
}
.work-preview {
	margin-top: 1.8rem;
}
a.button {
	font-size: 0.8rem;
    /*font-family: "BC Liguria";
    font-weight: 100;*/
    font-variation-settings: "wght" 400;
	font-family: "FKGroteskVariableTrialGX";
	/*border: dotted 1px var(--dark);*/
	color: var(--dark);
	display: inline-block;
	padding: .7rem 1rem .7rem 1rem;
	margin-top: 1rem;
	margin-left: 2px;
	text-transform: uppercase;
	letter-spacing: var(--tinyletterspacing);
	transition: color 0.1s linear, box-shadow 0.1s linear;
	text-align: center;
	box-shadow: 0px 0px 0px 1px var(--dark);
	border-radius: 1px;
}
a.button span {
	display: block;
}
a.button:hover,
a.button:active {
	/*box-shadow: 0px 0px 0px 1px var(--dark);*/
	
	/*font-variation-settings: "wght" 600;
	font-family: "FKGroteskVariableTrialGX";*/
}
.work-preview a:hover h1,
.work-preview a:active h1,
.work-preview a:focus h1 {
	font-variation-settings: "wght" 600;
}
.work-preview h1 { /* Use a shader for changing the background based on the work that’s in view */
	font-variation-settings: "wght" 450;
	font-family: "FKGroteskVariableTrialGX";
	letter-spacing: var(--tinyExtraLetterspacing);
	margin: -0.25rem var(--sidepadding-small) 0 var(--sidepadding-small);
	line-height: 1.2;
	font-size: 1.2rem;

	transition: 0.2s all;
	/*max-width: 50rem;*/
}
.work-preview p {
	margin: .5rem var(--sidepadding-small) 0 var(--sidepadding-small);
	/*font-family: "Lector";*/
	font-family: "Lector";
	font-size: 1.1rem;
	line-height: 1.5;
	/*max-width: 50rem;*/
}
.work-preview .button {
	margin: .8rem var(--sidepadding-small) 0 var(--sidepadding-small);
}
.work-preview p.casestudy-tags {
	font-variation-settings: "wght" 500;
	font-family: "FKGroteskVariableTrialGX";
	font-size: 0.8rem;
	margin-top: 1rem;
	color: var(--dark);
	letter-spacing: var(--tinyletterspacing);
}
.tile-work-media {
	/*background-color: var(--lightgray);*/
	width: 100%;
	/*height: 100%;*/
	overflow: hidden;
}
.work-media {
	/*background-color: black;*/
	/*height: 16rem;*/
}
.work-media .videoWrapper {
	/*height: 16rem;*/
}
.work-media .videoWrapper video, {
	/*height: 16rem;*/
}
.tile-work-media video {
	cursor: pointer;
}
.tile-work-media img,
.tile-work-media video {
	width: 100%;
	height: 16rem;
	-o-object-fit: cover;
	   object-fit: cover;
	-o-object-position: 50% 50%;
	   object-position: 50% 50%;
}


@media (min-width: 35rem) {
	.work {
		margin: 0 var(--sidepadding-large) 0 var(--sidepadding-large);
	}
	.social-work {
		margin-bottom: 2.8rem;
		border-bottom: dotted var(--lightgray) 1px;
	}
	.work-item {
		margin: 0 0 3rem 0;
		padding: 0 0 3rem 0;
	}
	.work-item:last-of-type {
		border-bottom: none;
		padding: 0;
	}
	.work-media {
		/*height: 20rem;*/
	}
	.work-preview {
		margin-top: 1.4rem;
	    max-width: 50rem;
	}
	.work-preview h1 {
		margin: -0.25rem 0 0 0;
		font-size: 1.45rem;
	}
	.work-preview p {
		margin: .5rem 0 0 0;
		font-size: 1.2rem;
	}
	.work-preview p.casestudy-tags {
		font-size: 0.8rem;
	}
	.work-preview .button {
		margin: .9rem 0 0 0; /* TODO: find more elegant way; */
	}
	.tile-work-media img,
	.tile-work-media video {
		height: 36vmax;
	}
}
@media (min-width: 50rem) {
	.tile-work-media img,
	.tile-work-media video {
		/*height: 24rem;*/
	}
}
@media (min-width: 70rem) {
	.work {
		display: -ms-grid;
		display: grid;
	}
	.work-item {
		display: -ms-grid;
		display: grid;
	}
	.work-media {
		-ms-grid-column: 1;
		-ms-grid-column-span: 5;
		grid-column: 1 / 6;
	    -ms-grid-row: 1;
	    grid-row: 1;
	    /*height: 30rem;*/
	}
	.work-preview {
		margin-top: 0;
		grid-column: 6 / -1;
	    -ms-grid-row: 1;
	    grid-row: 1;
	    max-width: 30rem;
	    margin-left: var(--sidepadding-large);

	    display: flex;
	}
	.work-preview > * {
		-ms-grid-row-align: center;
		    align-self: center;
	}

	.work-item.desc-first > .work-media {
		grid-column: 4 / -1;
	}
	.work-item.desc-first > .work-preview {
		-ms-grid-column: 1;
		-ms-grid-column-span: 3;
		grid-column: 1 / 4;
		margin-right: var(--sidepadding-large);
		margin-left: 0;
	}
	.tile-work-media img,
	.tile-work-media video {
		height: 30vmax;
		max-height: 36rem;
	}
}

/* About Me */
.about {
	/*border-top: dotted var(--lightgray) 1px;*/
	padding: 0 var(--sidepadding-small);
	/*margin-top: 1.15rem;
	padding-top: .65rem;*/
}
.about .view-header {
	/* For the about header, we want to nix this padding, 
	because .about is handling padding for the whole page as a container */
	margin-left: 0;
	/*padding-left: 0;*/
}
.view-label {
	-ms-grid-column: 1;
	-ms-grid-column-span: 2;
	grid-column: 1/3;
    -ms-grid-row: 1;
    grid-row: 1;
}
.aboutme {
	-ms-grid-column: 3;
	-ms-grid-column-span: 5;
	grid-column: 3/8;
	-ms-grid-row: 1;
	grid-row: 1;
	font-family: "Lector";
	font-size: 1.2rem;
	line-height: 1.6;
	margin-top: 1.1rem;
}
.aboutme-break {
	margin-top: 0.6rem;
	font-family: "Cambon Light";
	/*font-family: "Lector Italic";*/
}
.colophon {
    margin-top: 1rem;

    font-family: "FKGroteskVariableTrialGX";
    font-size: 1rem;
    line-height: 1.7;
}

/* All Columns */
.experiences .col-label {
    font-family: "FKGroteskVariableTrialGX";
    font-weight: 100;
    font-variation-settings: "wght" 100;
    font-size: 1rem;
}

/* Social items on the about page */
.about .social {
	-ms-grid-column: 3;
	-ms-grid-column-span: 5;
	grid-column: 3/8;
    -ms-grid-row: 4;
    grid-row: 4;
	display: -ms-grid;
	display: grid;

	margin: 0 0 5rem 0;
}

/* Col One */
.col-one {
	-ms-grid-column: 1;
	-ms-grid-column-span: 2;
	grid-column: 1/3;
	margin-top: 2rem;
}
.col-one ul {
	padding: 0;
	margin: 1rem 0 2rem 0.08rem;
	list-style: none;
}
.col-one li {
	margin: 0 0 1rem 0;
}
.experiences .location {
    font-family: "FKGroteskVariableTrialGX";
    font-size: .75rem;
    font-weight: 500;
    font-variation-settings: "wght" 500;
    text-transform: uppercase;
    margin-bottom: .25rem;
    letter-spacing: var(--tinyletterspacing);
}
.experiences .role {
    font-family: "FKGroteskVariableTrialGX";
    font-size: .85rem;
    letter-spacing: var(--tinyletterspacing);
}

/* Col Two */
.col-two {
	grid-column: 3 / -3;
	margin-top: 2rem;
}
.col-two ul {
	padding: 0;
	margin: 1.25rem 0;
	list-style: none;
}
.col-two ul.secondary-list {
	margin: 0.5rem 0;
}
.col-two li {
	margin: 0 0 1rem 0;
}
.article-name {
	font-family: "Lector Italic";
    font-size: .9rem;
    line-height: 1.5;
}
.talk-title {
	font-family: "Lector Italic";
    font-size: .9rem;
    line-height: 1.5;
}
.talk-location {
    font-family: "FKGroteskVariableTrialGX";
    font-size: .8rem;
    margin-top: .3rem;
}

/* Col Three */
.col-three {
	grid-column: 8 / -1;
	margin-top: 2rem;
}
.col-three ul {
	padding: 0;
	margin: 1rem 0 1.5rem 0;
	list-style: none;
}
.col-three ul.secondary-list {
	margin: 0.5rem 0;
}
.col-three li {
	margin: 0 0 1rem 0;
}
.client {
	font-family: "FKGroteskVariableTrialGX";
    font-size: .8rem;
    margin-top: .2rem;
}

@media (min-width: 35rem) {
	.about {
		padding: 1rem var(--sidepadding-large) 3rem var(--sidepadding-large);
		margin-top: 3rem;
		border-top: dotted var(--lightgray) 1px;
	}
	.about .view-header {
		/* For the about header, we want to nix this padding, 
		because .about is handling padding for the whole page as a container */
		/*margin: 0;
		padding: 0;*/
		padding-top: 0;
		margin-top: -1px; /* Account for the border */
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
		grid-column: 1/3;
	}
	.about .social {
		/*grid-gap: 1.2rem 2.5rem;*/
		-ms-grid-rows: 1fr;
		    grid-template-rows: 1fr;
	}
	.aboutme {
		-ms-grid-column: 3;
		-ms-grid-column-span: 5;
		grid-column: 3/8;
	    -ms-grid-row: 1;
	    grid-row: 1;
		font-size: 1.45rem;
		line-height: 1.6;
	}
	.colophon {
		-ms-grid-column: 3;
		-ms-grid-column-span: 5;
		grid-column: 3/8;
	    -ms-grid-row: 2;
	    grid-row: 2;

	    font-family: "FKGroteskVariableTrialGX";
	    font-size: 1.15rem;
	    line-height: 1.7;
	}
	.experiences {
		-ms-grid-column: 3;
		-ms-grid-column-span: 5;
		grid-column: 3/8;
		-ms-grid-row: 3;
		grid-row: 3;

		display: -ms-grid;

		display: grid;
		grid-gap: 1.2rem 2.5rem;

		-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
		    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	}

	.col-one ul {
		padding: 0;
		margin: 1.5rem 0 1.5rem 0.08rem;
		list-style: none;
	}
	.col-three ul {
		margin: 1.5rem 0 1.5rem 0;
	}
}

@media (min-width: 70rem) {
	.about {
		display: -ms-grid;
		display: grid;
		grid-gap: 1.8rem 2.5rem;
		-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
		    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	}
	.aboutme {
		margin-top: 3.05rem;
		max-width: 70rem;
	}
	.colophon {
	    margin-top: -.2rem;
	    max-width: 70rem;
	}
	.experiences {
		margin: 0.4rem 0 0 0;
		max-width: 70rem;
	}
	.col-one {
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
		grid-column: 1/3;
		margin-top: 0;
		max-width: 70rem;
	}
	.col-two {
		grid-column: 3 / -3;
		margin-top: 0;
		max-width: 70rem;
	}
	.col-three {
		margin-top: 0;
	}
	.about .social {
		padding: 1.8rem 0 1.8rem 0;
	}
}


/* Post */
.post {

	margin: 0 var(--sidepadding-small);

	padding-bottom: 2rem;
	padding-top: 2rem;
	border-bottom: dotted var(--lightgray) 1px;

	color: var(--dark);
}
.post .post-title {
	font-family: "Cambon Light";
	font-weight: 200;

	font-size: 2.2rem;
	line-height: 1.2;
	letter-spacing: -.04rem;

	margin: 1rem 0 0.7rem 0;
}
.post .article-meta {
	-ms-grid-column: 2;
	grid-column: 2;
	-ms-grid-row: 1;
	grid-row: 1;
	align-self: flex-end;

display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.article-meta-shift {
/*display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
	justify-content: flex-end;
	align-items: flex-start;*/
}

/* Inline block instead of flex for right alignment */

/* Adjust for inline block spacing */
.post .article-meta .icon {
	/*margin: 0 .6rem 0 .7rem; 
	width: 0;*/
}
.post .push-container {

}
.post .article-meta .date {

}
.post .article-meta .tags {
	display: inline;
	text-transform: capitalize;
}
.post .article-meta .tags > div {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}
.post-view-tags {
	font-size: 1.1rem;
	font-family: "Cambon Light";
	font-weight: 200;
	text-transform: uppercase;
	flex-basis: auto;
	margin-top: 0.4rem;
	order: 3;
}
.post .article-meta .article-tags {

}

.post-cross-reference {
	text-transform: capitalize;
	margin: 1.2rem var(--sidepadding-small) 0 var(--sidepadding-small);
	padding-bottom: 1.6rem;
	border-bottom: dotted var(--lightgray) 1px;
}
.also-posted {
	font-size: 1.2rem;
	font-family: "Cambon Light";
	font-weight: 200;
	display: inline-block;
}
.posted-on {
	font-family: "FKGroteskVariableTrialGX";
	text-transform: uppercase;
	font-size: 1.2rem;
	letter-spacing: var(--tinyletterspacing);
	display: inline-block;
}
.posted-on a:hover,
.posted-on a:active,
.posted-on a:focus {
	color: var(--lightgray);
}
.icon-double-colon {
	margin: 0 .65rem 0 .5rem;
	display: inline-block;
}


.post-body {
	padding: 1.9rem 0 2rem 0;
}
.post-body p {
	margin: 0 auto 1rem auto;
	padding: 0 var(--sidepadding-small) 0.21rem var(--sidepadding-small); /* This tiny bottom padding is to visually adjust for the letters within the box */

	font-family: "Lector";
	font-size: 1.1rem;
	line-height: 1.7;

	font-variant-numeric: lining-nums;
}
.post-body em {
	font-family: "Lector Italic";
}
.post-body sup {
	font-family: "FKGroteskVariableTrialGX";
	font-variation-settings: "wght" 400;
	font-size: .8rem;
	letter-spacing: 0.1rem;
}
.post-body .summary, 
.post-body .summary p {
	margin: -0.2rem auto 1.21rem auto;
	padding: 0 var(--sidepadding-small) 0 var(--sidepadding-small); /* This tiny bottom padding is to visually adjust for the letters within the box */

    font-family: "Lector";
	font-size: 1.1rem;
	line-height: 1.65;

	font-variant-numeric: lining-nums;
}
.post-body .summary p {
	padding: 0;
	margin: 0 0 0.6rem 0;
}
.post-body .summary p:nth-of-type(1) {
	/*font-size: 1.6rem;
	margin-bottom: 0.2rem;*/
	/*font-family: "BC Liguria";
	font-weight: 300;*/
	/*font-family: "FKGroteskVariableTrialGX";
	font-variation-settings: "wght" 600;
	letter-spacing: var(--tinyletterspacing);*/
}
.post-body .summary p:nth-of-type(2) {
	padding: 0;
	margin: 0 0 0.6rem 0;
	font-family: "FKGroteskVariableTrialGX";
	font-variation-settings: "wght" 400;
	font-size: 1rem;
	letter-spacing: var(--tinyletterspacing);
}


.post-body .summary-second {
	margin: 0 auto 1rem auto;
	padding: 0 var(--sidepadding-small) 0.21rem var(--sidepadding-small); /* This tiny bottom padding is to visually adjust for the letters within the box */

	font-family: "FKGroteskVariableTrialGX";
    font-variation-settings: "wght" 400;
	font-size: 0.9rem;
	line-height: 1.7;

	font-variant-numeric: lining-nums;
}
.post-body .summary-second ul {
	padding: 0 0 0 0.7rem;
	margin-bottom: 0;
}
.summary-second ul li {
	font-family: "FKGroteskVariableTrialGX";
    font-variation-settings: "wght" 400;
	font-size: 0.9rem;
	line-height: 1.7;
	letter-spacing: var(--tinyletterspacing);
}
.summary-second ul li > span {
    font-variation-settings: "wght" 600;
}
.post-body .summary-second ul li:after, 
.post-body .summary-second ol li:after {
	top: auto;
}
.post-body p.paragraph-intro {
	font-family: "Lector Italic";
	font-size: 1.1rem;
}
.post-body p small {
	font-family: "FKGroteskVariableTrialGX";
	font-size: 0.9rem;
	line-height: 1.8;
    display: inline-block;
}
.post-body ol, .post-body ul {
	margin: 0 auto 1rem auto;
	padding: 0 var(--sidepadding-small) 0.21rem calc(var(--sidepadding-small) + 0.8rem); /* This tiny bottom padding is to visually adjust for the letters within the box */

	font-family: "Lector";
	font-size: 1.1rem;

	font-variant-numeric: lining-nums;
	list-style: none;
}
.post-body li  {
	overflow: visible;
	position: relative;
	margin-bottom: 0.5rem;
}
.post-body li p {
	padding-left: 0; /* Accounts for footnotes */
}
.post-body a:link,
.post-body a:visited {
	color: #3F94A6;
}
.post-body a:hover,
.post-body a:active,
.post-body a:focus {
	color: #013945;
}
.post-body ul li:after,
.post-body ol li:after {
	position: absolute;
	content: '·';
	color: var(--dark);
	height: 2em;
	width: 2em;
	left: -0.6em;
    top: -.06em;
}

.post-body figure {
	padding: 0 var(--sidepadding-small) 0 var(--sidepadding-small); /* This tiny bottom padding is to visually adjust for the letters within the box */
	margin: 1rem auto 0 auto;
	font-family: "FKGroteskVariableTrialGX";
	font-size: 0.85rem;
	line-height: 1.5;
	font-weight: 400;
	font-variation-settings: "wght" 400;
	color: var(--dark);
}

.post-body h1 {
	margin: 0 var(--sidepadding-small) 1rem var(--sidepadding-small);
    font-family: "FKGroteskVariableTrialGX";
    font-size: 1.6rem;
    letter-spacing: var(--tinyletterspacing);
    font-weight: 500;
    font-variation-settings: "wght" 500;
    margin-top: 0.6rem;
    margin-bottom: 0.3rem;
}
.post-body h2 {
	margin: 0 var(--sidepadding-small) 1rem var(--sidepadding-small);
    font-family: "FKGroteskVariableTrialGX";
    font-size: 1.6rem;
    letter-spacing: var(--tinyletterspacing);
    font-weight: 500;
    font-variation-settings: "wght" 550;
    margin-top: 0.6rem;
    margin-bottom: 0.3rem;
}
.post-body h3 {
	margin: 0 var(--sidepadding-small) 1rem var(--sidepadding-small);
	font-family: "FKGroteskVariableTrialGX";
    font-size: 1.2rem;
    letter-spacing: var(--tinyExtraLetterspacing);
    font-weight: 600;
    font-variation-settings: "wght" 400;
    margin-top: 0.6rem;
    margin-bottom: 0.3rem;
}
.post-body h4 {
	margin: 0 var(--sidepadding-small) 1rem var(--sidepadding-small);
	font-family: "FKGroteskVariableTrialGX";
    font-size: 1rem;
    letter-spacing: var(--tinyExtraLetterspacing);
    font-weight: 500;
    font-variation-settings: "wght" 600;
    margin-top: 0.6rem;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    -webkit-font-feature-settings: 'case' on;
            font-feature-settings: 'case' on; 
}

.post-body img, 
.post-body media {
	margin: 1.6rem auto;
	display: block;
	max-height: 88vh;
	width: auto;
	max-width: 100%;
	border: dotted 1px var(--lightgray);
}
.post-body iframe {

}
.post-body .hero.image-contain {
	padding: 0 var(--sidepadding-small) 0 var(--sidepadding-small);
	margin: 0;
}

.video-center {
	display: grid;
	align-items: center;
} 
.post-body .video-hero {
	margin: 0 auto;
	width: auto;
	max-width: 100%;
	text-align: center;
	display: flex;
}

.videoWrapper, .video-hero {
	position: relative;
}
.post-body .video-dimensions-iphone .contain-video iframe {
	margin-top: 1rem;
	margin-bottom:1rem;
}

/* All videos have a different cursor */
.post-body video {
	margin: 0 auto 0 auto;
	max-width: 66rem;
	width: 100%;
	border: none;
	max-height: 88vh; /* No video in the post body should be above 88% of the viewport height */
	cursor: grab;
}
.post-body video.video-activate {
	margin: 0 auto !important;
	cursor: pointer;
}

.post-body .full-width {
	padding: 0 var(--sidepadding-small) 0 var(--sidepadding-small);
}
.post-body .full-width img,
.post-body .full-width video {
	max-height: none;
	margin-bottom: 1rem;
}
.post-body .full-width figure {
	padding: 0;
}

/* Allow hero videos to be large */
.post-body .hero video {
	margin: 1.6rem auto;
	padding: 0;
	max-width: 100%;
}

/* Videos in phone format shouldn’t get padding */
.video-dimensions-iphone video {
	padding: 0;
	box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1);
}

.post-body .hero {
	width: 100%;
/*	height: 100%;*/
	display: inline-block;
	margin: 1rem 0;
}

.post-body .hero.slide {
	margin: 1rem 0;
	padding: 2rem 0;
	width: 100%;
	/*height: 108vh;*/
	/* Fill the whole space if we have no figure */
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: flex-start;
}

/* Leave room for figure by compensating */
.post-body .hero.slide img {
	/*padding-top: 2rem;
	padding-bottom: 2rem;*/
	height: calc(110vh - 6rem);
}
.post-body .hero.slide video { /* Margin so we don’t affect the hover */
	/*height: calc(90vh - 6rem);*/
	width: auto;
}
.post-body .hero.slide figure {
	/*height: 100%;*/ /* Take up the rest of the space */
	margin-top: 1.8rem;
	color: var(--offwhite);
}
.post-body .hero.slide.dark-text figure {
	color: var(--dark);
}

.post-body .hero.slide:not(.dark-text) figure a:link,
.post-body .hero.slide:not(.dark-text) figure a:visited {
	color: var(--offwhite);
}

.post-body .hero.slide:not(.dark-text) figure a:focus,
.post-body .hero.slide:not(.dark-text) figure a:active,
.post-body .hero.slide:not(.dark-text) figure a:hover {
	color: var(--lightgray);
	/*font-variation-settings: "wght" 600;*/
}
.post-body .hero img, 
.post-body .hero video, 
.post-body .hero iframe {
	border: none;
	margin: 2rem auto;
}
.post-body .hero video:focus {
	border: none;
	outline: none;
}
.post-body .hero figure {
	/*padding-top: 1.5rem;*/
/*	align-items: center;
display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;*/
}
.post-body .hero.slide img, 
.post-body .hero.slide iframe,
.post-body .hero.slide picture {
	-ms-grid-row-align: center;
	    align-self: center;
	max-width: 100%;
	margin: 0;
	height: auto;
}
.post-body .hero.slide video {
	-ms-grid-row-align: center;
	    align-self: center;
	max-width: 100%;
	margin: 0 0 0 0; /* Videos probably need more padding because we can’t match the background perfectly */
}
.post-body .contain-video {
	margin: 2rem auto;
	max-width: 46rem;
	display: inherit;
}
.post-body .contain-video.vimeo-embed,
.post-body .video-dimensions-iphone .contain-video.vimeo-embed {
	margin: 2rem auto 2rem auto; /* account for weird responsive video required padding */
	max-width: 46rem;
	display: inherit;
}
.post-body .contain-video figure {
	padding: 1rem 0 0 0;
}
.post-body .video-responsive {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
    margin-bottom: 0rem;
}
.post-body .video-responsive iframe {
    left:0;
    top:0;
    height:100%;
    width:100%;
    position: absolute;
}
.post-body .video-dimensions-iphone {
	margin: 1rem auto 2rem auto; 
	text-align: center;
}
.post-body .video-dimensions-iphone video, 
.post-body .video-dimensions-iphone img,
.post-body .video-dimensions-iphone .contain-video {
	width: 375px;
	margin: 0 auto;
}
.post-body .video-dimensions-iphone.iphone-x video {
	width: auto;
}
.post-body .video-dimensions-iphone figure {
	max-width: 375px;
	padding: 0 var(--sidepadding-small);
	margin: 1.2rem auto 0 auto;
	font-size: 0.9rem;
	letter-spacing: var(--tinyletterspacing);
	color: var(--medium-dark);
	text-align: left;
}
.post-body pre {
	margin: 0 auto 1rem auto;
	padding: 0 var(--sidepadding-small) 0.21rem var(--sidepadding-small); /* This tiny bottom padding is to visually adjust for the letters within the box */
	letter-spacing: 0.05rem;
	line-height: 1.5;
	overflow-x: scroll;
	background-color: #FDFDFD;
	border: dotted var(--lightgray) 1px;
	margin: 5%;
	padding: 3rem 1rem;
}
.post-body pre code {
	font-family: 'Output Sans';
	font-weight: 300;
	letter-spacing: 0.05rem;
	font-size: 0.9rem;
	line-height: 1.4;
	color: #111111;
}
.post-body code {
	font-family: 'Output Sans';
	font-weight: 300;
	letter-spacing: 0.05rem;
	font-size: 1rem;
}

.post-body hr {
	margin: 2rem 0;
	display: block;
    height: 1px;
    border: 0;
    border-top: 1px dotted var(--lightgray);
    padding: 0; 
}
.post-body blockquote {
	padding: 0;
	margin: 0;
}
.post-body blockquote p {
	font-family: "Lector Italic";
	font-size: 1.3rem;
	margin: 1.2rem auto 1.2rem auto;
	padding: 0 var(--sidepadding-small) 0.21rem var(--sidepadding-small); /* This tiny bottom padding is to visually adjust for the letters within the box */
}

.post-body ol {
	padding-left: 1.4rem;
	margin: 2rem var(--sidepadding-small) 2rem var(--sidepadding-small);
	font-variant-numeric: lining-nums;
}
.post-body ol li,
.post-body ol li a {

}

/* Possible footnotes */
.numbered-section {
	font-family: "FKGroteskVariableTrialGX";
	font-size: 3rem;
	margin: 0 var(--sidepadding-small) 1rem var(--sidepadding-small);

	-webkit-font-feature-settings: 'ss12' on, 'ss13' on;

	        font-feature-settings: 'ss12' on, 'ss13' on;
}
.post-body .footnotes p {
	font-family: "FKGroteskVariableTrialGX";
	font-size: 1.1rem;
	margin-top: 1rem;
}

/* After Post */
.back-to-articles {
	margin: 0 var(--sidepadding-small) 2.2rem var(--sidepadding-small);
	font-family: "FKGroteskVariableTrialGX";
	font-size: 1rem;
	border-top: dotted var(--lightgray) 1px;
	padding-top: 2rem;
}

/* Tag list page */
.post-body .tag-view a * {
	opacity: 1;
	transition: opacity .2s;
}
.post-body .tag-view a:hover *,
.post-body .tag-view a:active *,
.post-body .tag-view a:focus * {
	opacity: .3;
}
.post-body .tag-view ul {
	padding: 0;
	margin: 1.2rem var(--sidepadding-small) 0 var(--sidepadding-small);
	display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
	align-items: flex-start;
	flex-direction: row;
	flex-wrap: wrap;
}
.post-body .tag-view li {
	margin: 0 2rem 3rem 0;
	padding: 0;
	flex: 4;
	min-width: 12rem;
}
.post-body .tag-view .date {
	font-size: 0.8rem;
	line-height: 1.4;
	 letter-spacing: var(--tinyletterspacing); 
	font-family: "BC Liguria";
	-webkit-font-feature-settings: 'case' on;
	        font-feature-settings: 'case' on; 
	font-weight: 300;
	margin-bottom: 0.8rem;
}

.post-body .large-type {
	font-size: 4rem;
	text-align: center;
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.post-body .lang-jap {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "ＭＳ ゴシック" , "MS Gothic", "Noto Sans CJK JP", TakaoPGothic, sans-serif;;
}


.tag-view li:after {
	display: none;
}
.tag-list {
	font-family: "FKGroteskVariableTrialGX";
}
.tag-view-titles {
	font-family: "Lector";
	font-size: 1.5rem;
	font-size: 1rem;
	margin-bottom: .4rem;
}
.post-body .tag-view a:link,
.post-body .tag-view a:visited {
	color: var(--dark);
}
.tag-view-tags {
	font-family: "FKGroteskVariableTrialGX";
	font-variation-settings: "wght" 500;
	font-size: .8rem;
}


@media (max-width: 70rem) {
	.article-meta .icon.divider {
		margin-left: 0;
	}
}
@media (min-width: 35rem) {

	.post-view-tags {
		margin-top: -.27rem;
	}
	.post {
		margin: 0 var(--sidepadding-large);
		align-items: center;
		padding-bottom: 3rem;
		padding-top: 4rem;
	}
	.post .post-title {
		font-size: 3rem;
		/*font-size: calc( 3rem + (3 - 2) * ( (100vw - var(--midBreakpoint)) / ( var(--maxBreakpoint) - 35) ));*/

		line-height: 1.2;	
		letter-spacing: -.04rem;
		margin: 0 0 0.8rem 0;

		-ms-grid-column: 1;

		grid-column: 1;
		-ms-grid-row: 1;
		grid-row: 1;
	}
	.post-cross-reference {
		text-transform: capitalize;
		padding-bottom: 2.3rem;
		margin: 2rem var(--sidepadding-large) 0 var(--sidepadding-large);
	}
	.post-body {
		padding: 3.2rem 0;
	}
	.post-body hr {
		margin: 3rem 0;
	}
	.post-body p.paragraph-intro {
		font-size: 1.3rem;
	}
	.post-body p small {
		font-size: 1rem;
	}
	.post-body p {
		margin: 0 auto 1rem auto;
		padding: 0 var(--sidepadding-large) .25rem var(--sidepadding-large);
		max-width: 66rem;
		font-size: 1.3rem;
	}
	.post-body pre  {
		padding: 1rem var(--sidepadding-large) 1rem var(--sidepadding-large);
	}
	.summary-container {
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: (1fr)[8];
		    grid-template-columns: repeat(8, 1fr);
		grid-gap: 2.5rem;
		margin: -0.2rem auto 1.21rem auto;
		padding: 0 var(--sidepadding-large) 0 var(--sidepadding-large); /* This tiny bottom padding is to visually adjust for the letters within the box */
	}
	.post-body .summary {
		margin: 1rem 0;
		padding: 0;
	    font-family: "Lector Italic";
		font-size: 1.2rem;
		line-height: 1.65;

		-ms-grid-column: 1;

		-ms-grid-column-span: 4;

		grid-column: 1 / 5;
	}
	.post-body .summary, 
	.post-body .summary p {
		font-family: "Lector";
	}
	.post-body .summary-second {
		margin-top: 1.35rem;
		padding: 0;
		font-family: "FKGroteskVariableTrialGX";
	    font-variation-settings: "wght" 400;
		font-size: 0.9rem;
		line-height: 1.7;

		grid-column: 5 / -1;
	}

	.summary-second ul li {
		line-height: 1.6;
	}

	.post-body ol, .post-body ul {
		margin: 0 auto 1rem auto;
		padding: 0 var(--sidepadding-large) .25rem var(--sidepadding-large);
		max-width: 66rem;
		font-size: 1.3rem;
		list-style: none;
	}
	.post-body li {
		margin-left: 0.85rem;
	}
	.post-body img, 
	.post-body .media, 
	.post-body .contain-video {
		margin: 3rem auto 3.2rem auto;
	}
	.post-body .hero.image-contain {
		padding: 0 var(--sidepadding-large) 0 var(--sidepadding-large);
	}
	.post-body .video-hero {
		margin: 0 auto .2rem auto;
	}
	.post-body figure {
		padding: 0 var(--sidepadding-large) 0 var(--sidepadding-large);
		max-width: 66rem;
		font-size: 1rem;
	}
	.post-body h1 {
		margin: 2rem auto 0.2rem auto;
		padding: 0 var(--sidepadding-large) .25rem var(--sidepadding-large);
	    font-family: "FKGroteskVariableTrialGX";
	    font-size: 1.6rem;
		max-width: 66rem;
	}
	.post-body h2 {
		margin: 2rem auto 0.2rem auto;
		padding: 0 var(--sidepadding-large) .25rem var(--sidepadding-large);
	    font-family: "FKGroteskVariableTrialGX";
	    font-size: 2.2rem;
		max-width: 66rem;
		font-variation-settings: "wght" 580;
	}
	.post-body h3 {
		margin: 2rem auto 0.2rem auto;
		padding: 0 var(--sidepadding-large) .25rem var(--sidepadding-large);
		font-family: "FKGroteskVariableTrialGX";
	    font-size: 1.6rem;
		max-width: 66rem;
		font-variation-settings: "wght" 100;
	}
	.post-body h4 {
		margin: 2rem auto 0.2rem auto;
		padding: 0 var(--sidepadding-large) .25rem var(--sidepadding-large);
		font-family: "FKGroteskVariableTrialGX";
	    font-size: 1rem;
		max-width: 66rem;
    	font-variation-settings: "wght" 600;
	}
	.post-body blockquote p {
		font-family: "Lector Italic";
		font-size: 1.7rem;
	    margin: 2rem auto 2rem auto;
	    padding: 0 var(--sidepadding-large) .25rem var(--sidepadding-small);
	    hanging-punctuation: first;
	}

	.post-body pre code {
		font-size: 1rem;
	}
	.post-body code {
		font-size: 1.2rem;
	}

	.post-body .video-dimensions-iphone figure {
		padding: 0;
	}

	.post-body .full-width {
		padding: 0 var(--sidepadding-large) 1rem var(--sidepadding-large);
	}
	.post-body .full-width figure {
		text-align: center;
		max-width: none;
		margin: 1rem 1rem 2rem 1rem;
	}

	.post-body .hero {
		margin: 2rem 0;
	}
	.post-body .hero.slide {
		margin: 3rem 0;
	}

	/* After Article */
	.back-to-articles {
		margin: 0 var(--sidepadding-large) 2.2rem var(--sidepadding-large);
		font-family: "FKGroteskVariableTrialGX";
		font-size: 1rem;
	}

	.tag-list {
		font-family: "FKGroteskVariableTrialGX";
		margin: 1.2rem var(--sidepadding-large) 0 var(--sidepadding-large);
	}

	/* Tags page */
	.post-body .tag-view ul {
		padding: 0;
		margin: 1.2rem var(--sidepadding-large) 0 var(--sidepadding-large);
		max-width: 100%;
	}
	.tag-view-titles {
		font-size: 1.2rem;
		line-height: 1.1;
	}
	.tag-view-tags {
		font-size: .8rem;
		line-height: 1.2;
	}

}
@media (min-width: 70rem) {
	.post-body .summary, 
	.post-body .summary p {
		font-family: "Lector";
		font-size: 1.55rem;
	}

	.post-body .summary-second {
		margin-top: 1.6rem;
	}
	.post-body .summary-second ul li {
		line-height: 2.25;
	}
	.post {
		display: -ms-grid;
		display: grid;
	}
	.article-meta-shift {
		/*display: flex;
		justify-content: flex-end;
		align-items: flex-start;*/

		/* Align right */
		/*margin-left:auto; 
		margin-ri.ght:0;
		margin-bottom: 0.2rem;*/

		padding-left: 10%;
		/*max-width: 36rem;*/
	}
	.post .post-title {
		margin: 0;
	}
}

/* Products */
.product-listing-page {
	background-color: #151515;
	color: #B7B7B7;
}
.product-listing-page .view-header {
	color: #B7B7B7;
}
.product-listing-page .nav-items a:link, .product-listing-page .nav-items a:visited {
	color: #777777;
}
.product-listing-page .logo a:link, .product-listing-page .logo a:visited {
	color: #777777;
}
.products {
	display: grid;
	grid-template-columns: 1fr;
	padding: 0 var(--sidepadding-small);
	margin: 0 0 3rem 0;
	grid-gap: 1rem;
}
.description {
	margin: 1.2rem var(--sidepadding-small) 1.4rem var(--sidepadding-small);
	padding: 1.2rem 0 0 0;
	border-top: dotted #999999 1px;

	font-family: "FKGroteskVariableTrialGX", sans-serif;
	font-size: 1rem;
	text-transform: uppercase;
}
.description .languages {
	max-width: 43rem;
}
.description .language {
	display: inline;
}

/* Product Listing */
.product {
	font-family: "FKGroteskVariableTrialGX", sans-serif;
	background-color: black;
	display: grid;
	grid-template-columns: 1rem 1fr 1rem;
	grid-template-rows: 2rem 1fr 1fr 1rem;
  	align-items: end;
  	grid-column: 1;
  	/*border: dotted #777777 2px;*/

	position: relative;
	width: 100%;
	overflow: hidden;
}
a.product:link, 
a.product:visited {
	transition: color 0.4s, opacity 0.4s;
}
.product img {
	grid-column: 1 / 4;
	grid-row: 1 / 5;
	width: 100%;
	/*justify-self: stretch;*/
	z-index: 0;
}
.product:hover .icon-pointer {
	opacity: .8;
	-webkit-transform: translate3d(-.5rem, -.5rem, 0);
	        transform: translate3d(-.5rem, -.5rem, 0);
}
.product:hover {
	opacity: .5;
}
.product-listing {
	color: #B7B7B7;
	grid-column: 2;
	grid-row: 3;
	border-radius: 1px;
	z-index: 10;
}
.product-listing-title {
	display: inline-block;
	font-variation-settings: "wght" 600;
}
.product-listing-code {
	display: inline-block;
/*	border: dotted var(--offwhite) 1px;*/
/*	padding: 0.2rem;
	font-size: 0.5rem;
	display: inline-block;
	margin-left: 0.2rem 0.7rem 0.1rem 0.7rem;
	vertical-align: text-top;
	user-select: none; */
}
.product-listing-description {
	margin-top: 0.5rem;
	font-size: 0.9rem;
	font-family: "FKGroteskVariableTrialGX";
	max-width: 40rem;
}


.bottom-cta {
	display: flex;
	margin: .2rem var(--sidepadding-small) 1.4rem var(--sidepadding-small);
}

.code-numbers {
	font-size: 0.8rem;
	/* letter-spacing: var(--tinyletterspacing); */
	font-family: "FKGroteskVariableTrialGX";
	font-family: "BC Liguria";
	-webkit-font-feature-settings: 'case' on;
	font-feature-settings: 'case' on; 
	font-weight: 100;
	color: var(--medium-dar);
	padding: 0;
	text-align: center;
	transition: all 1s;
	text-align: left;
	max-width: 52rem;
	line-height: 1.6;
	flex: 2 50%;
}
.bottom-cta a:link,
.bottom-cta a:visited {
	color: #3F94A6;
}
.bottom-cta a:focus,
.bottom-cta a:active,
.bottom-cta a:hover {
	color: #013945;
}

.discord {
	font-size: 0.8rem;
	font-family: "FKGroteskVariableTrialGX";
	font-family: "BC Liguria";
	-webkit-font-feature-settings: 'case' on;
	font-feature-settings: 'case' on; 
	font-weight: 100;
	color: var(--medium-dar);
	padding: 0;
	text-align: center;
	transition: all 1s;
	text-align: right;
	max-width: 52rem;
	line-height: 1.6;
	flex: 2 50%;
}
.product-listing-page footer {
	background-color: #000000;
}



/* Micro site pages */
.microsite {
	color: #F2F2F2;
	background-color: #000000;
	background-image: url("../media/microsites/terace/graphybg.png");
	/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
}
.product-listing-page .nav-items {
	grid-template-columns: repeat( auto-fit, minmax(1rem, 5.6rem) );
}
.microsite .product-top {
	display: grid;
	margin: 9rem auto 0 auto;
	text-align: center;
	max-width: 46rem;
	z-index: 1000;
}

/* Mock this up inside a device? */
/* Show a fancy 3D device with rotating, different options */
/* Have something that changes the texture? */
.microsite .product-top img { 
	height: 3rem;
	user-select: none;
	pointer-events: none;

}
.microsite .product-bottom {
	display: grid;
	margin: 0 auto 3rem auto;
	text-align: center;

	align-items: baseline;
}
.microsite .header {
	font-family: "Orelo-WideHeavy";
	font-variation-settings: "wght" 0;
	font-size: 2.6rem;
	text-transform: uppercase;
}
.microsite .product-intro {
	margin: 0 2rem 0 2rem;
	font-family: "FKGroteskVariableTrialGX";
	font-variation-settings: "wght" 0;
	font-size: 1rem;
	line-height: 1.9;
}
.microsite .product-features {
	margin: 0.5rem auto 0 auto;
	padding: 0 1rem;
	font-family: "FKGroteskVariableTrialGX";
	-webkit-font-feature-settings: 'case' on;
	font-feature-settings: 'case' on; 
	font-variation-settings: "wght" 0;
	font-size: 1rem;
	line-height: 1.9;
	max-width: 31.5rem;
	background-color: #000000;
}
.microsite .product-intro p {
	margin: 0.4rem 0;
}
.microsite .product-body {
	display: grid;
	width: 100%;
}
.microsite .product-body video {
	background-color: #000000;
	max-width: 18.70rem;
	width: 100%;
	/*height: 100%;*/
	/*height: 37.5rem;*/
	display: inline-block;
	margin: -15rem auto 0 auto;
	z-index: -100;
	border: none;
	outline: none;
	opacity: 0.8;
	box-shadow: 0px 0px 20px 10px rgba(0,0,0,1);
}
.microsite .product-cta {
	margin-top: 1rem;
}
.microsite .product-cta img {
	height: 4.2rem;
	transition: all 0.2s;
}
.microsite .product-cta img:hover,
.microsite .product-cta img:focus {
	opacity: .6;
}
.microsite .product-footer {
	background-color: rgba(0,0,0,0.8);
}
.microsite .product-footer .copyright {
	text-align: center;
}
.product-footer a:link,
.product-footer a:visited {
	color: var(--lightgray);
}
.product-footer a:hover,
.product-footer a:active,
.product-footer a:medium-dark {
	color: var(--dark);
}
.microsite .product-details {
	margin: 0 auto 0 auto;
	font-family: "FKGroteskVariableTrialGX";
	font-variation-settings: "wght" 0;
	font-size: 1rem;
	line-height: 1.9;
	border-top: dotted 1px #222;
	padding: 0 0 0 0;
	background-color: rgba(0,0,0,0.8);
}
.microsite .product-featureset {
	margin: 0 auto 2rem auto;
	font-family: "FKGroteskVariableTrialGX";
	font-variation-settings: "wght" 0;
	font-size: 1.1rem;
	line-height: 1.5;
	border-top: dotted 1px #444;
	padding: 1.2rem;
}
.microsite .product-featureitem {
	margin-bottom: 1rem;
}
.microsite .product-featureitem a:link,
.microsite .product-featureitem a:visited {
	color: #2EB3AB;
}
.microsite .product-featureitem a:hover,
.microsite .product-featureitem a:active,
.microsite .product-featureitem a:focus {
	color: #0C9B93;
}
.microsite a.product-secondary-button:link,
.microsite a.product-secondary-button:visited  {
	background-color: #FEFEFE;
	display: inline-block;
	margin: 0.85rem 0 0 0;
	color: #111;
	padding: 0.2rem 1rem 0.32rem 1rem;
	border-radius: 2px;
	font-size: 1rem;
}
.microsite a.product-secondary-button:hover,
.microsite a.product-secondary-button:focus,
.microsite a.product-secondary-button:active {
	background-color: #999;
}
.microsite .product-videobox {
	border-top: dotted 1px #444;
	height: 20rem;
}
.microsite .product-videobox video {
	height: 100%;
	width: 100%;
	padding: 1.2rem;
	border-radius: 1.6rem;
}
.microsite .product-video-contain {
	margin: 0 auto 1.2rem auto;
	width: 100%;
	height: 20rem;
}
.microsite .product-video-contain video {
	height: 100%;
	width: 100%;
	border-radius: 1.6rem;
}



/* Style things as lack */
/*.brand-anti {
    animation: glitch 100s infinite;
    -webkit-animation: glitch 100s infinite;
}
@keyframes glitch {
    0% { letter-spacing: 0rem; }
    55%   { letter-spacing: .5rem; }
    100%   { letter-spacing: 0rem; }
}*/

@media (min-width: 35rem) {
	.products {
		padding: 0 var(--sidepadding-large);
	}
	.description {
		margin: 1.2rem var(--sidepadding-large) 1.4rem var(--sidepadding-large);
	}
	.bottom-cta {
		margin: .2rem var(--sidepadding-large) 1.4rem var(--sidepadding-large);
	}
	.microsite .header {
		font-size: 5.5rem;
	}
	.microsite .product-top {
		margin: 11rem auto 0 auto;
	}
	.microsite .product-intro {
		font-size: 1.6rem;
	}
	.microsite .product-features {
		font-size: 1.1rem;
	}
	.microsite .product-body video {
		margin: -21rem auto 0 auto;
	}
	.microsite .product-details {
		padding: 0 2rem 0 2rem;
	}
	.microsite .product-featureset {
		padding: 1.2rem 0 0 0;
		margin: 0 1.1rem;
	}
	.microsite .product-videobox {
		margin: 0 1.1rem 0 1.1rem;
	}
}

@media (min-width: 70rem) {
	.products {
		grid-template-columns: 1fr 1fr 1fr;
	}
	.product:nth-child(even) {
		grid-column: 2;
	}
	.product:nth-child(3) {
		grid-column: 3;
		/*grid-column: 1 / span 2;*/
	}
	.microsite .product-featureset {
		padding: 1.6rem 0 0 0;
		max-width: 38.5rem;
		border-top: dotted 1px #EEE;
	}
	.microsite .product-featureset-contain {
		max-width: 100rem;
		display: flex;
		margin: 0 auto;
	}
	.microsite .product-videobox {
		height: 100%;
		max-width: 26rem;
		padding: 1.7rem 0 0 0;
		border-top: dotted 1px #EEE;
	}
	.microsite .product-videobox video {
		padding: 0;
	}
	.microsite .product-video-contain {
		padding: 0;
		margin: 0 0 1rem 0;
		height: auto;
	}
	.microsite .product-video-contain video {
		height: 100%;
		width: 100%;
		border-radius: 1.6rem;
		max-width: 14rem;
	}
	.microsite .product-details {
		padding: 0 15% 0 15%;
		display: flex;
	}
}

/* Accessibility styles */
@media (prefers-color-scheme: light) {
  .themed {
    background: white;
    color: black;
  }
}
@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
    -webkit-animation: none;
  }
}

/* Allow toggling for light / dark mode */