/* ──────────────────────────────────────────────────────────────
   VUELCO — production enhancements (additive; loaded after styles.css)
   Strictly monochrome, built only from the existing design tokens.
   Covers what the approved mailto: form did not need: the honeypot,
   accessible form states (error / sending / success), and the legal
   pages. No approved styling is overridden beyond these additions.
   ────────────────────────────────────────────────────────────── */

/* ── Honeypot: off-screen, never shown, never focusable by humans ── */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ── Contact form — production states (monochrome) ──
   Error is signalled by an emphasized underline + brightened label +
   an aria-live message (not colour alone), keeping the strict palette. */
.field.is-error input,
.field.is-error select,
.field.is-error textarea {
  border-bottom-color: rgba(244, 244, 245, 0.85);
}
.field.is-error label {
  color: var(--on-dark);
}

.contact__form-note.is-error,
.contact__form-note.is-success {
  color: var(--on-dark);
}

/* sending: quiet the submit control while the request is in flight */
.contact__submit:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
}
.contact__form.is-sending {
  cursor: progress;
}

/* ── Legal pages (paper, editorial, sober) ──
   Reuse the site's type system + tokens; no new visual language. */
.legal {
  min-height: 100svh;
  background: var(--paper);
  color: var(--char);
  padding: clamp(84px, 12vh, 150px) var(--pad) clamp(64px, 9vh, 110px);
}
.legal__inner {
  max-width: 760px;
  margin: 0 auto;
}
.legal__back {
  display: inline-block;
  margin-bottom: clamp(28px, 5vh, 52px);
  color: var(--mineral);
}
.legal__back:hover {
  color: var(--ink);
}
.legal__label {
  display: block;
  margin-bottom: 18px;
}
.legal__title {
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1.03;
  font-size: clamp(34px, 5vw, 64px);
  color: var(--ink);
  margin-bottom: clamp(28px, 5vh, 48px);
}
.legal__body h2 {
  font-weight: 400;
  font-size: clamp(19px, 2vw, 24px);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: clamp(30px, 4.5vh, 46px) 0 12px;
}
.legal__body h3 {
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
  margin: 22px 0 8px;
}
.legal__body p,
.legal__body li {
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--char);
  max-width: 62ch;
}
.legal__body p {
  margin-bottom: 14px;
}
.legal__body ul {
  margin: 4px 0 16px 1.1em;
}
.legal__body li {
  margin-bottom: 6px;
}
.legal__body a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line);
}
.legal__body a:hover {
  text-decoration-color: var(--ink);
}
.legal__body strong {
  font-weight: 500;
  color: var(--ink);
}
.legal__note {
  margin-top: clamp(30px, 5vh, 48px);
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--mineral);
  text-transform: uppercase;
}
.legal__updated {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--mineral-lo);
}

@media (prefers-reduced-motion: reduce) {
  .contact__submit,
  .legal__back {
    transition: none !important;
  }
}