/* Contact — lettered panel, quiet form room */

.contact-page {
  padding-block: clamp(2.5rem, 7vw, 4.5rem) var(--section-y);
}

.contact-hero {
  width: min(var(--measure-hero), calc(100% - 2 * var(--gutter)));
  max-width: min(var(--measure-hero), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

.contact-hero .section__title {
  font-size: var(--text-3xl);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
}

.contact-hero .section__lead {
  max-width: 34rem;
}

.contact-panel {
  max-width: min(var(--measure) + 4rem, calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 2.5rem);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--color-stone-100) 45%, var(--color-bg-elevated)),
    var(--color-bg-elevated) 55%,
    color-mix(in srgb, var(--color-ivory) 70%, var(--color-bg-elevated))
  );
  border-radius: var(--radius-arch-soft);
  border: 1px solid color-mix(in srgb, var(--color-stone-200) 88%, transparent);
  box-shadow:
    var(--shadow-soft),
    inset 0 1px 0 color-mix(in srgb, var(--color-gold-muted) 22%, transparent);
  position: relative;
}

.contact-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--frame-liner);
  opacity: 0.85;
}

.contact-panel__inner {
  position: relative;
  z-index: 1;
}

.contact-panel__cap {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% -35%;
  width: min(38%, 9rem);
  height: 0.45rem;
  border-radius: var(--radius-arch-soft);
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--color-gold-muted) 55%, transparent),
    transparent
  );
  opacity: 0.9;
  pointer-events: none;
}

.contact-panel p {
  margin: 0 0 1rem;
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
  font-size: var(--text-base);
}

.contact-panel p:last-of-type {
  margin-bottom: 1.5rem;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1rem;
}