.contact-methods {
    display: flex;
    flex-direction: column;

    gap: var(--space-4);
}
.contact {
    background: var(--blue-a2);
    border: 1px solid var(--blue-a8);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
}
.contact__type {
    font-size: var(--text-2xl);
    display: flex;
    flex-direction: row;
    align-items: center;

    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.contact__icon {
    height: 32px;
    width: auto;
}
.contact__detail {
    color: var(--text-muted);
    text-decoration: none;
}

/* Mac window chrome wrapping the contact form */
.mac-window {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--gray-2);
    border: 1px solid var(--gray-a5);
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.5);
}
.mac-window__titlebar {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--gray-3);
    border-bottom: 1px solid var(--gray-a5);
}
.mac-window__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.mac-window__dot--red {
    background: #ff5f57;
}
.mac-window__dot--yellow {
    background: #febc2e;
}
.mac-window__dot--green {
    background: #28c840;
}
.mac-window__body {
    padding: var(--space-6);
}

/* Form */
.form {
    display: flex;
    flex-direction: column;

    gap: var(--space-3);
}
.form__legend {
    margin-bottom: var(--space-2);
}

.form-group {
    display: flex;
    flex-direction: column;

    gap: var(--space-1);
}
.form__input {
    padding: var(--space-3);
}
.form__text-area {
    padding: var(--space-3);
}