/*
Theme Name: 2025.2
Theme URI: 
Author: Tyler A Walters
Author URI: https://tylerawalters.com
Description: 
Version: 1.0
Tags:
Text Domain: taw
*/

/* ==================================================================================================== */
/* ==================================================================================================== */
/* ==                                                                                                == */
/* ==                                                                                                == */
/* == Custom properties (variables)                                                                  == */
/* ==                                                                                                == */
/* ==                                                                                                == */
/* ==================================================================================================== */
/* ==================================================================================================== */

/* ==================================================================================================== */
/* Color tokens                                                                                         */
/* ==================================================================================================== */

:root {
	--blue-10: #DBE4F1;
	--blue-20: #B7C8E3;
	--blue-30: #94ADD6;
	--blue-40: #7091C8;
	--blue-50: #4C76BA;
	--blue-60: #3D5E95;
	--blue-70: #2E4770;
	--blue-80: #1E2F4A;
	--blue-90: #0F1825;
	--goldenrod: #F5DBB3;
	
	--page-background: var(--blue-80);
	--borders: var(--blue-20);
	--text-call-out: var(--goldenrod);
	--text-primary: #FFFFFF;
	--text-secondary: var(--blue-20);
	--link: var(--blue-30);
	
	--button-hover: var(--blue-70);
	--button-current-hover: var(--blue-10);
 	--button-focus: var(--blue-30);
 }


/* ==================================================================================================== */
/* Shadow tokens                                                                                        */
/* ==================================================================================================== */

:root {
	--shadow: 0px -1px 0px rgba(0,0,0,1), 0px  1px 0px rgba(255,255,255,0.5);
}


/* ==================================================================================================== */
/* Font tokens                                                                                          */
/* ==================================================================================================== */

:root {
	--size-2xl: 90px;	/* Home -> Hero H1 */
	--size-xl: 48px;	/* Header -> Name,
						   Home -> Hero H2,
						   About -> Professional summary */
	--size-l: 36px;		/* Header -> Title */
	--size-x: 24px;		/* Case study -> h2 */
	--size-m: 18px;		/* Navigation,
						   Resume -> Company name,
						   Resume -> Position title,
						   Case study -> h3 */
	--size-s: 16px;		/* Portfolio grid -> h3,
						   Resume -> Bullet points */
	--size-xs: 14px;	/* Portfolio grid -> p,
						   Resume -> Locations and dates */
	--size-2xs: 12px;	/* Footer */
}

body {
	&.garamond {
		--serif: "EB Garamond", Georgia, "Times New Roman", Times, serif;
	}
	&.bodoni {
		--serif: "Libre Bodoni", Georgia, "Times New Roman", Times, serif;
	}
	--sans: "ars-maquette-web", "Helvetica Neue", Helvetica, Arial, sans-serif;
}





/* ==================================================================================================== */
/* ==================================================================================================== */
/* ==                                                                                                == */
/* ==                                                                                                == */
/* == Font scale                                                                                     == */
/* ==                                                                                                == */
/* ==                                                                                                == */
/* ==================================================================================================== */
/* ==================================================================================================== */
/* 12, 14, 16, 18, 21, 24, 36, 48, 60, 72, 90, 144, 181, 228 */





/* ==================================================================================================== */
/* ==================================================================================================== */
/* ==                                                                                                == */
/* ==                                                                                                == */
/* == Meyer reset                                                                                    == */
/* ==                                                                                                == */
/* == http://meyerweb.com/eric/tools/css/reset/                                                      == */
/* == v2.0 | 20110126                                                                                == */
/* == License: none (public domain)                                                                  == */
/* ==                                                                                                == */
/* ==                                                                                                == */
/* ==================================================================================================== */
/* ==================================================================================================== */

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: 62.5%;
	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;
}





/* ==================================================================================================== */
/* ==================================================================================================== */
/* ==                                                                                                == */
/* ==                                                                                                == */
/* == Development utility classes                                                                    == */
/* ==                                                                                                == */
/* ==                                                                                                == */
/* ==================================================================================================== */
/* ==================================================================================================== */

/* ==================================================================================================== */
/* Highlight breakpoint: 2 Extra large (Red)                                                            */
/* ==================================================================================================== */
@media (min-width: 1248px) {
	.breakpoints header, .breakpoints nav, .breakpoints main, .breakpoints footer {
		background: rgba(255, 0, 0, 0.25);
	}
}


/* ==================================================================================================== */
/* Highlight breakpoint: Extra Large (Orange)                                                           */
/* ==================================================================================================== */
@media (min-width: 1048px) and (max-width: 1247px) {
	.breakpoints header, .breakpoints nav, .breakpoints main, .breakpoints footer {
		background: rgba(255, 128, 0, 0.25);
	}
}


/* ==================================================================================================== */
/* Highlight breakpoint: Large (Yellow)                                                                 */
/* ==================================================================================================== */
@media (min-width: 848px) and (max-width: 1047px) {
	.breakpoints header, .breakpoints nav, .breakpoints main, .breakpoints footer {
		background: rgba(255, 255, 0, 0.25);
	}
}


