/*
 * Type – the base fonts and the heading scale, read from the --text-* tokens
 * and the colour roles in theme.css.
 */
body {
	font: var(--text-body);
	color: var(--landing-text);
	background: var(--landing-page-bg);
	/* match the design tool's rasterisation: macOS subpixel smoothing renders
	   the light cuts a full step heavier than Figma shows them */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* In-page links – the one-page menu, buttons to #blocks_N – glide to their
   section. js/utilities/frame.js keeps a sticky header from covering it
   (--landing-header-offset, the sections' scroll-margin-top in blocks.css). */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

img {
	max-width: 100%;
	height: auto;
}

p {
	margin: 0 0 1.2em;
}

a {
	color: var(--landing-link);

	&:hover,
	&:focus {
		color: var(--landing-link);
		text-decoration: none;
	}
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: "Univers LT Std", sans-serif;
	font-weight: 400;
	color: var(--landing-subheading);
}

strong {
	font-weight: 700;
}

/*
 * Heading levels carry the text styles as element defaults, so wysiwyg content
 * gets them without a class. Block components that set their own font: on a
 * classed heading still win (their CSS loads later). h1 and h2 take the
 * heading colour, the rest the subheading colour.
 */
h1, .h1 {
	margin: 0 0 22px;
	font: var(--text-h1);
	font-size: 34px;
	color: var(--landing-heading);

	@media (min-width: 768px) {
		font: var(--text-h1);
	}
}

h2, .h2 {
	margin: 0 0 20px;
	font: var(--text-h2);
	font-size: 30px;
	color: var(--landing-heading);

	@media (min-width: 768px) {
		font: var(--text-h2);
	}
}

h3, .h3 {
	margin: 0 0 12px;
	font: var(--text-h3);
	font-size: 20px;

	@media (min-width: 768px) {
		font: var(--text-h3);
	}
}

h4, .h4 {
	margin: 0 0 10px;
	font: var(--text-h4);
}

h5, .h5 {
	margin: 0 0 8px;
	font: var(--text-h5);
}

h6, .h6 {
	margin: 0 0 8px;
	font: var(--text-h6);
}

/*
 * Prose – every wysiwyg surface (.body-text wraps the Text block's copy).
 */
.body-text {
	font: var(--text-body);

	/* Inline links read as coloured body copy with a hairline that arrives on
	   hover. Buttons are excluded – they carry their own hover. */
	a:not(.button, .blockButton) {
		text-decoration-line: underline;
		text-decoration-color: transparent;
		text-decoration-thickness: 1px;
		transition: text-decoration-color 200ms;

		&:focus {
			text-decoration-color: currentColor;
		}

		@media (hover: hover) and (pointer: fine) {
			&:hover {
				text-decoration-color: currentColor;
			}
		}
	}
}

blockquote {
	margin: 2rem 0;
	padding: 0 1rem;
	font: var(--text-quote);
	font-size: 20px;
	text-align: center;

	@media (min-width: 768px) {
		font: var(--text-quote);
	}

	cite {
		display: block;
		margin-top: 0.75em;
		font: var(--text-caption);
		font-style: normal;
	}
}