/* ==========================================================================
   Page openings, About, prose.
   ========================================================================== */

.qc-head {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 1.5rem clamp(12px, 1.6vw, 24px);
	padding: var(--top, 4rem) var(--gutter) clamp(3rem, 6vw, 5rem);
}
.qc-head > * { max-width: var(--max); }
.qc-head__title {
	grid-column: 1 / -1;
	font-size: clamp(3.4rem, 10.5vw, 11rem);
}
.qc-head--paper .qc-head__title { color: var(--ink); }
.qc-head--workshop .qc-head__title { color: var(--white); }
.qc-head__intro {
	grid-column: 7 / 13;
	font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
	line-height: 1.55;
	max-width: 48ch;
}
.qc-head--paper .qc-head__intro { color: var(--graphite); }
.qc-head--workshop .qc-head__intro { color: var(--mist); }
.qc-head__links { grid-column: 7 / 13; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
@media (max-width: 860px) {
	.qc-head__intro,
	.qc-head__links { grid-column: 1 / -1; }
}

/* Groups written in the editor sit on paper unless they say otherwise. */
.qc-about-intro,
.qc-values,
.qc-different,
.qc-contact { background: var(--paper); color: var(--ink); }

.qc-about-intro,
.qc-values,
.qc-different { padding: clamp(3rem, 7vw, 6rem) var(--gutter); }
.qc-split {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: clamp(2rem, 6vw, 6rem);
	align-items: start;
	max-width: var(--max);
	margin-inline: auto;
}
.qc-split--even { grid-template-columns: 1fr 1fr; }
.qc-split__text h2 { max-width: 16ch; margin-bottom: 1.25rem; }
.qc-split__text p { color: var(--graphite); max-width: 58ch; }
.qc-split__text p + p { margin-top: 1rem; }
.qc-split__text strong { color: var(--ink); font-weight: 600; }
.qc-split__text .qc-lede { color: var(--ink); font: 400 clamp(1.35rem, 1.1rem + 1vw, 1.9rem)/1.35 var(--f-display); }
.qc-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 2rem); }
.qc-duo > :nth-child(2) { margin-top: 4rem; }
.qc-brand-image figcaption { margin-top: 0.9rem; }

.qc-statement {
	padding: clamp(4rem, 9vw, 8rem) var(--gutter);
	background-color: var(--ink);
	background-image: radial-gradient(rgba(232, 200, 186, 0.13) 1px, transparent 1.3px);
	background-size: 24px 24px;
}
.qc-statement__text {
	max-width: var(--max);
	margin-inline: auto;
	color: var(--white);
	font: 400 clamp(2rem, 1.2rem + 3.4vw, 4.4rem)/1.1 var(--f-display);
	letter-spacing: -0.012em;
	text-wrap: balance;
}

.qc-values > h2,
.qc-plates { max-width: var(--max); margin-inline: auto; }
.qc-values > h2 { margin-bottom: clamp(2rem, 4vw, 3rem); }
.qc-plates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
/* A clear plate on four bolts, drawn entirely in CSS so editors can reuse it on any group. */
.qc-plate {
	position: relative;
	padding: 2.5rem 2rem 2.25rem;
	border-radius: 4px;
	background: linear-gradient(118deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.4) 45%, rgba(255, 255, 255, 0.6));
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.95),
		inset -3px -4px 0 rgba(235, 202, 180, 0.6),
		14px 22px 36px -22px rgba(51, 32, 27, 0.4);
}
.qc-plate::before {
	content: "";
	position: absolute;
	inset: 12px;
	pointer-events: none;
	--bolt: radial-gradient(circle at 34% 30%, #fff 0 1.2px, #e1dbd5 2px, #a79d94 4px, #685e56 6px, transparent 6.5px);
	background: var(--bolt) top left / 13px 13px no-repeat, var(--bolt) top right / 13px 13px no-repeat, var(--bolt) bottom left / 13px 13px no-repeat, var(--bolt) bottom right / 13px 13px no-repeat;
}
.qc-plate h3 { margin-bottom: 0.75rem; font-size: 1.6rem; }
.qc-plate p { color: var(--graphite); }

@media (max-width: 860px) {
	.qc-split,
	.qc-split--even,
	.qc-plates { grid-template-columns: 1fr; }
}

/* Prose (category guides) */
.qc-prose { max-width: 68ch; }
.qc-prose h2 { margin: 2.75rem 0 1rem; font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem); }
.qc-prose h2:first-child { margin-top: 0; }
.qc-prose p { color: var(--graphite); line-height: 1.72; }
.qc-prose p + p { margin-top: 1rem; }
.qc-prose strong { color: var(--ink); font-weight: 600; }
.qc-prose ul { margin: 1rem 0 1.25rem; }
.qc-prose li { position: relative; padding: 0.55rem 0 0.55rem 1.6rem; border-top: 1px solid var(--paper-line); color: var(--graphite); }
.qc-prose li:last-child { border-bottom: 1px solid var(--paper-line); }
.qc-prose li::before { content: ""; position: absolute; left: 0.1rem; top: 1.2em; width: 11px; height: 2px; background: var(--kraft); transform: rotate(-45deg); }

/* A page opening followed directly by the wall: the filter strip follows closely. */
.qc-head:has(+ .qc-products) { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.qc-head + .qc-products { --top: 0px; }