@layer reset {
	body {
		margin: 0;
	}

	* {
		margin: 0;
	}

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

	a,
	a:visited {
		color: initial;
		text-decoration: none;
	}

	ul {
		list-style: none;
		padding: 0;
	}

}

@layer theme {
	:root {
		--primary: maroon;
		--base: white;
		--accent: #d6d6d6;
		--accent-dark: #8a8a8a;
		--max-width: 1024px;
	}

	body {
		background-color: var(--base);
	}

	hr {
		margin-bottom: 1rem;
	}

	.gradient-bg {
		background:
			linear-gradient(transparent, var(--accent-dark)),
			var(--accent);
	}

	.shadow-sm {
		box-shadow: 0 5px 5px rgba(0, 0, 0, 50%);
	}
}

@layer typography {

	@font-face {
		font-family: 'DejaVu Serif';
		font-style: normal;
		font-display: swap;
		font-weight: 400;
		src: url(/assets/latin-400-normal.woff2) format('woff2'),
			url(/assets/latin-400-normal.woff) format('woff');
	}

	.text-center {
		text-align: center;
	}

	.font-sans {
		font-family: Verdana, Arial, Helvetica, sans-serif;
	}

	.font-impact {
		font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
	}

	.font-slab {
		font-family: "DejaVu Serif";
	}
}

@layer layout {
	.separator {
		height: 18px;
	}

	.grid {
		display: grid;
	}

	.cols-2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.cols-3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.rows-2 {
		grid-template-rows: repeat(2, 1fr);
	}

	.rows-3 {
		grid-template-rows: repeat(3, 1fr);
	}

	.col-1 {
		grid-column: 1;
	}

	.col-2 {
		grid-column: 2;
	}

	.col-3 {
		grid-column: 3;
	}

	[class*="col-1/2"] {
		grid-column: 1/ span 2;
	}

	[class*="col-1/3"] {
		grid-column: 1/ span 3;
	}

	.row-1 {
		grid-row: 1;
	}

	.row-2 {
		grid-row: 2;
	}

	[class*="row-1/2"] {
		grid-row: 1 / span 2;
	}

	[class*="row-1/3"] {
		grid-row: 1 / span 3;
	}

	.float-left {
		float: left;
	}

	.float-right {
		float: right;
	}

	.-z-100 {
		z-index: -100;
	}

	.-z-200 {
		z-index: -200;
	}

	.-z-300 {
		z-index: -300;
	}

	.-z-400 {
		z-index: -400;
	}
}

