:root {
	--radius-sm: 3px;
	--radius: 6px;
	--radius-lg: 9px;
	--space-sm: 10px;
	--space: 20px;
	--space-lg: 30px;
	--color-blue: #005196;
	--color-white: #fff;
	--color-aqua: #00ddb0;
	--color-shadow: #00000011;
	--color-primary: var(--color-blue);
	--color-primary-light: #0072b2;
	--color-secondary: var(--color-aqua);
	--color-secondary-light: #00ddb0;
	--color-reverse: var(--color-white);
	--link: var(--color-primary);
	--link-hover: var(--color-primary-light);
}

* {
	box-sizing: border-box;
}

@keyframes fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes fade-out {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

body {
	margin: 0;
	background: #f5f5f5;
	font-family: 'Roboto', sans-serif;
	background-color: var(--color-white);
	background-repeat: no-repeat;
	display: flex;
	flex-direction: column;
}
body:has(dialog[open]) {
    overflow: hidden;
}
.container {
	 width: 100%; 
	 margin: auto; 
	 padding: var(--space); 
}
h1, h2, h3, h4, h5, h6 {
	color: var(--color-primary);
}
h1, h2, h3 {
	font-family: 'Roboto Mono', monospace;
}
h4, h5, h6 {
	font-family: 'Roboto Condensed', monospace;
}
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	margin: -1px;
	padding: 0
}
a {
	color: var(--link);
	text-decoration: underline;
}
a:hover,
a:focus {
	color: var(--link-hover);
	text-decoration: none;
}

a.btn {
    display: flex;
    align-items: center;
    white-space: nowrap;
    gap: .3em;
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    background-color: #2762e7;
    padding: .5em;
    border-radius: .25em;
    outline-offset: .2em;
    box-shadow: 0 0 0 #fff;
    /*transition: background-color .15s ease-out,color .15s ease-out,box-shadow 1.5s ease-out*/
}

a.btn:focus,a.btn:hover {
    /*transition: background-color .15s ease-in,color .3s ease-in,box-shadow .3s ease-in;*/
    color: #b3e8ff;
    background-color: #0037b2;
    box-shadow: 0 0 .75em #fff
}

a.btn .icon {
    width: 1.4em;
    height: 1.4em;
    vertical-align: text-bottom;
}
header {
	background: url('../img/bg-noise.svg') var(--color-blue);
	color: var(--color-reverse);
	/* max-width: 450px; */
	/* width: 30vw; */
	grid-column: 2;
	grid-row: 1;
	box-shadow: 0 6px 0 var(--color-shadow);
}
header .container {
	display: flex;
    align-items: flex-start;
	gap: var(--space);
	justify-content: space-between;
	flex-direction: row;
}
header nav {
	display: flex;
    align-items: flex-start;
	gap: var(--space-sm);
}
header h1 {
	font-size: xxx-large;
	font-family: 'Roboto Condensed', 'Impact', sans-serif;
	font-style: italic;
	margin: 0;
	color: var(--color-reverse);
}
header h1 small {
	margin-top: 0.5em;
	display: block;
	font-size: .6em;
	font-weight: normal;
	line-height: normal;
	font-family: 'Roboto', sans-serif;
	font-style: normal;
	color: var(--color-reverse);
}
.details {
	display: none;
}

.lead {
	font-style: italic;
	font-size: 1.2em;
}

