@charset "utf-8";

/* paulbellows.com — shared stylesheet */

:root {
	color-scheme: light;

	--ground:      #fff9e7;
	--ink:         #4f3a30;
	--ink-quiet:   #7d6455;
	--link:        #6b5410;
	--rule:        #c1b6b3;
	--measure:     34rem;
	--font-sans:   Ubuntu, "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont,
	               system-ui, "Helvetica Neue", Arial, sans-serif;
}

html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	padding: 2rem 1rem;
	font-size: clamp(1rem, 0.9rem + 0.5vw, 1.375rem);
	line-height: 1.6;
	font-family: var(--font-sans);
	font-size-adjust: ex-height 0.52;
	color: var(--ink);
	background-color: var(--ground);
	border-top: .5rem var(--ink) solid;
	border-bottom: .5rem var(--ink) solid;
}

body > * {
	max-width: var(--measure);
	margin-inline: auto;
}

* {
	margin: 0 0 0.75rem;
}

h1, h2, h3 {
	font-weight: 700;
	line-height: 1.25;
	text-wrap: balance;
}
h1 {font-size:1.5em;}
h2 {font-size:1.2em;}
h3 {font-size:1em;}
p {
	max-width: 62ch;
}

ul {
	padding-left: 1.25rem;
}

li {
	margin-bottom: 0.35rem;
}

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

a:link,
a:visited {
	color: var(--link);
}

a:hover,
a:focus {
	color: var(--ink);
}

a:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Error-page eyebrow (404.html / 500.html) */
.code {
	display: block;
	font-size: 0.8em;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-quiet);
	margin-bottom: 0.5rem;
}

#footer {
	margin-top: 2rem;
	padding-top: 0.75rem;
	font-size: 0.9em;
	border-top: 0.25rem var(--rule) solid;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}