@import '../tokens.css?v=349798aa';

/* ── No Road Block case study — page-scoped header treatment ────────────
 * Linked only by ux-case-studies/_no-road-block.html.
 *
 * While the header sits over the dithered hero video (before .video-gone
 * lands), its chrome joins the product's monochrome system: brand blue
 * ink with the same paper rim the hero wordmark wears, so the nav reads
 * as part of the map rather than floating site chrome. Once .video-gone
 * lands the header reverts to the site's normal ink chrome.
 *
 * Selectors mirror the light-hero rules in case-study.css
 * (.has-cs-hero:has(.cs-hero-full--light) .header …) with :not(.video-gone)
 * added — that both scopes the treatment to the over-video state and
 * out-ranks the ink chrome those rules set.
 *
 * The two custom properties are No Road Block brand constants mirrored
 * from the product's data/tokens.js (BRAND) and the hero mark's sampled
 * rim tone — deliberately not site tokens: only this page wears them. */
.has-cs-hero:has(.cs-hero-full--light) .header:not(.video-gone) {
  --nrb-blue: #1807ff;
  --nrb-paper: #fbfbff;
}

/* Brand text: rim drawn behind the glyphs (paint-order) so the
 * letterforms keep their weight — same principle as the hero mark's
 * dilate filter. */
.has-cs-hero:has(.cs-hero-full--light) .header:not(.video-gone) .brand {
  color: var(--nrb-blue);
  -webkit-text-stroke: 6px var(--nrb-paper);
  paint-order: stroke fill;
}

/* Menu toggle bars: solid boxes can't take text-stroke, so each bar wears
 * a paper outline — crisp rectangle rim, no filter artifacts. */
.has-cs-hero:has(.cs-hero-full--light) .header:not(.video-gone) .menu-icon-bar {
  background: var(--nrb-blue);
  outline: 2px solid var(--nrb-paper);
}

/* ── Brand specimen grid ────────────────────────────────────────────────
 * The marks in the brand-identity section are printed artefacts, so the
 * tiles wear the product's paper in both themes instead of the site
 * surface — brand blue on paper, exactly as the posters print it. The
 * captions take the ink for the same reason: the site's tertiary text
 * colour goes light in dark mode and would vanish on the fixed paper. */
.nrb-logo-grid {
  --nrb-blue: #1807ff;
  --nrb-paper: #fbfbff;
}

.nrb-logo-grid .cs-logo-tile {
  background: var(--nrb-paper);
}

.nrb-logo-grid .cs-logo-svg {
  fill: var(--nrb-blue);
}

/* The stacked wordmark and lockup are drawn much denser than a typical
 * logotype — the shared 64px specimen height reads as a thumbnail. */
.nrb-logo-grid .cs-logo-tile:not(:first-child) .cs-logo-svg {
  height: 128px;
}

.nrb-logo-grid .cs-logo-caption {
  color: var(--nrb-blue);
}