/* Dominia — the nav and the buttons. (Was css/hero.css; the old hero's rules left with it — the hero is css/hero-video.css.) */

/* ---------------------------------------------------------------- nav */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  border-bottom: 1px solid var(--hairline-strong);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  height: 52px;
}

/* 14.4px, not 18. Probed on the bar: its visible wordmark is `a.logo` at 14.4px / weight 400 /
   letter-spacing normal, and --t-data is literally that size. At 18px ours was the loudest thing
   in the nav, where on the bar the loudest thing is the CTA chip. */
.nav__mark { font-size: var(--t-data); }

.nav__links {
  display: flex;
  gap: var(--s-6);
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--slate);
}

.nav__links a { transition: color var(--dur-micro) var(--ease); }
.nav__links a:hover { color: var(--bone); }

.nav__cta {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--bone);
  border: 1px solid var(--hairline-strong);
  padding: var(--s-2) var(--s-3);
  transition: background var(--dur-micro) var(--ease);
}

.nav__cta:hover { background: var(--ink-2); }

/* ---------------------------------------------------------------- hero */

/* The plate is graded, the territories are NOT — the filter sits on a pseudo-element behind the
   SVG rather than on .hero__map itself, because a filter on the parent would desaturate the
   claim colours along with the ground and undo the whole point. */

/* The hairline that makes it read as framed. Rides the same four values, and is gone before the
   window reaches the edges — a border around the whole viewport is just a box. */

/* ---- the two screens of text ---- */

/* Width is the lattice's job — see grid.css. */

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: var(--s-3) var(--s-6);
  min-height: 52px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  transition: background var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease);
}

/* The single Claim element outside the map — and, since css/surface.css landed, only the
   FALLBACK for it. That file re-cuts `.chip, .hero__cta, .btn--primary` as the paper chip: a
   --bone fill carrying its own chamfer in a 135deg gradient, with a Claim-red drop-shadow
   sitting 4px off it as a registration misprint. This rule is what the button looks like on a
   page that loads hero.css without surface.css; on the three real pages it never wins.
   Deliberately `background` (not `background-color`) so the fallback is a plain filled
   rectangle rather than half of two different treatments.

   THERE IS NO :hover PAIR HERE, and adding one back breaks the chip. `background` is a
   shorthand, so it resets background-image — and `.btn--primary:hover` (0,2,0) outranks
   surface.css's `.chip, .hero__cta, .btn--primary` (0,1,0). A hover rule at this selector
   therefore wipes the gradient that IS the chamfer, and the chip flips to a solid red rectangle
   with the corner cut gone and the register shadow with it. That shipped for a while and was
   caught on the access form. `background-color` alone is not the fix either: it paints red
   through the transparent notch the gradient leaves, so the cut corner fills in.
   The hover belongs to surface.css, which presses the sheet down onto its own register by
   moving the drop-shadow rather than by touching any background. */
.btn--primary { background: var(--claim); color: var(--bone); }

.btn__kicker { font-size: var(--t-label-sm); opacity: 0.75; }
/* 400, not 500. Weight census on inversa.com/origin: 962 elements at 400, 24 at 300, one at 700
   — and that 700 is a 1x1px hidden SEO <h1>. The bar has no 500 and no visible bold anywhere. */
.btn__action { font-size: var(--t-body-lg); font-weight: 400; }

.btn--ghost {
  justify-content: center;
  border: 1px solid var(--hairline-strong);
  color: var(--bone);
  font-size: var(--t-data);
}

.btn--ghost:hover { background: var(--ink-2); }
.btn--wide { width: 100%; }

/* Two lines of log, newest on top. The window is the clip; entries are added above and the list
   is trimmed in script, so nothing grows. */

@keyframes hero-log-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ---- phones: one line above the button ---- */

@keyframes hero-taken {
  0%   { stroke-width: 3px; }
  100% { stroke-width: 1.4px; }
}