/* Base elements. Mobile first. */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hm-header-h) + 1rem); }
/* Keep focused and scrolled-to elements clear of the fixed mobile dock (WCAG 2.4.11). */
@media (max-width: 959px) {
	html { scroll-padding-bottom: calc(var(--hm-dock-h) + 16px + env(safe-area-inset-bottom, 0px)); }
}

body {
	margin: 0;
	background-color: var(--hm-cream);
	background-image: var(--hm-halftone), var(--hm-paper-image);
	background-size: 6px 6px, auto;
	color: var(--hm-ink);
	font-family: var(--hm-font-body);
	font-size: var(--hm-fs-body);
	line-height: 1.6;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	padding-bottom: calc(var(--hm-dock-h) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 960px) {
	body { padding-bottom: 0; }
}

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

h1, h2, h3, h4 {
	font-family: var(--hm-font-display);
	font-weight: 400;
	line-height: 1;
	color: var(--hm-navy);
	margin: 0 0 .5em;
	text-wrap: balance;
	letter-spacing: .02em;
}
h4 { font-family: var(--hm-font-label); font-size: 1.4rem; letter-spacing: .04em; }

p, ul, ol, dl { margin: 0 0 1em; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }
p { text-wrap: pretty; }

a { color: var(--hm-navy); text-decoration-thickness: 2px; text-underline-offset: .18em; }
a:hover { color: var(--hm-ink); text-decoration-color: var(--hm-orange); }

/* Two-tone focus ring (WCAG 2.4.7, 1.4.11): an ink ring with a yellow halo inside and out, so it
   reads on orange, sky, yellow, navy and cream alike. Box-shadow carries the halo; the outline
   paints over it. */
:focus-visible {
	outline: 3px solid var(--hm-ink);
	outline-offset: 2px;
	box-shadow: 0 0 0 8px var(--hm-yellow);
	border-radius: 4px;
}

::selection { background: var(--hm-yellow); color: var(--hm-ink); }

strong, b { font-weight: 700; }

button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea {
	min-height: 48px;
	padding: .7rem .9rem;
	border: var(--hm-line);
	border-radius: var(--hm-radius-sm);
	background: var(--hm-paper);
	font-size: 1rem;
}
label { font-weight: 600; }

hr { border: 0; border-top: var(--hm-line); margin: 2rem 0; }

.hm-skip {
	position: absolute;
	left: .75rem;
	top: -100px;
	z-index: 1000;
	padding: .75rem 1rem;
	background: var(--hm-yellow);
	color: var(--hm-ink);
	border: var(--hm-line);
	font-weight: 700;
}
.hm-skip:focus { top: .75rem; }

main { display: block; }

/* Default content flow for posts, legal pages and the index. */
.hm-prose, .hm-main > .wp-block-post-content.is-layout-constrained {
	padding-inline: var(--hm-gutter);
}
.hm-prose > * { max-width: var(--hm-text); margin-inline: auto; }
.hm-prose h2 { font-size: var(--hm-fs-h3); margin-top: 2.25rem; }
.hm-prose h3 { font-family: var(--hm-font-label); font-size: 1.5rem; letter-spacing: .04em; color: var(--hm-ink); margin-top: 1.75rem; }
.hm-prose li { margin-bottom: .35em; }