/* ==================================================================================================== */
/* Highlight breakpoint: Medium (Green)                                                                 */
/* ==================================================================================================== */
@media (min-width: 648px) and (max-width: 847px) {
	.breakpoints header, .breakpoints nav, .breakpoints main, .breakpoints footer {
		background: rgba(0, 255, 0, 0.25);
	}
}


/* ==================================================================================================== */
/* Highlight breakpoint: Small (Blue)                                                                   */
/* ==================================================================================================== */
@media (min-width: 448px) and (max-width: 647px) {
	.breakpoints header, .breakpoints nav, .breakpoints main, .breakpoints footer {
		background: rgba(0, 0, 255, 0.25);
	}
}

/* ==================================================================================================== */
/* Highlight breakpoint: Extra small (Violet)                                                           */
/* ==================================================================================================== */
@media (max-width: 447px) {
	.breakpoints header, .breakpoints nav, .breakpoints main, .breakpoints footer {
		background: rgba(255, 0, 255, 0.25);
	}
}


/* ==================================================================================================== */
/* Show baseline grid                                                                                   */
/* ==================================================================================================== */
body.baseline {
	background-image: url(img/baseline-grid-light.png);
	background-repeat: repeat;
}





/* ==================================================================================================== */
/* ==================================================================================================== */
/* ==                                                                                                == */
/* ==                                                                                                == */
/* == Basics                                                                                         == */
/* ==                                                                                                == */
/* ==                                                                                                == */
/* ==================================================================================================== */
/* ==================================================================================================== */

body {
	background: var(--page-background);
}


/* ==================================================================================================== */
/* Breakpoint: 2 Extra large (Red)                                                                      */
/* ==================================================================================================== */
@media (min-width: 1248px) {
	header, nav, main, footer {
		margin: 0 auto;
		width: 1200px;
	}
}


/* ==================================================================================================== */
/* Breakpoint: Extra large (Orange)                                                                     */
/* ==================================================================================================== */
@media (min-width: 1048px) and (max-width: 1247px) {
	header, nav, main, footer {
		margin: 0 auto;
		width: 1000px;
	}
}


/* ==================================================================================================== */
/* Breakpoint: Large (Yellow)                                                                           */
/* ==================================================================================================== */
@media (min-width: 848px) and (max-width: 1047px) {
	header, nav, main, footer {
		margin: 0 auto;
		width: 800px;
	}
}


/* ==================================================================================================== */
/* Breakpoint: Medium (Green)                                                                           */
/* ==================================================================================================== */
@media (min-width: 648px) and (max-width: 847px) {
	header, nav, main, footer {
		margin: 0 auto;
		width: 600px;
	}
}


/* ==================================================================================================== */
/* Breakpoint: Small (Blue)                                                                             */
/* ==================================================================================================== */
@media (min-width: 448px) and (max-width: 647px) {
	header, nav, main, footer {
		margin: 0 auto;
		width: 400px;
	}
}

/* ==================================================================================================== */
/* Breakpoint: Extra small (Violet)                                                                     */
/* ==================================================================================================== */
@media (max-width: 447px) {
	header, nav, main, footer {
		margin: 0 auto;
		width: 300px;
	}
}





/* ==================================================================================================== */
/* ==================================================================================================== */
/* ==                                                                                                == */
/* ==                                                                                                == */
/* == Accessibility: Skip to main content                                                            == */
/* ==                                                                                                == */
/* ==                                                                                                == */
/* ==================================================================================================== */
/* ==================================================================================================== */
.skip-link {
	background: var(--blue-20);
	border: 2px solid var(--blue-50);
	color: var(--blue-80);
	font-family: var(--sans);
		font-optical-sizing: auto;
		font-size: 16px;
		font-style: normal;
		font-weight: 400;
		line-height: auto;
		text-decoration: none;
	padding: 0.5rem 0.75rem;
	position: absolute;
		left: 0;
		top: 0;
	transform: translateY(-150%);
	z-index: 1000;
}

.skip-link:focus,
.skip-link:focus-visible {
	transform: translateY(0);
}

@media( prefers-reduced-motion: reduce) {
	.skip-link {
		transition: none;
	}
}





/* ==================================================================================================== */
/* ==================================================================================================== */
/* ==                                                                                                == */
/* ==                                                                                                == */
/* == Accessibility: Visually hidden                                                                 == */
/* ==                                                                                                == */
/* ==                                                                                                == */
/* ==================================================================================================== */
/* ==================================================================================================== */
.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}





/* ==================================================================================================== */
/* ==================================================================================================== */
/* ==                                                                                                == */
/* ==                                                                                                == */
/* == Header                                                                                         == */
/* ==                                                                                                == */
/* ==                                                                                                == */
/* ==================================================================================================== */
/* ==================================================================================================== */

header.site-header {
	padding: 92px 0 0 0;
}
	
header.site-header > a {
	color: var(--text-secondary);
	display: inline;
	font-family: var(--sans);
		font-optical-sizing: auto;
		font-size: 36px;
		font-style: normal;
		font-weight: 400;
		line-height: 36px;
		text-decoration: none;
}

header.site-header > a > .site-title {
	font-size: 48px;
		font-weight: 700;
		line-height: 48px;
	margin-top: 1px;
	margin-right: 40px;
}


/* ==================================================================================================== */
/* Breakpoint: Large (Yellow)                                                                           */
/*     • Make the tagline below the name instead of beside it                                           */
/* ==================================================================================================== */
@media (max-width: 1047px) {
	header.site-header > a > span {
		display: block;
		margin-bottom: 2px;
	}
}


