/* ==========================================================================
   Buttons: primary (gold on dark / midnight on light), secondary outline, text link.
   No arrows in labels; the label names the action.
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625em;
	min-height: 52px;
	padding: 0.8125rem 1.75rem;
	border: 1px solid transparent;
	border-radius: var(--radius);
	font-family: var(--font-text);
	font-size: var(--fs-small);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.btn .icon { width: 1.125em; height: 1.125em; }

/* Primary on light: midnight. */
.btn--primary {
	background: var(--c-midnight);
	border-color: var(--c-midnight);
	color: var(--c-white);
}
.btn--primary:hover { background: var(--c-indigo); border-color: var(--c-indigo); }

/* Primary on dark: gold (8.6:1 with midnight text). */
.tone-dark .btn--primary,
.btn--gold {
	background: var(--c-gold);
	border-color: var(--c-gold);
	color: var(--c-midnight);
}
.tone-dark .btn--primary:hover,
.btn--gold:hover { background: var(--c-gold-light); border-color: var(--c-gold-light); }

/* Secondary: outline. */
.btn--secondary {
	background: transparent;
	border-color: rgb(20 18 46 / 0.35);
	color: var(--c-ink);
}
.btn--secondary:hover { border-color: var(--c-ink); }
.tone-dark .btn--secondary {
	border-color: rgb(244 243 248 / 0.4);
	color: var(--c-porcelain);
}
.tone-dark .btn--secondary:hover { border-color: var(--c-gold-light); color: var(--c-gold-light); }

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
}

/* Text link: underline in gold, colour stays readable. */
.link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
	font-size: var(--fs-small);
	letter-spacing: 0.01em;
	color: var(--c-ink);
	text-decoration: underline;
	text-decoration-color: var(--c-gold-deep);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.45em;
	transition: text-decoration-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.link:hover { text-decoration-thickness: 2px; color: var(--c-gold-deep); }
.tone-dark .link { color: var(--c-gold-light); text-decoration-color: rgb(228 201 132 / 0.5); }
.tone-dark .link:hover { color: var(--c-white); text-decoration-color: var(--c-gold-light); }

@media (max-width: 479px) {
	.btn-row { flex-direction: column; align-items: stretch; }
	.btn-row .btn { width: 100%; }
}