/* Hallmark · macrostructure: Index-First (contact as a list of direct actions) · tokens per design.md
 * page: contact · distinct macrostructure · pre-emit critique: P4 H4 E4 S4 R4 V4
 */
@import url("tokens.css");

.contact {
  padding-top: calc(var(--space-4xl) + var(--space-xl));
  padding-bottom: var(--space-3xl);
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--space-2xl);
  align-items: start;
}
.contact__index h1 { max-width: 10ch; }
.contact__index > p { color: var(--color-ink-2); }

.contact__list {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  border-top: 1px solid var(--color-rule);
}
.contact__list a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--color-rule);
  text-decoration: none;
  color: var(--color-ink);
  transition: padding-left var(--dur-short) var(--ease-out);
}
.contact__list a:hover { padding-left: var(--space-sm); }
.contact__list b {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.1;
}
.contact__list span {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-gold);
  white-space: nowrap;
}
.contact__list small {
  grid-column: 1 / -1;
  font-size: var(--text-base);
  color: var(--color-muted);
}

.contact__area {
  margin-top: var(--space-xl);
  border-left: 2px solid var(--color-accent);
  padding-left: var(--space-md);
  font-size: var(--text-base);
  color: var(--color-ink-2);
}
.contact__area b { color: var(--color-ink); }

.contact form {
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  padding: var(--space-xl);
}
.contact form h2 { font-size: var(--text-2xl); }
.form-note { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-success); }
@media (max-width: 60rem) { .contact { grid-template-columns: 1fr; } }

/* reveal */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }