/* ------------------------------------------------------------------
 * layout.css -- fluid page shell. Replaces Less Framework's job.
 *
 * The old lessframework.css locked .wrapper to fixed pixel widths per
 * breakpoint (980 / 712 / 436 / 252px), which cramped every phone and
 * meant the 768-979px range would overflow once the grid was removed.
 * This makes the wrapper fluid at every width; per-section reflows live
 * in restyle.css (>=768) and mobile.css (<=767), which still apply.
 *
 * Loaded right after style.css so it overrides the theme's fixed width.
 * Non-destructive layer: remove this <link> to revert.
 * ------------------------------------------------------------------ */

.wrapper {
	/* Fluid up to the theme's 1000px slide width, with a small edge gutter
	   so the cream block never touches the viewport edge. */
	width: min(1000px, 100% - 24px);
	max-width: 1000px;
	margin-inline: auto;
}

/* Calm the page backdrop (UI-BACKLOG item E): drop the theme's dated diagonal
   hatch (#a8c8ca + img/bg.png) for a flat, softer teal. Keeps the Fifties
   coral×turquoise identity but quiets the busiest element; the cream .wrapper
   still reads clearly against it. Revert = remove this rule. */
body {
	background: #b7cfce;
}

/* Box-sizing sanity for the fluid era: keep padded blocks from overflowing
   the wrapper (the theme is content-box + fixed px; anything we make fluid
   should count padding inside its width). Scoped to our own layers. */
.site-nav,
.site-nav *,
.rb-slider,
.rb-slide,
.gallery-grid,
.gallery-grid * {
	box-sizing: border-box;
}

/* The header logo scales down instead of overflowing on narrow tablets. */
header #logo img {
	max-width: 100%;
	height: auto;
}