/* Normalize */
html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

*, *:before, *:after {
  box-sizing: border-box;
}

html {
	font-size: 16px;
}

/* Typography */
body,
button,
input,
select,
textarea {
	color: #0B0C0C;
	font-family: 'Public Sans', sans-serif;
	font-weight: 400;
	font-style: normal;
	  font-optical-sizing: auto;
	font-size: 20px;
	line-height: 1.4;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.5em;
	clear: both;
	line-height: 1.2;
	font-family: "Crimson Pro", serif;
	font-optical-sizing: auto;  
	font-weight: 600;
	font-style: normal;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-weight: 400;
}
.long-form-text h1:not(:first-child),
.long-form-text h2:not(:first-child),
.long-form-text h3:not(:first-child),
.long-form-text h4:not(:first-child),
.long-form-text h5:not(:first-child),
.long-form-text h6:not(:first-child) {
	margin-top: 1.5em;
}

h1, .h1 {
	font-size: 2.2rem;
	line-height: 1.1;
}
	@media screen and (min-width: 600px) {
		h1, .h1 {
			font-size: 2.8rem;
		}
	}

h2, .h2 {
	font-size: 2rem;
	line-height: 1.1;
}
	@media screen and (min-width: 600px) {
		h2, .h2 {
		  font-size: 2.4rem;
		}
	}
	@media screen and (max-width: 1024px) {
		p.h2 {
			font-size: 1.75em;
		}
	}
	@media screen and (max-width: 600px) {
		p.h2 {
			font-size: 1.4em;
		}
	}

h3, .h3 {
	font-size: 1.8rem;
	line-height: 1.1;
}
	.long-form-text h2 + h3 {
		margin-top: 0 !important;
	}
	@media screen and (min-width: 600px) {
		h3, .h3 {
			font-size: 2rem;
		}
	}


h4, .h4 {
	font-size: 1.8rem;
	line-height: 1.1;
}
	@media screen and (min-width: 1024px) {
		h4, .h4 {
			font-size: 1.8rem;
		}
	}

blockquote {
	border-left: 3px solid;
	padding: 0 1.5em;
}
	blockquote cite {
		display: block;
		clear: both;
		font-size: 90%;
		font-style: normal;
		font-weight: 600;
		margin-top: 0.5em;
	}


.sans {
  font-family: 'Public Sans', sans-serif;
  font-style: normal;
}

.serif {
  font-family: 'Crimson Pro', serif;
  font-style: normal;
}

.weight-600 {
	font-weight: 600;
}

.weight-500 {
	font-weight: 500;
}

.weight-400 {
	font-weight: 400;
}

.weight-300 {
	font-weight: 300;
}



.pre-head {
	font-weight: 400;
	color: grey;
	font-size: 55%;;
}

.hidden {
  display: none;
}

p, li, blockquote {
  font-size: 18px;
  line-height: 1.5;
  margin: 0 0 1em;
  -ms-font-feature-settings: "kern" 1;
  -o-font-feature-settings: "kern" 1;
  -webkit-font-feature-settings: "kern" 1;
  font-feature-settings: "kern" 1;
  -webkit-font-kerning: normal;
  font-kerning: normal;
  word-spacing: 0.001em;
}
	@media screen and (min-width: 600px) {
		p {
			font-size: 22px;
		}
	}

.lede p,
p.lede {
  font-size: 1.3rem;
}
  @media screen and (min-width: 600px) {
		.lede p,
		p.lede {
			font-size: 1.6rem;
		}
	}

ul, ol {
	font-size: 1em;
}


.sentence-limiter {
  max-width: 760px;
}
	.sentence-limiter figure img {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}

a {
  color: #0B0C0C;
  text-decoration: none;
}

summary:focus-visible,
a:focus {
}

time {
	color: #747474;
	font-size: 1rem;
	display: block;
}

main a {
	color: #0B0C0C;
	text-decoration: underline;
	text-decoration-thickness: max(2px, 0.0625rem);
	text-underline-offset: 0.1em;
	outline: none;
}

main a:hover {
	text-decoration: underline;
	text-decoration-thickness: max(0px, 2px, 3px);
	-webkit-text-decoration-skip-ink: none;
	text-decoration-skip-ink: none;
	-webkit-text-decoration-skip: none;
	text-decoration-skip: none;
}

