/*
	Grid -- trimmed Skel-equivalent grid system.
	Covers only the column widths, breakpoints, row gutters, and container widths
	confirmed live in PHP markup (see Zeno/Work-Plans/20260817-eh-website-css-refactor-plan.md).

	Breakpoint selectors use PHP's hyphenated "x-small" string. No x-small breakpoint rules
	are generated (see the empty block at the end of this file).

	Class selectors use CSS's standard numeric escape for the leading digit
	(e.g. class="12u" becomes selector .\31 2u).
*/

/* Row */

	.row {
		display: flex;
		display: -webkit-flex;
		flex-wrap: wrap;
		justify-content: left;
		align-content: center;
		border-bottom: solid 1px transparent;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.row > * {
		float: left;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.row:after, .row:before {
		content: '';
		display: block;
		clear: both;
		height: 0;
	}

	.row.uniform > * > :first-child { margin-top: 0; }
	.row.uniform > * > :last-child { margin-bottom: 0; }

/* Row gutters -- base (default, no media query) */

	.row > * { padding: 0 0 0 2em; }
	.row { margin: 0 0 -1px -2em; }

	.row.uniform > * { padding: 2em 0 0 2em; }
	.row.uniform { margin: -2em 0 -1px -2em; }

	.row.\32 00\% > * { padding: 0 0 0 4em; }
	.row.\32 00\% { margin: 0 0 -1px -4em; }

	.row.uniform.\32 00\% > * { padding: 4em 0 0 4em; }
	.row.uniform.\32 00\% { margin: -4em 0 -1px -4em; }

	.row.\35 0\% > * { padding: 0 0 0 1em; }
	.row.\35 0\% { margin: 0 0 -1px -1em; }

	.row.uniform.\35 0\% > * { padding: 1em 0 0 1em; }
	.row.uniform.\35 0\% { margin: -1em 0 -1px -1em; }

/* Columns -- base */

	.\31 u, .\31 u\$ {
		width: 8.3333333333%;
		clear: none;
		margin-left: 0;
	}

	.\32 u, .\32 u\$ {
		width: 16.6666666667%;
		clear: none;
		margin-left: 0;
	}

	.\33 u, .\33 u\$ {
		width: 25%;
		clear: none;
		margin-left: 0;
	}

	.\34 u, .\34 u\$ {
		width: 33.3333333333%;
		clear: none;
		margin-left: 0;
	}

	.\35 u, .\35 u\$ {
		width: 41.6666666667%;
		clear: none;
		margin-left: 0;
	}

	.\36 u, .\36 u\$ {
		width: 50%;
		clear: none;
		margin-left: 0;
	}

	.\37 u, .\37 u\$ {
		width: 58.3333333333%;
		clear: none;
		margin-left: 0;
	}

	.\38 u, .\38 u\$ {
		width: 66.6666666667%;
		clear: none;
		margin-left: 0;
	}

	.\39 u, .\39 u\$ {
		width: 75%;
		clear: none;
		margin-left: 0;
	}

	.\31 0u, .\31 0u\$ {
		width: 83.3333333333%;
		clear: none;
		margin-left: 0;
	}

	.\31 2u, .\31 2u\$ {
		width: 100%;
		clear: none;
		margin-left: 0;
	}

	.\31 2u\$ + *,
	.\31 0u\$ + *,
	.\39 u\$ + *,
	.\38 u\$ + *,
	.\37 u\$ + *,
	.\36 u\$ + *,
	.\35 u\$ + *,
	.\34 u\$ + *,
	.\33 u\$ + *,
	.\32 u\$ + *,
	.\31 u\$ + * {
		clear: left;
	}

/* Container widths -- base */

	.container {
		margin-left: auto;
		margin-right: auto;
		width: min(93rem, 80%); /* capped at ~1490px; 80% fallback keeps laptop-width margins proportional */
	}

	.container.\37 5\% { width: min(69.75rem, 60%); } /* 75% of the default rule */
	.container.\35 0\% { width: min(46.5rem, 40%); }
	.container.\32 5\% { width: min(23.25rem, 20%); }

/* Breakpoint: large (max-width: 1280px) */

	@media screen and (max-width: 1280px) {

		.row > * { padding: 0 0 0 1.5em; }
		.row { margin: 0 0 -1px -1.5em; }

		.row.uniform > * { padding: 1.5em 0 0 1.5em; }
		.row.uniform { margin: -1.5em 0 -1px -1.5em; }

		.row.\32 00\% > * { padding: 0 0 0 3em; }
		.row.\32 00\% { margin: 0 0 -1px -3em; }

		.row.uniform.\32 00\% > * { padding: 3em 0 0 3em; }
		.row.uniform.\32 00\% { margin: -3em 0 -1px -3em; }

		.row.\35 0\% > * { padding: 0 0 0 0.75em; }
		.row.\35 0\% { margin: 0 0 -1px -0.75em; }

		.row.uniform.\35 0\% > * { padding: 0.75em 0 0 0.75em; }
		.row.uniform.\35 0\% { margin: -0.75em 0 -1px -0.75em; }

		.\31 u\(large\), .\31 u\$\(large\) {
			width: 8.3333333333%;
			clear: none;
			margin-left: 0;
		}

		.\32 u\(large\), .\32 u\$\(large\) {
			width: 16.6666666667%;
			clear: none;
			margin-left: 0;
		}

		.\33 u\(large\), .\33 u\$\(large\) {
			width: 25%;
			clear: none;
			margin-left: 0;
		}

		.\34 u\(large\), .\34 u\$\(large\) {
			width: 33.3333333333%;
			clear: none;
			margin-left: 0;
		}

		.\35 u\(large\), .\35 u\$\(large\) {
			width: 41.6666666667%;
			clear: none;
			margin-left: 0;
		}

		.\36 u\(large\), .\36 u\$\(large\) {
			width: 50%;
			clear: none;
			margin-left: 0;
		}

		.\37 u\(large\), .\37 u\$\(large\) {
			width: 58.3333333333%;
			clear: none;
			margin-left: 0;
		}

		.\38 u\(large\), .\38 u\$\(large\) {
			width: 66.6666666667%;
			clear: none;
			margin-left: 0;
		}

		.\39 u\(large\), .\39 u\$\(large\) {
			width: 75%;
			clear: none;
			margin-left: 0;
		}

		.\31 0u\(large\), .\31 0u\$\(large\) {
			width: 83.3333333333%;
			clear: none;
			margin-left: 0;
		}

		.\31 2u\(large\), .\31 2u\$\(large\) {
			width: 100%;
			clear: none;
			margin-left: 0;
		}

		.\31 2u\$\(large\) + *,
		.\31 0u\$\(large\) + *,
		.\39 u\$\(large\) + *,
		.\38 u\$\(large\) + *,
		.\37 u\$\(large\) + *,
		.\36 u\$\(large\) + *,
		.\35 u\$\(large\) + *,
		.\34 u\$\(large\) + *,
		.\33 u\$\(large\) + *,
		.\32 u\$\(large\) + *,
		.\31 u\$\(large\) + * {
			clear: left;
		}

		.container {
			width: min(67.2rem, 84%); /* capped at ~1075px for this breakpoint band */
		}

		.container.\37 5\% { width: min(54.6rem, 63%); } /* 75% of the default rule */
		.container.\35 0\% { width: min(36.4rem, 42%); }
		.container.\32 5\% { width: min(18.2rem, 21%); }

	}

/* Breakpoint: medium (max-width: 980px) */

	@media screen and (max-width: 980px) {

		.row > * { padding: 0 0 0 1.5em; }
		.row { margin: 0 0 -1px -1.5em; }

		.row.uniform > * { padding: 1.5em 0 0 1.5em; }
		.row.uniform { margin: -1.5em 0 -1px -1.5em; }

		.row.\32 00\% > * { padding: 0 0 0 3em; }
		.row.\32 00\% { margin: 0 0 -1px -3em; }

		.row.uniform.\32 00\% > * { padding: 3em 0 0 3em; }
		.row.uniform.\32 00\% { margin: -3em 0 -1px -3em; }

		.row.\35 0\% > * { padding: 0 0 0 0.75em; }
		.row.\35 0\% { margin: 0 0 -1px -0.75em; }

		.row.uniform.\35 0\% > * { padding: 0.75em 0 0 0.75em; }
		.row.uniform.\35 0\% { margin: -0.75em 0 -1px -0.75em; }

		.\31 u\(medium\), .\31 u\$\(medium\) {
			width: 8.3333333333%;
			clear: none;
			margin-left: 0;
		}

		.\32 u\(medium\), .\32 u\$\(medium\) {
			width: 16.6666666667%;
			clear: none;
			margin-left: 0;
		}

		.\33 u\(medium\), .\33 u\$\(medium\) {
			width: 25%;
			clear: none;
			margin-left: 0;
		}

		.\34 u\(medium\), .\34 u\$\(medium\) {
			width: 33.3333333333%;
			clear: none;
			margin-left: 0;
		}

		.\35 u\(medium\), .\35 u\$\(medium\) {
			width: 41.6666666667%;
			clear: none;
			margin-left: 0;
		}

		.\36 u\(medium\), .\36 u\$\(medium\) {
			width: 50%;
			clear: none;
			margin-left: 0;
		}

		.\37 u\(medium\), .\37 u\$\(medium\) {
			width: 58.3333333333%;
			clear: none;
			margin-left: 0;
		}

		.\38 u\(medium\), .\38 u\$\(medium\) {
			width: 66.6666666667%;
			clear: none;
			margin-left: 0;
		}

		.\39 u\(medium\), .\39 u\$\(medium\) {
			width: 75%;
			clear: none;
			margin-left: 0;
		}

		.\31 0u\(medium\), .\31 0u\$\(medium\) {
			width: 83.3333333333%;
			clear: none;
			margin-left: 0;
		}

		.\31 2u\(medium\), .\31 2u\$\(medium\) {
			width: 100%;
			clear: none;
			margin-left: 0;
		}

		.\31 2u\$\(medium\) + *,
		.\31 0u\$\(medium\) + *,
		.\39 u\$\(medium\) + *,
		.\38 u\$\(medium\) + *,
		.\37 u\$\(medium\) + *,
		.\36 u\$\(medium\) + *,
		.\35 u\$\(medium\) + *,
		.\34 u\$\(medium\) + *,
		.\33 u\$\(medium\) + *,
		.\32 u\$\(medium\) + *,
		.\31 u\$\(medium\) + * {
			clear: left;
		}

		.container {
			width: 90%;
		}

		.container.\37 5\% { width: 67.5%; }
		.container.\35 0\% { width: 45%; }
		.container.\32 5\% { width: 22.5%; }

	}

/* Breakpoint: small (max-width: 736px) */

	@media screen and (max-width: 736px) {

		.row > * { padding: 0 0 0 1.25em; }
		.row { margin: 0 0 -1px -1.25em; }

		.row.uniform > * { padding: 1.25em 0 0 1.25em; }
		.row.uniform { margin: -1.25em 0 -1px -1.25em; }

		.row.\32 00\% > * { padding: 0 0 0 2.5em; }
		.row.\32 00\% { margin: 0 0 -1px -2.5em; }

		.row.uniform.\32 00\% > * { padding: 2.5em 0 0 2.5em; }
		.row.uniform.\32 00\% { margin: -2.5em 0 -1px -2.5em; }

		.row.\35 0\% > * { padding: 0 0 0 0.625em; }
		.row.\35 0\% { margin: 0 0 -1px -0.625em; }

		.row.uniform.\35 0\% > * { padding: 0.625em 0 0 0.625em; }
		.row.uniform.\35 0\% { margin: -0.625em 0 -1px -0.625em; }

		.\31 u\(small\), .\31 u\$\(small\) {
			width: 8.3333333333%;
			clear: none;
			margin-left: 0;
		}

		.\32 u\(small\), .\32 u\$\(small\) {
			width: 16.6666666667%;
			clear: none;
			margin-left: 0;
		}

		.\33 u\(small\), .\33 u\$\(small\) {
			width: 25%;
			clear: none;
			margin-left: 0;
		}

		.\34 u\(small\), .\34 u\$\(small\) {
			width: 33.3333333333%;
			clear: none;
			margin-left: 0;
		}

		.\35 u\(small\), .\35 u\$\(small\) {
			width: 41.6666666667%;
			clear: none;
			margin-left: 0;
		}

		.\36 u\(small\), .\36 u\$\(small\) {
			width: 50%;
			clear: none;
			margin-left: 0;
		}

		.\37 u\(small\), .\37 u\$\(small\) {
			width: 58.3333333333%;
			clear: none;
			margin-left: 0;
		}

		.\38 u\(small\), .\38 u\$\(small\) {
			width: 66.6666666667%;
			clear: none;
			margin-left: 0;
		}

		.\39 u\(small\), .\39 u\$\(small\) {
			width: 75%;
			clear: none;
			margin-left: 0;
		}

		.\31 0u\(small\), .\31 0u\$\(small\) {
			width: 83.3333333333%;
			clear: none;
			margin-left: 0;
		}

		.\31 2u\(small\), .\31 2u\$\(small\) {
			width: 100%;
			clear: none;
			margin-left: 0;
		}

		.\31 2u\$\(small\) + *,
		.\31 0u\$\(small\) + *,
		.\39 u\$\(small\) + *,
		.\38 u\$\(small\) + *,
		.\37 u\$\(small\) + *,
		.\36 u\$\(small\) + *,
		.\35 u\$\(small\) + *,
		.\34 u\$\(small\) + *,
		.\33 u\$\(small\) + *,
		.\32 u\$\(small\) + *,
		.\31 u\$\(small\) + * {
			clear: left;
		}

		.container {
			width: 90%;
		}

		.container.\37 5\% { width: 67.5%; }
		.container.\35 0\% { width: 45%; }
		.container.\32 5\% { width: 22.5%; }

	}

/* Breakpoint: x-small (max-width: 480px) -- intentionally empty.
	94 elements sitewide carry an (x-small) class and rely on getting no override at this
	breakpoint, falling through to their base/other-breakpoint width instead. Keep it that way. */
