/* ==========================================================================
   LAYOUT
   Container and grid system. Design-Brief.md section 4.6.
   Breakpoint overrides live in responsive.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Container

   Brief 4.6 gives: 1200px at >=1261px; 970px 1023-1260; 718px 768-1022;
   555px 571-767; 350px <=570.

   The brief originally read >=1301px, which left 1261-1300px undefined.
   Corrected in Design-Brief.md 4.6 to >=1261px, so the sequence is now
   continuous and the 1200px container carries down to the 1260px step.
   -------------------------------------------------------------------------- */

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter-mobile);
}

/* The 20px gutter is the deliberate deviation from the reference site, and it
   is a narrow-screen measure: it stops content touching the edge when the
   viewport is close to the container width. Above 1260px the container is
   1200px inside a viewport of at least 1261px, so there is always margin and
   the gutter only shrinks the content box to 1160px. That was throwing the
   header out of alignment with the specimen's 120px margins. */

@media (min-width: 1261px) {

	.container {
		padding-inline: 0;
	}
}

/* --------------------------------------------------------------------------
   Main content rhythm
   -------------------------------------------------------------------------- */

.site-main {
	padding: var(--main-pad-top) 0 0;
}

/* Prose columns cap at 70 characters (4.4). */

.prose {
	max-width: var(--measure);
}

/* --------------------------------------------------------------------------
   Grid
   -------------------------------------------------------------------------- */

.grid {
	display: grid;
	gap: var(--grid-gap);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Two-column splits. Homepage 100px gap, inner pages 80px (4.6). */

.cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.cols--home  { gap: var(--gap-home-cols); }
.cols--inner { gap: var(--gap-inner-cols); }

/* --------------------------------------------------------------------------
   Page furniture

   Structural only. The header and footer are built in Block 2, the homepage
   in Block 3 and the page templates in Block 4.
   -------------------------------------------------------------------------- */

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-content {
	flex: 1 0 auto;
}

.site-footer {
	flex-shrink: 0;
	padding-top: var(--footer-pad-top);
}

/* The 4px gold accent rule (4.6). Separation is by flat colour and this rule,
   never by shadow. */

.rule-gold {
	border-bottom: var(--rule-accent) solid var(--gold);
}