/* Content pages, FAQ, contact, journal and 404. */

.content-layout {
	display: grid;
	gap: var(--space-8);
	padding-block: var(--space-8) var(--space-12);
}
@media (min-width: 1024px) {
	.content-layout { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; gap: var(--gutter); padding-block: var(--space-12) var(--space-16); }
}
.content-aside {
	display: grid;
	gap: var(--space-4);
	padding: var(--space-6);
	border: var(--border);
	border-radius: var(--r-card);
	background: var(--color-surface);
}
@media (min-width: 1024px) {
	.content-aside { position: sticky; top: calc(var(--tap-min) + var(--space-8) + var(--space-6)); }
}
.content-aside__title { font-size: var(--h5-m); font-family: var(--stack-body); font-weight: var(--fw-semibold); line-height: var(--lh-h5); }
.content-aside .help-list { margin-top: 0; }

/* Page photograph (About, Delivery): wide on desktop, 16:9 on phones */
.page-figure { margin-top: var(--space-8); }
.page-figure__frame {
	display: block;
	aspect-ratio: 16 / 9;
	border: var(--border);
	border-radius: var(--r-card);
	background: var(--color-fill);
	overflow: hidden;
}
.page-figure__image { width: 100%; height: 100%; object-fit: cover; }
.page-figure__caption { margin-top: var(--space-3); color: var(--color-text-muted); font-size: var(--small); }
@media (min-width: 1024px) {
	.page-figure__frame { aspect-ratio: 21 / 9; }
}

/* FAQ page */
.faq-groups { display: grid; gap: var(--space-8); }
.faq-group__title { margin-bottom: var(--space-3); font-size: var(--h4-m); font-weight: var(--fw-medium); line-height: var(--lh-h4); }
@media (min-width: 768px) {
	.faq-group__title { font-size: var(--h4); }
}

/* Journal */
.journal__note { margin-bottom: var(--space-6); color: var(--color-text-muted); font-size: var(--small); }
.article__meta { margin-top: var(--space-3); }
.article__body { padding-block: var(--space-8) var(--space-12); }
.journal-more { border-top: var(--border); }

/* 404 */
.not-found { padding-block: var(--space-16); }
.not-found__text { max-width: var(--measure); margin-top: var(--space-4); color: var(--color-text-muted); font-size: var(--body-lg); }
.not-found__search { max-width: calc(var(--space-24) * 6); margin-top: var(--space-8); }
.not-found__links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block: var(--space-6); list-style: none; }