/* ============================================================
   contact.css — extends styles.css/pages.css for the Contact
   page. Reuses .page-intro (pages.css) for the hero. New
   components: .contact-panel (two-column layout), .contact-main
   (dark email card, same visual family as .project/.about-story)
   and .contact-links (quiet quick-link list).
   ============================================================ */

.contact-panel{padding:var(--card-inset) 7vw 60px;display:grid;grid-template-columns:1.15fr .85fr;gap:6vw;align-items:start}

.contact-main{background:var(--forest);color:var(--white);border-radius:120px 20px 20px 20px;padding:60px 5vw}
.contact-main .kicker{color:var(--lime);display:block;margin-bottom:16px}
.contact-email{display:inline-flex;align-items:baseline;gap:12px;font-size:var(--fs-h2-sm);letter-spacing:-.03em;font-weight:700;border-bottom:2px solid var(--lime);padding-bottom:12px}
.contact-email span{font-size:.6em}
.contact-location{margin-top:28px;font-size:var(--fs-xs);opacity:.75}

.contact-links{display:flex;flex-direction:column;gap:20px;padding:36px 0 0;position:relative;isolation:isolate}
.contact-links .kicker{display:block;margin-bottom:6px}
.contact-links a{font-size:var(--fs-sm);font-weight:600;border-bottom:1px solid transparent;width:fit-content;padding-bottom:2px}
.contact-links a:hover{border-bottom-color:currentColor}

.contact-form-panel{padding:0 7vw var(--card-inset)}
.contact-form-head{max-width:760px;margin:0 auto 28px}
.contact-form-head h2{font-size:var(--fs-h3);letter-spacing:-.03em;margin:8px 0 0}
.contact-form-panel .inquiry-form{max-width:760px;margin:0 auto}

@media(max-width:1000px){
  .contact-panel{grid-template-columns:1fr;gap:40px}
}
@media(max-width:650px){
  .contact-panel{padding:var(--card-inset) 6vw 50px}
  .contact-main{padding:44px 6vw;border-radius:70px 16px 16px 16px}
  .contact-form-panel{padding:0 6vw var(--card-inset)}
}
@media(max-width:360px){
  /* "contact@atsf.ch" is a single unbreakable token. At the default size
     it measures 281px — the entire content box at 320px — so the card's
     min-content width grew past its own column and pushed the page
     sideways. Breaking an email address mid-word would be worse than
     setting it a little smaller, so it is set smaller. */
  .contact-email{font-size:26px}
}