/* ============================================================================
   THE TICKER NAV, SITE-WIDE
   The run-through chapter's nav tape, promoted to every page when the six
   numbered features became chapters. The port notes live in the section
   comment below; the terminal tokens it reads are pinned here because the
   omen pages do not carry the run-through's theme sheet. The engine is
   assets/v/3c90c6e8c961/run-through-ticker.js, which accepts this brand.
   ========================================================================== */
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) {
  --crt-black: #000402;
  --crt-panel: #071a10;
  --crt-deep: #04120b;
  --crt-green: #04e26d;
  --crt-mint: #5dfeaa;
  --crt-dim: #8fa398;
  --crt-line: rgba(255, 255, 255, .085);
  --crt-rule: rgba(4, 226, 109, .26);
  --crt-grid:
    linear-gradient(rgba(4, 226, 109, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(4, 226, 109, .05) 1px, transparent 1px);
  --crt-scan: repeating-linear-gradient(180deg,
    rgba(4, 226, 109, .045) 0 1px, transparent 1px 3px);
}

/* Eight quotes ride the tape here, which fits beside the wordmark only on a
   wide row. Below 1130px the base stylesheet's 640px drawer rules have not
   engaged yet, so the switch is made explicitly: key hidden on the row,
   shown with the drawer. */
@media (min-width: 1131px) {
  body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .nav-toggle { display: none; }
}
@media (max-width: 1130px) {
  body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .nav-toggle { display: inline-flex; }
  body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
  }
  body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav.open .nav-links { display: flex; }
}

/* ============================================================================
   12 · THE TICKER
   The nav arrived wearing the court's emission system: a cyan bar under every
   label, growing from a third of its width to all of it on hover. It is the
   first thing on the page and it was the last thing still speaking with the
   other product's voice.

   It is a tape now. The link row is a strip of screen let into the masthead,
   the way a wire tape sits above a paper's fold, the labels are ticker
   symbols, and under them a price line runs: a live random walk with an
   arrowhead on the newest print at the front of it. The stretch of line under
   the quote you are pointing at is lit, and pointing at a quote shocks the
   walk, up or down depending on the quote, so the line answers and then
   settles the way a price does. assets/v/3c90c6e8c961/run-through-ticker.js draws it.

   The labels do not move. An earlier pass lifted the current page four pixels
   and it broke the one line of type the four of them share: on a board the
   line moves and the labels stay on their axis, so lifting the axis was the
   wrong half. Everything the lift was saying is said by colour, by the bloom
   behind the label, and by the lit stretch of line under it.

   The strip is dark on purpose. Phosphor green on newsprint reads at 1.6 to
   1, so the choice was either a muddy dark green that is not CRT green at
   all, or a piece of screen to print the green on. The second is also the
   truer picture: the newspaper is the page, and the terminal is let into it.

   On the selectors: the emission system is written as
   body[data-page-brand]:not([data-page-brand="omen"]) .sitenav :is(...), which
   is four classes deep before the pseudo-element. Overriding it needs five, so
   these rules name .sitenav-inner and match the link on [href]. Both are real
   parts of the markup rather than a repeated class, and without them the
   colour rules land while the ::after rules quietly do not, which is a very
   easy way to ship a half-changed nav.
   ========================================================================== */

/* ---- the strip ------------------------------------------------------- */
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-links {
  position: relative;
  isolation: isolate;
  gap: 0;
  /* the bottom pad is the tape's lane. The line swings in it and never
     reaches the type, which is the whole reason it is a lane and not just
     room under the labels. */
  padding: 0;
  border-radius: 5px;
  background-color: var(--crt-black);
  background-image: var(--crt-scan), var(--crt-grid);
  background-size: auto, 16px 16px, 16px 16px;
  box-shadow:
    inset 0 0 0 1px rgba(4, 226, 109, .24),
    inset 0 10px 18px -14px rgba(4, 226, 109, .9),
    0 1px 0 rgba(255, 255, 255, .55);
}

