/* Homepage snapshot-first hero (2026-06-09). Layered on styles.css + snapshot.css.
   Loaded by index.html only. The form/result markup is mirrored from
   snapshot.html and powered by the untouched js/snapshot.js. */

/* Base .hero__grid is align-items: end (styles.css); a tall form card
   needs top alignment so the h1 and card start together. */
.hero--snap .hero__grid {
  align-items: start;
}

/* The snapshot card frame. Paper on paper, so it earns its edge with the
   ink border and the accent top bar. */
.home-snap {
  border: 3px solid var(--ink);
  border-top: 8px solid var(--accent);
  background: var(--paper);
  padding: clamp(1.25rem, 2.5vw, 2rem);
}

.home-snap__title {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 900;
  line-height: 1.15;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}

.home-snap__sub {
  font-size: 14px;
  color: var(--slate-700);
  margin: 0 0 16px;
}

/* snapshot.css centers the form at 640px and gives the submit a 240px
   floor; inside the card both fight the column. */
.home-snap .snapshot-form {
  max-width: none;
  margin: 0;
}

.home-snap .snapshot-form__submit {
  width: 100%;
  min-width: 0;
}

.home-snap__noscript {
  font-size: 13px;
  color: var(--slate-700);
  margin-top: 12px;
}

/* Result/error land between the hero grid and the engine strip.
   scroll-margin keeps the smooth scroll (snapshot.js) clear of the
   sticky header. */
.hero--snap #snapshot-result {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.hero--snap #snapshot-result,
.hero--snap #snapshot-error {
  scroll-margin-top: 5rem;
}