/* ============================================================
   EARTHNESS UTILITIES LAYER
   ============================================================
   The 4th and final layer in the CSS cascade (loaded last so it
   can override anything). Small, single-purpose helpers that
   templates can reach for without writing a custom class.
   Kept deliberately small — utilities are escape hatches, not
   the main design system.
   ============================================================ */


/* ----- Spacing helpers (use sparingly) -------------------- */
/* Margin top */
.u-mt-0 { margin-top: 0 !important; }
.u-mt-3 { margin-top: var(--s-3); }
.u-mt-5 { margin-top: var(--s-5); }
.u-mt-7 { margin-top: var(--s-7); }
.u-mt-9 { margin-top: var(--s-9); }

/* Margin bottom */
.u-mb-0 { margin-bottom: 0 !important; }
.u-mb-3 { margin-bottom: var(--s-3); }
.u-mb-5 { margin-bottom: var(--s-5); }
.u-mb-7 { margin-bottom: var(--s-7); }
.u-mb-9 { margin-bottom: var(--s-9); }

/* Padding top + bottom (vertical rhythm) */
.u-py-5 { padding-top: var(--s-5); padding-bottom: var(--s-5); }
.u-py-7 { padding-top: var(--s-7); padding-bottom: var(--s-7); }
.u-py-9 { padding-top: var(--s-9); padding-bottom: var(--s-9); }


/* ----- Text alignment ------------------------------------- */
.u-text-left   { text-align: left; }
.u-text-center { text-align: center; }
.u-text-right  { text-align: right; }


/* ----- Visibility ----------------------------------------- */
/* Visually hidden but available to screen readers — same as
   .screen-reader-text in base.css, kept here as a u- alias for
   consistency with other utilities. */
.u-sr-only {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* Hide on small screens, show on wide screens */
.u-hide-mobile {
	display: none;
}
@media (min-width: 700px) {
	.u-hide-mobile {
		display: initial;
	}
}

/* Show on small screens, hide on wide screens */
.u-show-mobile {
	display: initial;
}
@media (min-width: 700px) {
	.u-show-mobile {
		display: none;
	}
}


/* ----- Container variants --------------------------------- */
/* Standard container — use when a section needs the canonical
   max-width + horizontal gutter without writing custom CSS. */
.u-container {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

/* Narrow container — for prose-width content (essays, posts) */
.u-container-narrow {
	max-width: var(--measure);
	margin: 0 auto;
	padding: 0 var(--gutter);
}


/* ----- Color helpers (use sparingly — design tokens preferred) */
.u-text-mute  { color: var(--ink-mute); }
.u-text-soft  { color: var(--ink-soft); }
.u-text-accent { color: var(--accent); }


/* ----- Type helpers --------------------------------------- */
.u-italic { font-style: italic; }
.u-serif  { font-family: var(--serif); }
.u-sans   { font-family: var(--sans); }


/* ----- Print --------------------------------------------- */
/* Hide nav, footer, sticky chrome on print. Honour reading
   surface only. */
@media print {
	.site-header,
	.site-footer,
	.search-panel,
	.cat-tabs,
	.progress,
	.enquire,
	.pagination {
		display: none !important;
	}
	body { background: white; color: black; }
	.article__inner,
	.essay__inner {
		max-width: none;
	}
}