/* The flat line the quotes rest on when there is no live tape: no script, a
   dead script, or a reader who has asked for less motion. It is what the tape
   replaces, so it goes when the tape arrives. */
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-links::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: .5rem;
  bottom: .5rem;
  left: .5rem;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0, rgba(4, 226, 109, .42) 5%,
    rgba(4, 226, 109, .42) 95%, transparent 100%);
}
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner
  .nav-links[data-tape="live"]::before { opacity: 0; }

/* ---- the price line -------------------------------------------------- */
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-links .rt-tape-lane {
  position: absolute;
  z-index: 0;
  right: .5rem;
  bottom: .12rem;
  left: .5rem;
  /* the lane is the swing. Give it too little and the walk reads as a flat
     wire with a bit of fuzz on it rather than a price. */
  height: 1.24rem;
  /* the arrowhead prints a few pixels past the last sample, in the padding
     the strip leaves to the right of the lane */
  overflow: visible;
  pointer-events: none;
}
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .rt-tape {
  display: block;
  width: 100%;
  height: 100%;
  /* the arrowhead sits a few pixels past the last sample, in the padding the
     lane leaves it */
  overflow: visible;
}
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .rt-tape-trace {
  stroke: rgba(4, 226, 109, .34);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .rt-tape-lit {
  stroke: var(--crt-green);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(4, 226, 109, .8));
}
/* the DemoThemis quote lights its own stretch in its own colour */
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner
  .rt-tape-lit[data-owner="court"] {
  stroke: #00e5ff;
  filter: drop-shadow(0 0 5px rgba(0, 229, 255, .8));
}
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .rt-tape-head {
  fill: var(--crt-mint);
  /* The head is a marker sitting on the line, not at the end of it, so the
     line ran straight through it and came out of its point. The stroke is the
     strip’s own black and paint-order puts it under the fill, which knocks a
     clean gap in the line all the way round the arrow: it now caps whatever
     it is sitting on. */
  stroke: var(--crt-black);
  stroke-width: 3.4;
  stroke-linejoin: round;
  paint-order: stroke;
  filter: drop-shadow(0 0 6px rgba(4, 226, 109, .9));
}
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner
  .rt-tape-head[data-owner="court"] {
  fill: #7ff0ff;
  filter: drop-shadow(0 0 6px rgba(0, 229, 255, .9));
}

/* ---- a quote --------------------------------------------------------- */
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-links a[href] {
  position: relative;
  z-index: 1;
  /* .28 + .3 above and 1.32 + .3 below: the strip's old padding, moved
     here, so a quote is the full height of the strip and there is no dead
     band under the label */
  padding: .58rem .46rem 1.62rem;
  font-family: var(--mono);
  font-size: .615rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--crt-dim);
  background: transparent;
  transition: color 130ms ease, text-shadow 130ms ease;
}

/* The strip's side inset belongs to the quotes at either end rather than to
   the strip, for the same reason the vertical padding does: a strip that
   keeps its own padding keeps a band nobody can point at. The lane and the
   fallback baseline are positioned against the padding box, which does not
   move when the padding does, so both stay exactly where they were. */
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-links
  a[href]:first-child { padding-left: .96rem; }
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-links
  a[href]:last-child { padding-right: .96rem; }

/* the tube lighting up under the print */
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-links a[href]::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: .06rem .1rem .06rem;
  border-radius: 3px;
  /* top to bottom, because the whole column is what you are pointing at */
  background: linear-gradient(180deg,
    rgba(4, 226, 109, .26) 0%, rgba(4, 226, 109, .1) 46%,
    rgba(4, 226, 109, .03) 100%);
  opacity: 0;
  transition: opacity 130ms ease;
}
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-links
  a[href*="demothemis.com"]::before {
  background: linear-gradient(180deg,
    rgba(0, 229, 255, .26) 0%, rgba(0, 229, 255, .1) 46%,
    rgba(0, 229, 255, .03) 100%);
}

