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;
}
ol, 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;
}

/*  //	Variables
	//	/////////
*/
:root {
	--text: #000;
	--text-link: #000;
	--text-pale: #000;
	--text-focus: #000;
	--subhed: #000;
	--rule-main: #000;
	--rule-sec:	#000;
	--ground: #fff;
	--ground-hilite: #fff;
	--text-main: 9pt;
	--text-med: 9pt;
	--text-small: 9pt;
	--text-large: 9pt;
	--text-large-mobile: 9pt;
	--text-mouse: 6pt;
}	

/* 	//	/////////////////////
	//	Typeface declarations 
*/
@font-face {
	font-family: 'National';
	src:	url('../fonts/national-2-web-thin.woff2') format('woff2'),
			url('../fonts/national-2-web-thin.eot?#iefix') format('embedded-opentype'), 
			url('../fonts/national-2-web-thin.woff') format('woff'); 
	font-weight: 100;
	font-style: normal;
}
@font-face {
	font-family: 'National';
	src:	url('../fonts/national-2-web-extralight.woff2') format('woff2'),
			url('../fonts/national-2-web-extralight.eot?#iefix') format('embedded-opentype'), 
			url('../fonts/national-2-web-extralight.woff') format('woff'); 
	font-weight: 200;
	font-style: normal;
}
@font-face {
	font-family: 'National';
	src:	url('../fonts/national-2-web-extralight-italic.woff2') format('woff2'),
			url('../fonts/national-2-web-extralight-italic.eot?#iefix') format('embedded-opentype'), 
			url('../fonts/national-2-web-extralight-italic.woff') format('woff'); 
	font-weight: 200;
	font-style: italic;
}
@font-face {
	font-family: 'National';
	src:	url('../fonts/national-2-web-light.woff2') format('woff2'),
			url('../fonts/national-2-web-light.eot?#iefix') format('embedded-opentype'), 
			url('../fonts/national-2-web-light.woff') format('woff'); 
	font-weight: 300;
	font-style: normal;
}
@font-face {
	font-family: 'National';
	src:	url('../fonts/national-2-web-light-italic.woff2') format('woff2'),
			url('../fonts/national-2-web-light-italic.eot?#iefix') format('embedded-opentype'), 
			url('../fonts/national-2-web-light-italic.woff') format('woff'); 
	font-weight: 300;
	font-style: italic;
}
@font-face {
	font-family: 'National';
	src:	url('../fonts/national-2-web-medium.woff2') format('woff2'),
			url('../fonts/national-2-web-medium.eot?#iefix') format('embedded-opentype'), 
			url('../fonts/national-2-web-medium.woff') format('woff'); 
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'National';
	src:	url('../fonts/national-2-web-regular-italic.woff2') format('woff2'),
			url('../fonts/national-2-web-regular-italic.eot?#iefix') format('embedded-opentype'), 
			url('../fonts/national-2-web-regular-italic.woff') format('woff'); 
	font-weight: 400;
	font-style: italic;
}

/*	//	///////
	//	General 
*/
	* {
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box; 
	}
	body	{
		font-family: 'National', 'Helvetica Neue', 'Helvetica', sans-serif;
		font-size: 9pt;
		line-height: 12pt;
		font-style: normal;
		font-weight: 300;
		font-variant: oldstyle-nums;
		letter-spacing: -0.1pt;
		word-spacing: -0.3pt;
		background-color: var(--ground);
		text-rendering: optimizeLegibility;
		width: 100%
	}
	img,
	picture,
	video,
	iframe {
	  border: 0;
	  width: 100%;
	  display: block;
	}
	cite, em {
		font-style: italic;
	}	
	a {
		text-decoration: none;
		color: var(--text-link);

	}
	.lc {
/*  Lowercases text */
		text-transform: lowercase;		
	}
	.dim {
/*  Gives sidebearings to dimensional markers */		
		padding: 0 3pt;
	}
	.location.dim {
		padding: 0 6pt;
		font-weight: 300;
	}
	.hidden {
/*  Hide redundant content from visual reader while keeping it for search and screen readers */		
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
/*  Screen items omitted for print */
	.screen-only,
	.mute,
	.notes,
	footer,
	#pagination,
	.downloadCV,
	.social {
		display: none;
	}
		
/*	//	//////////
	//	Containers
*/
	#wrapper {
/*  Wraps entire page content */		
		max-width: 1024px;
		padding: 0;
		margin: 0 auto;
	}
	#pagehed {
