:root {
	--background:255,249,237;
	--backgroundLight:255,244,221;
	--header:66,51,37;
	--subheader:85,64,42;
	--navigation:177,171,147;
	--border:239,230,211;
	--copy:31,25,3;
	font-family: Inter, sans-serif;
	font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
}

@media (prefers-color-scheme: dark) {
	:root {
		--background:42,43,47;
		--backgroundLight:;
		--header:254,249,239;
		--subheader:219,215,197;
		--navigation:177,171,147;
		--border:97,104,103;
		--copy:224,220,211;
	}
}

@media (prefers-color-scheme: light) {
	:root {
		--background:255,249,237;
		--backgroundLight:255,244,221;
		--header:66,51,37;
		--subheader:85,64,42;
		--navigation:177,171,147;
		--border:239,230,211;
		--copy:31,25,3;
	}
}

@supports (font-variation-settings: normal) {
  :root { font-family: Inter, sans-serif; }
}

/* Resets */
* {box-sizing: border-box;}

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}

/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display: block;}
body {line-height: 1;}
ul {list-style: none;}
blockquote,q {quotes: none;}
blockquote:before,blockquote:after,q:before,q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
img {max-width: 100%;}
img[src*="svg"] {}

body {display:grid;grid-template-columns:300px auto;background:rgba(var(--background),1);max-width:1200px;margin:0 auto;}

/* Colors */
h1 {color:rgba(var(--header),1);}
h2, h3, h4, h5, h6 {color:rgba(var(--subheader),1);}
p, ol, ul {color:rgba(var(--copy),1);}
svg {color:rgba(var(--header),1);}

/* Typography Styles */
h1 {padding:0 0 0.5rem;font-size:3rem;font-weight:700;line-height:1.25em;}
h2 {padding:0 0 1.5rem;font-size:2rem;font-weight:400;line-height:1.25em;}
h3 {padding:0 0 1.5rem;font-size:1.5rem;font-weight:400;line-height:1.25em;}
h4 {padding:0 0 1.5rem;font-size:1rem;font-weight:500;line-height:1.5rem;}
h5 {padding:0 0 1.5rem;font-size:.8rem;font-weight:600;line-height:1.5rem;}
h6 {padding:0 0 1.5rem;font-size:.6rem;font-weight:700;line-height:1.5rem;}
article h1 {}
article h2 {}
article h3 {}
article h4 {padding:0 0 1.5rem;}
article h5 {padding:0 0 1.5rem;}
article h6 {padding:0 0 1.5rem;}
article ul {}
article ol {list-style-type:none;counter-reset:list;}
article ol li {position:relative;padding:0 0 1em 3em;min-height:1.1rem;}
article ol li:before {content:counter(list, decimal-leading-zero);counter-increment:list;position:absolute;top:0;left:0;display:inline-block;width:3em;line-height:1.3rem;font-family:monospace;font-size:0.8rem;font-weight:400;color:rgba(var(--subheader),0.75);text-align:center;} {}
article ol li p {font-size:0.9em;}
article blockquote {padding:0 1em;margin-bottom:1.5em;border-left:0.2em solid rgba(var(--copy),0.5);}
article blockquote p {font-size:0.9em;}
article *:last-child {padding-bottom:0;}
strong {font-weight:600;}
em {font-style:italic;}
p, ol, ul {padding:0 0 1.5rem;font-size:1rem;font-weight:360;line-height:1.35rem;}
p a, article a {display:inline;margin:-.10em 0;padding:.10em 0;font-weight:530;background:rgba(var(--border),0);color:rgba(var(--copy),1);border-bottom:0.5px solid rgba(var(--copy),0.3);text-decoration:none;}
p a:hover, main ul a:hover, main ol a:hover, article a:hover {background:rgba(var(--border),0.5);border-bottom:0.5px solid rgba(var(--copy),0.6);}
hr {height:0;margin:0;display:block;clear:both;border:0;}

