/* Dominia — claim-red discipline. Owner: lead.
 *
 * The brand says two things that collide on a long marketing page:
 *   1. the wordmark square is ALWAYS Claim red and is never recoloured, and
 *   2. Claim red appears on at most one element per screen outside the map.
 *
 * Resolution: the hero spends its single red on the primary CTA, so the sticky nav withholds
 * its square until the hero has scrolled away. From then on the nav mark is the page's red.
 * Decorative "square as punctuation" on headlines has been removed — that was accent use,
 * and accent use is what the one-per-screen rule governs.
 *
 * Loaded last so it wins over hero.css regardless of what the chrome builder does there. (hero.css is now css/nav.css.)
 */

.nav__square {
  opacity: 0;
  transition: opacity var(--dur-micro) var(--ease);
}

body[data-scrolled="past-hero"] .nav__square { opacity: 1; }

/* Touch targets. The brand sets type at mono 9–11px, which left footer and nav links at 27px
   and the wordmarks at 13–15px. Android's 48dp guarantee applies regardless of brand styling
   (PRODUCT.md), so the hit area grows without the type changing size. */
@media (pointer: coarse), (max-width: 900px) {
  .nav__links a,
  .footer__links a,
  .footer__attr a,
  .nav__mark,
  .footer__mark {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .footer__links { flex-wrap: wrap; row-gap: 0; }
}

/* ---------------------------------------------------------------- one destination
 *
 * The nav's boxed GET EARLY ACCESS withheld while the hero is on screen.
 *
 * A blind composition critic, on the round the hero finally won, named this as "the single worst
 * decision in the winner": the hero already carries a large chip CTA at the end of its
 * composition's route, and a second boxed CTA in the top-right corner splits the destination into
 * two targets. The whole point of building a route from the claim cluster down to that chip is
 * undone by offering an alternative exit before the reader has travelled it.
 *
 * So screen one has exactly one call to action. Past the hero — where there is no other CTA in
 * view until the enlist section — the nav's returns and does the job properly.
 *
 * Reuses body[data-scrolled], already written by the IntersectionObserver in js/main.js. Same
 * mechanism as the wordmark square above; no new machinery. Visibility rather than display so the
 * bar's grid columns do not reflow as it comes and goes. */
body[data-scrolled="hero"] .nav__cta {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-micro) var(--ease), visibility 0s linear var(--dur-micro);
}

body[data-scrolled="past-hero"] .nav__cta {
  opacity: 1;
  visibility: visible;
  /* The colour transitions ride along, or this rule (which outranks css/motion.css's) would
     leave the nav button's hover and press snapping while the others ease. */
  transition: opacity var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease),
              background-color var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease);
}

/* ---------------------------------------------------------------- chrome on the plate
 *
 * Everything in the hero's top bar and bottom-left key sits directly on a satellite photograph,
 * and a photograph is not a ground you can pick one text colour against: under a single 12.6px
 * label the plate runs from roof shadow to lit concrete. Measured, --slate on bright terrain is
 * 1.43:1 — the nav links, the coordinates and the legend were all disappearing wherever the
 * imagery happened to be pale.
 *
 * Two changes together, because neither is enough alone:
 *   1. the type goes to bone, which takes it to 2.63:1 on the worst terrain, and
 *   2. it gets a hard one-pixel shadow in the ground colour, which is what actually carries it.
 *
 * A blurred shadow would be a glow and this brand does not glow. A 1px hard offset in --ink is
 * the same device a map label uses — a halo that separates type from terrain without softening
 * the letterform. It costs nothing and it works at every point of the image.
 *
 * Scoped to the hero only. Past it these elements sit on flat ground and need none of this. */
body[data-scrolled="hero"] .nav__links a,
body[data-scrolled="hero"] .nav__mark {
  text-shadow:
     1px 1px 0 var(--ink),
    -1px 1px 0 var(--ink),
     1px -1px 0 var(--ink),
    -1px -1px 0 var(--ink);
}

body[data-scrolled="hero"] .nav__links a { color: var(--bone-2); }
/* The key and the side tags used to wear this halo too. Both now sit on solid ground — the key on
   the strip's bar, the tags on --ink-4 chips — so they need none. */