.contact-form {
	margin-top: var(--rt-space-md);
	max-width: 36rem;
}

.contact-form__intro {
	margin: 0 0 1rem;
	color: var(--rt-color-ink);
}

.contact-form__hint {
	margin: 0 0 1rem;
	font-size: 0.9rem;
	color: var(--rt-color-muscovado);
}

.contact-form__required {
	color: var(--rt-color-coffee);
	margin-left: 0.15rem;
}

.contact-form__notice {
	padding: 0.85rem 1rem;
	margin: 0 0 1rem;
	border: 1px solid var(--rt-color-wood);
}

.contact-form__notice--ok {
	background: rgba(30, 58, 47, 0.12);
	color: var(--rt-color-forest-deep);
}

.contact-form__notice--error {
	background: rgba(102, 49, 33, 0.12);
	color: var(--rt-color-coffee);
}

.contact-form__field {
	margin: 0 0 1rem;
}

.contact-form__field--honeypot {
	position: absolute;
	left: -9999px;
	height: 0;
	overflow: hidden;
}

.contact-form__label {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--rt-font-display);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--rt-color-forest);
}

.contact-form__input,
.contact-form__textarea,
.contact-form__select {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--rt-color-wood);
	background: rgba(250, 246, 238, 0.9);
	color: var(--rt-color-ink);
	font: inherit;
	border-radius: 0;
}

.contact-form__select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--rt-color-forest) 50%),
		linear-gradient(135deg, var(--rt-color-forest) 50%, transparent 50%);
	background-position: calc(100% - 1.1rem) calc(50% - 0.15rem), calc(100% - 0.75rem) calc(50% - 0.15rem);
	background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
	background-repeat: no-repeat;
	padding-right: 2.25rem;
}

.contact-form__input:focus,
.contact-form__textarea:focus,
.contact-form__select:focus {
	outline: 2px solid var(--rt-color-forest);
	outline-offset: 1px;
}

.contact-form__actions {
	margin: 1.25rem 0 0;
}

.contact-form__submit {
	border: 2px solid var(--rt-color-wood);
}

@media (max-width: 640px) {
	.contact-form {
		max-width: none;
	}

	.contact-form__submit {
		width: 100%;
	}
}