source ⟩ hypertext ⟩ public ⟩ bestof ⟩ 2025 ⟩ style.css

:root {
	--background: white;
	--text: #111;
	--accent: var(--text);
}

body {
	font-family: var(--sans-serif);
}

main {
	max-inline-size: none;
	padding: 0;
}

h1 {
	font-family: var(--serif);
	font-weight: normal;
}

.introduction {
	--accent: #d62b00;
	padding-block-end: 2em;
	padding-inline: max(2em, calc(50vw - 70ch));

	font-family: var(--serif);
	font-size: 1.1rem;

	& > * {
		margin: auto;
	}

	& .previous-list {
		text-align: center;
		margin-block-end: 1em;
	}

	& p {
		max-inline-size: 70ch;
	}
}

.page-footer, .comment-section {
	max-inline-size: 70ch;
	margin: auto;

	font-family: var(--serif);
}

.page-footer {
	padding-block-start: 2em;
}

.awards {
	display: grid;
	grid-template-columns: 1fr 2.5fr;
	grid-template-rows: auto auto;

	padding-block: 2em;
	padding-inline: max(2em, calc(50vw - 70ch));
	column-gap: 1em;

	background-color: navajowhite;
	background-image: linear-gradient(to var(--bg-direction), var(--bg-translucent), var(--background) 30%), var(--bg-image);

	@media (width < 750px) {
		grid-template-columns: 1fr 1.5fr;

		background-image: linear-gradient(to bottom, transparent, var(--bg-translucent) 5em, var(--background) 15em), var(--bg-image);
		background-position: 0 0, top left !important;
		background-size: auto, 100% auto !important;
	}

	@media (width < 425px) {
		grid-template-columns: auto;
		grid-template-rows: auto auto auto;
		padding-block: 1em;
		padding-inline: 0.5em;
	}

	@media (width >= 750px) {
		&:nth-of-type(odd) {
			grid-template-columns: 2.5fr 1fr;

			& figure.model {
				grid-column: 2 / 3;
			}
		}
	}

	& figure.model {
		grid-row: 1 / 3;
		block-size: auto;
		inline-size: 100%;

		@media (width < 750px) {
			grid-column: 1 / 2;
			grid-row: 1 / 2;
		}
		@media (width < 425px) {
			inline-size: 60%;
			margin: auto;
		}

		& model-viewer {
			block-size: auto;
			inline-size: 100%;
			aspect-ratio: 1 / 1;
		}

		& figcaption {
			inline-size: 80%;
			margin-inline: auto;
			padding-block: 0.3em;

			color: var(--accent);
			font-style: italic;
			text-align: center;
			text-wrap: balance;

			background-color: var(--background);
			border-radius: 0.5em;

			@media (width < 750px) {
				display: none;
			}
		}
	}

	& h3 {
		margin-block: 0 1rem;

		@media (width < 750px) {
			grid-column: 2 / 3;
			align-self: end;
			padding: 0.25rem;

			background-image: linear-gradient(to bottom, color-mix(in srgb, var(--background), transparent 40%), var(--background));
			backdrop-filter: blur(0.25rem);
			border-radius: 0.25rem;
			box-shadow: 0 0.5ch 1ch #0002;
		}
		@media (width < 425px) {
			grid-column: 1 / 2;
			grid-row: 2 / 3;
		}

		& small {
			display: block;

			font-size: 1rem;
			font-style: italic;
			font-weight: normal;
		}
		& strong {
			display: block;

			color: var(--text);
			font-size: 2.5rem;
			font-weight: 900;
			line-height: 1;

			@media (width < 750px) {
				font-size: 2rem;
			}

			& .artist {
				font-weight: normal;
			}
		}
	}

	& .elaboration {
		font-size: 1.1rem;

		@media (width < 750px) {
			grid-column: 1 / 3;
		}
		@media (width < 425px) {
			grid-column: 1 / 2;
		}

		& p {
			font-family: var(--serif);
		}
		& p:first-child {
			margin-block-start: 0;
		}
		& p:last-child {
			margin-block-end: 0;
		}

		& h4 {
			font-variant-caps: all-small-caps;
			letter-spacing: var(--caps-spacing);
		}

		& .dingus-list {
			display: flex;
			flex-wrap: wrap;
			gap: 1em;

			padding-inline-start: 0;

			& .hon-mention {
				display: grid;
				grid-template-columns: 4em 1fr;
				gap: 0.75em;

				max-inline-size: 17.5em;
				margin: 0;
				padding: 1ch 1em;

				background-image: linear-gradient(to bottom, #fff3, #fff1);
				border-radius: 1em;
				box-shadow: 0 0.5ch 1ch #0002;

				& strong {
					display: block;
					line-height: 1.1;
				}

				& p {
					margin-block-start: 0.3rem;

					font-family: var(--sans-serif);
					font-size: 0.9em;
				}
			}
		}

		& a.big-link {
			display: inline-block;

			padding-inline: 1em;
			padding-block: 0.667em;

			color: inherit;
			font-family: var(--sans-serif);
			font-size: 1.2em;
			font-style: italic;
			font-weight: bold;
			text-decoration: none;

			background-image: linear-gradient(to bottom, #fff3, #fff1);
			border-radius: 1em;
			box-shadow: 0 0.5ch 1ch #0002;

			& strong {
				margin-inline-end: 1ch;
			}

			&::after {
				display: none;
			}
		}
	}
}

#laurel {
	--accent: #860d13;
	--background: #e7a34e;
	background-color: #e7a34e;
	--bg-direction: right;
	--bg-translucent: #e7a34e33;
	--bg-image: url("/bestof/2025/caughtstealing-bg.jpg");
	background-position: 0 0, top left;
	background-size: auto, auto 100%;
}

#zoetrope {
	--accent: #e4573a;
	--background: #21251e;
	--text: #f8f8f8;
	color: #f8f8f8;
	background-color: #21251e;
	--bg-direction: left;
	--bg-translucent: #21251e33;
	--bg-image: url("/bestof/2025/itmom-bg.jpg");
	background-position: 0 0, top right;
	background-size: auto, auto 100%;
}

