/* =====================================================================
   Chrome base: what the theme's header and footer take from components.css,
   for the one Marble page that cannot load it.

   The header and footer (inc/chrome.php) are the delivery's markup and its
   page.css, and that markup leans on a handful of components.css rules: the
   box model, the element resets, the container, and the footer's links and
   labels. Every Marble page but the home loads components.css, so the chrome
   finds them there. The home was approved without that layer, and loading it
   changes the box model of about 160 of its elements (see marble_enqueue_styles
   in functions.php), so the home gets this instead: the same rules, copied
   from components.css, scoped to the chrome so they cannot reach the page.

   Keep it equal to components.css. When those rules change there, change them
   here. Loaded after integration.css, before the page sheet and page.css.
   ===================================================================== */

/* Type the chrome inherits from <body> on every other page (components.css section 0).
   The home's body is the parent theme's, so the chrome carries the values itself. */
:where(.pg-head, .pg-foot) {
	font-family: var(--ms-font-body);
	font-size: var(--ms-body);
	line-height: var(--ms-leading-body);
	color: var(--ms-ink-soft);
	-webkit-font-smoothing: antialiased;
}

/* Box model and element resets (components.css section 0), chrome only. Zero
   specificity, like the `*` rule they stand in for, so page.css still wins. */
:where(.pg-head, .pg-foot),
:where(.pg-head, .pg-foot) *,
:where(.pg-head, .pg-foot) *::before,
:where(.pg-head, .pg-foot) *::after { box-sizing: border-box; }
:where(.pg-head, .pg-foot) a { color: inherit; }
:where(.pg-head, .pg-foot) :is(h1, h2, h3, h4, p, figure, blockquote) { margin: 0; }
:where(.pg-head, .pg-foot) :focus-visible { outline: 2px solid var(--ms-brand); outline-offset: 4px; }
.ms-on-dark :focus-visible { outline-color: var(--ms-on-dark); }

/* Container (components.css section 1). */
.ms-container { width: 100%; max-width: calc(var(--ms-container-max) + 2 * var(--ms-gutter)); margin-inline: auto; padding-inline: var(--ms-gutter); }

/* Footer (components.css section 11). */
.ms-footer { background: var(--ms-dark); color: rgb(255 255 255 / 0.78); padding-block: clamp(4rem, 7vw, 5.5rem) 2rem; }
.ms-footer a { color: rgb(255 255 255 / 0.8); text-decoration: none; font-size: var(--ms-body-sm); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: color 0.3s ease, background-size 0.45s var(--ms-ease); }
.ms-footer a:hover, .ms-footer a:focus-visible { color: var(--ms-on-dark); background-size: 100% 1px; }
.ms-footer__label { margin: 0 0 1rem; font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label-sm); letter-spacing: var(--ms-tracking-label); text-transform: uppercase; color: rgb(255 255 255 / 0.62); } /* 0.62: AA on practice deep grounds (petrol 07 failed at 0.5) */