/*  Global h1 and nav */
		width: 100%;
		display: grid;
		grid-gap: 1em;
		margin-bottom: 2em;
	}

/*  /////// ////////// */
/*  Content containers */
	.block {
/*  Generic wrapper for page blocks */	
		width: 100%;
	}
	.block-main {
/*  Screen-wide wrapper for content blocks */			
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-areas:	"h c c";
		column-gap: 1em;
		padding: 0em 0 24pt 0;
		color: var(--text);
		/* border-top: 1px solid var(--rule-sec); */
	}
	#pagehed .block-main,
	.index + .block-main {
/*  Removes padding and border for pagehed */		
		padding-top: 0;
		border-top: none;
	}
			.block-main.nav {
/*  Adjusts padding and border for headlines with subnav */		
				/* border-top: 1px solid var(--rule-main);
				padding-top: 0.1875em; */
			}
			.block-main.project {
/*	Adjusts padding and removes rule for top block on project pages */	
				border: 0;
				padding: 0 0 0.5em 0;
			}
			.block-hed {
/*	Block for headlines */	
				grid-area: h;
				margin-bottom: 0.5em;
			}
			.block-content {
/*	Container for images and copy */	
				grid-area: c;
			}

/*  //	///////
	//	Objects
*/	

/* 	Print-only objects	 */
.print-address {
	font-size: 9pt;
	line-height: 12pt;
	margin-top: 6pt;
}
.print-address dt {
	font-weight: 400;
}
.print-address dd + dt {
	margin-top: 3pt;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	page-break-after: avoid;
}
@page {
	size:	8.5in 11in portrait;
	margin-top: 1.0in;
	margin-bottom: 0.33in;
	margin-left: 1.5in;
	margin-right: 0.5in; 
	  @top-left {
		  vertical-align: top;
		  margin-top: 0.25in;
		  font-family: 'National', 'Helvetica Neue', 'Helvetica', sans-serif;
		  font-size: 8pt;
		  line-height: 10pt;
		  font-weight: 300;
		  content: "Marie Watt / Curriculum Vitæ / " counter(page) " of " counter(pages);
	  }
	}
@page :first{
	margin-top: 0.25in;
	@top-left {
		content: "";
	}
}	


/*	Pagehed */
	h1 {
/*  Global 'Marie Watt Studio' atop every page */		
		color: var(--subhed);
		font-size: 9pt;
		line-height: 12px;
		font-weight: 500;
		word-spacing: -0.1em;
	}
	.cv-entry {
/* 	Listing scheme for CV */
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-areas: "y c c";
		column-gap: 1em;	
		padding-top: 3pt;
		page-break-inside: avoid;
	}
		.cv-entry h5 {
			grid-area: y;
			font-weight: 300;
		}
		.cv-entry h5,
		.cv-entry h5 + .cv-detail {
			/* border-top: 1px solid var(--rule-sec); */
			margin-top: 6pt;
			/* padding-top: 0.25em; */
		}
		.cv-entry.first,
		.cv-entry.first h5,
		.cv-entry.first h5 + .cv-detail  {
			border-top: 0;
			margin-top: 0;
			padding-top: 0;
		}
		.cv-detail {
			grid-area: c;
		}
		.cv-detail h6 {
			font-weight: 400;
			page-break-after: avoid;
		}
		.cv-detail p	{

		}
		.cv-detail h6 + p {
/*  Kludge to close up optical space between hed and listing */			
			/* margin-top: -0.0625em; */
		}	
		.cv-detail .notes {
/*  Smaller type for notes within CV */
			/* padding: 0.25em 0 0.125em 0;
			font-size: var(--text-small);
			line-height: 1.4; */					
			}
		.collection {
			/* font-size: var(--text-small);
			line-height: 1.4; */
			margin: 0.25em 0 0.25em 0em;
		}
		p.date {
		/* line-height: 1.125em;	 */
		}
		.collector li {
			font-weight: 400;
		}
		

		

