/* Reset CSS found at https://www.joshwcomeau.com/css/custom-css-reset/ */
/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
*:not(dialog) {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

/* Start Custom Styles */
:root {
	color-scheme: light dark;
	font-size: 20px;
	--base-light: #333;
	--base-dark: #FAFAFA;
	--accent-light: #092;
	--accent-dark: #0C4;
	--info-light: #11F;
	--info-dark: #24F;
}

body{
	font-family: "Open Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	font-variation-settings: "wdth" 100;
	line-height: 1.6rem;
	padding: 2vw;
	color: light-dark(var(--base-light),var(--base-dark));
	background-color: light-dark(var(--base-dark),var(--base-light));
}

h1, h2{
	font-family: "Merriweather", serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	font-variation-settings: "wdth" 100;
}
h1{
	font-size: 2rem;
	line-height: 3.2rem;
}
h2{
	color: light-dark(var(--accent-light),var(--accent-dark));
	font-size: 1.4rem;
	margin-top: 1.6rem;
	margin-bottom: 0.2rem;
	border-bottom: 1px solid light-dark(var(--accent-light),var(--accent-dark));
}
h3{
	font-weight: 500;
	font-size: 1.2rem;
}
footer{
	margin-top: 3.2rem;
	padding-top: 0.8rem;
	border-top: 1px solid light-dark(var(--base-light),var(--base-dark));
}
strong{
	font-weight: 500;
}
section{
	margin-top: 1.6rem;
}
section:first-of-type{
	margin-top: 0;
}
.history p{
	margin-bottom: 0.8rem;
}
.history p:first-of-type{
	font-style: italic;
}
a{
	color: light-dark(var(--accent-light),var(--accent-dark));
	font-weight: 400;
}
h2 a{
	display: block;
	text-decoration: none;
}
a[href^=tel]{
	text-decoration: none;
	color: light-dark(#333, #fafafa);
	font-weight: 300;
}
a[href^="http"]:after{
	content: "\2009\2197";
	font-size: 0.7rem;
	font-weight: 600;
	vertical-align: bottom;
	text-decoration: none;
}
#mothermold{
	width: 100%;
	max-width: 860px;
	margin: 0 auto;
}
.callout{
	margin: 0.8rem 0;
	border-left: 0.4rem solid light-dark(var(--accent-light),var(--accent-dark));
	padding: 0.4rem 0.8rem;
	background-color: light-dark(rgba(200,200,200,0.2), rgba(10,10,10,0.2));
}
.nocopy{
	user-select: none;
}
.homelogo, .returntohome{
	width: calc(120px + 0.8rem);
	height: calc(120px + 0.8rem);
	float: left;
	background: url('icon.png') 0% 0% no-repeat;
	background-size: 120px 120px;
}
.returntohome{
	text-indent: -9999px;
	font-size: 0;
}
#mothermold section:first-of-type{
	clear: left;
}
.note, .exit{
	cursor: pointer;
	user-select: none;
	color: light-dark(var(--info-light),var(--info-dark));
	font-weight: 700;
	font-size: 0.9rem;
	vertical-align: super;
	letter-spacing: 0.5px;
}
#overlay{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.8);
	display: none;
	justify-content: center;
}
.exit{
	position: fixed;
	top: 5vh;
	right: 2vh;
}
iframe{
	position: relative;
	width: 95%;
	max-width: 860px;
	height: 80vh;
	margin: 10vh 0;
	border: 1px solid light-dark(var(--accent-light),var(--accent-dark));
}
body.popup{
	overflow: hidden;
	margin-right: 3vw;
}
.noteswindow{
	padding: 1.6rem;
}
.noteswindow p, .noteswindow ul{
	margin-bottom: 1.6rem;
}

.resume h1 a{
	color: light-dark(var(--base-light),var(--base-dark));
	text-decoration: none;
}
.resume .years{
	font-weight: 300;
	font-size: 0.8rem;
	font-style: italic;
}
.resume .repeated{
	font-weight: 200;
}

.casestudy p{
	margin-bottom: 1.6rem;
}
.casestudy ul, .casestudy ol{
	margin-bottom: 1.6rem;
}
.metrics{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1.6rem;
	margin: 1.6rem 0;
}
.metric{
	background: light-dark(rgba(200,200,200,0.2), rgba(10,10,10,0.2));
	border: 1px solid light-dark(var(--accent-light),var(--accent-dark));
	padding: 16px;
	border-radius: 10px;
}
.metric strong{
	display: block;
	font-size: 1.2rem;
	margin-bottom: 4px;
}
.metric span{
	color: #666;
	font-size: 0.85rem;
}

