/* Reset, type and rhythm. Source Sans 3 throughout: branding.md fixes it for the wordmark,
   and a second family would fight a mark this geometric. */

*,
*::before,
*::after { box-sizing: border-box; }

body,
h1, h2, h3, p, ul, li, figure { margin: 0; padding: 0; }

ul { list-style: none; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	background-color: var(--bstk-bg);
	color: var(--bstk-body);
	font-family: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
	font-weight: 400;
	font-size: 1.125rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* Major-third scale, 1.25, from a 17px base. Clamped so the display sizes hold their
   proportion to the mark rather than collapsing on narrow screens. */
:root {
	--bstk-step-0: 1rem;
	--bstk-step-1: 1.25rem;
	--bstk-step-2: 1.5625rem;
	--bstk-step-3: clamp(1.75rem, 1.35rem + 1.7vw, 2.4414rem);
	--bstk-step-4: clamp(2.25rem, 1.5rem + 3.2vw, 3.8147rem);

	--bstk-measure: 56ch;
	--bstk-gutter: clamp(1.5rem, 5vw, 5rem);
	--bstk-band-y: clamp(3.5rem, 7vw, 6.5rem);
}

h1, h2, h3 {
	color: var(--bstk-type);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

h2 { font-size: var(--bstk-step-3); }
h3 { font-size: var(--bstk-step-1); }

p { max-width: var(--bstk-measure); }

a {
	color: var(--bstk-orb);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

a:hover { color: var(--bstk-type); }

:focus-visible {
	outline: 3px solid var(--bstk-orb);
	outline-offset: 3px;
}

/* The wordmark. Cap height is 125% of the primary node diameter (branding.md), Source Sans 3
   caps measure 0.66em, and the node is 39.6 of the mark's 82 viewBox units tall. */
.bstk-lockup {
	--bstk-mark-h: 3.5rem;
	--bstk-node-d: calc(var(--bstk-mark-h) * 39.6 / 82);
	display: inline-flex;
	align-items: baseline;
	gap: calc(var(--bstk-node-d) * 0.6);
}

.bstk-lockup .bstk-mark {
	height: var(--bstk-mark-h);
	width: auto;
	/* The mark's baseline sits at 77.5 of 82 units, not at its bottom edge. */
	position: relative;
	top: calc(var(--bstk-mark-h) * 4.5 / 82);
}

.bstk-wordmark {
	color: var(--bstk-type);
	font-weight: 600;
	font-size: calc(var(--bstk-node-d) * 1.25 / 0.66);
	letter-spacing: var(--bstk-track-wordmark);
	line-height: 1;
	text-transform: uppercase;
	/* Tracking adds space after the final letter; pull it back so the lockup ends on the glyph. */
	margin-right: calc(var(--bstk-track-wordmark) * -1);
}

/* The lockup face, for Broadstack's own names only: the company wordmark above, and a product
   name wherever one is set as a heading. platformui sets its application footers from the same
   rule (platformui:projects/component/src/styles/type.css:48). Size comes from the context, so
   this carries everything about the face except how big it is. */
.bstk-productmark {
	font-weight: 600;
	letter-spacing: var(--bstk-track-wordmark);
	line-height: 1;
	text-transform: uppercase;
	margin-right: calc(var(--bstk-track-wordmark) * -1);
}

.bstk-visually-hidden {
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.bstk-skip {
	background-color: var(--bstk-node);
	color: var(--bstk-type);
	inset-block-start: 0;
	inset-inline-start: 0;
	padding: 0.75rem 1.25rem;
	position: absolute;
	text-decoration: none;
	transform: translateY(-120%);
	z-index: 20;
}

.bstk-skip:focus { transform: translateY(0); }