.contact-page {
max-width: none;
font-family: var(--font-sans);
}
.contact-page > .contact-page__intro {
display: grid;
grid-template-columns: 1fr 1.6fr;
align-items: end;
gap: var(--space-xl);
margin-block: var(--space-lg) var(--space-xl);
}
.contact-page .info-doc__eyebrow {
margin: 0 0 var(--space-md);
font-family: var(--font-sans);
font-size: var(--font-size-2xs);
color: var(--color-accent-ink);
}
.contact-page .info-doc__title {
margin: 0;
font-family: var(--font-title-serif);
font-size: clamp(2.5rem, 4vw, 3.2rem);
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.025em;
}
.contact-page .contact-page__lede {
max-width: 54ch;
margin: 0;
font-family: var(--font-sans);
font-size: var(--font-size-base);
line-height: var(--leading-loose);
color: var(--color-text-muted);
}
.contact-page .contact-routes,
.contact-page__intake {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: var(--space-xl);
padding-block: var(--space-xl);
margin: 0;
border-top: 1px solid var(--color-border);
}
.contact-page .contact-kicker {
margin: 0;
font-family: var(--font-title-serif);
font-size: var(--font-size-4xl);
font-weight: 600;
line-height: var(--leading-tight);
letter-spacing: -0.015em;
text-transform: none;
color: var(--color-text);
}
.contact-page .contact-routes__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-lg) var(--space-xl);
padding: 0;
margin: 0;
border: none;
}
.contact-page .contact-route {
grid-template-columns: 1.5rem minmax(0, 1fr);
align-content: start;
gap: var(--space-sm);
min-width: 0;
margin: 0;
padding: var(--space-lg) 0 0;
border-top: 1px solid var(--lectern-seam);
border-bottom: none;
}
.contact-page .contact-route:first-child {
grid-column: 1 / -1;
padding-top: 0;
border-top: none;
}
.contact-page .contact-route__num {
padding-top: 0.55em;
color: var(--color-accent-ink);
}
.contact-page .contact-route__title {
margin: 0 0 var(--space-sm);
font-family: var(--font-title-serif);
font-size: var(--font-size-2xl);
font-weight: 600;
line-height: var(--leading-tight);
}
.contact-page .contact-route p {
font-family: var(--font-sans);
font-size: var(--font-size-md);
line-height: var(--leading-relaxed);
}
.contact-page__form-body {
min-width: 0;
}
.contact-page .contact-direct {
margin: 0 0 var(--space-lg);
font-size: var(--font-size-md);
line-height: var(--leading-relaxed);
}
.contact-page a {
border-bottom: none;
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
text-underline-offset: 3px;
overflow-wrap: anywhere;
transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}
.contact-page a:hover,
.contact-page a:focus-visible {
text-decoration-color: currentcolor;
}
.contact-page .form-group {
margin-bottom: var(--space-lg);
}
.contact-page .form-input,
.contact-page .form-select {
min-height: var(--control-h);
}
.contact-page .contact-send {
margin-top: 0;
}
@media (width <= 967px) {
.contact-page > .contact-page__intro,
.contact-page .contact-routes,
.contact-page__intake {
gap: var(--space-lg);
}
.contact-page .contact-routes,
.contact-page__intake {
grid-template-columns: 180px minmax(0, 1fr);
}
.contact-page .contact-routes__list {
gap: var(--space-lg);
}
}
@media (width <= 715px) {
.contact-page > .contact-page__intro,
.contact-page .contact-routes,
.contact-page__intake {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-lg);
}
.contact-page > .contact-page__intro {
margin-block: var(--space-md) var(--space-lg);
}
.contact-page .contact-routes,
.contact-page__intake {
padding-block: var(--space-lg);
}
.contact-page .contact-kicker {
font-size: var(--font-size-3xl);
}
}
@media (width <= 640px) {
.contact-page .contact-routes__list {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-md);
}
.contact-page .contact-route {
padding-top: var(--space-md);
}
}
#form-messages:focus {
outline: none;
box-shadow: none;
}