#catchup {
	--accent: #618091;
	--background: #080808;
	--text: #f8f8f8;
	color: #f8f8f8;
	background-color: #080808;
	--bg-direction: right;
	--bg-translucent: #08080833;
	--bg-image: url("/bestof/2025/nosferatu-bg.jpg");
	background-position: 0 0, top left;
	background-size: auto, auto 100%;
}

#pebbledash {
	--accent: #41006c;
	--background: #f1f0db;
	background-color: #f1f0db;
	--bg-direction: left;
	--bg-translucent: #f1f0db33;
	--bg-image: url("/bestof/2025/doau-bg.jpg");
	background-position: 0 0, top right;
	background-size: auto, auto 100%;
}

#ninajirachi {
	--accent: #0a68e2;
	--background: #ecf0f7;
	background-color: #ecf0f7;
	--bg-direction: right;
	--bg-translucent: #ecf0f733;
	--bg-image: url("/bestof/2025/ninajirachi-bg.jpg");
	background-position: 0 0, top left;
	background-size: auto, auto 100%;
}

#nin {
	--accent: #8e2f11;
	--background: #f4e6b7;
	background-color: #f4e6b7;
	--bg-direction: left;
	--bg-translucent: #f4e6b733;
	--bg-image: url("/bestof/2025/nin-bg.jpg");
	background-position: 0 0, top right;
	background-size: auto, auto 100%;
}

#control {
	--accent: #e6615d;
	--background: #4b161eff;
	background-color: #4b161eff;
	--text: #f8f8f8;
	color: #f8f8f8;
	--bg-direction: right;
	--bg-translucent: #4b161e33;
	--bg-image: url("/bestof/2025/control-bg.jpg");
	background-position: 0 0, top left;
	background-size: auto, auto 100%;
}

#telephone {
	--accent: #1e7810;
	--background: #fff;
	background-color: #fff;
	--bg-direction: left;
	--bg-translucent: #fff3;
	--bg-image: url("/bestof/2025/telephone-bg.jpg");
	background-position: 0 0, top right;
	background-size: auto, auto 100%;
}

#cabinet {
	--accent: #2c56e1;
	--background: #f4debf;
	background-color: #f4debf;
	--bg-direction: right;
	--bg-translucent: #f4debf33;
	--bg-image: url("/bestof/2025/cabinet-bg.jpg");
	background-position: 0 0, top left;
	background-size: auto, auto 100%;
}

#vibecode {
	--accent: #85d493;
	--background: #22212e;
	background-color: #22212e;
	--text: #f8f8f8;
	color: #f8f8f8;
	--bg-direction: left;
	--bg-translucent: #22212e33;
	--bg-image: url("/bestof/2025/vibecode-bg.jpg");
	background-position: 0 0, top right;
	background-size: auto, auto 100%;
}

#rijksmuseum {
	--accent: #ffe3a9;
	--background: #634845;
	background-color: #634845;
	--text: #f8f8f8;
	color: #f8f8f8;
	--bg-direction: right;
	--bg-translucent: #63484533;
	--bg-image: url("/bestof/2025/rijksmuseum-bg.jpg");
	background-position: 0 0, top left;
	background-size: auto, auto 100%;
}

#syria {
	--accent: #b8a57b;
	--background: #00332e;
	background-color: #00332e;
	--text: #f8f8f8;
	color: #f8f8f8;
	--bg-direction: left;
	--bg-translucent: #00332e33;
	--bg-image: url("/bestof/2025/syria-bg.jpg");
	background-position: 0 0, top right;
	background-size: auto, auto 100%;
}

@font-face {
	font-family: "Junicode";
	src: url("/fonts/JunicodeVF-Roman.woff2");
	font-weight: 300 700;
	font-stretch: 75% 125%;
	font-style: normal;
}

@font-face {
	font-family: "Junicode";
	src: url("/fonts/JunicodeVF-Italic.woff2");
	font-weight: 300 700;
	font-stretch: 75% 125%;
	font-style: italic;
}