@import url("guise-skeleton.min.css");
@import url("fontawesome-all.min.css");
@import url("prism.css");
@import url("globalmentor-semantics.css");
@import url("globalmentor-style.css");

:root {
	--icon-font-family: "Font Awesome 5 Pro";
	--color-primary: #1b3a6e;                 /* brand navy */
	--brand-background-color-start: #1b3a6e;  /* deep navy */
	--brand-background-color-end: #2563c4;    /* bright blue */
	--skelt-rotulus-stripe-background-color: #1b3a6e20;
	--skelt-rotulus-stripe-background-color-default: var(--skelt-rotulus-stripe-background-color);
}

.brand {
	background: linear-gradient(160deg, var(--brand-background-color-start) 60%, var(--brand-background-color-end));
	color: white;
}

.hero .byline {
	width: 50%;             /* the right half... */
	align-self: flex-end;   /* ...aligned to the right edge */
	margin-top: 4em;        /* ~one title height of separation (title = 400% of hero font size) */
	text-align: center;     /* text centered within it → ~75% of the hero width */
}