/* Contact preview only. The header character is styled with the header. */
.contact-preview {
  width: min(560px, calc(100% - 32px));
  max-width: calc(100% - 32px);
  max-height: 90vh;
  max-height: 90svh;
  margin: auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid #424347;
  border-radius: 4px;
  background: #17181a;
  color: var(--ink, #f2eee8);
  box-shadow: 0 24px 100px rgb(0 0 0 / .55);
  font-family: var(--sans, Manrope, sans-serif);
}
.contact-preview::backdrop { background: rgb(5 6 7 / .78); backdrop-filter: blur(8px); }
.contact-preview *, .contact-preview *::before, .contact-preview *::after { box-sizing: border-box; }
.contact-preview__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 53px;
  padding: 5px 10px 5px 25px;
  border-bottom: 1px solid #303236;
  background: #1d1e21;
}
.contact-preview__label { color: #acaeaf; font: 10px var(--ui, 'Space Grotesk', sans-serif); letter-spacing: .12em; }
.contact-preview__close {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: #bdbfc1;
  cursor: pointer;
  transition: color .18s, background .18s;
}
.contact-preview__close:hover { background: #303236; color: #f2eee8; }
.contact-preview__close:focus-visible { outline: 2px solid var(--green, #22c55e); outline-offset: -2px; }
.contact-preview__body { padding: 30px 34px 34px; }
.contact-preview h2 { margin: 0; font-family: var(--serif, Georgia, serif); font-size: clamp(50px, 7vw, 68px); font-weight: 400; line-height: 1.06; letter-spacing: -.045em; }
.contact-preview__intro { margin: 12px 0 28px; color: #b6b4ae; font-size: 13px; line-height: 1.6; }
@media (max-width: 460px) {
  .contact-preview__body { padding: 25px 22px 26px; }
  .contact-preview__bar { padding-left: 22px; }
  .contact-preview__intro { margin-bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-preview__close { transition: none; }
  .contact-preview::backdrop { backdrop-filter: none; }
}