@import url("//fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap");


:root {
	--dim-brounded:		0.25rem;
	--dim-svg:		1.50em;
	--dim-height-bleed:	2.5rem;
	--dim-width-bleed:	max(1ch, 7.5vw);
	--dim-width-content:	80ch;

	--color-copy:		#0d0c33;
	--color-placeholder:	#f6f6f6; /*#ff9999;*/

	--font-size-copy:	1.50rem;
	--font-size-minor:	0.80rem;
}


* {
	border: 0;
	box-sizing: border-box;
	font: inherit;
	font-size: 100%;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}


html {
	background-color: white;
	color: var(--color-copy);
	font-family: "Roboto", -apple-system, sans-serif;
	font-size: var(--font-size-copy);
	font-smooth: antialiased;
	font-synthesis: none;
	font-weight: 400;
	line-height: 1.50;
	text-rendering: optimizeLegibility;
	text-size-adjust: none;
	scroll-behavior: smooth;

	body {
		align-items: start;
		background-color: white;
		display: grid;
		grid-template-columns:
			[full-bleed-start] var(--dim-width-bleed)
				[regular-start] var(--dim-width-bleed)
					auto
				var(--dim-width-bleed) [regular-end]
			var(--dim-width-bleed) [full-bleed-end];
	}

	.content-wrapper {
		grid-column: regular;
	}
}


svg {
	/* See SO q. /64502869/ */
	height: var(--dim-svg);
	min-height: var(--dim-svg);
	min-width: var(--dim-svg);
	width: var(--dim-svg);

	fill: none;
	stroke: var(--color-copy);
	stroke-width: 1.00;
	vector-effect: non-scaling-stroke;

	/* Specific to Heroicons */
	stroke-linecap: round;
	stroke-linejoin: round;
}


picture {
	background-color: var(--color-placeholder);
	display: flex;
	overflow: hidden;

	img {
		object-fit: cover;
		pointer-events: none;
		user-select: none;
		width: 100%;
	}
}


a { color: inherit; }

a:hover {
	text-decoration: none;
}

a.button {
	align-items: center;
	background-color: #f6f6f6;
	border-radius: var(--dim-brounded);
	cursor: pointer;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5ch;
	padding: 1ex 2ex;
	text-decoration: none;
}


h1,
h2,
h3 {
	font-weight: 500;
	line-height: 1.10;
	margin: 1.25em 0 0.75em;
}

h1 { font-size: clamp(2.00rem, 3.00rem, 6vmin); }

h2 { font-size: 2.00rem; }

h3 {
	color: #d30000;
	font-size: 1.25rem;
}

h2 + p { max-width: 80ch; }


ul {
	list-style: none;

	li {
		align-items: center;
		display: flex;
		gap: 1ch;
	}
}


p,
li,
dt,
dd {
	& + & { margin-top: 1.00rem; }
}


.flex-col {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dim-width-bleed);

	> :nth-child(1) {
		flex: 9999;
	}
}


header,
main,
footer {
	display: grid;
	grid-column: full-bleed;
	grid-template-columns: subgrid;
}


main {
	padding: var(--dim-height-bleed) 0;

	section { grid-column: regular; }

	section + section { margin-top: 5.00rem; }
}


footer {
	background-color: #f6f6f6;
	padding: var(--dim-height-bleed) 0;

	div.content-wrapper {
		align-items: center;

		ul.administrative {
			li { font-size: var(--font-size-minor); }

			li:nth-of-type(1) {
				color: #d30000;
				font-weight: bold;
			}
		}

		ul.socials {
			svg {
				fill: var(--color-copy);
				stroke: none;
			}
		}
	}
}