:root {
	--common-gap: 20px;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	/* be at least a full viewport height; consider 100svh and 100dvh too */
}

main {
	flex-grow: 1;
	/* fill up available space which pushes the footer down */
}


/* ===== Centered content column ===== */
/*
	Wraps content to a readable max-width, centers it horizontally, applies
	iOS-aligned inline padding. Acts as a container query context so
	children can respond to its width.
*/

inner-column {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: var(--common-gap);

	max-width: var(--inner-column-max, 1440px);
	margin-inline: auto;

	padding: var(--inner-column-padding-block, 30px) var(--inner-column-padding-inline, 16px);
	/* 16px inline aligns with iOS safe-area conventions and common framework
	   gutters — kept as fixed px so it doesn't scale with root font-size. */

	container-type: inline-size;

	@media (width > 900px) {
		/*grid-template-columns: repeat(3, 1.5fr) repeat(9, 1fr);*/
	}
}

/* Default: anything dropped into an inner-column spans all 12 tracks, so
   plain content (paragraphs, the splash headline, hardcoded modules) keeps
   behaving as full-width block content. Modules that want to ride the
   12-column system opt in with `grid-template-columns: subgrid` on
   themselves and place their children on the shared track lines. */
inner-column > * {
	grid-column: 1 / -1;
}


/* ===== Sticky site header ===== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 5;
}


/* ===== Smooth anchor scrolling =====
   Animate jumps to #section anchors instead of the browser's instant snap.
   Gated to motion-OK users. --header-height is set by header-menu.js on
   load + resize, so the scroll lands the target just below the sticky
   header instead of underneath it. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

section[id] {
	scroll-margin-top: var(--header-height, 76px);
}


body {
	max-width: 1600px;
	margin-inline: auto;
}