/* ==================================================================================================== */
/* Breakpoint: Small (Blue)                                                                             */
/*     • Make the text smaller & reduce the top padding                                                 */
/* ==================================================================================================== */
@media (max-width: 647px) {
	header.site-header {
		padding: 60px 0 0 0;
	}
		
	header.site-header > a {
		font-size: 24px;
		line-height: 32px;
	}
	
	header.site-header > a > strong {
		font-size: 36px;
		line-height: 40px;
		margin-bottom: 1px;
	}
}





/* ==================================================================================================== */
/* ==================================================================================================== */
/* ==                                                                                                == */
/* ==                                                                                                == */
/* == Navigation                                                                                     == */
/* ==                                                                                                == */
/* ==                                                                                                == */
/* ==================================================================================================== */
/* ==================================================================================================== */

nav.site-nav {
	border: 1px solid var(--borders);
	border-width: 1px 0;
	font-family: var(--sans);
		font-optical-sizing: auto;
		font-size: 18px;
		font-style: normal;
		font-weight: 300;
		line-height: 55px;
	margin-top: 11px;
}

nav.site-nav > ul {
	display: flex;
}

nav.site-nav li {
	margin: 0;
}

nav.site-nav a {
	color: var(--borders);
	text-decoration: none;
	margin: 0;
	padding: 16px 32px 17px 32px;
	
	&:hover {
		background: var(--button-hover);
		border: 1px solid var(--borders);
		border-width: 1px 0;
	}
	&:focus {
		background: var(--button-hover);
		border: 3px solid var(--button-focus);
		outline: none;
		padding: 13px 29px 14px 29px;
	}
}	

.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a,
.site-nav__list .current-menu-ancestor > a,
.site-nav__list .current_page_ancestor > a,
.site-nav__list .current-menu-parent > a {
	background: var(--borders);
	color: var(--page-background);
	
	&:hover {
		background: var(--button-current-hover);
	}
	&:focus {
		background: var(--button-current-hover);
		border: 3px solid var(--button-focus);
		outline: none;
		padding: 13px 29px 14px 29px;

	}
}


/* ==================================================================================================== */
/* Breakpoint: Large (Yellow)                                                                           */
/*     • Adjust the margin between the header and nav                                                   */
/* ==================================================================================================== */
@media (max-width: 848px) {
	nav.site-nav {
		margin-top: 12px;
	}
}


/* ==================================================================================================== */
/* Breakpoint: Small (Blue and smaller)                                                                 */
/*     • Adjust the margin between the header and nav                                                   */
/* ==================================================================================================== */
@media (max-width: 647px) {
	nav.site-nav {
		margin-top: 9px;
	}
}


/* ==================================================================================================== */
/* Breakpoint: Extra small (Violet)                                                                     */
/*     • Adjust the size of buttons to fit within the viewport                                          */
/* ==================================================================================================== */
@media (max-width: 447px) {
	nav.site-nav {
			font-size: 16px;
	}
	
	nav.site-nav > ul {
		display: flex;
	}
	
	nav.site-nav li {
		margin: 0;
	}
	
	nav.site-nav a {
		color: var(--borders);
		text-decoration: none;
		margin: 0;
		padding: 18px 16px 18px 16px;
	}	
}





/* ==================================================================================================== */
/* ==================================================================================================== */
/* ==                                                                                                == */
/* ==                                                                                                == */
/* == Home -> Hero                                                                                   == */
/* ==                                                                                                == */
/* ==                                                                                                == */
/* ==================================================================================================== */
/* ==================================================================================================== */

/* ==================================================================================================== */
/* Garamond theme spacing                                                                               */
/* ==================================================================================================== */
.home.garamond .hero > h1 {
	margin: 0 0 70px 0;
	padding: 62px 0 65px 0;
}
	
.home.garamond .hero > p {
	margin: 0;
	padding: 0 0 56px 0;

	&:last-of-type {
		padding-bottom: 73px;
	}
}


/* ==================================================================================================== */
/* Bodoni theme spacing                                                                                 */
/* ==================================================================================================== */
.home.bodoni .hero > h1 {
	margin: 0 0 73px 0;
	padding: 75px 0 60px 0;
}
	
.home.bodoni .hero > p {
	margin: 0;
	padding: 0 0 56px 0;

	&:last-of-type {
		padding-bottom: 70px;
	}
}


/* ==================================================================================================== */
/* Styling                                                                                              */
/* ==================================================================================================== */
.home .hero h1,
.home .hero p {
	font-family: var(--serif);
		font-optical-sizing: auto;
		font-style: normal;
		font-weight: 400;
	
	& em {
		font-style: italic;
	}
}

.home .hero h1 {
	border-bottom: 1px solid var(--borders);
	color: var(--text-call-out);
	font-size: 90px;
		line-height: 112px;
	text-shadow: var(--shadow);
}

.home .hero p {
	color: var(--text-secondary);
	font-size: 48px;
		line-height: 64px;
		
	&:last-of-type {
	border-bottom: 1px solid var(--borders);
	}
}


