/* Interactive controls */

.btn {
	--btn-cut: 9px;
	--btn-bg: var(--cream);
	--btn-hover-bg: #efe2c8;
	display: inline-flex; align-items: center; gap: 12px;
	position: relative; box-sizing: border-box; cursor: pointer;
	white-space: nowrap; text-decoration: none;
	font-family: var(--font-display); font-size: 12px; font-weight: 600;
	letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink);
	background: none; border: 0; appearance: none; -webkit-appearance: none;
	transition: background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s, filter 0.25s;
}
.btn--inv { --btn-bg: var(--ink); --btn-hover-bg: #2b1d16; }
.btn--sm { font-size: 12px; }
.btn__in { display: inline-flex; align-items: center; gap: 12px; }
.btn__arrow { font-family: var(--font-body); font-weight: 400; transition: transform 0.35s var(--ease-out); }
.btn:hover .btn__arrow, a:hover .btn .btn__arrow { transform: translateX(4px); }

/* Primary button */
.btn--pri {
	padding: 16px 32px; color: #1a120d;
	background: linear-gradient(160deg, var(--bronze-lt) 0%, var(--bronze) 48%, var(--bronze-dk) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 243, 214, 0.55), inset 0 -1px 0 rgba(58, 38, 16, 0.35);
	clip-path: polygon(var(--btn-cut) 0, 100% 0, 100% calc(100% - var(--btn-cut)), calc(100% - var(--btn-cut)) 100%, 0 100%, 0 var(--btn-cut));
}
.btn--pri:hover, a:hover .btn--pri { color: #1a120d; filter: brightness(1.07); }
.btn--pri.btn--sm { padding: 11px 22px; }

/* Secondary button */
.btn--sec {
	padding: 0; gap: 0; color: var(--ink); background: rgba(20, 16, 11, 0.55);
	clip-path: polygon(var(--btn-cut) 0, 100% 0, 100% calc(100% - var(--btn-cut)), calc(100% - var(--btn-cut)) 100%, 0 100%, 0 var(--btn-cut));
}
.btn--sec .btn__in {
	--btn-cut: 8px;
	margin: 1px; padding: 15px 30px; background-color: var(--btn-bg);
	clip-path: polygon(var(--btn-cut) 0, 100% 0, 100% calc(100% - var(--btn-cut)), calc(100% - var(--btn-cut)) 100%, 0 100%, 0 var(--btn-cut));
	transition: background-color 0.25s, color 0.25s;
}
.btn--sec:hover, a:hover .btn--sec { --btn-bg: var(--btn-hover-bg); background: var(--bronze); color: var(--ink); }
.btn--sec.btn--sm .btn__in { padding: 10px 20px; }
.btn--sec.btn--inv { background: rgba(243, 231, 207, 0.55); color: #f3e7cf; }
.btn--sec.btn--inv:hover, a:hover .btn--sec.btn--inv { background: rgba(216, 176, 116, 0.95); color: #f3e7cf; }

/* Tertiary button */
.btn--ter { gap: 11px; }
.btn__chip {
	display: inline-block; width: 9px; height: 9px; flex: none; background: var(--bronze);
	clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
}
.btn--ter .btn__circle { display: none; }
.btn--ter:hover, a:hover .btn--ter { color: var(--burgundy); }
.btn--ter.btn--inv { color: #f3e7cf; }
.btn--ter.btn--inv:hover, a:hover .btn--ter.btn--inv { color: var(--bronze-lt); }

/* Text button */
.btn--text {
	gap: 8px; font-size: 12px; letter-spacing: 0.24em; color: var(--ink);
	border-bottom: 1px solid var(--ink); padding-bottom: 4px;
}
.btn--text:hover { color: var(--gold); border-color: var(--gold); }

/* Binary switch: label/input pairs or aria-pressed buttons */
.switch {
	display: flex;
	width: max-content;
	padding: 4px;
	border: 1px solid var(--line-gold);
	border-radius: 999px;
	background: rgba(168, 126, 48, 0.08);
}
.switch__opt { display: flex; }
.switch__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}
.switch__face {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 10px 24px;
	border-radius: 999px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-faint);
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.switch__face svg { flex: none; opacity: 0.65; transition: opacity 0.25s ease; }
.switch__face:hover { color: var(--gold-deep); }
.switch__input:checked + .switch__face,
.switch__face.is-on {
	background: var(--cream);
	color: var(--gold-deep);
	box-shadow: 0 1px 2px rgba(20, 16, 11, 0.08), 0 6px 18px rgba(138, 106, 36, 0.18);
}
.switch__input:checked + .switch__face svg,
.switch__face.is-on svg { opacity: 1; }
.switch__input:focus-visible + .switch__face {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

/* Compact links and labels */
.chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 15px;
	border: 1px solid rgba(20, 16, 11, 0.18);
	background: rgba(255, 255, 255, 0.5);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink);
	transition: border-color 0.25s, transform 0.25s, background 0.25s;
}
a.chip:hover {
	border-color: var(--ink);
	background: #fff;
	transform: translateY(-2px);
	color: var(--ink);
}
.chip__arr { color: var(--gold-deep); }