/* contact.css — styles specific to the Contact page */

body{ min-height:100vh; }
.wrap{ display:flex; flex-direction:column; min-height: calc(100vh - 7rem); }

.contact-main{ flex:1; display:flex; flex-direction:column; justify-content:center; max-width: 640px; }
.contact-main h1{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size: clamp(2rem, 4.5vw, 2.9rem); line-height:1.08; letter-spacing:-0.015em; margin-bottom:1.1rem; }
.contact-main p.lede{ font-size:1.05rem; color:var(--ink-soft); line-height:1.65; margin-bottom:2.2rem; max-width:52ch; }

.email-card{
  position:relative; display:inline-flex; align-items:center; gap:1rem; flex-wrap:wrap;
  background:#fdfbf5; border:1px solid var(--ink); box-shadow:4px 5px 0 rgba(38,36,33,0.16);
  padding:1.3rem 1.6rem; transform: rotate(-.7deg) translateZ(0); margin-bottom:2.2rem; width:fit-content;
  will-change: transform; backface-visibility: hidden;
}
.email-pin{ position:absolute; top:-9px; left:26px; width:16px; height:16px; border-radius:50%; background:var(--accent); border:1px solid var(--accent-deep); }
.email-text{ font-family:'IBM Plex Mono',monospace; font-size:1.15rem; color:var(--ink); }
.copy-btn{
  font-family:'IBM Plex Mono',monospace; font-size:.75rem; border:1.3px solid var(--ink); background:none;
  padding:.5rem .9rem; cursor:pointer; color:var(--ink); transition: background .15s ease, color .15s ease;
}
.copy-btn:hover{ background:var(--ink); color:#fdfbf5; }
.copy-btn.copied{ background:var(--accent-deep); border-color:var(--accent-deep); color:#fdfbf5; }

.mailto-link{
  display:inline-flex; align-items:center; gap:.5rem; font-size:.95rem; font-weight:500;
  color:var(--ink); border:1px solid var(--ink); padding:.8rem 1.3rem; background:#fdfbf5;
  box-shadow:2px 3px 0 rgba(38,36,33,0.12); text-decoration:none; width:fit-content;
  transition: transform .18s ease, box-shadow .18s ease;
}
.mailto-link:hover{ transform: translateY(-2px); box-shadow:3px 4px 0 rgba(38,36,33,0.16); }

.note{ font-size:.82rem; color:var(--ink-soft); margin-top:2rem; max-width:48ch; line-height:1.6; }

@media (max-width: 620px){
  .email-card{ flex-direction:column; align-items:flex-start; gap:.8rem; }
}