/* ==========================================================================
   Site shell
   ==========================================================================
   The one content width every page lays out against, and the gutter beside
   it. Global, plain CSS, loaded from includes/scripts-and-styles.php after
   the Tailwind bundle so that it wins over the bundle's own container rules,
   and kept out of the bundle so a change here never needs a build.

   The redesigned pages read these tokens into their own token sets, so one
   number moves them all: --h-content on the homepage, --p-content on
   partnerships, --tcwp-content on portfolio, --s-content on services. The
   older templates and the section views use Tailwind's .container, which is
   retuned below to the same measure.
   ========================================================================== */

:root {
	--tcw-content: 1280px;
	--tcw-gutter: 24px;
	--tcw-shell: calc(var(--tcw-content) + (var(--tcw-gutter) * 2));
}

/*
 * Tailwind's container is a set of steps, one per breakpoint, and the last of them (1536px from
 * 1536px up) is a different page from the 1280px the redesigned pages lay out against: on a wide
 * screen the products page ran 180px wider than the homepage. Same box, same gutter, on every page:
 * the steps are replaced with the one measure. This sheet is later in the cascade than the bundle,
 * so at equal specificity the plain selector wins over the bundle's media queries.
 *
 * The gutter is !important because this theme's Tailwind ships its padding utilities that way, and
 * the px-5 sm:px-8 most templates put on the container itself would otherwise keep every page at a
 * gutter of its own.
 */
.container {
	width: 100%;
	max-width: var(--tcw-shell);
	margin-inline: auto;
	padding-inline: var(--tcw-gutter) !important;
}