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

/* Prevent font size inflation */
html {
	touch-action: manipulation;
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

html,
body {
	overflow-wrap: anywhere;
	word-break: break-word;
	text-wrap: pretty;
	-webkit-tap-highlight-color: transparent;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeSpeed;
}

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

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
	list-style: none;
}

ul,
ol {
	margin: 0;
	padding: 0;
	padding-inline-start: 1em;
}

/* Set core body defaults */
body {
	min-block-size: 100vh;
	margin: 0;
	line-height: 1.5;
	text-wrap: pretty;
	padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
h5,
h6,
button,
input,
label {
	line-height: var(--line-height-tight);
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--theme-glare-max);
	text-wrap: balance;
	font-weight: var(--font-weight-bold);
}

/* A elements that don't have a class get default styles */
a:not([class]) {
	text-decoration-skip-ink: auto;
	text-decoration: underline;
	color: currentColor;
}

a {
	-webkit-touch-callout: none;
	cursor: default;
}

h1 > a:not([class]),
h2 > a:not([class]),
h3 > a:not([class]),
h4 > a:not([class]),
h5 > a:not([class]),
h6 > a:not([class]) {
	text-decoration: none;
}


/* Make images easier to work with */
img,
picture {
	max-inline-size: 100%;
	display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
	font-family: inherit;
	font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
	min-block-size: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
	scroll-margin-block: 10ex;
	outline: none;
}

hr {
	margin-block: 0;
	inline-size: 100%;
	border: 0;
	border-block-start-width: var(--thickness-base);
	border-style: solid;
}

::marker {
	color: currentColor;
}

/* ================== ================== ================== ================== */
/* ================== Writing */
/* ================== ================== ================== ================== */
.writing>* {
	margin-block-start: 0;
}

.writing>*+* {
	--flow: var(--space-away);
	margin-block-start: var(--flow);
}

/* ================== ================== ================== ================== */
/* ================== Interaction */
/* ================== ================== ================== ================== */
@media (hover: hover) {
	button:hover,
	a:hover {
		filter: hue-rotate(-45deg);
	}
}