/* ===== Contact page ===== */

/* Page wrapper spacing under the fixed header — match Work/About */
#contact-page .contact-wrap {
  color: #fff;
  background: #000;

  /* readable line length + centered container */
  max-width: 68ch;
  margin: 0 auto 80px;

  /* spacing under fixed header (fallbacks included) */
  padding: calc(var(--header-h-desktop, 72px) + 40px) 60px 80px;
}

/* Title — identical to About/Work */
.contact-hero h1 {
  font-family: 'FuturaCyrillicDemi', sans-serif;
  font-size: 44px;
  text-align: center;
  margin-bottom: 16px;
}

/* Address / email lines under the title */
.contact-hero .muted {
  text-align: left;         /* left-align body copy */
  color: #fff;
  margin: 8px 0;
  line-height: 1.6;
  font-size: 18px;
}

/* Links block */
.contact-links {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;   /* left-align links */
}

/* Link look + subtle underline-on-hover like elsewhere */
.contact-links a {
  color: #fff;
  text-decoration: none;
  position: relative;
  font-size: 18px;
}

.contact-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 1px;
  width: 0%;
  background: #fff;
  opacity: 0;
  transition: width .25s ease, opacity .25s ease;
}

.contact-links a:hover::after {
  width: 100%;
  opacity: 1;
}

/* General body copy consistency (Formafantasma-style left align) */
#contact-page .contact-wrap p,
#contact-page .contact-wrap li,
#contact-page .contact-wrap a {
  text-align: left !important;
  line-height: 1.6;
  hyphens: auto;
}

/* ===== Responsive ===== */
@media (max-width: 680px) {
  #contact-page .contact-wrap {
    padding: calc(var(--header-h-mobile, 56px) + 24px) 24px 60px;
  }
  .contact-hero .muted,
  .contact-links a {
    font-size: 16px;
  }
}

/* === Contact: keep text centered === */
#contact-page .contact-wrap { text-align: center; }

.contact-hero .muted { 
  text-align: center; 
}

.contact-links { 
  align-items: center;         /* center the link list */
}

.contact-links a { 
  display: inline-block;       /* keep the underline animation tidy when centered */
}

/* override the previous left-align block */
#contact-page .contact-wrap p,
#contact-page .contact-wrap li,
#contact-page .contact-wrap a {
  text-align: center !important;
}