/* ==================================================================================================== */
/* Breakpoint: Large (Yellow) and smaller                                                               */
/*     • Make the text smaller                                                                          */
/* ==================================================================================================== */
@media (max-width: 848px) {
	.home .hero h1 {
		font-size: 48px;
			line-height: 64px;
	}
	.home .hero p {
		font-size: 36px;
			line-height: 48px;
	}
}


/* ==================================================================================================== */
/* Breakpoint: Medium (Green)                                                                           */
/*     • Reduce the padding on the top and bottom                                                       */
/* ==================================================================================================== */
@media (min-width: 432px) and (max-width: 647px) {
	.home.garamond .hero > h1 {
		margin: 0 0 51px 0;
		padding: 46px 0 49px 0;
	}
		
	.home.garamond .hero > p {
		margin: 0;
		padding: 0 0 48px 0;
	
		&:last-of-type {
			padding-bottom: 52px;
		}
	}
	
	.home.bodoni .hero > h1 {
		margin: 0 0 61px 0;
		padding: 57px 0 46px 0;
	}
		
	.home.bodoni .hero > p {
		margin: 0;
		padding: 0 0 48px 0;
	
		&:last-of-type {
			padding-bottom: 49px;
		}
	}
}


/* ==================================================================================================== */
/* Breakpoint: Extra small (Violet)                                                                     */
/*     • Make the text even smaller                                                                     */
/*     • Reduce the padding on the top and bottom                                                       */
/* ==================================================================================================== */
@media (max-width: 431px) {
	.home .hero h1 {
		font-size: 36px;
			line-height: 48px;
	}
	.home .hero p {
		font-size: 24px;
			line-height: 32px;
	}
}

@media (max-width: 431px) {
	.home.garamond .hero > h1 {
		margin: 0 0 55px 0;
		padding: 51px 0 52px 0;
	}
		
	.home.garamond .hero > p {
		margin: 0;
		padding: 0 0 48px 0;
	
		&:last-of-type {
			padding-bottom: 52px;
		}
	}

	.home.bodoni .hero > h1 {
		margin: 0 0 64px 0;
		padding: 61px 0 50px 0;
	}
		
	.home.bodoni .hero > p {
		margin: 0;
		padding: 0 0 48px 0;
	
		&:last-of-type {
			padding-bottom: 54px;
		}
	}
}





/* ==================================================================================================== */
/* ==================================================================================================== */
/* ==                                                                                                == */
/* ==                                                                                                == */
/* == Portfolio grid                                                                                 == */
/* ==                                                                                                == */
/* ==                                                                                                == */
/* ==================================================================================================== */
/* ==================================================================================================== */
.portfolio-grid > ul {
	display: grid;
		grid-template-columns: repeat(3, minmax(0,1fr));
		column-gap: 24px;
		row-gap: 23px;
	list-style: none;
	margin-top: 88px;
	padding: 0;
}

.portfolio-grid li {
	min-width: 0;
}

.portfolio-grid li a {
	display: block;
	height: 100%;
	text-decoration: none;
}
	
.portfolio-grid figure {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
}

.portfolio-grid img {
	display: block;
	height: auto;
	width: 100%;
}

.portfolio-grid h3 {
	color: #fff;
	font-family: var(--sans);
		font-size: 16px;
		font-weight: 300;
		line-height: 16px;
	padding-top: 9px;
	overflow-wrap: anywhere;
}
	
.portfolio-grid p {
	color: var(--text-secondary);
	font-family: var(--sans);
		font-size: 14px;
		font-weight: 300;
		line-height: 14px;
	padding-top: 2px;
}



/* ==================================================================================================== */
/* Breakpoint: Medium & Small (Green & Blue)                                                            */
/*     • Switch to 2 columns                                                                            */
/* ==================================================================================================== */
@media (min-width: 432px) and (max-width: 848px) {
	.portfolio-grid > ul {
		grid-template-columns: repeat(2, minmax(0,1fr));
	}
}


/* ==================================================================================================== */
/* Breakpoint: Extra small (Violet)                                                                     */
/*     • Switch to 1 column                                                                             */
/* ==================================================================================================== */
@media (max-width: 431px) {
	.portfolio-grid > ul {
		grid-template-columns: repeat(1, minmax(0,1fr));
	}
}





/* ==================================================================================================== */
/* ==================================================================================================== */
/* ==                                                                                                == */
/* ==                                                                                                == */
/* == Footer                                                                                         == */
/* ==                                                                                                == */
/* ==                                                                                                == */
/* ==================================================================================================== */
/* ==================================================================================================== */
footer {
	color: var(--text-secondary);
	font-family: var(--sans);
		font-size: 12px;
		font-weight: 300;
		line-height: 12px;
	margin: 72px auto 32px auto; 
}

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

footer a,
footer a:hover,
footer a:focus,
footer a:active {
	color: var(--text-secondary);
	text-decoration: underline; 
}





/* ==================================================================================================== */
/* ==================================================================================================== */
/* ==                                                                                                == */
/* ==                                                                                                == */
/* == Resume                                                                                         == */
/* ==                                                                                                == */
/* ==                                                                                                == */
/* ==================================================================================================== */
/* ==================================================================================================== */

/* Professional summary: Garamond theme spacing */
.about.garamond .professional-summary {
	padding: 70px 0 73px;
}