@layer widgets {
	:root {
		--block-line-height: 3rem;
		--nav-height: 3rem;
	}

	.header-nav {
		padding: 0;
		height: var(--nav-height);
	}

	.header-nav * {
		max-height: var(--nav-height);
	}


	.brand {
		padding: 0 5rem;
		background-color: var(--primary);
		height: var(--nav-height);
	}

	.brand * {
		color: white;
	}

	.brand-logo {
		margin-top: 0.5rem;
	}


	.nav-item {
		height: var(--nav-height);
		float: left;
		border-right: 1px solid var(--accent);
	}

	.nav-item:hover {
		background: linear-gradient(var(--accent-dark), rgba(0, 0, 0, 75%)) center/cover no-repeat;
	}

	.nav-item:hover * {
		color: white;
	}

	.nav-item-last {
		border-right: none;
		border-bottom-right-radius: 10px;
	}


	.nav-item a {
		margin-top: 0.75rem;
		margin-left: 0.75rem;
		margin-right: 0.75rem;
		position: relative;
		display: inline-block;
	}

	.nav-menu {
		display: none;
		position: absolute;
		z-index: 20;
	}

	.breadcrumb {
		margin-left: 1rem;
		display: inline-block;
	}

	.breadcrumb li {
		float: left;
	}

	.breadcrumb li:not(:last-of-type)::after {
		content: "\00BB";
		margin-left: 0.2rem;
		margin-right: 0.2rem;
	}

	.hero {
		padding: 10rem;
		color: white;
		background:
			linear-gradient(45deg, var(--primary) 40%, transparent),
			url("/assets/Intermodal_Freight_Containers_on_Flat_Cars_-_Knoxville\,_Tennessee_-_November_8\,_2014.jpg") center/cover no-repeat;
	}

	.hero-title {
		font-size: 5rem;
		color: white;
		margin: 0;
	}

	.blocks {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(2, 1fr);
		column-gap: 2rem;
		row-gap: 0.5rem;
		margin: 0 1rem;
	}

	.block {
		position: relative;
		overflow: hidden;
		min-height: 7rem;
	}

	[class*=" bg-"],
	[class^="bg-"] {
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	}

	.bg-pump {
		background-image: url("/assets/Oil_pump_Bashneft.jpg"),
			linear-gradient(#000, var(--accent));
	}

	.bg-pipeline {
		background-image: url("/assets/Trans-Alaska_Pipeline.jpg"),
			linear-gradient(#000, var(--accent));
	}

	.bg-containers {
		background-image: url("/assets/Hamburg_Hafen_Containerterminal.jpg"),
			linear-gradient(#000, var(--accent));
	}

	.bg-office {
		background: url("/assets/vitaly-gariev-Y5IPBlt2ou0-unsplash.jpg") center/cover no-repeat,
			linear-gradient(var(--accent), #000) center/cover no-repeat;
	}

	.block:hover .block-drawer {
		translate: 0 calc(90% - var(--block-line-height));
	}

	.block:focus-within .block-drawer,
	.block:hover .block-drawer:hover,
	.block-drawer:focus {
		translate: 0 0;
	}

	.block-drawer {
		transition: translate 200ms ease-out;
		color: white;
		background: rgba(0, 0, 0, 50%);
		position: absolute;
		width: 100%;
		height: 100%;
		translate: 0% calc(100% - var(--block-line-height));

		>p {
			line-height: var(--block-line-height);
		}
	}

	.block-title {
		font-weight: bold;
	}

	.main-content {
		max-width: var(--max-width);
		margin: auto;
	}

	.main-content p {
		margin-bottom: 0.5rem;
	}

	.updates p::before {
		content: "\203A";
		margin-right: 0.4rem;
	}

	.updates time {
		color: var(--primary);
		font-weight: bold;
		margin-right: 0.5rem;
	}

	.features {
		grid-template-columns: 400px 1fr;
	}

	.sidebar {
		margin: 1rem;
		/* box-shadow: 0 5px 5px; */
		overflow: hidden;
	}

	.sidebar li {
		line-height: 2rem;
	}

	.sidebar li::before {
		content: "\00BB";
		margin-left: 1rem;
		margin-right: 0.4rem;
	}

	.sidebar li:hover {
		color: white;
		background: linear-gradient(var(--accent-dark), rgba(0, 0, 0, 75%)) center/cover no-repeat;
	}

	.sidebar li:not(:first-of-type) {
		border-top: 1px solid transparent;
	}

	.sidebar li:hover:not(:first-of-type) {

		border-top: 1px solid white;
	}

	.staff-card {
		max-width: 500px;
		margin-bottom: 1rem;
	}

	.staff-card ul {
		display: grid;
		grid-template-columns: 1fr 150px;
		grid-template-rows: 2lh repeat(2, 1fr);
	}

	.staff-card ul li {
		vertical-align: middle;
	}

	.staff-portrait {
		border-radius: 100%;
		overflow: hidden;
		aspect-ratio: 1;
		grid-column: 2;
		grid-row: 1 / span 3;
		width: 150px;
	}

	.staff-portrait img {
		max-width: 100%;
		object-fit: cover;
	}

	.staff-name {
		grid-column: 1;
		grid-row: 1;
		font-weight: bold;
		font-size: x-large;
	}

	.staff-title {
		grid-column: 1;
		grid-row: 2;
	}

	.staff-email {
		text-decoration: underline;
		grid-column: 1 / span 2;
		grid-row: 3;
	}

	.footer {
		padding: 1rem;
	}


	.footer-items {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	}

	.footer-item-title {
		font-weight: bold;
		margin-bottom: 1rem;
	}

	.end-matter {
		display: block;
	}


	.copyright {
		display: block;
	}

	.socials {
		margin: auto;
	}

	.social-icon {
		height: 25px;
		object-fit: contain;
		vertical-align: middle;
	}
}