/*
	Full-viewport page fill for short pages.

	The "under construction" project stubs have only a heading, two lines and a button,
	so the document ends part-way down the screen. Everything below that point shows the
	`body` background, which main.css sets to #ffffff — a white band under the footer,
	growing taller the taller the window is.

	Story has no rule for this: the template assumes every page is long enough to fill
	the viewport on its own, which is true of the demo's one-pager but not of a stub.

	Two pieces, both needed:
	  1. a dark `body` background, so nothing white can show through in any case
	     (rubber-band overscroll included);
	  2. #wrapper as a column flexbox at min-height 100vh with the content section set to
	     grow, which pushes the footer down onto the bottom edge of the viewport instead
	     of leaving it floating mid-screen.

	100vh is right, not 100vh-minus-nav: #site-nav is `position: fixed` (see nav.css) and
	takes up no space in the flow, so there is nothing to subtract and no scroll seam.

	#0D0F10 is the left end of the .color1 gradient in main.css, so on the rare page long
	enough to overscroll the colour matches the section above it.

	Load AFTER main.css. Linked only from the short stub pages under projects/ —
	index.html's `fullscreen` banner and the longer content pages already fill the
	screen, and forcing flex on their wrappers would only risk new layout bugs.
*/

html,
body {
	min-height: 100%;
}

body {
	background-color: #0D0F10;
}

#wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/*
	The content section absorbs the slack; the footer keeps its natural height.

	It also centres its own card vertically in whatever height it ends up with. Without
	this the card stays pinned to the top and the reclaimed space just becomes one dead
	gap above the footer — the same hole as before, only dark. Centred, a two-line stub
	reads as a deliberately sparse page at any window height.
*/
#wrapper > .wrapper.style2 {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#wrapper > footer {
	flex: 0 0 auto;
}