/*  //// */
/*  Type */

/* 	Headlines */
	h2,
	.text-large p {
/*  Large type at top of page; also section headers */		
		font-weight: 200;
		font-size: var(--text-large-mobile);
		color: var(--text);
	}
	h2 {
		color: var(--subhed);
		width: 100%;
		border-top: 1px var(--rule-main) solid;
		margin-top: 0.5625em;
		padding: 0.25em 0 1.5em 0;
		/* line-height: 1.125; */
	}
	.block-hed h2 {
		padding-top: 0;
		margin-top: 0;
		border: 0;
	}
	h2.project {
/* 	Large titles for project index */	
		border-top: 0;
		font-weight: 100;
		padding: 0 0 0.125em 0;
		margin: -0.125em 0 0 -0.0625em;
		letter-spacing: -0.04em;
		/* line-height: 1.0; */
	}
		.project-description {
/* 	Project description for project index */		
			grid-column: auto / span 3;
			font-size: var(--text-med);
			color: var(--subhed);
		}
	.block-hed h3 {
/*  Large headlines outside the text block */		
		color: var(--subhed);
		font-size: var(--text-large-mobile);
		font-weight: 400;
	}
	.block-hed h3 + p.dek {
/*  Dek style to follow outriding headlines */		
		color: var(--text);
		font-size: var(--text-large-mobile);
		font-weight: 300;
		/* line-height: 1.1875; */
	}

	h4 {
		font-weight: 400;
	}
	h4.title {
		margin-bottom: 0.375em;
	}
	.text h4 {
/*  Inline subhed */		
		border-top: 1px solid var(--rule-sec);
		margin: 0.5em 0 1.0em 0;
		padding: 0.125em 0 0 0;
	}
		h4 a:link,
		h4 a:visited {
	/*  Renders headline links as headlines */		
			color: var(--subhed);
		}
		h4 a:focus,
		h4 a:hover {
			color: var(--text-focus);
		}

/*  Text */
	
	.text p {
/*  Indent paragraphs in regions dedicated to text...*/	
		text-indent: 1.0em;
		/* line-height: 1.4; */
	}
		p:first-child,
		dl + p,
		.text dl + p,
		div + p,
		.text h4 + p {
/* 	...Except the first one, or those following non-paragraph block-level elements */	
			text-indent: 0;
		}
	.text ol,
	.text ul {
/*  Set position and indent for lists */		
		list-style-position: inside;
		margin: 0.5em 0 0.5em 1.0em;
		text-indent: -1.0em;
	}
	.text ol {
/*  Ordered lists get numbers ... */		
		list-style-type: decimal;
	}
/*  Unordered get the arrow bullet */	
	.text ul {
		list-style-image: url(https://mariewattstudio.dev/assets/img/static/icon_bullet.svg);
	}
	.text ul:last-of-type {
/*  Last list in the container gets its margin trimmed */		
		margin-bottom: 0;
	}
	.text dl {
		margin: 0.5em 0 0.5em 1.0em;
	}
	.text .caption {
/* 	For use under inline photographs */		
		padding: 0 0 0.75em 0;
		border-bottom: 1px solid var(--rule-sec);
		margin: 0 0 0.5em 0;
	}
	dl.vcard dt {
		font-weight: 300;
		color: var(--text-focus);
	}
	.vcard p {
		/* line-height: 1.25; */
	}

/*  ////// ///// */
/*  Social links */
	.social {
		display: none;		
	}
		.icon {
/*  	Declarations for SVG icons */			
			fill: currentColor;
			width: 1em;
			height: 1em;
		}
			footer .icon {
/*  	Kludge to match icon with cap height */				
				vertical-align: middle;
			}