/* ========================================================================== Contact + footer */

.contact-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-16);
  align-items: start;
}
.contact-inner .section-head { grid-column: 1 / -1; }

.contact-form { display: grid; gap: var(--s-8); }

.field { display: grid; gap: var(--s-3); }
.field label,
.field legend {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.field input,
.field textarea {
  width: 100%;
  padding: var(--s-4) var(--s-5);
  min-height: 48px;
  background: var(--surface-1);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-1);
  color: var(--text-1);
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.field input:hover, .field textarea:hover { border-color: var(--rule); }
.field input:focus, .field textarea:focus { border-color: var(--gold-500); background: var(--surface-2); }
.field textarea { resize: vertical; }

.field-group { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-3); }

.field-error { color: #FF9B8A; font-family: var(--font-mono); font-size: var(--step--1); }
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #FF9B8A; }

.chips { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--s-3) var(--s-6);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .08em;
  color: var(--text-2);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.chip input:checked + span { border-color: var(--gold-500); color: var(--gold-500); background: rgba(229,180,95,.07); }
.chip input:focus-visible + span { outline: 2px solid var(--gold-500); outline-offset: 3px; }

.contact-submit { justify-self: start; margin-top: var(--s-2); }
.form-status { min-height: 1.5em; color: var(--text-3); }
.form-status[data-state="ok"] { color: var(--gold-500); }
.form-status[data-state="error"] { color: #FF9B8A; }

.contact-direct { display: grid; gap: var(--s-3); align-content: start; }
.contact-direct p { margin: 0; }
.contact-direct a {
  color: var(--text-1);
  border-bottom: 1px solid var(--hairline);
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.contact-direct a:hover { color: var(--gold-500); border-bottom-color: var(--gold-500); }

@media (max-width: 860px) {
  .contact-inner { grid-template-columns: 1fr; }
}

/* ---- Footer ------------------------------------------------------------ */

.footer {
  position: relative;
  z-index: var(--z-content);
  padding-block: var(--s-24) var(--s-8);
  border-top: 1px solid var(--hairline-2);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.5));
}

/* The wordmark runs forever — the infinity half of the brand idea, stated
   without a word of copy. Eight units, translated -50%: the track is two
   identical halves, so the wrap point is invisible. */
.footer-word-marquee {
  overflow: hidden;
  max-width: 100vw;
  margin-bottom: var(--s-12);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.footer-word-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: footer-word 42s linear infinite;
}
.footer-word-marquee:hover .footer-word-track { animation-play-state: paused; }

@keyframes footer-word {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.footer-word-unit {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-right: clamp(1.5rem, 4vw, 4rem);
  font-family: var(--font-display);
  font-weight: 300;
  /* Deliberately NOT --step-mega: at 256px only "COSMIC SH" fits the frame,
     so the wordmark never reads as a word. This size lets a whole unit pass
     through view. */
  font-size: clamp(2.75rem, 7vw, 7rem);
  line-height: 1;
  letter-spacing: -.03em;
  white-space: nowrap;
}

/* Each wordmark carries its own gold sweep rather than sharing one
   background across the whole track, which would break as it scrolls. */
.footer-word-unit > .gold {
  background: linear-gradient(105deg, #8A6526, #F7E3BC 45%, #E5B45F 60%, #8A6526);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.footer-star {
  font-size: .28em;
  color: var(--gold-600);
  opacity: .7;
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  padding-top: var(--s-8);
  border-top: 1px solid var(--hairline-2);
}
.footer-meta p { margin: 0; color: var(--text-3); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--s-6); }
.footer-links a { color: var(--text-3); transition: color var(--dur-1) var(--ease); }
.footer-links a:hover { color: var(--gold-500); }