.page {
	// Prevents horizontal scrollbars from appearing on the page.
	// This happens because of the masked (but not overflow: hidden) carousel images.
	overflow: hidden;
}

// ▛ LOGO ▜
#logo {
	img {
		width: auto;
		max-width: 75%;
		max-height: 160px;
	}
}
// ▙ LOGO ▟

// ▛ TAGLINE ▜
#tagline {
	h1 {
		span {
			position: relative;

			&::after {
				content: "";
				pointer-events: none;
				position: absolute;
				left: 0;
				right: 0;
				top: 100%;
				// Dimensions: 480x40
				height: 100%;
				margin-top: -0.2em;
				background: url("https://static.graphite.rs/textures/text-sketch-underline.png");
				background-repeat: no-repeat;
				background-size: contain;
			}
		}
	}

	p {
		font-size: 1.2rem;

		@media screen and (max-width: 1400px) {
			max-width: unset;
		}
	}
}
// ▙ TAGLINE ▟

// ▛ QUICK LINKS ▜
#quick-links {
	margin-top: calc(40 * var(--variable-px));
	gap: calc(var(--font-size-link) * 0.8) calc(var(--font-size-link) * 0.8 * 2);

	&,
	.social-media-buttons,
	.call-to-action-buttons {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
	}

	.social-media-buttons,
	.call-to-action-buttons {
		gap: calc(var(--font-size-link) * 0.8);
	}

	.social-media-buttons img {
		width: calc(var(--font-size-link) * 2);
		display: block;
	}

	.call-to-action-buttons .github-stars {
		display: inline-flex;
		padding-left: calc(var(--font-size-link) / 2);
		padding-right: 0;

		img {
			margin: auto;
			width: calc(var(--font-size-link) * 4 / 3);
			height: calc(var(--font-size-link) * 4 / 3);
		}

		span {
			margin: auto calc(var(--font-size-link) / 2);
		}

		div {
			display: inline-flex;
			background: var(--color-fog);
			padding: 0 calc(var(--font-size-link) / 2);
			border-left: var(--border-thickness) solid var(--color-crimson);
			align-items: center;

			&:empty {
				display: none;
			}
		}
	}

	// Hide all these buttons while waiting for the number of stars to be fetched.
	// Otherwise the width of the star count will cause a jump upon loading with the layout of all subsequent buttons changing.
	// If it fails to load, the div will be removed, allowing the buttons to be displayed (with the star count omitted).
	&:has(.github-stars div:empty) {
		visibility: hidden;
	}
}
// ▙ QUICK LINKS ▟

// ▛ SCREENSHOTS ▜
// ▙ SCREENSHOTS ▟

// ▛ OVERVIEW ▜
#overview {
	background-color: var(--color-cloud);

	.sizzle-video {
		display: flex;
		flex-wrap: nowrap;
		max-width: 100%;

		.block {
			min-width: 0;
			flex-direction: row;

			&.text {
				flex: 1 4 100%;
				flex-direction: column;

				p:has(.button) {
					margin-top: 20px;
				}
			}

			&.video {
				flex: 0 1 fit-content;
			}
		}

		@media screen and (max-width: 900px) {
			flex-wrap: wrap;

			.block.video {
				flex: 1 1 100%;
				justify-content: center;
			}
		}

		@media screen and (max-width: 1100px) {
			p:has(.button) {
				display: none;
			}
		}
	}
}
// ▙ OVERVIEW ▟

// ▛ DONATE ▜
#donate {
	h2 {
		color: #cc304f;
	}
}
// ▙ DONATE ▟

// ▛ PROCEDURALISM ▜
#proceduralism {
	background-color: var(--color-slate);
	color: white;

	.diptych {
		background: black;
		color: var(--color-fog);
		overflow: hidden; // Clip off a 1px overflow beneath the video which appears at some screen widths
		align-items: stretch;
		justify-content: center;
		gap: 0;
		--video-width: calc(460 * var(--variable-px));

		@media screen and (max-width: 1360px) {
			--video-width: calc(400 * var(--variable-px));
		}

		@media screen and (max-width: 1280px) {
			--video-width: calc(300 * var(--variable-px));
		}

		@media screen and (max-width: 1080px) {
			--video-width: calc(500 * var(--variable-px));
		}

		@media screen and (max-width: 640px) {
			--video-width: 100%;
		}

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

		.video-background {
			flex: 1 0 var(--video-width);
			justify-content: center;

			&,
			video {
				max-width: var(--video-width);
			}

			&::after {
				content: none;
			}
		}

		.description {
			margin: calc(var(--feature-box-padding) * var(--variable-px));
		}

		+ .diptych {
			margin-top: calc(40 * var(--variable-px));
		}
	}

	.pipelines .feature-icon {
		background: rgba(255, 255, 255, 0.0625);

		img {
			filter: brightness(100);
		}
	}
}
// ▙ PROCEDURALISM ▟