/* Professional summary: Bodoni theme spacing */
.about.bodoni .professional-summary {
	padding: 81px 0 70px;
}

/* Professional summary: non-font-dependent styling */
.about .professional-summary {
	border-bottom: 1px solid var(--borders);
	color: var(--text-call-out);
	font-family: var(--serif);
		font-optical-sizing: auto;
		font-size: 48px;
		font-style: normal;
		font-weight: 400;
		line-height: 64px;
}


/* ==================================================================================================== */
/* Breakpoint: Medium (Green)                                                                           */
/*     • Reduce the padding on the top and bottom                                                       */
/* ==================================================================================================== */
@media (min-width: 432px) and (max-width: 647px) {
	.about .professional-summary,
	.about.garamond .professional-summary {
		margin: 0 0 51px 0;
		padding: 46px 0 49px 0;
	}
}


/* ==================================================================================================== */
/* Breakpoint: Extra small (Violet)                                                                     */
/*     • Make the text even smaller                                                                     */
/*     • Reduce the padding on the top and bottom                                                       */
/* ==================================================================================================== */
@media (max-width: 431px) {
	.about .professional-summary,
	.about.garamond .professional-summary {
		font-size: 36px;
			line-height: 48px;
		margin: 0 0 55px 0;
		padding: 51px 0 52px 0;
	}
}


/* ==================================================================================================== */
/*                                                                                                      */
/* Professional experience                                                                              */
/*                                                                                                      */
/* ==================================================================================================== */
.about .professional-experience {
	display: grid;
		grid-template-columns: [start-left-gutter] minmax(0, 1fr)
							   [end-left-gutter start-content] minmax(0, 4fr)
							   [end-content start-right-gutter] minmax(0, 1fr)
							   [end-right-gutter];
		column-gap: 24px;
		row-gap: 24px;
	margin-top: 72px;
}
	
.about .professional-experience .acoustic,
.about .professional-experience .world-wide-technology,
.about .professional-experience .ibm,
.about .professional-experience .patent,
.about .professional-experience .education,
.about .professional-experience .skills {
	display: grid;
		grid-template-columns: [start-left-column] minmax(0, 1fr)
							   [end-left-column start-right-column] minmax(0, 3fr)
							   [end-right-column];
		column-gap: 24px;
		row-gap: 24px;
	grid-column: start-content / end-content;
}
	
.about .professional-experience .role-details {
	grid-column: start-left-column / end-left-column;
	text-align: right;
}
		
.about .professional-experience .role-details h2 {
	color: var(--text-call-out);
	font-family: var(--sans);
		font-optical-sizing: auto;
		font-size: 18px;
		font-style: normal;
		font-weight: 700;
		line-height: 24px;
	padding-top: 4px;
	margin: 0;
}
		
.about .professional-experience .role-details h4 {
	color: var(--text-secondary);
	font-family: var(--sans);
		font-optical-sizing: auto;
		font-size: 14px;
		font-style: normal;
		font-weight: 300;
		line-height: 24px;
	padding-top: 2px;
	
	& span.h-adr,
	& span.time {
		display: block;
	}
}
	
.about .professional-experience .role-responsibilities {
	grid-column: start-right-column / end-right-column;
}
		
.about .professional-experience .role-responsibilities h3 {
	color: var(--text-secondary);
	font-family: var(--sans);
		font-optical-sizing: auto;
		font-size: 18px;
		font-style: normal;
		font-weight: 700;
		line-height: 24px;
	padding-top: 4px;
	margin: 0;
}
		
.about .professional-experience .role-responsibilities ul {
	color: var(--text-primary);
	font-family: var(--sans);
		font-optical-sizing: auto;
		font-size: 16px;
		font-style: normal;
		font-weight: 300;
		line-height: 24px;
	list-style: disc;
		list-style-position: outside;
	margin-left: 0;
	padding: 1px 0 3px 1.25rem;
	
	&.no-bullet {
		list-style: none;
		padding-left: 0;
	}
}
				
.about .professional-experience .ibm + .ibm h4 {
	margin-top: 4px;
}
	
.about .professional-experience .patent .role-responsibilities em {
	font-weight: 300;
	
	& a {
		color: var(--text-secondary);
	}
}
	
.about .professional-experience .skills .role-responsibilities {
	margin-top: 2px;
	
	& ul {
		margin-top: 4px;
	}
}

.about .professional-experience .skills .role-details h2 {
	padding-top: 6px;
}


/* ==================================================================================================== */
/* Breakpoint: Small (Blue) and smaller                                                                 */
/*     • Take up the entire width                                                                       */
/* ==================================================================================================== */
@media (max-width: 647px) {
	.about .professional-experience .acoustic,
	.about .professional-experience .world-wide-technology,
	.about .professional-experience .ibm,
	.about .professional-experience .patent,
	.about .professional-experience .education,
	.about .professional-experience .skills {
		grid-column: start-left-gutter / end-right-gutter;
	}
}