code.tag {
	display: inline-block;
	white-space: nowrap;
	font-size: 50%;
	line-height: 1;
	border: 1px solid;
	padding: 0.4em 0.7em 0.3em 0.7em;
	border-radius: 1em;
	text-transform: uppercase;
	position: relative;
	vertical-align: middle;
}
.h3 code.tag {
	font-size: 32%;
	margin-left: 1em;
}

header.site-header code.tag {
	position: absolute;
	right: 0;
	top: auto;
}

code.tag.password {
	padding-right: 2em;
}

code.tag.password::after {
	content: "";
	position: absolute;
	right: 0.6em;
	background: url(../img/icon-lock.svg) no-repeat center center;
	background-size: contain;
	width: 1em;
	height: 1em;
	top: 0.3em;
}

a:hover code.tag {
	color: #FFF;
	background: #0B0C0C;
}

.tag.solid {
	background: #eae7e7;
	border: none;
}

a:hover code.tag.password::after {
	background: url(../img/icon-lock-white.svg) no-repeat center center;
	background-size: contain;
}


/* Wedges */

.no-margins {
  margin: 0;
}

.margin-top-1 {
  margin-top: 1rem;
}
.margin-top-2 {
  margin-top: 2rem;
}
.margin-top-3 {
  margin-top: 3rem;
}

.margin-bottom-1 {
  margin-bottom: 1rem;
}
.margin-bottom-2 {
  margin-bottom: 2rem;
}
.margin-bottom-3 {
  margin-bottom: 3rem;
}

.pad-top-1 {
  padding-top: 1rem;
}
.pad-top-2 {
  padding-top: 2rem;
}
.pad-top-3 {
  padding-top: 3rem;
}
.pad-top-4 {
  padding-top: 4rem;
}
.pad-bottom-1 {
  padding-bottom: 1rem;
}
.pad-bottom-2 {
  padding-bottom: 2rem;
}
.pad-bottom-3 {
  padding-bottom: 3rem;
}
.pad-bottom-4 {
  padding-bottom: 4rem;
}

/* Core elements */

hr {
	border: none;
	border-bottom: 1px dashed;
}

figure {
  width: 100%;
  margin: 0;
  z-index: 10;
  position: relative;
  clear: both;
  text-align: center;
}
	figure img {
		width: 95%;
		position: relative;
		z-index: 10;
		background: #FFF;
		margin-left: 2.5%;
		margin-right: 2.5%;
		max-width: 1600px;
	}
	figure.home-splash {
		margin: 1.5em 0;
		overflow: hidden;
		width: 100%;
	}
	@media screen and (max-width:600px) {
		figure.home-splash.full-bleed img {
			width: 150%;
			margin-left: -15%;
		}
	}
	figure.full-bleed img {
		width: 100%;
		margin: 0;
		max-width: none;
	}
	figure figcaption {
		padding: 1em 0 0;
		color: grey;
		font-size: 95%;
		text-align: left;
	}
	figure figcaption p {
		font-size: 95%;
	}
	figure.browser-frame {
		text-align: center;
		background: #f5f4ee;
	}
	figure.browser-frame img {
		max-width: 760px;
		border-radius: 7px 7px 3px 3px;
		box-shadow: 0px 10px 10px #00000030;
		padding-top: 20px;
		width: 100%;
		background: #D9D9D9 url(../img/browser-chrome.svg) no-repeat 10px 8px;
		background-size: 23px;
		border: 1px solid #d0d0d0;
			margin: 0;
	}
	@media screen and (min-width:600px) {
		figure.browser-frame img {
			padding-top: 30px;
			background: #D9D9D9 url(../img/browser-chrome.svg) no-repeat 12px 11px;
			background-size: 38px;
		}
	}
	figure.blend-mode-multiply {
		mix-blend-mode: multiply;
	}

