/* About and Contact pages only — the rules for page-about.php and page-contact.php.
   Colour, type, space and shape come from assets/css/tokens.css; the shared classes (wrap, section,
   page-head, grid, eyebrow, lede, button-row…) are defined in style.css and are never redefined here. */

/* What a password-protected page shows: WordPress's own form and nothing else. */
.about-locked,
.contact-locked {
	margin-block-start: var(--space-7);
	max-width: 44ch;
	padding: var(--space-6);
	background: var(--color-surface);
	border: var(--border-hairline);
	border-radius: var(--radius-card);
}

/* About: the factory fact strip. Four entries when the record carries all of them, fewer when it does
   not — and it wraps into rows on a narrow screen instead of scrolling. */
.about-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	gap: var(--space-5);
	margin: 0;
	padding: var(--space-6) 0 0;
	border-top: var(--border-hairline);
	list-style: none;
}
.about-fact { display: grid; gap: var(--space-1); align-content: start; }
.about-fact__value {
	font-size: var(--fs-h3);
	font-weight: var(--weight-bold);
	line-height: var(--lh-tight);
	color: var(--color-ink);
}
.about-fact__label {
	color: var(--color-muted);
	font-size: var(--fs-xs);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
}

/* About: one certification per card, in the visual language of .tile — same padding, hairline and
   radius — but as this page's own class, so .tile itself stays as the rest of the site defines it. */
.about-cert {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-5);
	background: var(--color-background);
	border: var(--border-hairline);
	border-radius: var(--radius-card);
}
.about-cert__name { margin: 0; font-size: var(--fs-h3); font-weight: var(--weight-medium); color: var(--color-ink); }
.about-cert__note { margin: 0; color: var(--color-ink-soft); font-size: var(--fs-sm); }

/* The record's own body on either page, in a readable measure. */
.about-body,
.contact-body { max-width: 72ch; }
.about-body > :last-child,
.contact-body > :last-child { margin-bottom: 0; }

/* Contact: the details and the form, stacked on a phone. */
.contact-grid { display: grid; gap: var(--space-7); }
.contact-details { max-width: 44ch; }
.contact-details h2 { margin-bottom: var(--space-5); }
.contact-channels { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.contact-channel {
	display: grid;
	gap: var(--space-1);
	padding-bottom: var(--space-3);
	border-bottom: var(--border-hairline);
}
.contact-channel__label {
	color: var(--color-muted);
	font-size: var(--fs-xs);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
}
.contact-channel__value { color: var(--color-ink); font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.contact-channel a.contact-channel__value { color: var(--color-accent); }
.contact-channel a.contact-channel__value:hover { color: var(--color-accent-dark); }
.contact-form { max-width: 68ch; }
.contact-form h2 { margin-bottom: var(--space-5); }

/* From 860px up the two columns sit side by side; a page whose site has no channel and no address
   prints the form alone, and that one column keeps the form's own measure. */
@media (min-width: 860px) {
	.contact-grid {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		gap: var(--space-8);
		align-items: start;
	}
	.contact-grid--form-only { grid-template-columns: minmax(0, 1fr); }
}