/* ==================================================================================================== */
/* Breakpoint: Extra small (Violet)                                                                     */
/*     • Move employer, location, and date above job title                                              */
/*     • Make location and date side by side                                                            */
/*     • Increase top padding on compnay name                                                           */
/* ==================================================================================================== */
@media (max-width: 447px) {
	.about .professional-experience .role-details,
	.about .professional-experience .role-responsibilities {
		grid-column: start-left-column / end-right-column;
		text-align: left;
	}
	
	.about .professional-experience .role-details {
		margin-top: 48px;
	}
	.about .professional-experience div:first-of-type .role-details {
		margin-top: 0;
	}
	
	.about .professional-experience .role-details h4 {
		align-items: baseline;
		display:flex;
		justify-content: space-between;
	}
	
	.about .professional-experience .role-details h4 span.h-adr {
		flex: 1;
		text-align: left;
	}
	
	.about .professional-experience .role-details h4 span.time {
		text-align: right;
	}
}






/* ==================================================================================================== */
/* ==================================================================================================== */
/* ==                                                                                                == */
/* ==                                                                                                == */
/* == Portfolio item                                                                                 == */
/* ==                                                                                                == */
/* ==                                                                                                == */
/* ==================================================================================================== */
/* ==================================================================================================== */

.portfolio-item .hero {
	display: grid;
	grid-template-columns: [start-col-1] minmax(0, 1fr)
						   [end-col-1 start-col-2] minmax(0, 1fr)
						   [end-col-2 start-col-3] minmax(0, 1fr)
						   [end-col-3 start-col-4] minmax(0, 1fr)
						   [end-col-4];
	column-gap: 24px;
	row-gap: 24px;
}


/* ==================================================================================================== */
/*                                                                                                      */
/* Hero image and chromes                                                                               */
/*                                                                                                      */
/* ==================================================================================================== */
.portfolio-item .hero {
	
	& figure.web {
		background-image: url(img/chrome-browser.png);
		background-repeat: no-repeat;
		grid-column: start-col-1 / end-col-3;
		margin-top: 96px;
		padding: 32px 3px 3px;
	}
	& figure.nexus-5 {
		background-image: url(img/chrome-android.png);
		background-repeat: no-repeat;
		grid-column: start-col-1 / end-col-3;
		margin-top: 96px;
		padding: 23px 99px 19px 77px;
	}
	& figure.ipad-4 {
		background-image: url(img/chrome-ipad-gen4.png);
		background-repeat: no-repeat;
		grid-column: start-col-1 / end-col-3;
		margin-top: 96px;
		padding: 32px 95px 32px 95px;
	}
	& figure.none {
		grid-column: start-col-1 / end-col-3;
		margin-top: 96px;
	}
	& img {
		display: block;
	}
}


/* ==================================================================================================== */
/* Breakpoint: Medium (Green) and smaller                                                               */
/*     • Change from 3 column to 4 column                                                               */
/* ==================================================================================================== */
@media (max-width: 847px) {
	.portfolio-item .hero {
		& figure.web, 
		& figure.nexus-5,
		& figure.ipad-4,
		& figure.none {
			grid-column: start-col-1 / end-col-4;
		}
	}
}


/* ==================================================================================================== */
/* Breakpoint: Chromes for 2 Extra large (Red)                                                          */
/* ==================================================================================================== */
@media (min-width: 1248px) {
	.portfolio-item .hero figure.web {
		background-image: url(img/chrome-browser-2xl.png);
	}
	.portfolio-item .hero figure.nexus-5 {
		background-image: url(img/chrome-android-2xl.png);
		padding: 23px 88px 19px 88px;
	}
	.portfolio-item .hero figure.ipad-4 {
		background-image: url(img/chrome-ipad-gen4-2xl.png);
		padding: 32px 95px 32px 95px;
	}
}


/* ==================================================================================================== */
/* Breakpoint: Chromes for Extra Large (Orange)                                                         */
/* ==================================================================================================== */
@media (min-width: 1048px) and (max-width: 1247px) {
	.portfolio-item .hero figure.web {
		background-image: url(img/chrome-browser-xl.png);
	}
	.portfolio-item .hero figure.nexus-5 {
		background-image: url(img/chrome-android-xl.png);
		padding: 18px 73px 18px 73px;
	}
	.portfolio-item .hero figure.ipad-4 {
		background-image: url(img/chrome-ipad-gen4-xl.png);
		padding: 28px 80px 28px 80px;
	}
}


/* ==================================================================================================== */
/* Breakpoint: Chromes for Large (Yellow)                                                               */
/* ==================================================================================================== */
@media (min-width: 848px) and (max-width: 1047px) {
	.portfolio-item .hero figure.web {
		background-image: url(img/chrome-browser-lg.png);
	}
	.portfolio-item .hero figure.nexus-5 {
		background-image: url(img/chrome-android-lg.png);
		padding: 19px 58px 17px 58px;
	}
	.portfolio-item .hero figure.ipad-4 {
		background-image: url(img/chrome-ipad-gen4-lg.png);
		padding: 20px 65px 20px 65px;
	}
}


/* ==================================================================================================== */
/* Breakpoint: Chromes for Medium (Green)                                                               */
/* ==================================================================================================== */
@media (min-width: 648px) and (max-width: 847px) {
	.portfolio-item .hero figure.web {
		background-image: url(img/chrome-browser-md.png);
	}
	.portfolio-item .hero figure.nexus-5 {
		background-image: url(img/chrome-android-md.png);
		padding: 15px 59px 13px 59px;
	}
	.portfolio-item .hero figure.ipad-4 {
		background-image: url(img/chrome-ipad-gen4-md.png);
		padding: 20px 64px 20px 64px;
	}
}