/* The quote's own bar, which is the fallback indicator. With the tape live
   the lit stretch of the line says the same thing better, so the bar stands
   down rather than doubling it. */
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-links a[href]::after {
  right: .3rem;
  bottom: .5rem;
  left: .3rem;
  height: 2px;
  border-radius: 0;
  background: var(--crt-green);
  box-shadow: 0 0 7px rgba(4, 226, 109, .45);
  opacity: .34;
  transform: none;
  transition: opacity 130ms ease;
}
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-links
  a[href*="demothemis.com"]::after {
  background: #00e5ff;
  box-shadow: 0 0 7px rgba(0, 229, 255, .45);
}
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner
  .nav-links[data-tape="live"] a[href]::after { opacity: 0; }

/* ---- the other exchange ---------------------------------------------- */
/* The last quote is DemoThemis, so it is quoted in the colour this page has
   given DemoThemis everywhere else. It is on the same tape, it is just not
   this company. */
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-links
  a[href*="demothemis.com"] {
  color: #6fe6f4;
}

/* ---- the page you are on --------------------------------------------- */
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-links a[href].active {
  color: var(--crt-mint);
  text-shadow: 0 0 10px rgba(4, 226, 109, .5);
}
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-links
  a[href].active::after { opacity: 1; }
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner
  .nav-links[data-tape="live"] a[href].active::after { opacity: 0; }
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-links
  a[href].active::before { opacity: .5; }

/* ---- pointing at a quote --------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-links
    a[href]:is(:hover, :focus-visible) {
    color: var(--crt-mint);
    background: transparent;
    text-shadow: 0 0 11px rgba(4, 226, 109, .6);
  }
  body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-links
    a[href*="demothemis.com"]:is(:hover, :focus-visible) {
    color: #b8f4fb;
    text-shadow: 0 0 11px rgba(0, 229, 255, .6);
  }
  body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-links
    a[href]:is(:hover, :focus-visible)::after { opacity: 1; }
  body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner
    .nav-links[data-tape="live"] a[href]:is(:hover, :focus-visible)::after {
    opacity: 0;
  }
  body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-links
    a[href]:is(:hover, :focus-visible)::before { opacity: 1; }
}
/* a keyboard reaches the tape on every device, pointer or not */
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-links
  a[href]:focus-visible {
  color: var(--crt-mint);
  text-shadow: 0 0 11px rgba(4, 226, 109, .6);
}

/* ---- the wordmark's own line ----------------------------------------- */
/* It was the court's cyan sliver. Same shape, this company's phosphor. */
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner
  .brand.brand-with-wordmark[href]::after {
  background: linear-gradient(90deg,
    rgba(4, 226, 109, .18) 0%, rgba(4, 226, 109, .62) 20%,
    var(--crt-green) 50%, rgba(4, 226, 109, .62) 80%, rgba(4, 226, 109, .18) 100%);
  filter: drop-shadow(0 0 3px rgba(4, 226, 109, .3));
}
@media (hover: hover) and (pointer: fine) {
  body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner
    .brand.brand-with-wordmark[href]:hover::after {
    filter: drop-shadow(0 0 6px rgba(4, 226, 109, .7));
    opacity: .9;
  }
}

