/* ── Stand Back split lockup ──────────────────────────────────────
   Bricolage 800, live text. Stand and Back pushed to opposite edges of
   the viewport; the gap between them is the idea, and whatever sits in
   it (a subline, or nothing) is set by the page. Replaces the brush-script
   wordmark, retired 15 Sep 2026. Shared by /stand-back and the homepage
   flagship banner.

   Both words bleed a hair past the edge, as in the signed-off frame:
   Stand loses the S's side bearing and a sliver more, Back loses the tip
   of the k. Bleeds are in em so they hold at every size. */

.sb-lockup {
  --sb-mark-size: clamp(64px, 12.3vw, 236px);
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  /* Baseline, not centre: the first line of whatever sits in the gap shares
     the words' baseline, as in the signed-off frame */
  align-items: baseline;
}

.sb-mark {
  grid-row: 1;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--sb-mark-size);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--color-white);
  white-space: nowrap;
}

.sb-mark--stand {
  grid-column: 1;
  margin-left: -0.04em;
}

.sb-mark--back {
  grid-column: 3;
  margin-right: -0.1em;
}

.sb-lockup-gap {
  grid-row: 1;
  grid-column: 2;
  padding-inline: var(--space-xs);
}

/* Phone width: two edge-pinned words won't fit side by side. Stack them –
   Stand top-left, Back bottom-right – so the distance is still the idea. */
@media (max-width: 767px) {
  .sb-lockup {
    --sb-mark-size: clamp(64px, 27vw, 200px);
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    row-gap: var(--space-md);
  }

  .sb-mark--stand {
    grid-row: 1;
    justify-self: start;
  }

  .sb-lockup-gap {
    grid-row: 2;
    grid-column: 1;
    padding-inline: var(--pad-h);
  }

  .sb-mark--back {
    grid-row: 3;
    grid-column: 1;
    justify-self: end;
  }
}

/* ── Subline in the gap ── shared by /stand-back and the homepage */
/* DM Sans Light, not Bricolage: Bricolage is pinned to 800 (fonts.css) */
.sb-tagline {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(18px, 2.2vw, 42px);
  line-height: 1.2;
  color: var(--color-white);
  text-align: center;
}

.sb-tagline-far {
  display: block;
  color: var(--color-orange);
}

/* ── Texture ──────────────────────────────────────────────────────
   The camouflage in its clear state: the same solid shapes filled with a
   low-contrast dot matrix, behind the lockup, never over a word. */
.sb-texture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Shapes sit in a mask so the dots share one grid; overlapping pattern
   fills would crosshatch */
.sb-texture-shape {
  fill: var(--color-white);
}

.sb-texture-dot {
  fill: color-mix(in srgb, var(--color-white) 10%, var(--color-ink));
  shape-rendering: crispEdges;
}

/* Symbols live in one zero-size sprite per page; it must stay rendered
   (not display: none) or the pattern fills drop out in some engines. */
.camo-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}