.portfolio {
	display: grid;
	grid-auto-flow: dense;
	grid-auto-rows: 1fr;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-sm);
}
.portfolio .filters {
	grid-column: 1 / -1;
	display: flex;
	justify-content: flex-end;
	gap: var(--space-sm);
}
.portfolio .filters label {
	cursor: pointer;
}
.portfolio .filters svg {
	fill: currentColor;
	width: 1.5rem;
	height: 1.5rem;
	opacity: 0.4;
}
.portfolio .filters * {
	display: block;
}
.portfolio .filters :focus svg,
.portfolio .filters :hover svg {
	opacity: 0.7;
}
.portfolio .filters :checked ~ svg {
	fill: var(--color-primary);
	opacity: 1;
}
.portfolio article {
	position: relative;
	aspect-ratio: 3 / 2;
}
.portfolio article.double {
	grid-row: span 2;
	aspect-ratio: unset!important;
}
.portfolio .thumb {
	color: #fff;
	display: block;
	border-radius: var(--radius);
	overflow: hidden;
	background: #00000017;
	box-shadow: 0 9px 13px -7px #00000057;
    inset: 0;
    padding: 0;
    margin: 0;
    border: 0;
    content: '';
    position: absolute;
}
body.js .portfolio .thumb {
	cursor: pointer;
}
.portfolio .thumb::before {
	display: block;
	/*content: '';*/
	position: absolute;
	inset: -1px;
	z-index: 1;
    border: 5px solid #747474;
    border-radius: var(--radius);
    pointer-events: none;
    mix-blend-mode: darken;
    opacity: 0;
}
.portfolio .thumb::after {
	display: block;
	/*content: '';*/
	position: absolute;
	inset: -1px;
	z-index: 1;
    border: 3px solid #ddd;
    border-radius: var(--radius);
    pointer-events: none;
    mix-blend-mode: lighten;
    opacity: 0;
}
body.js .portfolio .thumb:hover img,
body.js .portfolio .thumb:focus img {
	opacity: 0.8;
}
body.js .portfolio .thumb:hover::before,
body.js .portfolio .thumb:focus::before {
	mix-blend-mode: normal;
	border-color: var(--link-hover);
	opacity: 1;
}
body.js .portfolio .thumb:hover::after,
body.js .portfolio .thumb:focus::after {
	opacity: 1;
}
.portfolio .thumb {
	outline-style: solid;
	outline-color: transparent;
	outline-width: 3px;
	outline-offset: 0;
}
@media (prefers-reduced-motion: no-preference) {
	.portfolio .thumb {
		transition: outline-offset .15s ease-out, outline-color .15s ease-out;
	}
	dialog::backdrop {
		transition: background-color .3s ease-in-out;
	    background: color-mix(var(--color-primary) 85%, transparent);
	    backdrop-filter: blur(8px);
	}
}
.portfolio .thumb:hover,
.portfolio .thumb:focus {
	outline-color: var(--link-hover);
	outline-offset: 4px;
}
.portfolio .thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}
dialog {
	padding: 0;
    border: 0;
    width: 1400px;
    max-width: calc(100% - var(--space) * 3);
    max-height: calc(100% - var(--space) * 3);
    border-radius: var(--radius-lg);
	scrollbar-color: var(--color-primary-light) transparent;
}
dialog[open] {
	display: grid;
	animation: fade-in .7s ease-out normal;
}
dialog[open]::backdrop {
	animation: fade-in .2s ease-out normal;
}
dialog button.close {
	color: #fff;
    position: fixed;
    top: 20px;
    right: 20px;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
}
dialog::backdrop {
    background: color-mix(var(--color-primary) 85%, transparent);
    backdrop-filter: blur(8px);
}
dialog:has(button.close:hover, button.close:focus-visible)::backdrop {
    background: color-mix(var(--color-primary-light) 85%, transparent);
}
.portfolio .modal img {
	width: 100%;
	height: auto;
}
@media (max-width: 949px) {
	header .btn .label {
		display: none;
	}
}
@media (min-width: 950px) {
	html {
		height: 100%;
	}
	body {
		display: grid;
		grid-template-columns: auto 310px minmax(auto, 1150px) auto;
		height: 100%;
	}
	body::before, body::after {
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		position: relative;
		pointer-events: none;
	}
	body::before {
		grid-column: 1 / 3;
		grid-row: 1 / -1;
		background: url('../img/bg-noise.svg') fixed var(--color-blue);
	}
	header {
		box-shadow: 6px 0 0 var(--color-shadow);
		background: none;
	}
	header nav {
		flex-direction: column;
	}
	header .container {
		flex-direction: column;
		position: sticky;
		top: var(--space);
	}
	main {
		grid-row: 1;
	}
}
@media (min-width: 1200px) {
	body {
		--space-sm: 20px;
		--space: 40px;
		--space-lg: 50px;
	}
	a.btn:has(.label) {
		padding: .5em .8em;
	}
	.portfolio {
		grid-template-columns: repeat(3, 1fr);
	}
}