/* ============================================	*/
/*	VARIABLES									*/
/* ============================================	*/

	:root {
		--font-body: "Quicksand", "Verdana", "Arial", sans-serif;
		--font-head: "Quando", "Times New Roman", serif;
		--color-button-background: #424D28;
		--color-background: #0A0A0A;
		--color-foreground: #D9D9D9;
		--color-accent: #E3DCAA;
		}

/* ============================================	*/
/*	CONTAINERS									*/
/* ============================================	*/

	*, *::before, *::after {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
		}

	body {
		background: var(--color-background) url(../images/background_home.png) top center no-repeat;
		box-sizing: border-box;
		color: var(--color-foreground);
		font: 500 1rem/1.6 var(--font-body);
		}

	html {
		scroll-behavior: smooth;
		}

/* ============================================ */
/*	TYPOGRAPHY									*/
/* ============================================ */

		a {
			color: var(--color-accent);
			}

		h1 {
			color: var(--color-accent);
			font-family: var(--font-head);
			font-size: clamp(2.2rem, 4vw + 1rem, 4rem);
			font-weight: 400;
			line-height: 1.15;
			margin: 0 0 30px 0;
			max-width: 500px;
			}

		h2 {
			color: var(--color-accent);
			font-family: var(--font-head);
			font-size: clamp(1.6rem, 2vw + 1rem, 2.25rem);
			line-height: 1.15;
			margin: 60px 0 20px 0;
			}

			h2.center {
				align-items: center;
				display: flex;
				gap: 20px;
				justify-content: center;
				margin-top: 80px;
				text-align: center;
				}

				h2.center::before,
				h2.center::after {
					background: var(--color-accent);
					content: "";
					height: 2px;
					width: 70px;
					}

		h3 {
			color: var(--color-foreground);
			font: 600 1.625rem/1.4 var(--font-body);
			margin: 60px 0 30px 0;
			}

			h3.center {
				text-align: center;
				}

		img {
			max-width: 100%;
			height: auto;
			}

		p {
			line-height: 1.6;
			margin-bottom: 20px;
			}

		.subtitle {
			color: var(--font-body);
			font-size: clamp(1.2rem, 1vw + 1rem, 1.625rem);
			font-weight: 600;
			line-height: 1.4;;
			margin: 30px 0 30px 0;
			max-width: 700px;
			}

			.subtitle.center {
				margin: 30px auto 40px auto;
				max-width: 960px;
				text-align: center;
				}

/* ============================================ */
/*	UTILITIES									*/
/* ============================================ */

	.button {
		background: var(--color-button-background);
		border: 2px dashed var(--color-accent);
		border-radius: 5px;
		color: var(--color-foreground);
		display: inline-block;
		font-weight: 600;
		outline: 6px solid #424D28;
		padding: 15px 40px;
		text-decoration: none;
		transition: 0.1s;
		}

		.button:hover,
		.button:active,
		.button:focus-visible {
			background: #252525;
			border: 2px dashed #484848;
			outline: 6px solid #252525;
			}
	
	.container {
		margin: 0 auto;
		max-width: 1260px;
		padding: 0 60px;
		position: relative;
		}

/* ============================================ */
/*	ELEMENTS									*/
/* ============================================ */

	main {
		padding-bottom: 80px;
		}

/* ============================================ */
/*	HEADER  									*/
/* ============================================ */

	header {
		padding-top: 40px;
		}

	.logo {
		color: #FFFFFF;
		display: block;
		margin: 0 0 100px 0;
		text-align: right;
		}

		.logo img {
			float: left;
			margin: 0 20px 20px 0;
			}

/* ============================================ */
/*	FEATURED PRODUCTS  							*/
/* ============================================ */

	.featured {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 20px;
		gap: 1.25rem;
		}

		.featured article {
			flex: 1 1 380px;
			max-width: 360px;
			min-width: 0;
			text-align: center;
			transition: 0.25s;
			}

		.featured a {
			color: #E3DCAA;
			font-size: 1.5rem;
			font-weight: 600;
			text-decoration: none;
			}

		.featured p {
			line-height: 1.25;
			padding: 20px 20px;
			}

		.featured img {
			border: 10px solid var(--color-background);
			display: block;
			}

/* ============================================ */
/*	SINGLE ITEM  								*/
/* ============================================ */
	
	.item {
		display: flex;
		flex-wrap: wrap;
		gap: 100px;
		}

		.item > div {
			flex: 1 280px;
			min-width: 0;
			transition: 0.25s;
			}

		.item .right {
			text-align: right;
			}

			.item .right figure {
				background: #D9D9D9;
				display: inline-block;
				padding: 20px;
				text-align: center;
				filter: drop-shadow(50px -20px 20px rgba(0, 0, 0, 0.5));
				}

				.item .shot1 {
					margin-top: 10px;
					rotate: 5deg;
					}

				.item .shot2 {
					margin-top: -140px;
					rotate: -12deg;
					}
			
				.item figcaption {
					color: #000;
					font-size: 1.25rem;
					font-weight: 600;
					padding: 40px 0;
					}

/* ============================================ */
/*	FOOTER  									*/
/* ============================================ */

	footer {
		/*background: url(../images/footer.png) top center no-repeat;*/
		padding: 30px 0;
		text-align: right;
		}

/* ============================================ */
/*	BREAKPOINTS									*/
/* ============================================ */

	@media (max-width: 740px) {

		main {
			padding-bottom: 0;
			}

		.container {
			padding: 0 20px;
			}

		.button {
			display: block;
			margin-top: 40px;
			text-align: center;
			}

		.featured {
			justify-content: center;
			}

		.item {
			display: block;
			}

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

				.item .right figure {
					background: transparent;
					display: block;
					filter: none;
					width: 100%;
					max-width: 760px;
					margin: 0 auto;
					padding: 0;
					}

				.item .right img {
					width: 100%;
					height: auto;
					display: block;
					}

			.item .shot1,
			.item .shot2 {
				rotate: none;
				}

			.item figcaption {
				color: var(--color-foreground);
				font-size: 1.125rem;
				font-style: italic;
				padding: 10px 0;
				}

			header span {
				display: block;
				text-align: center;
			}

	}