/*
 * Reset
 */

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

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role */
ul[role='list'], ol[role='list'] {
  list-style: none;
	padding-inline-start: 0;
}

/* Use default h1 styles within sectioning elements */
:is(article, aside, nav, section) h1 {
	margin-block: 0.67em;
	font-size: 2.00em;
	font-weight: bold;
}

/*
 * Elements
 */

blockquote {
	border-inline-start: 5px solid;
	padding-inline-start: 1rem;
}

/*
 * Appearance
 */

/* Automatically apply system appearance, i.e. dark or light mode */
:root {
	color-scheme: dark light;
}

/*
 * Typography
 */

/* Global measure (copy line length) */
:root {
	--measure: 72ch;
}

/* Apply global measure to everything */
* {
	max-inline-size: var(--measure);
}

/* Exceptions to global measure */
html, body, div, header, nav, main, footer, section {
	max-inline-size: none;
}

/* Set larger font size for main copy
main :is(p, ul, ol) {
	font-size: 1.125rem;
}
*/

/* Set taller line heights on everything */
body {
	line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4, input, label {
  line-height: 1.1;
}

/* Style subheadings */
hgroup p {
	font-size: 1.5rem;
}

/*
 * Layout
 */

body {
	margin: 0;
	padding: 1rem;
}

footer {
	border-block-start: 1px solid;
	padding-block-start: 1em;
}

/*
 * Composition
 */

:root {
	--flow-space: 1em;
}

.flow > * + * {
	margin-block-start: var(--flow-space, 1em);
}

/* No space for first child */
.flow > :first-child {
	/* --flow-space would affect any flow children */
	margin-block-start: 0;
}

/* Extra space for heading after non-heading */
.flow:not(hgroup) > :not(:is(h1, h2, h3, h4, h5, h6)) + :is(h1, h2, h3, h4, h5, h6) {
	--flow-space: 1.5em;
}

.flow-lg > * {
	--flow-space: 2em;
}

.flow-md > * {
	--flow-space: 1em;
}

.flow-sm > * {
	--flow-space: .5em;
}

.flow-xs > * {
	--flow-space: .25em;
}

/*
 * Utility
 */

.align-items\:center { align-items: center; }

.color\:currentcolor { color: currentcolor; }

.display\:flex { display: flex; }

.flex-direction\:row-reverse { flex-direction: row-reverse; }

.flex-wrap\:wrap { flex-wrap: wrap; }

.gap\:\.5 { gap: .5rem; }

.gap\:1 { gap: 1rem; }

.gap\:2 { gap: 2rem; }

.justify-content\:flex-end { justify-content: flex-end; }

.max-width\:40 { max-width: 40rem; }