/* Contact section on the public site. */

.contact {
  background: var(--paper);
  border-top: 1px solid var(--line);
}

/* Same four columns as the desk cards below, so the intro line starts exactly where
   the Office column does instead of floating at an arbitrary distance from the edge. */
.contact-head {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  gap: 40px 25px;
  margin-bottom: 56px;
}

.contact-head > div { grid-column: 1 / 3; }

.contact-head h2 {
  font: clamp(46px, 5vw, 78px) / .9 var(--display);
  font-weight: 500;
  letter-spacing: -.068em;
  margin: 0;
}

.contact-head h2 em {
  font-family: Georgia, serif;
  font-weight: 400;
  letter-spacing: -.1em;
  color: var(--red);
}

.contact-head > p {
  grid-column: 3 / 5;
  max-width: 360px;
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.75;
  color: #646464;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}

.contact-grid article {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 18px;
  border-top: 2px solid var(--black);
}

.contact-label { font: 9px var(--mono); letter-spacing: .08em; color: #777; }
.contact-note { margin: 0 0 6px; font-size: 12px; line-height: 1.6; color: #666; }

.contact-line {
  margin: 0;
  font: 500 clamp(17px, 1.6vw, 21px) / 1.3 var(--display);
  letter-spacing: -.03em;
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}

a.contact-line { transition: color .2s ease; }
a.contact-line:hover { color: var(--red); }
.contact-grid .text-link { align-self: flex-start; margin-top: 8px; }

@media (max-width: 1030px) {
  .contact-grid,
  .contact-head { grid-template-columns: 1fr 1fr; }
  .contact-head > div { grid-column: 1; }
  .contact-head > p { grid-column: 2; }
}

@media (max-width: 800px) {
  .contact-head { display: block; margin-bottom: 42px; }
  .contact-head > p { margin: 25px 0 0; }
}

@media (max-width: 460px) {
  .contact-grid { grid-template-columns: 1fr; }
}

.dark .contact { background: #161617; border-color: #303031; color: #f4f3f1; }
.dark .contact-grid article { border-color: #f4f3f1; }
.dark .contact-head > p,
.dark .contact-note { color: #aaa; }