/* ==================================================================================================== */
/* Breakpoint: Chromes for Small (Blue)                                                                 */
/* ==================================================================================================== */
@media (min-width: 448px) and (max-width: 647px) {
	.portfolio-item .hero figure.web {
		background-image: url(img/chrome-browser-sm.png);
	}
	.portfolio-item .hero figure.nexus-5 {
		background-image: url(img/chrome-android-sm.png);
		padding: 10px 39px 8px 39px;
	}
	.portfolio-item .hero figure.ipad-4 {
		background-image: url(img/chrome-ipad-gen4-sm.png);
		padding: 16px 44px 16px 44px;
	}
}


/* ==================================================================================================== */
/* Breakpoint: Chromes for Extra small (Violet)                                                         */
/* ==================================================================================================== */
@media (max-width: 447px) {
	.portfolio-item .hero figure.web {
		background-image: url(img/chrome-browser-xs.png);
	}
	.portfolio-item .hero figure.nexus-5 {
		background-image: url(img/chrome-android-xs.png);
		padding: 8px 30px 6px 30px;
	}
	.portfolio-item .hero figure.ipad-4 {
		background-image: url(img/chrome-ipad-gen4-xs.png);
		padding: 8px 30px 8px 30px;
	}
}



/* ==================================================================================================== */
/*                                                                                                      */
/* Content area layout                                                                                  */
/*                                                                                                      */
/* ==================================================================================================== */
.portfolio-item article {
	display: grid;
	grid-template-columns: [start-col-1] minmax(0, 1fr)
						   [end-col-1 start-col-2] minmax(0, 1fr)
						   [end-col-2 start-col-3] minmax(0, 1fr)
						   [end-col-3 start-col-4] minmax(0, 1fr)
						   [end-col-4];
	column-gap: 24px;
	row-gap: 24px;
}

.portfolio-item .case-study {
	display: grid;
	grid-column: start-col-1 / end-col-3;
	grid-template-columns: [start-col-1] minmax(0, 1fr)
						   [end-col-1 start-col-2] minmax(0, 1fr)
						   [end-col-2 start-col-3] minmax(0, 1fr)
						   [end-col-3];
	column-gap: 24px;
	row-gap: 0;
}

.portfolio-item aside {
	grid-column: start-col-4 / end-col-4;
}


/* ==================================================================================================== */
/* Breakpoint: Medium (Green) and smaller                                                               */
/*     • Change from 3 column to 4 column                                                               */
/* ==================================================================================================== */
@media (max-width: 847px) {
	.portfolio-item .case-study {
		grid-column: start-col-1 / end-col-4;
	}
	
	.portfolio-item aside {
		grid-column: start-col-1 / end-col-4;
	}
}


/* ==================================================================================================== */
/*                                                                                                      */
/* Main content styling                                                                                 */
/*                                                                                                      */
/* ==================================================================================================== */

/* ==================================================================================================== */
/* Headline                                                                                             */
/* ==================================================================================================== */
.portfolio-item .case-study header {
	color: var(--text-secondary);
	font-family: var(--sans);
		font-optical-sizing: auto;
		font-size: 48px;
		font-style: normal;
		font-weight: 700;
		line-height: 64px;
	grid-column: start-col-1 / end-col-3;
	padding: 36px 0 18px 0;
	width: 100%;
}


/* ==================================================================================================== */
/* First blockquote                                                                                     */
/* ==================================================================================================== */
.portfolio-item .case-study header + blockquote p {
	color: var(--text-call-out);
	font-family: var(--serif);
		font-optical-sizing: auto;
		font-size: 40px;
		font-style: italic;
		font-variant-ligatures: common-ligatures;
		font-weight: 400;
		line-height: 48px;
	grid-column: start-col-1 / end-col-3;
	margin: 0;
}

.portfolio-item.garamond .case-study header + blockquote p {
	padding-top: 15px;
	padding-bottom: 24px;
}

.portfolio-item.bodoni .case-study header + blockquote p {
	padding-top: 29px;
	padding-bottom: 2px;
}


/* ==================================================================================================== */
/* Main content                                                                                         */
/* ==================================================================================================== */
.portfolio-item .case-study h2,
.portfolio-item .case-study h3,
.portfolio-item .case-study p,
.portfolio-item .case-study blockquote,
.portfolio-item .case-study ol,
.portfolio-item .case-study ul,
.portfolio-item .case-study li,
.portfolio-item .case-study figure,
.portfolio-item .case-study .passster-form {
	color: var(--text-primary);
	font-family: var(--sans);
		font-optical-sizing: auto;
		font-size: 16px;
		font-style: normal;
		font-weight: 300;
		line-height: 24px;
	grid-column: start-col-2 / end-col-3;
}


/* ==================================================================================================== */
/* Breakpoint: Extra small (Violet)                                                                     */
/* ==================================================================================================== */
@media (max-width: 447px) {
	.portfolio-item .case-study p,
	.portfolio-item .case-study ol,
	.portfolio-item .case-study ul,
	.portfolio-item .case-study li {
		font-size: 21px;
		line-height: 32px;
	}
}
.portfolio-item .case-study h2 {
	color: var(--text-secondary);
	font-family: var(--sans);
		font-optical-sizing: auto;
		font-size: 24px;
		font-style: normal;
		font-weight: 700;
		line-height: 30px;
		text-align: left;
	padding: 26px 0 0;
}

