:root {
	/* Colors */
	--white: #ffffff;
	--black: #171614;
	--grey: #6b7280;

	/* Rothko palette */
	--rothko-base: #cda432;
	--rothko-yellow: #e2b91f;
	--rothko-red: #bd3528;
	--rothko-orange: #dc8728;
	--rothko-light: #efe2ba;

	/* Noland key colors */
	--noland-light:#f2ede0;
	--noland-blue: #1a2868; 

	/* Layout */
	--border: 0.08rem solid var(--black);

	/* Spacing */
	--space-xs: 0.5rem;
	--space-sm: 0.875rem;
	--space-md: 1.25rem;
	--space-lg: 2rem;
	--space-xl: 3rem;

	/* Typography */
	--font: 'Geist', sans-serif;
	--font-mono: 'Geist Mono', monospace;
	--font-size-xs: 1rem;
	--font-size-sm: 1.2rem;
	--font-size-md: 1.5rem;
	--font-size-lg: 3rem;

	/* Blur */
	--blur: 0.1rem;
}


/* Typography */
h1, h2, p, time {
	font-family: var(--font);
	color: var(--black);
}

h1 {
	font-size: var(--font-size-lg);
	font-weight: 600;
	line-height: 90%;
}

h2 {
	padding-block-start: var(--space-md);
	font-size: var(--font-size-md);
	font-weight: 500;
}

h3 {
	color: var(--grey);
	font-family: var(--font-mono);
	font-size: var(--font-size-xs);
	font-weight: 500;
	line-height: 135%;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

p {
	font-size: var(--font-size-sm);
	line-height: 135%;
	color: var(--grey);
	max-inline-size: 36rem;
}

a {
	justify-self: start;
	color: var(--black);
	font-family: var(--font-mono);
	font-size: var(--font-size-xs);
	font-weight: 500;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	position: relative;
	padding-block-start: var(--space-sm);

	&:hover {
		text-decoration: underline;
	}
}

time {
	font-family: var(--font-mono);
	font-size: var(--font-size-xs);
	color: var(--grey);
	line-height: 135%;
	font-weight: 500;
}

/* Base */
body {
	background: var(--white);
}

.project {
	display: flex;
	flex-direction: column;
	padding: var(--space-lg);
	gap: var(--space-xl);
}


/* Artworks */
.artwork {
	position: relative;
	overflow: hidden;
	inline-size: 100%;
	max-block-size: 65vh;
}

/* Intro */
.intro {
	display: grid;
	gap: var(--space-md);
}

/* Figures */
figure {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

figure figcaption {
	display: grid;
	gap: var(--space-sm);

	.tombstone {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: var(--space-xs) var(--space-sm);

		p, a {
			grid-column: 1 / -1;  /* span both columns */
		}
	}
}


/* Rothko Artwork*/
.artwork.rothko {
	aspect-ratio: 9/16;
	background: var(--rothko-base);
	filter: blur(var(--blur));

	span {
		position: absolute;
	}

	/* Thought about using rem units at first, but later I decided to switch this to percentages so that it fits within the design system of the noland piece using linear gradients with percentages */
	.field-top,
	.field-middle,
	.field-bottom {
		inset-inline-start: 4%;
		inline-size: 92%;
	}

	.field-top {
		inset-block-start: 6%;
		block-size: 47%;
		background: var(--rothko-yellow);
	}

	.field-middle {
		inset-block-start: 53%;
		block-size: 13%;
		background: var(--rothko-red);
	}

	.field-bottom {
		inset-block-start: 66%;
		block-size: 30%;
		background: var(--rothko-orange);
	}
}

/* Noland Artwork */
/* In order to create the stripped effect going on in the painting, I thought back to project 5 where I created the stripped background in my girl dinner generator also referencing this stack overflow to figure out how to space them and create a linear gradient with multiple colors https://stackoverflow.com/questions/17348108/css-stripe-with-multiple-colors */
/* Because there are so many colors here, I thought it would be best to only make the repeteting ones variables since the other colors are only used once throughout the project */
.artwork.noland {
	aspect-ratio: 9/16;
	filter: blur(var(--blur));
	/* Learnt this in class but here's the link for my reference: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/filter-function/blur */
	background: linear-gradient(
		to bottom,
		var(--noland-light)	0%    1%,
		#bb5535			1%    5%,
		var(--noland-light) 5%    6%,
		#3d8c40 6%    7%,
		var(--noland-light)  7%    8%,
		var(--noland-blue) 8%    9%,
		var(--noland-light)  9%    10%,
		var(--white) 10%    11%,
		#c03070 10.5% 11%,
		var(--noland-light)  11%    12%,
		#e87835 12%   16%,
		#5b9fd0 16%   22%,
		var(--noland-light) 22%    23%,
		#8b1820 23%   24%,
		var(--noland-light) 24%   25%,
		#e0b8c0 25%   26%,
		#bee3aa 26%   28%,
		#e8e820 28%   32%,
		var(--noland-light) 32%   33%,
		#eec8a0 33%   35%,
		var(--noland-light) 35%   38%,
		#d4a030 38%   41%,
		var(--noland-light) 41%   43%,
		#8b1820 43%   45%,
		var(--noland-light) 45%   46%,
		#3060c0 46% 48%,
		var(--noland-light) 48%   49%,
		#20a888 49% 51%,
		#4a2068 51% 53%,
		var(--noland-light) 53%   54%,
		#8ab080 54% 59%,
		var(--noland-light) 59%   60%,
		#b0c0e0 60% 63%,
		var(--noland-light) 63%   64%,
		var(--noland-light) 64%   66%,
		#e0a080 66%   72%,
		var(--noland-light) 72%   73%,
		#d83020 73%   80%,
		#f8f4e8 80%   84%,
		#e8d820 84%   86%,
		var(--noland-light) 86%   87%,
		#c09028 87% 88%,
		var(--noland-light) 88%   89%,
		#a06840 89% 92%,
		#6a3090 92% 94%,
		var(--noland-light) 94%   96%,
		#c32f48 96% 99%, 
		var(--noland-light) 99%   100%
	);
}

/* Desktop */
@media (min-width: 900px) {
	:root {
		--font-size-lg: 3rem;
		--font-size-sm: 1rem;
		--font-size-xs: 1rem;
		--font-size-md: 1.2rem;
	}

	.project {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		block-size: 100vh;
		overflow: hidden;
		padding: var(--space-lg);
		gap: var(--space-md);
	}

	.intro {
		grid-column: 1;
		grid-row: 1;
		align-self: start;
	}

	h2 {
	padding-block-start: var(--space-sm);
	font-size: var(--font-size-md);
	font-weight: 500;
}

	figure.rothko {
		grid-column: 2;
		grid-row: 1;
		display: flex;
		flex-direction: column;
		align-items: start;
		block-size: 100%;
	}

	figure.noland {
		grid-column: 3;
		grid-row: 1;
		display: flex;
		flex-direction: column;
		align-items: start;
		block-size: 100%;
	}

	figure .artwork {
		flex: 1;
		min-block-size: 0;
		max-block-size: 65vh;
		inline-size: 100%;
	}

}