/* ============================================================================
   site.css — shared chrome for the HazSight site.
   Base reset, layout, sticky nav header, and legal footer. Imported by
   index.html and every legal page so the header/footer are identical.
   Depends on tokens.css (design tokens / light palette).
   Source design: hazsight-ui "HazSight Site.html".
   ========================================================================== */

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

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-feature-settings: "ss01" 1, "cv11" 1;
  -webkit-font-smoothing: antialiased;
}
body { min-height: 100vh; }
::selection { background: var(--accent-soft); color: var(--ink); }
a { color: inherit; text-decoration: none; }

/* Visible, on-brand keyboard focus (replaces the faint UA default). */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav__cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- layout primitives ---------- */
.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--ink-100);
}
.nav__inner {
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.brand .haz { color: var(--ink); }
.brand .sight { color: var(--ink-400); }
.brand .mark { width: 22px; height: 22px; display: inline-block; color: var(--ink); }

.nav__right { display: flex; align-items: center; gap: 14px; }
.nav__by {
  display: inline-flex;
  align-items: center;
  padding: 8px 2px;
  font-size: 12.5px;
  color: var(--ink-400);
  transition: color var(--duration-fast) var(--ease-out);
}
.nav__by:hover { color: var(--ink-700); }
.nav__by .arr { color: var(--ink-400); }

.nav__cta {
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  transition: background var(--duration-fast) var(--ease-out);
}
.nav__cta:hover { background: var(--ink-700); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.btn--primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--primary:hover { background: var(--ink-700); }
.btn--ghost { background: var(--bg); color: var(--ink); border-color: var(--ink-200); }
.btn--ghost:hover { background: var(--bg-subtle); border-color: var(--ink-300); }
.btn .icon { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.7; }

/* ---------- legal footer ---------- */
.legal {
  margin-top: 72px;
  border-top: 1px solid var(--ink-100);
  background: var(--bg-subtle);
}
.legal__inner {
  padding: 24px 32px;
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12.5px;
  color: var(--ink-400);
}
.legal__left { display: flex; flex-direction: column; gap: 12px; }
.legal__copy { display: inline-flex; align-items: center; gap: 10px; }
.legal__copy .dot {
  width: 4px; height: 4px;
  background: var(--accent);
  border-radius: 1px;
  transform: rotate(45deg);
}
.legal__copy a { color: var(--ink-500); transition: color var(--duration-fast) var(--ease-out); }
.legal__copy a:hover { color: var(--ink); }

.builtby {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--ink-500);
  letter-spacing: -0.005em;
}
.builtby__logo {
  display: inline-flex;
  align-items: center;
  height: 22px;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.builtby__logo:hover { opacity: 0.62; }
.builtby__logo img { height: 22px; width: auto; display: block; }
.builtby__logo--stoaria img { height: 21px; }
.builtby strong { color: var(--ink-700); font-weight: 600; }

.legal__links {
  display: inline-flex; gap: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.legal__links a {
  padding: 8px 12px;
  color: var(--ink-400);
  transition: color var(--duration-fast) var(--ease-out);
  border-right: 1px solid var(--ink-100);
}
.legal__links a:last-child { border-right: none; }
.legal__links a:hover { color: var(--ink); }

/* ---------- responsive (chrome) ---------- */
@media (max-width: 760px) {
  .wrap { padding: 0 22px; }
  .nav__by { display: none; }
  .legal__inner { padding: 18px 22px; flex-direction: column; align-items: flex-start; }
  .builtby { flex-wrap: wrap; gap: 7px; }
}

/* Honor reduced-motion: the launch countdown stays (it is content, not motion),
   but all transitions/animations collapse to near-instant. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}