.portfolio-item .case-study h3 {
	color: var(--text-secondary);
	font-family: var(--sans);
		font-optical-sizing: auto;
		font-size: 18px;
		font-style: normal;
		font-weight: 700;
		line-height: 30px;
		text-align: left;
	padding: 20px 0 0;
}

.portfolio-item .case-study p {
	margin-bottom: 16px;
}

.portfolio-item .case-study blockquote {
	color: var(--text-call-out);
	font-family: var(--serif);
		font-optical-sizing: auto;
		font-size: 40px;
		font-style: italic;
		font-variant-ligatures: common-ligatures;
		font-weight: 400;
		line-height: 48px;
	grid-column: start-col-1 / end-col-3;
	margin-top: -4px;
	margin-bottom: 12px;
}


.portfolio-item .case-study ol,
.portfolio-item .case-study ul {
	list-style-position: outside;
	margin-left: 0;
	padding-left: 1.25rem;
	margin-bottom: 8px;
}

.portfolio-item .case-study ol {
	list-style-type: decimal;
}

.portfolio-item .case-study ul {
	list-style-type: disc;
}

.portfolio-item .case-study li {
	margin-bottom: 8px;
}

.portfolio-item .case-study figure {
	margin-top: 2px;
}

.portfolio-item .case-study figure img {
	height: auto;
	width: 100%;
}

.portfolio-item .case-study figure figcaption {
	color: var(--text-secondary);
	font-size: 14px;
		line-height: 16px;
	margin-top: 5px;
	margin-bottom: 19px;
}

.portfolio-item .case-study p em {
	font-style: italic;
}


/* ==================================================================================================== */
/* Breakpoint: Medium (Green) and smaller                                                               */
/*     • Change from 3 column to 4 column                                                               */
/* ==================================================================================================== */
@media (max-width: 847px) {
	.portfolio-item .case-study h2,
	.portfolio-item .case-study h3,
	.portfolio-item .case-study p,
	.portfolio-item .case-study blockquote,
	.portfolio-item .case-study ol,
	.portfolio-item .case-study ul,
	.portfolio-item .case-study li,
	.portfolio-item .case-study figure,
	.portfolio-item .case-study .passster-form {
		grid-column: start-col-1 / end-col-4;
	}
}


/* ==================================================================================================== */
/* Aside styling                                                                                        */
/* ==================================================================================================== */
.portfolio-item article aside {
	padding-top: 72px;

	header {
		margin: 0;
		padding: 0;
		width: 100%;

		h2 {
			border-bottom: 1px solid var(--borders);
			color: var(--text-secondary);
			display: block;
			font-family: var(--sans);
				font-optical-sizing: auto;
				font-size: 12px;
				font-style: normal;
				font-weight: 400;
				letter-spacing: 0.5px;
				line-height: 16px;
				text-transform: uppercase;
			margin: 0 0 16px;
			padding: 2px 0 13px;
		}
	}
		
	ul {
		padding-top: 2px;

		li {
			color: var(--text-secondary);
			font-family: var(--sans);
				font-optical-sizing: auto;
				font-size: 12px;
				font-style: normal;
				font-weight: 300;
				letter-spacing: 0.5px;
				line-height: 16px;
			padding-bottom: 32px;
				
			strong {
				display: block;
				padding-bottom: 8px;
			}
			
			ul {
				padding-top: 0;
			
				li {
					padding-bottom: 8px;
					
					a {
						color: var(--link);
						text-decoration: underline;
					}
				}
			}
		}
	}
}





/* ==================================================================================================== */
/* ==================================================================================================== */
/* ==                                                                                                == */
/* ==                                                                                                == */
/* == Passster plugin styling                                                                        == */
/* ==                                                                                                == */
/* ==                                                                                                == */
/* ==================================================================================================== */
/* ==================================================================================================== */

.passster-form,
.passster-form * {
	cursor: default !important;
}
.passster-form p {
	color: #1E2F4A !important;
}





/* ==================================================================================================== */
/* ==================================================================================================== */
/* ==                                                                                                == */
/* ==                                                                                                == */
/* == Attachment page                                                                                == */
/* ==                                                                                                == */
/* ==                                                                                                == */
/* ==================================================================================================== */
/* ==================================================================================================== */

.attachment article header {
	color: var(--text-secondary);
	font-family: var(--sans);
		font-optical-sizing: auto;
		font-size: 48px;
		font-style: normal;
		font-weight: 700;
		line-height: 64px;
	grid-column: start-col-1 / end-col-4;
	padding: 36px 0 18px 0;
	width: 100%;
}

.attachment article header a {
	color: var(--text-secondary);
	font-family: var(--sans);
		font-optical-sizing: auto;
		font-size: 16px;
		font-style: normal;
		font-weight: 300;
		line-height: 24px;
		text-decoration: none;
	grid-column: start-col-2 / end-col-4;
	
	&:hover,
	&:focus {
		text-decoration: underline;
	}
	
	&:active {
		color: var(--link);
	}
	
	& img {
		vertical-align: text-top;
	}
}