/* Share row — site/_partials/share.html
 *
 * Deliberately plain. The article page (designed 2026-09-23) places it; this file
 * keeps the row neutral furniture that reads correctly today and can be restyled from one file when a
 * design lands. Nothing here invents a visual language: it is the existing
 * button shape, the existing hairline, the existing muted ink.
 *
 * Every colour and size is a token, no exceptions — a palette swap in
 * tokens.css must keep working.
 */

.share {
	margin-top: var(--space-16);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-line);
}

.share__heading {
	font-family: var(--font-label);
	font-size: var(--label-s);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--color-ink-muted);
	margin: 0 0 var(--space-3);
}

.share__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.share__item {
	margin: 0;
}

.share__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
	background: none;
	color: var(--color-ink);
	font-family: inherit;
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	text-decoration: none;
	cursor: pointer;
	transition: var(--transition);
	transition-property: color, border-color, background-color;
}

.share__link:hover,
.share__link:focus-visible {
	color: var(--color-brand-strong);
	border-color: var(--color-brand-strong);
}

/* 1em, so the glyph tracks the label rather than needing its own size token.
 * width is auto because the three brand marks do not share an aspect ratio —
 * X is 24.75x22.37, Facebook 27x26.9, LinkedIn square. */
.share__icon {
	height: 1em;
	width: auto;
	flex: none;
}