/* ---- the menu key ---------------------------------------------------- */
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-toggle[type] {
  border-color: rgba(4, 226, 109, .42);
  color: var(--crt-mint);
  background: rgba(4, 226, 109, .08);
  box-shadow:
    0 0 0 1px rgba(4, 226, 109, .16),
    0 0 6px rgba(4, 226, 109, .12);
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease,
    color 140ms ease, transform 90ms ease;
}
/* The key answers the hand: it brightens under the pointer, presses in a
   pixel and tightens its glow under the finger, and while the drawer is
   open it holds lit so the key reads as the thing that is open. Focus gets
   the same light as hover, with the outline the keyboard needs. */
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-toggle[type]:hover,
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-toggle[type]:focus-visible {
  border-color: rgba(4, 226, 109, .8);
  color: #eafff3;
  background: rgba(4, 226, 109, .16);
  box-shadow:
    0 0 0 1px rgba(4, 226, 109, .32),
    0 0 14px rgba(4, 226, 109, .38),
    0 0 28px rgba(4, 226, 109, .16);
}
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-toggle[type]:focus-visible {
  outline: 2px solid var(--crt-mint);
  outline-offset: 3px;
}
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-toggle[type]:active {
  transform: translateY(1px);
  border-color: var(--crt-green);
  color: #001b0c;
  background: var(--crt-green);
  box-shadow:
    0 0 0 1px rgba(4, 226, 109, .55),
    0 0 10px rgba(4, 226, 109, .7),
    inset 0 1px 0 rgba(255, 255, 255, .35);
}
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav.open .sitenav-inner .nav-toggle[type] {
  border-color: var(--crt-green);
  color: var(--crt-mint);
  background: rgba(4, 226, 109, .22);
  box-shadow:
    0 0 0 1px rgba(4, 226, 109, .4),
    0 0 12px rgba(4, 226, 109, .45),
    inset 0 0 8px rgba(4, 226, 109, .25);
}
@media (prefers-reduced-motion: reduce) {
  body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-toggle[type] { transition: none; }
  body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-toggle[type]:active { transform: none; }
}

/* ---- narrow: the row stacks, the tape moves to the head of the panel -- */
/* A price line down the side of a menu is not a price line, so on a phone the
   tape runs across the top of the panel instead and the rows keep the rail
   and their own risers. Same component, same script, different lane: the
   script only ever draws into the box the stylesheet gives it. */
@media (max-width: 1130px) {
  body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-links {
    /* The strip is position: relative up there so the tape has something to
       sit in. Stacked, the row is the drop-down panel and has to go back to
       being absolutely positioned, or it lands in the flow beside the menu
       key and pushes the masthead down the page instead of covering it. */
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    /* the tape keeps the head of the panel. The foot goes to the last row,
       so the only part of this panel that is not a row is the tape. */
    padding: 1.72rem 0 0;
    border-radius: 0 0 6px 6px;
  }
  body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-links .rt-tape-lane {
    top: .3rem;
    right: .6rem;
    bottom: auto;
    left: .6rem;
    height: 1.12rem;
  }
  /* the rail comes back under the rows, starting below the tape */
  body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner
  .nav-links[data-tape="live"]::before,
  body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-links::before {
    right: auto;
    top: 1.66rem;
    bottom: .5rem;
    /* the panel padding plus the riser offset below, so a resting riser sits
       exactly on the rail rather than a pixel beside it */
    left: calc(.55rem + .12rem);
    width: 2px;
    height: auto;
    opacity: 1;
    background: linear-gradient(180deg,
      transparent 0, rgba(4, 226, 109, .42) 6%,
      rgba(4, 226, 109, .42) 94%, transparent 100%);
  }
  body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-links a[href] {
    /* the panel's side padding lives here now, so a row is the full width
       of the panel and there is no dead margin either side of it */
    padding: .58rem 1.05rem .58rem 1.5rem;
  }
  body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-links
    a[href]:last-child { padding-bottom: 1.08rem;
    font-size: .66rem;
  }
  body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner
  .nav-links[data-tape="live"] a[href]::after,
  body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-links a[href]::after {
    right: auto;
    top: .28rem;
    bottom: .28rem;
    left: calc(.55rem + .12rem);
    width: 2px;
    height: auto;
    opacity: .34;
    transform: none;
  }
  body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner
  .nav-links[data-tape="live"] a[href]:is(.active, :hover, :focus-visible)::after,
  body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-links
    a[href]:is(.active, :hover, :focus-visible)::after {
    opacity: 1;
    /* the row nudges right but its riser stays on the rail, so the lit
       segment covers the rail instead of standing beside it */
    transform: translateX(-4px);
  }
  /* a row is its own line here, so a nudge does not break anybody's baseline */
  body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-links
    a[href]:is(.active, :hover, :focus-visible) { transform: translateX(4px); }
  /* every row shares one left edge: the wide row's end quotes keep their end
     padding for the strip's corners, and that is not a thing in a drawer */
  body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-links
    a[href]:first-child,
  body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-links
    a[href]:last-child { padding-left: 1.5rem; padding-right: 1.05rem; }
  /* The nudged row is as wide as the drawer, so its last four pixels land
     past the viewport and the page grows a sideways scroll. The drawer clips
     that overhang: clip, not hidden, so it never becomes a scroll container
     and the tape lane inside is untouched. */
  body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-links {
    overflow-x: clip;
  }
  body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-links a[href] {
    transition: transform 200ms steps(4, end), color 130ms ease, text-shadow 130ms ease;
  }
}