/* Architecture */
main {margin:10vh 0 0 0;padding:0 0 10vh 0;min-width:0;min-height:100vh;border-width:0 1px 0 1px;border-style:solid;background:rgba(var(--background),1);border-color:rgba(var(--border),1);}
nav {display:grid;align-items:baseline;padding:calc(10vh + 2em) 0 2em;}
nav ul {position:sticky;top:3rem;bottom:3rem;padding:0 1em;font-size:0.8rem;}
aside {}
section {padding:3rem 4rem 2rem;border-top:1px solid rgba(var(--border),1);}
time, data {font-family:monospace;font-size:0.8rem;font-weight:400;color:rgba(var(--subheader),0.75);}
sub {font-family:monospace;font-size:0.8rem;font-weight:400;color:rgba(var(--subheader),0.75);}

ul.inline, ol.inline {display:block;font-size:0.8em;}
.inline:after {content:'';position:relative;display:block;width:100%;height:0;clear:both;}
.inline li {display:inline-block;margin:0 0.5em 0.5em 0;}
/*.inline li:not(:last-child):after {content:','}*/
.inline li a {margin:-.5em -0.5em;padding:.5em 0.75em 0.5em 0.5em;background:rgba(var(--border),0);color:rgba(var(--copy),1);border:0.5px solid rgba(var(--header),0);border-radius:2em;text-decoration:none;}
.inline li a:hover {background:rgba(var(--border),0.5);border:0.5px solid rgba(var(--border),1);}
.inline li img, .inline li svg {width:1.5em;height:1.5em;border-radius:.35em;vertical-align:middle;object-fit:contain;margin:0 0.5em 0 0;}
.inline.data {display:grid;grid-template-columns: 1fr 1fr;grid-gap:0 2em;padding-bottom:3em;}
.inline.data:last-child {padding-bottom:0;}
.inline.data li {position:relative;display:block;padding:0.5em 0.5em;background:rgba(var(--border),0.1);border:1px solid rgba(var(--border),1);border-bottom:0;margin:0;}
.inline.data li:after {content:'';position:absolute;display:block;bottom:-1px;left:0;width:100%;height:1px;background:rgba(var(--border),1);}
.inline.data li:hover {background:rgba(var(--border),0.5);}
.inline.data li data {display:inline-flex;float:right;}
.inline.data li data.acquired {float:none;}
.inline li data img, .inline li data svg {width:1em;height:1em;border-radius:.35em;align-self:center;object-fit:contain;margin:0 0.35em;}
.inline.data li a {position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border:0;background:none;font-size:0;}

/* Sections */
.essays ol.list {position:relative;display:flex;flex-direction:column-reverse;margin:0;padding:0;list-style-type:none;border:1px solid rgba(var(--border),1);counter-reset:name;}
.essays ol.list li {position:relative;padding:0.5em 0.5em 0.5em 0;background:rgba(var(--border),0.1);border-bottom:1px solid rgba(var(--border),1);font-size:0.8em;}
.essays ol.list li:first-child {border-bottom:none;}
.essays ol.list li:hover {background:rgba(var(--border),0.5);}
.essays ol.list li:before {content:counter(name, decimal-leading-zero);counter-increment:name;position:relative;display:inline-block;width:3em;line-height:1rem;font-family:monospace;font-size:0.8rem;font-weight:400;color:rgba(var(--subheader),0.75);text-align:center;}
.essays ol.list li a {position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border:0;background:none;font-size:0;}

ul.timeline {width:100%;padding:0 1em;margin:0 -1em;}
ul.timeline {}
ul.timeline li {position:relative;display:grid;padding:0 0 2em 0;grid-gap:2em;grid-template-columns:30% 70%;}
ul.timeline li > div {display:grid-item;}
ul.timeline li:after {content:'';position:absolute;top:0.78em;left:-0.75em;width:calc(0.5em - 2px);height:calc(0.5em - 2px);border-radius:50%;background:rgba(var(--background),1);border:1px solid rgba(var(--subheader),0.5);transform:translate(0,-50%);}
ul.timeline li:before {content:'';position:absolute;display:block;top:0.75em;left:-1.75em;width:1em;height:100%;border:1px solid rgba(var(--subheader),0.5);border-width:1px 0 0 1px;}
ul.timeline li:first-child:before {border-top-left-radius:0.5em;border-top-width:1px;}
ul.timeline li:nth-last-child(2):before {height:calc(100% - 0.75em);}
ul.timeline li:last-child:before {top:0;height:0.75em;border-bottom-left-radius:0.5em;border-width:0 0 1px 1px;}
ul.timeline h4 {padding:0;}
ul.timeline h5 {padding:0;}

