/* Cards: bordered, squared, subtle lift on hover. Whole card can be a link. */

@layer components {
	.sw-card {
		display: block;
		background: var(--bg);
		border: 1px solid var(--border);
		padding: clamp(24px, 3vw, 32px);
		text-decoration: none;
		color: var(--text);
		transition: border-color 140ms ease, transform 140ms ease;
	}
	a.sw-card:hover {
		border-color: var(--ink);
		transform: translateY(-3px);
	}

	.sw-card h3 { margin-bottom: 0.6rem; }
	.sw-card p { color: var(--muted); font-size: 0.9375rem; }

	.sw-card__num {
		display: block;
		font-family: var(--font-mono);
		font-size: 0.8125rem;
		font-weight: 600;
		letter-spacing: 0.12em;
		color: var(--accent-text);
		margin-bottom: 1.1rem;
	}
	.sw-card__num::after { content: " /"; color: var(--accent); }
}