/**
 * Base: web fonts, reset, base typography, layout primitives.
 *
 * Loads after tokens.css and before components.css. No colour literals - every
 * colour here resolves from a custom property in tokens.css.
 */

/* ---- Web fonts -----------------------------------------------------------
 * Montserrat is bundled (SIL Open Font Licence). The artboard also uses
 * Montserrat Light for the contact detail values; that weight was not
 * available, so 300 is mapped onto the Regular file and the browser is told
 * not to synthesise a lighter weight. Recorded in BUILD-REPORT.md.
 */
@font-face {
	font-family: "Montserrat";
	src: url("../fonts/Montserrat-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Montserrat";
	src: url("../fonts/Montserrat-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* Light: no file supplied, deliberately aliased to Regular so the contact
 * details do not render in a synthesised weight. Replace the src when a
 * Montserrat-Light.woff2 is added. */
@font-face {
	font-family: "Montserrat";
	src: url("../fonts/Montserrat-Regular.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

/*
 * Novecento sans wide (headings) and Noto Sans (button labels) are the
 * artboard's other two faces. Neither was supplied. When the .woff2 files
 * arrive, drop them in assets/fonts/ and uncomment the matching block - no
 * other change is needed, because everything references --lg-font-display and
 * --lg-font-ui.
 *
 * @font-face {
 *   font-family: "Novecento sans wide";
 *   src: url("../fonts/Novecentosanswide-Bold.woff2") format("woff2");
 *   font-weight: 700;
 *   font-style: normal;
 *   font-display: swap;
 * }
 *
 * @font-face {
 *   font-family: "Noto Sans";
 *   src: url("../fonts/NotoSans-Regular.woff2") format("woff2");
 *   font-weight: 400;
 *   font-style: normal;
 *   font-display: swap;
 * }
 */

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

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

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
	margin: 0;
}

ul[class],
ol[class] {
	padding: 0;
	list-style: none;
}

img,
picture,
svg,
video {
	max-width: 100%;
	display: block;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

/* ---- Base type ----------------------------------------------------------- */
body {
	background-color: var(--lg-bg);
	color: var(--lg-fg);
	font-family: var(--lg-font-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: var(--lg-leading-body);
	-webkit-font-smoothing: antialiased;
}

/*
 * Clears the fixed header. Deliberately on #lg-main rather than on body: the
 * block editor's canvas loads this stylesheet but has no header in it, so a
 * body rule would open 126px of unexplained space at the top of the editor.
 */
#lg-main {
	padding-block-start: var(--lg-header-height);
}

h1,
h2,
h3 {
	font-family: var(--lg-font-display);
	font-weight: 700;
	line-height: var(--lg-leading-display);
	letter-spacing: var(--lg-tracking-display);
	text-transform: uppercase;
	text-wrap: balance;
}

a {
	color: inherit;
}

/* ---- Focus --------------------------------------------------------------
 * :focus-visible only, never :focus, so a mouse click does not leave a ring.
 * Not in the artboard - added because the design has no other focus affordance.
 */
:focus-visible {
	outline: var(--lg-focus-width) solid var(--lg-focus);
	outline-offset: var(--lg-focus-offset);
}

.lg-on-dark :focus-visible,
.lg-on-dark:focus-visible {
	outline-color: var(--lg-focus-inverse);
}

/* ---- Layout primitives --------------------------------------------------- */

/*
 * The container.
 *
 * A constrained width centred with auto margins, not a full-width box with
 * padding. The two produce the same visual result at every viewport - the
 * artboard's 1636 content width inside a 142 margin at 1920, and
 * viewport-minus-two-gutters below that - but this way the element's box IS the
 * content box.
 *
 * That matters in three places here: the grids in the about and contact
 * sections size their columns against the real 1636 rather than against a
 * padded 1920; the straddling card row can be centred with plain auto margins
 * while absolutely positioned; and nesting a shell inside a shell cannot
 * silently double the gutter.
 *
 * The clamp on --lg-gutter is what keeps this from collapsing on small screens,
 * so the min() never has to guard a lower bound.
 */
.lg-shell {
	width: min(var(--lg-content), 100% - (var(--lg-gutter) * 2));
	margin-inline: auto;
}

/*
 * Full-bleed sections carry their own background; the shell inside them
 * constrains and gutters the content. Background and layout stay decoupled.
 */
.lg-section {
	position: relative;
}

.lg-eyebrow {
	font-family: var(--lg-font-body);
	font-size: var(--lg-step-eyebrow);
	font-weight: 400;
	line-height: var(--lg-leading-card);
	letter-spacing: var(--lg-tracking-eyebrow);
	text-transform: uppercase;
}

/* ---- Utilities ----------------------------------------------------------- */
.lg-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.lg-skip-link {
	position: absolute;
	inset-block-start: var(--lg-space-2xs);
	inset-inline-start: var(--lg-space-2xs);
	z-index: 100;
	padding: var(--lg-space-2xs) var(--lg-space-sm);
	background-color: var(--lg-bg-inverse);
	color: var(--lg-fg-inverse);
	font-family: var(--lg-font-ui);
	font-size: var(--lg-step-button);
	border-radius: var(--lg-radius-btn);
	transform: translateY(-200%);
	transition: transform var(--lg-transition);
}

.lg-skip-link:focus-visible {
	transform: translateY(0);
}