.projects {}
.projects ul.grid {display:grid;margin:0 -1.5em;padding:0;max-width:calc(100% + 3em);min-width:0;grid-gap:1em;grid-template-columns: repeat(4, 1fr);}
.projects ul.grid li {display:inline-grid;position:relative;padding:1.5em 1.5em 1em;border:1px solid transparent;align-items;start;}
.projects ul.grid li:hover {background:rgba(var(--border),0.5);border-color:rgba(var(--border),1);}
.projects ul.grid li h4 {padding:1em 0 0;}
.projects ul.grid li h5 {padding:0;}
.projects ul.grid li time {align-self:end;}
.projects ul.grid li img, .projects ul.grid li svg {width:6em;height:6em;max-width:100%;}
.projects ul.grid li a, .projects ul.grid li > label {position:absolute;display:block;top:0;left:0;width:100%;height:100%;opacity:0;font-size:0;z-index:2;}
.projects ul.grid li > label {cursor:help;}
.projects:after {content:'';position:relative;display:block;width:100%;height:0;clear:both;}

.projects ul.grid li.upcoming {}
.projects ul.grid li.upcoming:hover {background:rgba(var(--border),0.0);border-color:rgba(var(--border),0);}
.projects ul.grid li.upcoming:before {content:'';position:absolute;display:block;width:100%;height:100%;top:0;left:0;background:rgba(var(--background),0.95);border:1px solid rgba(var(--border),1);z-index:3;}
.projects ul.grid li.upcoming:after {content:'In The Pipeline';position:absolute;display:inline-block;top:50%;left:50%;transform:rotate(-45deg) translate(-50%,-50%);transform-origin:top left;font-family:monospace;font-size:0.8rem;font-weight:550;color:rgba(var(--subheader),0.75);text-transform:uppercase;white-space:nowrap;z-index:4;}

	/* Checkbox Logic */
	.projects input {display:none;}
	.projects input:not(#close):checked ~ ul.grid {position:sticky;top:1em;width:calc(40% - 1em);grid-template-columns: 50% 50%;font-size:0.6em;float:left;}
	.projects ul.description {display:none;}
	.projects input:not(#close):checked ~ ul.description {display:grid;width:calc(60% - 2em);float:right;}
	.projects ul.description > li {display:none;}

	.projects ul.grid li > label[for="close"] {z-index:1;}
	.projects input#price:checked ~ ul.grid li > label[for="price"] {display:none;}
	.projects input#interest:checked ~ ul.grid li > label[for="interest"] {display:none;}
	.projects input#bio:checked ~ ul.grid li > label[for="bio"] {display:none;}
	.projects input#woot:checked ~ ul.grid li > label[for="woot"] {display:none;}
	.projects input#bulletin:checked ~ ul.grid li > label[for="bulletin"] {display:none;}
	.projects input#fleet:checked ~ ul.grid li > label[for="fleet"] {display:none;}
	.projects input#tcs:checked ~ ul.grid li > label[for="tcs"] {display:none;}
	.projects input#price:checked ~ ul.grid li[data-name="price"] {background:rgba(var(--border),0.5);border-color:rgba(var(--border),1);}
	.projects input#interest:checked ~ ul.grid li[data-name="interest"] {background:rgba(var(--border),0.5);border-color:rgba(var(--border),1);}
	.projects input#bio:checked ~ ul.grid li[data-name="bio"] {background:rgba(var(--border),0.5);border-color:rgba(var(--border),1);}
	.projects input#woot:checked ~ ul.grid li[data-name="woot"] {background:rgba(var(--border),0.5);border-color:rgba(var(--border),1);}
	.projects input#bulletin:checked ~ ul.grid li[data-name="bulletin"] {background:rgba(var(--border),0.5);border-color:rgba(var(--border),1);}
	.projects input#fleet:checked ~ ul.grid li[data-name="fleet"] {background:rgba(var(--border),0.5);border-color:rgba(var(--border),1);}
	.projects input#tcs:checked ~ ul.grid li[data-name="tcs"] {background:rgba(var(--border),0.5);border-color:rgba(var(--border),1);}
	.projects input#price:checked ~ ul.description li[data-name="price"] {display:block;}
	.projects input#interest:checked ~ ul.description li[data-name="interest"] {display:block;}
	.projects input#bio:checked ~ ul.description li[data-name="bio"] {display:block;}
	.projects input#woot:checked ~ ul.description li[data-name="woot"] {display:block;}
	.projects input#bulletin:checked ~ ul.description li[data-name="bulletin"] {display:block;}
	.projects input#fleet:checked ~ ul.description li[data-name="fleet"] {display:block;}
	.projects input#tcs:checked ~ ul.description li[data-name="tcs"] {display:block;}
	.projects ul.description h4 label {position:relative;float:right;width:1.35rem;height:1.35rem;cursor:pointer;font-size:0;}
	.projects ul.description h4 label:before {content:'\00d7';position:absolute;display:block;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.5rem;}
	.projects ul.description h5 {padding:0 0 0.5em 0;}

/* General Styles */
.pop {margin:0 -2em 1.5rem;padding:2em;background:rgba(var(--border),0.5);border:1px solid rgba(var(--border),1);box-shadow:4px 4px 0px rgba(var(--header),0.02);}

nav ul {}
nav ul li {position:relative;transition:all .15s ease-in-out;}
nav > ul > li.active, nav > ul > li:has(a):hover {font-weight:600;transform:translate(0.6em,0);}
nav ul li a {display:block;padding:.15em 0;color:rgba(var(--copy),1);text-decoration:none;}
nav > ul > li:before, nav > ul > li:after {transition:all .15s ease-in-out;}
nav > ul > li:after {content:'';position:absolute;top:0.93em;left:0em;width:calc(0.5em - 2px);height:calc(0.5em - 2px);border-radius:50%;background:rgba(var(--background),1);border:1px solid rgba(var(--navigation),1);transform:translate(0,-50%);opacity:0;}
nav > ul > li:before {content:'';position:absolute;display:block;top:0.9em;left:calc(-1em - 1px);width:0.9em;height:1.65em;border:1px solid rgba(var(--navigation),1);border-width:1px 0 0 0;opacity:0;}
nav > ul > li.active:after {left:-1.25em;opacity:1;}
nav > ul > li.active:before {opacity:1;}

nav ul ul {font-size:0.7rem;height:0;max-height:0;padding:0;opacity:0;overflow:hidden;transition:all .15s ease-in-out, max-height 0s .15s;}
nav ul ul li {transition:all .15s ease-in-out;opacity:0;transform:translate(.25em,0);}
nav ul li.active ul:before {content:'';position:absolute;display:block;top:-0.9em;left:-1.25em;width:0.9em;height:2em;border:1px solid rgba(var(--navigation),1);border-width:0 0 0 1px;opacity:1;}
nav ul li.active ul {height:inherit;max-height:100vh;opacity:1;overflow:visible;transition:all .15s .15s ease-in-out, max-height .15s 0s;}
nav ul li.active ul li {position:relative;opacity:1;transform:translate(0,0);}
nav ul li.active ul li:hover, nav ul li.active ul li.active {font-weight:600;}
nav ul li.active ul li:after {content:'';position:absolute;top:1.13em;left:-0.75em;width:calc(0.5em - 2px);height:calc(0.5em - 2px);border-radius:50%;background:rgba(var(--background),1);border:1px solid rgba(var(--navigation),1);transform:translate(0,-50%);transition:all .15s ease-in-out;}
nav ul li.active ul li:before {content:'';position:absolute;display:block;top:1.03em;left:-1.25em;width:0.5em;height:100%;border:1px solid rgba(var(--navigation),1);border-width:1px 0 0 1px;}
/*nav ul li.active ul li:first-child:before {border-top-left-radius:0.5em;border-top-width:1px;}*/
nav ul li.active ul li:nth-last-child(2):before {height:calc(100% - 0.75em);}
nav ul li.active ul li:last-child:before {top:0;height:1.05em;border-bottom-left-radius:0.5em;border-width:0 0 1px 1px;}
nav ul li.active ul li.active:after {border:1px solid rgba(var(--subheader),1);background:rgba(var(--subheader),1);}

nav ul li.active ul li:nth-child(1) {transition: opacity .15s 0.00s ease-in-out, transform .15s 0.00s ease-in-out;}
nav ul li.active ul li:nth-child(2) {transition: opacity .15s 0.05s ease-in-out, transform .15s 0.05s ease-in-out;}
nav ul li.active ul li:nth-child(3) {transition: opacity .15s 0.10s ease-in-out, transform .15s 0.10s ease-in-out;}
nav ul li.active ul li:nth-child(4) {transition: opacity .15s 0.15s ease-in-out, transform .15s 0.15s ease-in-out;}
nav ul li.active ul li:nth-child(5) {transition: opacity .15s 0.20s ease-in-out, transform .15s 0.20s ease-in-out;}
nav ul li.active ul li:nth-child(6) {transition: opacity .15s 0.25s ease-in-out, transform .15s 0.25s ease-in-out;}
nav ul li.active ul li:nth-child(7) {transition: opacity .15s 0.30s ease-in-out, transform .15s 0.30s ease-in-out;}
nav ul li.active ul li:nth-child(8) {transition: opacity .15s 0.35s ease-in-out, transform .15s 0.35s ease-in-out;}
nav ul li.active ul li:nth-child(9) {transition: opacity .15s 0.40s ease-in-out, transform .15s 0.40s ease-in-out;}
nav ul li.active ul li:nth-child(10) {transition: opacity .15s 0.45s ease-in-out, transform .15s 0.45s ease-in-out;}
nav ul li.active ul li:nth-child(n+10) {transition: opacity .15s 0.50s ease-in-out, transform .15s 0.50s ease-in-out;}


/* Special Styles */
.investments svg, .investments img[src*=".svg"] {background:rgba(var(--border),0.25);padding:0.15em;border:0.5px solid rgba(var(--border),1);}
.hide {display:none!important;}
.canvas	{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:-1;}
#canvas {position:absolute;top:0;left:0;width: 100%;height: 100%;}

@media only screen and (max-width: 1200px) {
	body {padding:0 2rem;}
	.inline.data {grid-template-columns: 1fr;grid-gap:0 2em;}
	.projects ul.grid {grid-template-columns:repeat(3, 1fr);}
	* data, * time {font-size:0.6rem;}
}
@media only screen and (max-width: 1000px) {
	body {grid-template-columns:200px auto;}
	.projects ul.grid {grid-template-columns:repeat(2, 1fr);}
	.projects input:not(#close):checked ~ ul.grid {grid-template-columns:1fr;}
}
@media only screen and (max-width: 800px) {
	main {margin:0;padding:0;}
	body {padding:1rem;grid-template-columns:100%;}
	section {padding:2rem 1rem 1rem;}
	section:last-child {border-bottom:1px solid rgba(var(--border),1);}
	nav {display:none;}
	ul.timeline {padding:0 0 0 1.25em;margin:0;}
	ul.timeline li {max-width:100%;min-width:0;grid-gap:1em;grid-template-columns:40% minmax(0,60%)}
	ul.timeline li:before {left:-1.25em;width:0.5em;}
	ul.timeline li p {font-size:0.8em;}
	ul.timeline h4 {font-size:0.8em;}
	ul.timeline h5 {font-size:0.65em;}
	.projects ul.grid {width:100%;margin:0;}
	.projects ul.grid li {padding:1em;}
	.projects input:not(#close):checked ~ ul.grid {top:0;width:calc(100% + 2rem);max-width:none;margin:0 0 0 -1rem;padding:1em;grid-template-columns:repeat(7, 1fr);background:rgba(var(--background),1);z-index:2;border-bottom:1px solid rgba(var(--border),1);}
	.projects ul.description {padding-top:1rem;}
	.projects input:not(#close):checked ~ ul.grid {}
	.projects input:not(#close):checked ~ ul.grid li {padding:0.5em;}
	.projects input:not(#close):checked ~ ul.description {width:100%;}
	.projects input:not(#close):checked ~ ul.grid time, .projects input:not(#close):checked ~ ul.grid h4, .projects input:not(#close):checked ~ ul.grid h5 {display:none;}
	.projects input:not(#close):checked ~ ul.grid svg {display:block;width:2rem;height:2rem;}
	.pop {margin:0 0em 1.5rem;}
}