.playable-gif {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.playable-gif::after {
  content: "▶";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: white;
  pointer-events: none; /* allow clicks to pass through */
  z-index: 10;
  z-index: 20;
}
.playable-gif::before {
	content: "";
	position: absolute;
	top: 31px;
	left: 1px;
	width: 100%;
	height: calc(100% - 31px);
	background-color: #00000069;
	max-width: 760px;
	border-radius: 0 0 5px 5px;
	z-index: 15;
}
.playable-gif.is-playing::after,
.playable-gif.is-playing::before {
  display: none; /* hide play icon while playing */
}

figure.browser-frame figcaption {
	max-width: 760px;
	margin: 0 auto;
	text-align: left;
}

/* Base */
body {
  font-family: 'Public Sans', sans-serif;
  margin: 0;
  padding: 0;
  background: #FFFFFA;
  color: #222;
}

header.site-header {
  padding: 3rem 0;
  position: relative;
  margin-bottom: 0em;
}
  header.site-header h1 {
	font-size: 20px;
	font-weight: 700;
	display: block;
	float: left;
	font-family: 'Public Sans', sans-serif;
	margin: 0;
	line-height: 1;
  }
  header.site-header a {
	text-decoration: none;
  }
  header.site-header nav {
	display: block;
	line-height: 1;
	clear: both;
	margin-top: 2rem;
  }
  @media screen and (min-width: 600px) {
	header.site-header {
		margin-bottom: 2em;
	}
	header.site-header nav {
	  display: block;
	  float: left;
	  line-height: 1;
	  clear: none;
	  margin-top: 0;
	}
  }
  header.site-header nav a {
	margin: 0 0 0 2rem;
	text-decoration: none;
	padding-bottom: 0.2em;
  }
  header.site-header nav a:first-of-type {
	margin-left: 0;
  }
  @media screen and (min-width: 600px) {
	header.site-header nav a {
	  margin: 0 0 0 3rem;
	}
	header.site-header nav a:first-of-type {
	  margin-left: 3rem;
	}
  }
  header.site-header nav a:hover,
  header.site-header nav a.current {
	border-bottom: 2px solid #0B0C0C;
  }

.center-content {
  max-width: 1200px;
  width: 90%;
  margin: 0 auto;
  display: block;
  clear: both;
  display: flow-root;
}

article.assignment {
	position: relative;
}
	article.assignment .assignment-logo {
		width: 35px;
		border-radius: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	@media screen and (min-width: 600px) {
		article.assignment .assignment-logo {
			width: 45px;
		}
	}
	article.assignment .summary-wrap {
		display: block;
		float: left;
		padding-left: 50px;
		padding-top: 6px;
		position: relative;
	}
	@media screen and (min-width: 600px) {
		article.assignment .summary-wrap {
			padding-left: 70px;
			padding-top: 11px;
		}
	}
	article.assignment:first-of-type .summary-wrap {
		padding-bottom: 1.5em;
	}
	article.assignment .summary-wrap::before {
		content: "";
		position: absolute;
		height: calc(100% - 40px);
		top: 34px;
		left: 17px;
		width: 2px;
		border-left: 1px solid #0B0C0C;
	}
	@media screen and (min-width: 600px) {
		article.assignment .summary-wrap::before {
			height: calc(100% - 50px);
			top: 45px;
			left: 22px;
		}
	}
	article.assignment h3 {
	font-weight: 600;
	font-size: 1em;
	margin-bottom: 0.2em;
	}
	article.assignment p {
		font-size: 0.97em;
		margin-bottom: 0.2em;
	}
	article.assignment p.overview {
	}
	article.assignment p.assignment-meta {
		display: block;
	}
	article.assignment p.assignment-meta span {
		display: block;
		width: 100%;
		clear: both;
	}
	article.assignment p.assignment-meta span.duration {
		color: #747474;
	}

	::-webkit-details-marker {   
		display:none; 
	}

	article.assignment details {
		clear: both;
		position: relative;
		padding-left: 52px;
		padding-bottom: 20px;
		float: left;
		padding-top: 5px;
	}
		@media screen and (min-width: 600px) {
			article.assignment details {
				padding-left: 70px;
			}
		}
		article.assignment details::before {
			content: "";
			position: absolute;
			height: calc(100% - 0px);
			top: -6px;
			left: 17px;
			width: 2px;
			border-left: 1px dashed #0B0C0C;
		}
		@media screen and (min-width: 600px) {
			article.assignment details::before {
				top: -5px;
				left: 22px;
			}
		}
		article.assignment details summary {
			cursor: pointer;
		position: relative;
		padding-left: 1em;
		margin-bottom: 7px;
		font-size: 0.95em;
		}
		article.assignment details summary::after {
			content: "more";
		}
		article.assignment details[open] summary::after {
			content: "less";
		}
		article.assignment details.projects-listing summary::after {
			content: "Show key projects";
		}
		article.assignment details.projects-listing[open] summary::after {
			content: "Hide key projects";
		}
		article.assignment details summary:hover {
			text-decoration: underline;
		}
		article.assignment details summary::before {
			content: "";
			position: absolute;
			top: -1px;
			bottom: 0;
			left: 0;
			margin: auto;
			display: block;
			width: 0;
			height: 0;
			-webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
			clip-path: polygon(0 0, 100% 50%, 0 100%);
			border-color: transparent;
			border-style: solid;
			border-width: 6px 0 6px 9px;
			border-left-color: inherit;
		}
		article.assignment details[open] summary::before {
			display: block;
			width: 0;
			height: 0;
			-webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
			clip-path: polygon(0 0, 50% 100%, 100% 0);
			border-color: transparent;
			border-style: solid;
			border-width: 9px 6px 0;
			border-top-color: inherit;
		}
	article.assignment details p {
		margin-bottom: 1em;
	}
		article.assignment details ul {
			margin-bottom: 0;
		padding-left: 2em;
		}
		@media screen and (max-width:600px) {
			article.assignment details ul {
				padding-left: 1em;
			}
		}
		article.assignment details ul ul {
			margin-top: 1em;
		}
		article.assignment details li {
			margin-bottom: 1em;
			font-size: 0.95em;
		}
		article.assignment details li:last-of-type {
			margin-bottom: 0;
		}
		article.assignment .timeline dd.year {
			color: #747474;
			width: 35px;
			margin-left: 10px;
			text-align: right;
		}
		article.assignment .timeline p {
			margin-bottom: 0;
		}
		article.assignment .timeline dl {
			justify-content: flex-start;
		}
		@media screen and (min-width:600px) {
			article.assignment .timeline dt {
				width: auto;
				flex: auto;
			}
			article.assignment .timeline dd.project {
				width: auto;
				margin-right: 10px;
			}
			article.assignment .timeline dd.skills {
				width: 230px;
				text-align: left;
			}
		}

	article.assignment details dl,
	article.assignment details dt,
	article.assignment details dd {
		font-size: 1rem;
		margin: 0;
	}
	article.assignment details dl {
	width: 100%;
	padding: 13px 0;
	display: block;
	float: left;
	border-bottom: 1px solid rgba(151, 151, 151, 0.2);
	}
	article.assignment details dl:last-of-type {
		border: none;
	}
	article.assignment details dt {
		font-weight: 400;
		margin: 0;
	}
	article.assignment details .project p {
		margin: 0;
	}
	article.assignment details dt.year {
		width: 65px;
		font-family: 'Public Sans', sans-serif;
		font-size: 14px;
		float: left;
	}
	article.assignment details dt code.tag {
		margin-left: 0.5em;
	}
	article.assignment details dd.skills,
	article.assignment details dd.project {
		width: calc(100%);
		float: left;
	}
	article.assignment details dd.project p {
		font-size: 15px;
	}
	article.assignment details strong {
		font-weight: 400;
	}
	@media screen and (min-width: 900px) {
		article.assignment details dl {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			width: 100%;
			-webkit-box-pack: justify;
			-ms-flex-pack: justify;
			justify-content: space-between;
		 }
		article.assignment details dd.project {
			width: calc(100% - 345px);
		}
		article.assignment details dd.skills {
			width: 320px;
			text-align: left;
			margin-left: auto;
		}
	}
	@media screen and (max-width: 899px) {
		article.assignment details dd.skills {
			color: #7b7b7b;
		}
	}
	@media screen and (max-width: 600px) {
		article.assignment p,
		article.assignment li {
			font-size: 18px !important;
		}
	}

.assignments-listing {
	float: left;
	position: relative;
}
  
.assignments-listing::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 12px;
  width: 21px;
  height: 2px;
  border-bottom: 1px solid;
}

.testimonials {
	float: left;
		width: 100%;
}
	.testimonials blockquote {
		position: relative;
		border: none;
		padding: 0 0 0 50px;
		margin: 1em 0 2em;
	}
	@media screen and (min-width: 600px) {
		.testimonials blockquote {
			padding: 0 0 0 75px;
		}
	}
	.testimonials blockquote p {
		margin-bottom: 0.5em;
		font-size: 1em;
	}
	.testimonials blockquote cite {
		font-style: normal;
		line-height: 1.3;
		display: block;
		margin-top: 10px;
	}
	.testimonials blockquote img {
		border-radius: 100%;
		width: 35px;
		position: absolute;
		top: 0;
		left: 0;
	}
	@media screen and (min-width: 600px) {
		.testimonials blockquote img {
			width: 55px;
		}
	}

.row {
	float: left;
	width: 100%;
		position: relative;
}

.work-item .center-content.margin-top-2.long-form-text {
	margin-top: 2em;
}
@media screen and (max-width: 1180px) and (min-width: 1024px) {
	.work-item .row .sentence-limiter {
		width: calc(100% - 300px);
	}
}

.side-wrap h5 {
	font-size: 0.9em;
	font-weight: 700;
}
@media screen and (max-width: 1024px) {
	.side-wrap {
		position: relative;
		width: 90%;
		margin: 2em 5% 0;
	}
}
@media screen and (max-width: 1199px) and (min-width: 1024px) {
	.side-wrap {
		position: absolute;
		right: 3%;
		top: 2.5em;
		height: 100%;
		z-index: 20;
	}
}
@media screen and (min-width: 1200px) {
	.side-wrap {
		position: absolute;
		right: calc(50vw - 600px);
		top: 2.5em;
		height: 100%;
		z-index: 20;
	}
}

.sticky-sidebar {
	margin: 0 0 2em;
}
	@media screen and (min-width: 1024px) {
		.sticky-sidebar {
			position: sticky;
			top: 3rem;   /* distance from the top of the viewport */
		}
	}
	.sticky-sidebar nav ul {
		width: 100%;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	@media screen and (min-width: 1024px) {
		.sticky-sidebar nav ul {
			width: 250px;
		}
	}
	.sticky-sidebar nav li {
		font-size: 1rem;
		border-left: 1px solid;
		margin: 0;
		padding: 0.5em 0 0.5em 1.2em;
		position: relative;
		line-height: 1.2;
	}
	.sticky-sidebar nav li.is-active-ancestor::before {
		content: "";
		position: absolute;
		height: 100%;
		top: 0;
		left: 0;
		width: 2px;
		border-left: 3px solid #0B0C0C;
	}
	.sticky-sidebar nav li.is-active-ancestor {
		font-weight: 700;
	}
	.sticky-sidebar nav li a {
		text-decoration: none;
	}
	.sticky-sidebar nav li a:hover {
		text-decoration: underline;
	}

	.sticky-sidebar nav {
		transform-origin: top;
		max-height: 700px; /* something taller than your nav when expanded */
		overflow: hidden;
		width: 100%;
		backdrop-filter: blur(25px);
		background: #fdfdfd1c;
	}
	.sticky-sidebar nav.is-collapsed {
		transform: scaleY(0.95);
		opacity: 0;
		max-height: 0;
		pointer-events: none;
	}
	.sticky-sidebar button {
		font-size: 0.8em;
		padding: 0.3em 1em 0.3em 2.1em;
		border: 1px solid;
		background: #fffffa;
		border-bottom: 2px solid;
		border-radius: 4px;
		width: 100%;
		box-sizing: border-box;
		text-align: left;
	}
	.sticky-sidebar button[aria-expanded="false"]::after,
	.sticky-sidebar button[aria-expanded="true"]::after {
		content: "";
		border-left: 8px solid;
		border-top: 6px solid transparent;
		border-bottom: 6px solid transparent;
		position: absolute;
		left: 18px;
		top: 11px;
	}
	.sticky-sidebar button[aria-expanded="true"]::after {
		transform: rotate(90deg);
		left: 16px;
	}
	

p.reading-time {
	color: #747474;
	font-size: 1rem;
	display: block;
	margin: 0;
}

.three-col-img,
.two-col-img {
  display: flex;
  flex-wrap: wrap;               /* allows wrapping on smaller screens */
  justify-content: space-between;
  padding: 0 2.5%;
}
	.two-col-img figure {
		width: 48%;
	}
	.three-col-img figure {
		width: 31%;
	}
	.two-col-img img,
	.three-col-img img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;              /* keeps images proportional */
	margin: 0;
	}
	/* Responsive adjustment: stack on narrow screens */
	@media (max-width: 768px) {
		.two-col-img figure,
		.three-col-img figure {
			flex: 1 1 100%;
		}
	}

.image-swap {
	position: relative;
}
	.image-swap:hover figure.image-hidden {
		opacity: 1;
	}
	@media (min-width: 1024px) {
		.image-swap figure.image-hidden {
			opacity: 0;
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 10;
			margin: 0;
			-webkit-transition: opacity .4s 
			cubic-bezier(.4, 0, .2, 1);
			-o-transition: opacity .4s cubic-bezier(.4,0,.2,1);
			transition: opacity .4s 
			cubic-bezier(.4, 0, .2, 1);
		}
	}

.device {
	border: 1px solid #BFBFBF;
	border-radius: 40px;
	position: relative;
	background: #FFF;
	width: 100%;
	margin-bottom: 5%;
	float: left;
}
	.device.mobile:before {
	  display: block;
	  content: "";
	  width: 100%;
	  padding-top: 207%;
	}
	.device.tablet:before {
	display: block;
	content: "";
	width: 100%;
	padding-top: 71%;
	}
	.device.mobile .screen {
	position: absolute;
	width: 90%;
	top: 11%;
	left: 5%;
	overflow: hidden;
	border: 1px solid rgba(191, 191, 191, 0.3);
	line-height: 0;
	}
	.device.tablet .screen {
	position: absolute;
	width: 84%;
	top: 5.5%;
	left: 7%;
	overflow: hidden;
	border: 1px solid rgba(191, 191, 191, 0.3);
	line-height: 0;
	}
	.device .screen video {
		width: 100%;
	}
	.device:after {
		content: "";
		position: absolute;
		width: 16%;
		padding-bottom: 15.4%;
		display: block;
		bottom: 2%;
		left: calc(42%);
		border: 1px solid #BFBFBF;
		border-radius: 100%;
	}
	.device.tablet:after {
	right: 2%;
	top: calc(45.2%);
	left: auto;
	bottom: auto;
	width: 5%;
	padding-bottom: 4.8%;
	}
	@media screen and (min-width:600px) {
		section.videos .center-blk {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
		-webkit-box-align: center;
			-ms-flex-align: center;
				align-items: center;
		-webkit-box-pack: justify;
			-ms-flex-pack: justify;
				justify-content: space-between;
		}
		.device.mobile {
			width: 30%;
			max-width: 340px;
			border-radius: calc(5px + 3vw);
			margin-bottom: 0;
		}
		.device.tablet {
		width: 100%;
		border-radius: calc(5px + 3vw);
		margin-bottom: 0;
		max-width: 960px;
		margin: 0 auto;
		float: none;
		}
	}

section.video {
	background: #f5f4ee;
	overflow: hidden;
	padding: 4rem 0;
	position: relative;
	margin-bottom: 4rem;
}
	section.video video {
		width: 100%;
		height: auto;
		cursor: pointer;
		display: block;
	}

	section.video .overlay {
		position: absolute;
		inset: 0;
		background: rgb(0 0 0 / 60%);
		display: flex;
		align-items: center;
		justify-content: center;
		transition: opacity 0.3s ease;
		cursor: pointer;
	}
	section.video .play-icon {
		width: 0;
		height: 0;
		border-left: 30px solid white;
		border-top: 18px solid transparent;
		border-bottom: 18px solid transparent;
	}
	section.video.playing .overlay {
		opacity: 0;
		pointer-events: none;
	}

.year-wrap .post-listing article {
	margin-bottom: 2em;
}
.year-wrap .post-listing article h3 {
	margin-bottom: 0.25em;
}
.year-wrap .post-listing article p.excerpt {
	margin-bottom: 0.2em;
}
@media screen and (min-width:600px) {
	.year-wrap {
	display: flex;
	align-items: flex-start;
	gap: 5.1rem;
	position: relative;
	scroll-margin-block-start: 2ex;
	}
		.year-wrap h2 {
			position: sticky;
			top: 1rem;
			background: white;
			z-index: 1;
			margin: 0;
		}
		.year-wrap .post-listing {
			flex: 1; 
		}
		.year-wrap .post-listing article {
			margin-bottom: 3em;
		}
}

@media screen and (max-width:1023px) {
	.rectangle,
	.square {
	aspect-ratio: 4 / 3;
	width: 100%;
	display: flex;
	overflow: hidden;
	}
}

@media screen and (min-width:600px) and (max-width:1023px) {
	.grid-cols-3 {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 3rem;
	}
	.col-span-1 {
		grid-column: span 1 / span 1;
	}
	.col-span-2 {
		grid-column: span 1 / span 1;
	}
}

@media screen and (min-width:1024px) {
	.grid-cols-3 {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 3rem;
		grid-auto-rows: auto;
		align-items: start;
	}
	.col-span-1 {
		grid-column: span 1;
	}
	.col-span-2 {
		grid-column: span 2;
	}
	.square {
		aspect-ratio: 1 / 1;
		width: 100%;
		display: flex;
		overflow: hidden;
	}
	.rectangle {
		aspect-ratio: 4 / 3;
		width: 100%;
		display: flex;
		overflow: hidden;
	}
}

.work-listing {
	
}
	.work-listing article {
		position: relative;
		overflow: visible;
		display: flow-root;
	}
	.work-listing article figure {
	display: flex;
	width: 100%;
	overflow: hidden;
	border-radius: 10px;
	background: grey;
	box-shadow: 0px 4px 7px #0000001f;
	margin-bottom: 0.5em;
	}
	.work-listing article figure img {
		margin: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center; 
		flex-shrink: 0; 
		transition: transform 0.6s ease; /* smooth zoom animation */
	}
	.work-listing article:hover img {
		transform: scale(1.05);
	}
	.work-listing article:hover h3 {
		text-decoration: underline;
	}
	.work-listing article:hover h3 span {
		text-decoration: none;
	}
	.work-listing article h3 code.tag {
		top: -0.3em;
		margin-left: 0;
	}
	.work-listing article .meta code.tag {
		font-size: 40%;
		opacity: 0.6;
	}
	@media screen and (max-width:1023px) {
		.work-listing article h3 {
			font-size: 1.7rem;
		}
		
	}
	@media screen and (max-width:600px) {
		.work-listing article {
			margin-bottom: 2em;
		}
	}

a.hot-spot {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 100;
}
	a.hot-spot:focus {
		outline: 1;
		background: none;
	}


.button {
	background: black;
	color: #FFF;
	font-size: 0.9em;
	padding: 0.5em 1em;
	border: none;
	border-radius: 5px;
	font-weight: 500;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 1.1875;
	box-sizing: border-box;
	display: inline-block;
	position: relative;
	width: 100%;
	border: 2px solid transparent;
	border-radius: 0;
	text-align: center;
	vertical-align: top;
	cursor: pointer;
	-webkit-appearance: none;
	border-radius: 2px;
}
	.button:hover {
		background: #444444;
	}
	.button:active {
		top: 2px;
	}
	@media screen and (min-width:600px) {
		.button {
			width: auto;
		}
	}

.input {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.25;
	box-sizing: border-box;
	width: 100%;
	height: 2.5rem;
	margin-top: 0;
	padding: 5px;
	border: 2px solid #0b0c0c;
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
}
	@media screen and (min-width:600px) {
		.input {
			max-width: 400px;
		}
	}

.has-error {
	padding-left: 1em;
	border-left: 5px solid #d4351c;
}

.error-message {
	display: block;
	color: #d4351c;
	font-weight: 600;
}

.form-overlap {
	background: #fffffa;
	position: relative;
	z-index: 10;
	border-top: 1px solid #e8e4e4;
	margin-top: -50px;
}
.work-item-preview {
	position: relative;
}
.work-item-preview::before {
	content: "";
	position: absolute;
	bottom: 50px;
	left: 0;
	width: 100%;
	height: calc(100% - 50px);
	z-index: 10;
	background: #FFFFFA;
	background: linear-gradient(180deg, rgba(255, 255, 250, 0) 15%, rgba(255, 255, 250, 0.75) 50%, rgba(255, 255, 250, 1) 98%);
}