/* ==================================================================
 * Q8tly — About page (Module 9 §3)
 *
 * About REUSES the M8 guide-single chrome (.q8tly-guide-single__* in guide.css —
 * kicker / title / deck / byline / hero / reading column). This sheet adds ONLY
 * what guide.css can't: the guide article BODY is Elementor-authored (Elementor
 * styles its own widgets), but the About body is authored HTML rendered through
 * the_content(), so it needs base element typography — plus the §3 midpoint pull
 * quote and the signature block. Everything is scoped to `.q8tly-about` so it
 * never leaks onto real /guide/ articles.
 *
 * Sitewide-enqueued but inert off the About page (the per-module sheet pattern).
 * Tokens: tokens.css. Logical props (RTL-ready for the AR translation pass).
 * ================================================================== */

/* ------------------------------------------------------------------ *
 * Body — reading typography for the authored HTML (h2 / p / lists / links)
 * ------------------------------------------------------------------ */

.q8tly-about .q8tly-guide-single__body > h2 {
	margin-block: 44px 16px;
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--ink);
	scroll-margin-block-start: 96px; /* the #team jump clears the condensing header. */
}

.q8tly-about .q8tly-guide-single__body > h2:first-child {
	margin-block-start: 0;
}

.q8tly-about .q8tly-guide-single__body p {
	margin-block: 0 20px;
}

.q8tly-about .q8tly-guide-single__body a {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color 150ms ease;
}

.q8tly-about .q8tly-guide-single__body a:hover {
	color: var(--accent);
}

.q8tly-about .q8tly-guide-single__body ul,
.q8tly-about .q8tly-guide-single__body ol {
	margin-block: 0 20px;
	padding-inline-start: 24px;
}

.q8tly-about .q8tly-guide-single__body li {
	margin-block-end: 8px;
}

/* ------------------------------------------------------------------ *
 * Pull quote — §3 midpoint thesis quote (the editorial component)
 * ------------------------------------------------------------------ */

.q8tly-about .q8tly-guide-single__body blockquote,
.q8tly-about__pullquote {
	margin-block: 36px;
	margin-inline: 0;
	padding-block: 4px;
	padding-inline-start: 24px;
	border-inline-start: 3px solid var(--accent);
	font-family: var(--font-display);
	font-style: italic;
	font-size: 26px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--ink-soft);
}

.q8tly-about .q8tly-guide-single__body blockquote p,
.q8tly-about__pullquote p {
	margin-block: 0;
}

/* ------------------------------------------------------------------ *
 * Signature — §3 sign-off + the single confirmed inbox (hello@)
 * ------------------------------------------------------------------ */

.q8tly-about__signature {
	margin-block: 8px 0;
	padding-block-start: 24px;
	border-block-start: 1px solid var(--rule-soft);
}

.q8tly-about__signature-name {
	margin-block: 0 6px;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 18px;
	font-weight: 500;
	color: var(--ink);
}

.q8tly-about__signature-contact {
	margin-block: 0;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.02em;
	color: var(--ink-faint);
}

.q8tly-about__signature-contact .q8tly-contact-email {
	color: var(--accent);
	text-decoration: none;
}

.q8tly-about__signature-contact .q8tly-contact-email:hover {
	text-decoration: underline;
}

/* Legal-entity disclosure — the corporate-provenance line (Meta business
   verification + Apple App Store review). Small + muted, sits under the
   sign-off; logical props keep it RTL-ready for the AR twin. */
.q8tly-about__legal-entity {
	margin-block: 20px 0;
	font-size: 12px;
	line-height: 1.6;
	color: var(--ink-faint);
}

/* ------------------------------------------------------------------ *
 * Responsive — match the guide-single mobile reading scale
 * ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.q8tly-about .q8tly-guide-single__body > h2 {
		font-size: 24px;
		margin-block: 36px 14px;
	}

	.q8tly-about .q8tly-guide-single__body blockquote,
	.q8tly-about__pullquote {
		font-size: 22px;
		margin-block: 28px;
	}
}