/* Less motion means the walk never starts, so the tape holds the one series
   it drew on load. It stays visible: a still price line is a picture, and a
   picture is not the thing anybody asked to be spared. */
@media (prefers-reduced-motion: reduce) {
  body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-links a[href],
  body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-links
    a[href]:is(.active, :hover, :focus-visible) {
    transform: none;
    transition: color 130ms ease;
  }
  /* the riser's counter-nudge goes with the nudge it answers */
  body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner .nav-links
    a[href]:is(.active, :hover, :focus-visible)::after { transform: none; }
}

/* ============================================================================
   THE PROGRESS BEAM
   The scroll bar used to be a 3px accent strip fixed to the top of the
   viewport, above the nav. It is the nav’s own underline now: a 2px
   phosphor line riding the bar’s bottom edge, replacing the grey border
   as it advances, brightening toward its tip the way a beam does. The
   driver in common.js only ever sets its width, so the whole change is
   position and paint. */
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav #progress {
  position: absolute;
  top: auto;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg,
    rgba(4, 226, 109, .4), rgba(4, 226, 109, .85) 55%,
    var(--crt-green, #04e26d) 88%, var(--crt-mint, #5dfeaa) 100%);
  box-shadow:
    0 0 6px rgba(4, 226, 109, .85),
    0 0 16px rgba(4, 226, 109, .4);
  z-index: 60;
}

/* ============================================================================
   THE MESH ON THE BAR
   The drifting card grid that grounds the hero, the dark card and the
   footer, riding the nav bar too. It drifts by background position rather
   than by the panels’ oversized-transform trick, because clipping that
   overhang would need overflow hidden on the nav, and that would clip the
   drawer that opens below it. The bar is black, a screen rather than paper
   (2 Sep 2026), and the mesh is the grid at a finer pitch than the panels':
   a 20px cell from its own tile, drawn crisp. The bar is sized to whole
   cells, 80px on the row and 60px with the drawer, by its own padding, and
   the rows are offset by half a cell, so a half cell shows at the top and
   the bottom and no edge lands on a line. The travel is fifteen tiles, so
   the loop is seamless at the same thirty-second pace. */
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner {
  /* 52.1px strip + 2 x 13.45px + the 1px rule = 80px, four cells */
  padding-block: 13.45px;
  /* the bar is full bleed, so its row can run wider than the page column:
     a 76px wordmark is 295px wide, and beside the 824px strip that needs
     more than the 72rem column leaves */
  max-width: 78rem;
}
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav {
  background: var(--crt-black);
  border-bottom: 1px solid var(--crt-rule);
  backdrop-filter: none;
}
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("brand/omenmarketmaker/card-grid-fine.svg") repeat 0 10px;
  background-size: 20px 20px;
  opacity: .9;
  pointer-events: none;
  animation: omen-mesh-drift 30s linear infinite;
}
@keyframes omen-mesh-drift {
  to { background-position-x: -300px; }
}
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav-inner {
  z-index: 1;
}
@media (max-width: 1130px) {
  /* the drawer bar: 36px key + 2 x 11.5px + the 1px rule = 60px, three cells */
  body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav .sitenav-inner { padding-block: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .sitenav::before { animation: none; }
}