/* Casa de la Zorra — holding page
   Type and spacing interpolate linearly between the two Figma artboards
   (375 and 1920), so every clamp below matches the design at both ends. */

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/cinzel-600-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(assets/fonts/montserrat-latin.woff2) format('woff2');
}

:root {
  --charcoal: #262626;
  --cream: #f4f1de;
  --terracotta: #de5f3f;
  --terracotta-lift: #e8724f;
  --field: #1b1b1b;
  --field-line: #333;
  /* Lifted off the artboard's #706e6d, which sat at 2.9:1 on the field. */
  --placeholder: #8a8785;

  --serif: 'Cinzel', 'Times New Roman', serif;
  --sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* clamp(mobile, linear, desktop) — see header note */
  --logo-w: clamp(161px, 123.62px + 9.97vw, 315px);
  --fs-lede: clamp(22px, 18.6px + 0.91vw, 36px);
  --fs-contact: clamp(16px, 15.27px + 0.19vw, 19px);
  /* Cream on terracotta is a 3.2:1 pairing — it's the brand's, and it only
     clears WCAG as *large* text, which means bold at 19px or over. Do not
     drop this below 19px, and do not unbold it. */
  --fs-button: clamp(19px, 18.5px + 0.13vw, 21px);
  --fs-input: clamp(16px, 15.03px + 0.26vw, 20px);
  --icon: clamp(21px, 20.27px + 0.19vw, 24px);
  --field-h: clamp(50px, 48.06px + 0.52vw, 58px);

  --tile: clamp(190px, 138px + 13.7vw, 400px);

  --gap-logo: clamp(36px, 4.2vw, 80px);
  --gap-lede: clamp(28px, 2.3vw, 44px);
  --gap-form: clamp(40px, 3.6vw, 70px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(32px, 6vh, 72px) 20px;
  background: var(--charcoal);
  color: var(--cream);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* ---------- ground ---------- */

.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* The Huichol-inspired tile from the brand board, run edge to edge. The
   artboards set it at ~756px, which reads as blotches; at a third of that it
   reads as weave. */
.texture,
.edges {
  position: absolute;
  inset: 0;
  background: url(assets/pattern.svg) center / var(--tile) auto repeat;
}

.texture { opacity: 0.18; }

/* A second pass of the *same* weave, in register, brought up along the top and
   bottom edges only — the textile-border framing, without a bare middle. */
.edges {
  opacity: 0.24;
  --edge: clamp(80px, 13vh, 180px);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent var(--edge),
    transparent calc(100% - var(--edge)), #000);
  mask-image: linear-gradient(to bottom, #000, transparent var(--edge),
    transparent calc(100% - var(--edge)), #000);
}

/* Warm pool from above with the corners falling away — the difference between
   a flat swatch and a lit room. Kept low; it should register as warmth, not
   as a visible gradient. */
.light {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(118% 76% at 50% 32%, rgba(222, 95, 63, 0.04), transparent 66%),
    radial-gradient(148% 116% at 50% 50%, transparent 48%, rgba(0, 0, 0, 0.46));
}

.stack {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 1022px;
}

/* ---------- logo ---------- */

.logo { margin: 0; }

.logo img {
  display: block;
  width: var(--logo-w);
  height: auto;
}

/* ---------- signup ---------- */

.signup {
  width: 100%;
  margin-top: var(--gap-logo);
}

/* Cinzel is an inscriptional face — it wants the tracking. Set solid it reads
   cramped; letterspaced it reads carved. */
.lede {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--fs-lede);
  line-height: 1.32;
  letter-spacing: 0.075em;
  color: var(--cream);
  text-wrap: balance;
}

/* 342px wide on the 375 artboard, 880px at desktop — held to a ratio between,
   so the field never runs the full width of a laptop. */
.field {
  display: flex;
  gap: 12px;
  width: min(100%, clamp(342px, 150px + 38vw, 880px));
  margin: var(--gap-lede) auto 0;
}

.field input,
.field button {
  height: var(--field-h);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: var(--fs-input);
  transition: border-color 0.22s, background-color 0.22s, transform 0.22s;
}

.field input {
  flex: 1;
  min-width: 0;
  padding: 0 clamp(20px, 1.4vw, 28px);
  background: var(--field);
  border: 1px solid var(--field-line);
  color: var(--cream);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.field input::placeholder { color: var(--placeholder); }
.field input:hover { border-color: #454545; }
.field input:focus { outline: none; border-color: var(--terracotta); }

.field button {
  flex: none;
  width: clamp(130px, 9.9vw, 190px);
  border: 1px solid var(--terracotta);
  background: var(--terracotta);
  color: var(--cream);
  font-size: var(--fs-button);
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.field button:hover:not(:disabled) {
  background: var(--terracotta-lift);
  border-color: var(--terracotta-lift);
  transform: translateY(-1px);
}

.field button:active { transform: none; }
.field button:disabled { opacity: 0.6; cursor: default; }

/* Reserved so the layout does not jump when a message appears. */
.status {
  margin: 12px 0 0;
  min-height: 1.4em;
  font-size: clamp(13px, 0.73vw, 14px);
  line-height: 1.4;
  color: var(--placeholder);
  opacity: 0;
  transition: opacity 0.2s;
}

.status.is-visible { opacity: 1; }
.status.is-ok { color: var(--cream); }
.status.is-error { color: var(--terracotta); }
.status a { color: inherit; }

.trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- contact ---------- */

/* Deliberately quiet. On the artboards these were 32px SemiBold with 48px
   icons — level with the headline, and the least important thing on the page. */
.contact {
  list-style: none;
  margin: var(--gap-form) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 0.9vw, 16px);
}

.contact a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(244, 241, 222, 0.62);
  font-size: var(--fs-contact);
  font-weight: 500;
  letter-spacing: 0.045em;
  text-decoration: none;
  transition: color 0.22s;
}

.contact svg {
  flex: none;
  width: var(--icon);
  height: var(--icon);
}

.contact a:hover { color: var(--cream); }

/* Once there's room, one quiet line reads better than a stacked block. */
@media (min-width: 820px) {
  .contact { flex-direction: row; gap: 0; }
  .contact li { padding: 0 clamp(16px, 1.9vw, 34px); }
  .contact li + li { border-left: 1px solid rgba(244, 241, 222, 0.16); }
  .contact li:first-child { padding-left: 0; }
  .contact li:last-child { padding-right: 0; }
}

/* ---------- shared ---------- */

:where(a, input, button):focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: 4px;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@keyframes soak {
  from { opacity: 0; }
  to { opacity: 1; }
}

.logo, .lede, .field, .contact {
  animation: rise 0.95s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.lede { animation-delay: 0.14s; }
.field { animation-delay: 0.26s; }
.contact { animation-delay: 0.38s; }
.bg { animation: soak 1.8s ease both; }

/* The mobile artboard stacks the button under the field. */
@media (max-width: 600px) {
  .field { flex-direction: column; gap: 12px; }
  /* Column flex makes height the main axis, so the input's `flex: 1` would
     otherwise override its height and collapse the field. */
  .field input { flex: none; }
  .field button { width: 100%; }

  /* These are the only tappable things down here. At icon height they were
     ~21px tall — half the 44px touch-target guideline — and sat close enough
     together to mis-tap. The row grows; the type does not. */
  .contact { gap: 4px; }
  .contact a { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
  }
}