/*
 * The project article: the spec sheet plus the small bits of type the pattern
 * leans on. Everything colourable is a custom property so the controls can
 * override it inline, per block.
 */

:root {
	--pf-project-accent: #642187;
	--pf-project-rule: 64px;
	--pf-project-measure: 1080px;
	--pf-project-gutter: 24px;
}

/* ---------- the article's measure -------------------------------------- */

/*
 * Single posts here run the full width of the window with no gutter, so the
 * article sets its own. Everything below the hero sits in this wrapper; the
 * hero is deliberately left outside it.
 */
.pf-project-body {
	max-width: var(--pf-project-measure);
	margin-inline: auto;
	padding-inline: var(--pf-project-gutter);
}

/* Running text wants a shorter line than the plates and galleries beside it. */
.pf-project-body > p,
.pf-project-body > ul,
.pf-project-body > ol {
	max-width: 68ch;
}

.pf-project-body > * {
	margin-block: 0 1.5em;
}

.pf-project-body > h2 {
	margin-block-start: 2.6em;
}

.pf-project-body > h2:first-child {
	margin-block-start: 0;
}

/* ---------- section furniture ------------------------------------------ */

.pf-section-title {
	margin-bottom: .35em;
}

/* The short rule under every heading. Left-aligned, accent-coloured, and it
   never stretches across the column the way a core separator would. */
.wp-block-separator.pf-rule {
	width: var(--pf-project-rule);
	max-width: var(--pf-project-rule);
	margin: 0 0 1.6em;
	border: 0;
	border-top: 2px solid var(--pf-project-accent);
	opacity: 1;
}

.pf-logline {
	font-size: clamp(1.1rem, 2.2vw, 1.45rem);
	line-height: 1.5;
	font-weight: 300;
	max-width: 46em;
	border-left: 2px solid var(--pf-project-accent);
	padding-left: 1em;
}

.pf-hero-title {
	margin: 0;
	font-size: clamp(2.4rem, 7vw, 6rem);
}

.pf-shot img,
.pf-plates img,
.pf-refs img {
	/* The site radius, not a number of our own — see CLAUDE.md, "Consistency". */
	border-radius: var(--pf-radius, 10px);
}

.pf-notes li,
.pf-credits li {
	margin-bottom: .5em;
}

/* ---------- the spec sheet --------------------------------------------- */

.pf-specs {
	--pf-specs-cols: 2;
	--pf-specs-label: 150px;
	--pf-specs-gap: 14px;
	--pf-specs-track: .3px;
	--pf-specs-lc: #8A8394;
	--pf-specs-vc: #C9C4D0;
	--pf-specs-rule: rgba(245, 243, 247, .12);
	--pf-specs-accent: #642187;
	--pf-specs-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	margin: 0 0 2.4em;
}

.pf-specs__row {
	display: flex;
	gap: 1em;
	padding: calc(var(--pf-specs-gap) / 2) 0;
	min-width: 0;
}

.pf-specs.is-ruled .pf-specs__row + .pf-specs__row {
	border-top: 1px solid var(--pf-specs-rule);
}

.pf-specs__label {
	flex: 0 0 var(--pf-specs-label);
	margin: 0;
	color: var(--pf-specs-lc);
	font-size: .8em;
	font-weight: 400;
	letter-spacing: var(--pf-specs-track);
	line-height: 1.6;
}

.pf-specs.is-caps .pf-specs__label {
	text-transform: uppercase;
}

.pf-specs__value {
	margin: 0;
	min-width: 0;
	flex: 1 1 auto;
	color: var(--pf-specs-vc);
	display: flex;
	flex-wrap: wrap;
	gap: .4em;
	align-items: baseline;
	line-height: 1.6;
}

/* Software and renderer read as a stack, not a sentence, so they get tokens. */
.pf-specs__chip {
	display: inline-block;
	padding: .18em .7em;
	border: 1px solid var(--pf-specs-accent);
	border-radius: 999px;
	font-size: .82em;
	line-height: 1.5;
	white-space: nowrap;
}

/* Grid: each row becomes a stacked card, label above value. */
.pf-specs--grid {
	display: grid;
	grid-template-columns: repeat(var(--pf-specs-cols), minmax(0, 1fr));
	gap: var(--pf-specs-gap);
}

.pf-specs--grid .pf-specs__row {
	display: block;
	padding: 0;
}

.pf-specs--grid.is-ruled .pf-specs__row {
	border-top: 1px solid var(--pf-specs-rule);
	padding-top: calc(var(--pf-specs-gap) / 2);
}

.pf-specs--grid.is-ruled .pf-specs__row + .pf-specs__row {
	border-top: 1px solid var(--pf-specs-rule);
}

.pf-specs--grid .pf-specs__label {
	flex: none;
	display: block;
	margin-bottom: .3em;
}

/* Inline: one running line, for a sheet that sits under the hero. */
.pf-specs--inline {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pf-specs-gap);
}

.pf-specs--inline .pf-specs__row {
	display: block;
	padding: 0;
	border: 0;
}

.pf-specs--inline.is-ruled .pf-specs__row + .pf-specs__row {
	border-top: 0;
	border-left: 1px solid var(--pf-specs-rule);
	padding-left: var(--pf-specs-gap);
}

.pf-specs--inline .pf-specs__label {
	flex: none;
	display: block;
	margin-bottom: .2em;
}

@media (max-width: 600px) {
	.pf-specs--rows .pf-specs__row {
		display: block;
	}

	.pf-specs--rows .pf-specs__label {
		margin-bottom: .2em;
	}

	.pf-specs--grid {
		grid-template-columns: 1fr;
	}
}


/* The fiche technique reads as data, so it may be set in mono — the third face
   of the type system, and the only place on the site that uses it. Controlled
   from the block sidebar: Spec sheet → Font. */
.pf-specs.is-mono {
	font-family: var(--pf-specs-mono);
	font-size: .94em;
}

.pf-specs.is-mono .pf-specs__value {
	font-variant-numeric: tabular-nums;
}