// ▛ NEWSLETTER ▜
#newsletter {
	background-color: var(--color-peach);
	position: relative;

	#newsletter-success {
		position: absolute;
		top: 0;

		&:not(:target) ~ .diptych .newsletter-success,
		&:target ~ .diptych form {
			display: none;
		}
	}

	.diptych {
		justify-content: center;

		.newsletter-signup {
			.newsletter-success {
				margin-top: 40px;
				padding: 40px;
				width: 100%;
				box-sizing: border-box;
				background: var(--color-ale);
				border: 2px solid var(--color-navy);
			}

			form {
				width: 100%;
				margin-top: 40px;
				display: flex;
				gap: 20px;
				flex-wrap: wrap;

				.same-line {
					display: flex;
					gap: 20px;
					flex: 100000 1 0;
					flex-wrap: wrap;
					min-width: Min(100%, 700px);

					div {
						min-height: auto;
					}
				}

				.input-column {
					display: flex;
					flex-direction: column;
					justify-content: flex-end;
					--input-focus-color: var(--color-ale);

					&.name {
						flex: 1 0 0;
						min-width: 240px;
					}

					&.phone {
						display: none;
					}

					&.email {
						flex: 1 0 0;
						min-width: 240px;
					}

					@media screen and (max-width: 400px) {
						&.name,
						&.email {
							min-width: 100%;
						}
					}

					&.submit {
						flex: 1 0 auto;
						min-width: 100%;

						.button {
							text-align: center;
						}
					}

					label,
					input {
						flex: 0 0 auto;
					}

					label {
						font-size: var(--font-size-link);
						font-weight: 800;
						margin-bottom: 10px;
						line-height: 1;
					}

					input:not([type="submit"]) {
						flex: 0 0 auto;
						width: 100%;
						height: calc(var(--font-size-link) * 2);
						font-size: calc(var(--font-size-link) * 0.9);
						color: inherit;
						border: var(--border-thickness) solid currentColor;
						border-radius: 0; // Required for iOS Safari
						outline: none;
						margin: 0;
						padding: 0 var(--font-size-link);
						font-family: inherit;
						font-weight: inherit;
						box-sizing: border-box;

						&:focus {
							border-color: var(--input-focus-color);
						}
					}

					input[type="submit"] {
						background: none;
						outline: none;
						cursor: pointer;
						border-radius: 0; // Required for iOS Safari

						&:focus {
							border-color: var(--input-focus-color);
							color: var(--input-focus-color);
						}
					}
				}
			}
		}

		.social-media-links {
			display: flex;
			flex: 0 1 fit-content;
			flex-direction: column;
			flex-wrap: wrap;
			justify-content: flex-end;
			gap: 20px 80px;
			min-width: 0;

			a {
				text-decoration: none;
				display: flex;

				img {
					width: 48px;
					height: 48px;
				}

				span {
					line-height: 48px;
					margin: 0;
					margin-left: 20px;
				}
			}
		}
	}
}
// ▙ NEWSLETTER ▟

// ▛ DIVE IN ▜
#dive-in {
	.video-container {
		background: var(--color-fog);
		margin-top: calc(40 * var(--variable-px));

		> div {
			margin: calc(20 * var(--variable-px)) auto;
			width: 100%;
			max-width: 800px;

			+ p {
				margin-top: 0;
			}
		}
	}

	.buttons {
		display: flex;
		gap: calc(var(--font-size-link) * 0.8);
		margin-top: calc(40 * var(--variable-px));

		@media screen and (max-width: 600px) {
			flex-direction: column;
		}
	}
}
// ▙ DIVE IN ▟

// ▛ RECENT NEWS ▜
#recent-news {
	background-color: var(--color-parchment);

	.banner img {
		width: 100%;
		height: auto;
		margin-bottom: 20px;
	}

	.headline a {
		text-decoration: none;
		font-weight: 700;
	}

	.summary {
		margin: 20px 0;
		flex-direction: column;
		gap: 20px;
		text-align: justify;
		text-justify: inter-character; // Only supported in Firefox
		-webkit-hyphens: auto;
		hyphens: auto;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 6;

		code {
			text-justify: auto;
		}

		// Safari workaround: https://stackoverflow.com/a/72170897/775283
		// But there remains an issue where the ellipsis is rendered inside the text. There doesn't appear to be a fix, or even a way to disable the ellipsis in Safari.
		p {
			display: inline;

			&::after {
				content: "\A\A"; // Double new line
				white-space: pre;
			}
		}
	}
}
// ▙ RECENT NEWS ▟

// ▛ DEMO VIDEO ▜
// #demo-video {
// 	max-width: 1000px;
// }
// ▙ DEMO VIDEO ▟

// ▛ IMAGINATE ▜
// #imaginate {
// 	> .block {
// 		align-items: center;

// 		h1 {
// 			text-align: center;

// 			.alternating-text {
// 				position: relative;

// 				span {
// 					// Move left by half (since it's centered) the average (half the 74px difference) of the variance in word lengths
// 					margin-left: calc(-1.54em / 2 / 2);
// 					opacity: 0;
// 					$alternate-duration: 15s;
// 					$alternate-words: 5;
// 					animation: $alternate-duration infinite linear 0s fade-word;

// 					// The 1st child is the widest
// 					&:not(:nth-child(1)) {
// 						position: absolute;
// 						right: 0;
// 					}

// 					@for $i from 1 through $alternate-words {
// 						&:nth-child(#{$i}) {
// 							animation-delay: ($alternate-duration / $alternate-words * ($i - 1));
// 						}
// 					}

// 					@keyframes fade-word {
// 						// Fade in at the start (which begins staggered on each item by `animation-delay`)
// 						#{0.0%} { opacity: 0; }
// 						#{2.5%} { opacity: 1; }
// 						// Remain visible for this item's slice of time, then fade out
// 						#{0.0% + 100% / ($alternate-words + 1)} { opacity: 1; }
// 						#{2.5% + 100% / ($alternate-words + 1)} { opacity: 0; }
// 					}
// 				}
// 			}
// 		}
// 	}

// 	> .diptych {
// 		margin-top: calc(80 * var(--variable-px));

// 		.block {
// 			align-items: center;

// 			h2 {
// 				text-align: center;
// 			}
// 		}
// 	}

// 	// #imaginate-creative-concepts-carousel {
// 	// 	margin-top: 20px;

// 	// 	.screenshot-details {
// 	// 		justify-content: center;
// 	// 	}

// 	// 	+ blockquote {
// 	// 		margin-top: 0;
// 	// 	}
// 	// }
// }
// ▙ IMAGINATE ▟