.skills p{
	margin-bottom: 1.6rem;
}
.skills ul{
	margin-bottom: 1.6rem;
}
.bottomline{
	margin-top: 0.8rem;
	margin-bottom: 0.8rem;
	background-color: light-dark(rgba(200,200,200,0.2), rgba(10,10,10,0.2));
	padding: 1.8rem 0.8rem 0.8rem;
	font-weight: 500;
	position: relative;
	/*border: 2px solid light-dark(var(--accent-light),var(--accent-dark));*/
	box-shadow: 1px 1px 5px #000;
}
.bottomline::after{
	content: "Summary";
	font-size: 0.85rem;
	font-variant: small-caps;
	position: absolute;
	top: 0.2rem;
	left: 0.8rem;
	border-bottom: 1px solid light-dark(var(--accent-light),var(--accent-dark));
	line-height: 1.1rem;
}
.bottomline ul{
	margin-bottom: 0;
}

.casestudy .bottomline{
	font-size: 0.8rem;
	line-height: 1.2rem;
	font-weight: 300;
}
.casestudy .bottomline h3{
	font-size: 1.1rem;
	color: light-dark(var(--accent-light),var(--accent-dark));
}
.casestudy .bottomline p:last-child{
	margin-bottom: 0;
}
.casestudy .bottomline.tldr::after{
	content: "What This Demonstrates";
}

/* Quick Navigation Cards */

.quick-nav {
  margin: 3.5rem 0 4rem;
}

.quick-nav h2 {
  margin-bottom: 0.6rem;
}

.quick-nav-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.quick-nav-card {
  display: flex;
  flex-direction: column;
  min-height: 18rem;
  padding: 0.6rem;
  color: #f4f4f4;
  text-decoration: none;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.055),
      rgba(255, 255, 255, 0.018)
    );
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0.65rem;
  box-shadow: 0 0.65rem 1.25rem rgba(0, 0, 0, 0.18);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease;
}

.quick-nav-card:hover,
.quick-nav-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(0, 204, 75, 0.75);
  background:
    linear-gradient(
      145deg,
      rgba(0, 204, 75, 0.09),
      rgba(255, 255, 255, 0.025)
    );
  box-shadow: 0 0.85rem 1.65rem rgba(0, 0, 0, 0.28);
}

.quick-nav-card:focus-visible {
  outline: 3px solid rgba(0, 204, 75, 0.55);
  outline-offset: 4px;
}

.quick-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.75rem;
  height: 4.75rem;
  margin-bottom: 1.75rem;
  border: 2px solid rgba(0, 204, 75, 0.85);
  border-radius: 50%;
  color: light-dark(var(--accent-light),var(--accent-dark));;
}

.quick-nav-icon svg {
  width: 2.8rem;
  height: 2.8rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quick-nav-title {
  color: light-dark(var(--base-light),var(--base-dark));
  font-family: "Merriweather", serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	font-variation-settings: "wdth" 100;
	font-size: 1.4rem;
}

.quick-nav-accent {
  width: 3.75rem;
  height: 2px;
  margin: 1rem 0 1.35rem;
  background: light-dark(var(--accent-light),var(--accent-dark));;
}

.quick-nav-copy {
  color: light-dark(var(--base-light),var(--base-dark));
  font-size: 1rem;
  line-height: 1.6;
  max-width: 17rem;
}

.quick-nav-arrow {
  margin-top: auto;
  padding-top: 1.75rem;
  color: light-dark(var(--accent-light),var(--accent-dark));;
  font-size: 2rem;
  line-height: 1;
  transition: transform 160ms ease;
}

.quick-nav-card:hover .quick-nav-arrow,
.quick-nav-card:focus-visible .quick-nav-arrow {
  transform: translateX(0.25rem);
}

/* Responsive */

@media (max-width: 900px) {
  .quick-nav-grid {
    grid-template-columns: 1fr;
  }

  .quick-nav-card {
    min-height: auto;
  }

  .quick-nav-copy {
    max-width: none;
  }
}

@media (max-width: 520px) {
  .quick-nav {
    margin: 2.5rem 0 3rem;
  }

  .quick-nav-card {
    padding: 1.5rem;
  }

  .quick-nav-icon {
    width: 4rem;
    height: 4rem;
    margin-bottom: 1.25rem;
  }

  .quick-nav-icon svg {
    width: 2.35rem;
    height: 2.35rem;
  }
}