/******************************************
Typography
******************************************/
:root {
	--color-text: black;
	--color-background: #f6f6f6;

	@media (prefers-color-scheme: dark) {
		--color-text: #f6f6f6;
		--color-background: rgb(29, 29, 29);
	}
}

html {
	background-color: var(--color-background);
	color: var(--color-text);
	font-family: "artifex-cf", serif;

	/*background-image: repeating-linear-gradient(to bottom, var(--color-background) 0%, var(--color-background) 98%, white 100%);
	background-size: 100% 1rlh;*/

	@media ( min-width: 900px ) {
		font-size: 18px;
	}

	@media (min-width: 1100px) {
		font-size: 20px;
	}

}

h1 {
	font-size: 2.5rem;
	margin: .5rlh 0;

	@media (min-width: 950px) {
		margin: 0 0 2rlh;
	}

	@media ( min-width: 1150px ) {
		font-size: 2rem;
		line-height: 2.25rlh;
	}
}

h1 span {
	font-weight: normal;
	font-size: .75em;
	display: block;
}

p, ul {
	line-height: 1.5;
}

a {
	color: var(--color-text);
	position: relative;
	text-decoration: none;

	nav &:after, nav &:before {
		content: '';
		background-color: transparent;
		height: .1em;
		left: 0;
		position: absolute;
		right: 0;
		top: .3lh;
		transition: all .3s ease-out;
	}
}

a:hover, a:focus {
	outline: none;
	text-decoration: none;
	text-decoration-thickness: 0;

	&:after, &:before {
		background-color: var(--color-text);
	}

	&:before {
		top: -.23em;
	}

	&:after {
		top: 1em;
	}
}

a:active {
	opacity: .4;
}/******************************************
Header
******************************************/

header {
	padding: 1lh;
}

nav ul {
	font-variant-caps: small-caps;
	letter-spacing: .03em;
	list-style: none;
	margin: 0;
	padding-left: .13rem;
}

nav li {
	display: inline;
	margin-bottom: .5rem;
	margin-right: .5rem;
}

:not(h1)[aria-current="page"] {
	font-weight: 900;
	text-decoration: underline;
	text-decoration-skip-ink: auto;
	text-decoration-thickness: .02em;
	text-underline-offset: .2em;
}

nav li span {
	display: none;
	font-weight: 900;
}

@media (min-width: 950px) {

	header {
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: sticky;
		top: 0;
	}

	nav li {
		display: block;
	}

	nav li span {
		display: inline;
	}

	[aria-current="page"] {
		text-decoration: none;
	}

}

/******************************************
Home Layout
******************************************/

.home-main {
	align-content: center;
	align-items: center;
	display: grid;
	grid-template-columns: repeat( auto-fit,minmax(300px, 1fr));
	justify-content: center;
	min-height: 100dvh;
}

.home-image {
	position: relative;
	transition: all .3s ease-out;

	&:hover, &:focus {
		img {
			opacity: .4;
		}

		div {
			scale: 1.3;
		}
	}

	&:active {
		img {
			opacity: .05;
		}
	}

	img {
		aspect-ratio: 6 / 4;
		transition: all .3s ease;
	}

	div {
		background-color: var(--color-background);
		bottom: 0;
		left: 0;
		padding: .5rem .75rem;
		position: absolute;
		text-transform: capitalize;
		transform-origin: bottom left;
		transition: all .3s ease;
	}
}

/******************************************
Main Layout
******************************************/

@view-transition {
	navigation: auto; 
}

img {
	display: block;
	max-width: 100%;
}

body {
	margin: 0;

	@media ( min-width: 950px ) {
		display: grid;
		gap: 1lh;
		grid-template-columns: 1fr 4fr;
	}
}

/******************************************
Gallery
******************************************/

.gallery {
	height: 100dvh;
	scroll-snap-type: y mandatory;
	scrollbar-width: none;

	@media ( min-width: 950px ) {
		overflow-y: scroll;
		padding-right: 1lh;
	}

	img {
		max-height: 80dvh;
		max-width: 90dvw;
	}
}

.gallery::-webkit-scrollbar {
	display: none;
}

.gallery-image {
	align-items: center;
	display: flex;
	justify-content: center;
	margin-block: 10dvh;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	animation-name: introZoom, exitZoom;
	animation-timing-function: ease-in, ease-out;
	animation-timeline: view();
	animation-range: entry, exit;
}

@keyframes introZoom {
	from {
		opacity: .1;
		scale: .8;
	}

	to {
		opacity: 1;
		scale: 1;
	}
}

@keyframes exitZoom {
	to {
		opacity: .4;
		scale: .8;
	}
}

.gallery-image:first-child {
	margin-top: 20dvh;
}

.gallery-image:last-child {
	margin-bottom: 20dvh;
}