/* VH3 — engineering blueprint identity */

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

html, body {
  height: 100%;
  background: #0a0a0a;
  color: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── Subtle stars in the background ─── */
.stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.stars span {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #ffffff;
  border-radius: 50%;
}
.stars span:nth-child(1)  { top: 12%; left: 8%;  opacity: 0.5; }
.stars span:nth-child(2)  { top: 18%; left: 32%; opacity: 0.4; width: 1.5px; height: 1.5px; }
.stars span:nth-child(3)  { top: 8%;  left: 78%; opacity: 0.5; }
.stars span:nth-child(4)  { top: 22%; left: 92%; opacity: 0.35; width: 1.5px; height: 1.5px; }
.stars span:nth-child(5)  { top: 64%; left: 6%;  opacity: 0.4; }
.stars span:nth-child(6)  { top: 82%; left: 88%; opacity: 0.45; }
.stars span:nth-child(7)  { top: 38%; left: 2%;  opacity: 0.3; width: 1.5px; height: 1.5px; }
.stars span:nth-child(8)  { top: 76%; left: 30%; opacity: 0.4; }

/* ─── Corner crop marks (engineering plate) ─── */
.corner-marks {
  position: absolute;
  inset: 24px;
  pointer-events: none;
}
.corner-marks span {
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: #d4af37;
  border-style: solid;
  opacity: 0.4;
}
.corner-marks .tl { top: 0;    left: 0;    border-width: 1px 0 0 1px; }
.corner-marks .tr { top: 0;    right: 0;   border-width: 1px 1px 0 0; }
.corner-marks .bl { bottom: 0; left: 0;    border-width: 0 0 1px 1px; }
.corner-marks .br { bottom: 0; right: 0;   border-width: 0 1px 1px 0; }

/* ─── The stamp (centered) ─── */
.stamp {
  position: relative;
  z-index: 2;
  width: min(580px, 92vw);
  text-align: center;
  font-family: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  color: #d4af37;
  opacity: 0.85;
}

.barcode {
  display: flex;
  justify-content: center;
  gap: 1px;
  margin-bottom: 14px;
  height: 28px;
  align-items: stretch;
}
.barcode span {
  display: block;
  background: #d4af37;
  width: 1px;
  opacity: 0.85;
}
.barcode span.w2 { width: 2px; }
.barcode span.w3 { width: 3px; }
.barcode span.t  { opacity: 0.4; }

.stamp-line {
  font-size: 12px;
  letter-spacing: 0.18em;
  margin-bottom: 6px;
}
.stamp-line:last-child {
  margin-bottom: 0;
  opacity: 0.7;
  font-size: 11px;
}

/* ─── Mobile (smaller stamp) ─── */
@media (max-width: 600px) {
  .stamp-line { font-size: 10px; letter-spacing: 0.12em; }
  .stamp-line:last-child { font-size: 9px; }
  .barcode { height: 22px; margin-bottom: 10px; }
}

/* ─── Accessibility ─── */
@media (prefers-reduced-motion: reduce) {
  .dot { animation: none; }
}