/* Apex layout: header. Owner: -16. The footer and stay-up-to-date band are in site-apex-foot.css (-38).
   Cyber Eden header, built only from the user's asset IDs in kit/home/header, recoloured to the site red:
   ASSET-0001 is the bar (its EDEN emblem, wordmark, tab text, bell and PLAY NOW painted out), ASSET-0001-underline its own
   active-tab underline, ASSET-0026-discord the Discord button (ASSET-0026 frame, ASSET-0029 glyph), ASSET-0026 the menu button. The bar is shown in pieces of the one file:
   its left (logo cell and five tab slots, x 0-800) at native ratio, its plain middle (x 800-870) stretched to fill the column
   (border-image with zero widths, so only the fill slice draws), then the tools (search field and glyph, Discord spot,
   x 870-1185) and the red Get free key cap (x 1185-1409). The search field, search glyph and cap are crops of the same art on
   their own elements so the shared hover lights them. --u is one native pixel; rows 14-110 of the art are shown. Text is live.
   Hover glows must hug the art, never a box (user): every file has its alpha haze (below 12) cleared, and the parts that light
   up are cut out of ASSET-0001 along their own edges (ASSET-0001-search, -glyph, -cta: the bar body around them is cleared). */

/* The old transparent bar handed its height back to the first hero; the ax bar is solid, so that offset goes to zero. */
:root { --bar: 0px; }

.ax-top { position: sticky; top: 0; z-index: 60; width: 100%; padding-block: 4px; background: #0d0d0f; font-family: var(--ax-font); }
/* Page cross-fade (site-motion.css @view-transition): the bar is its own snapshot layer above the fading page, and it swaps
   to the new page's bar at once (only the active tab differs), so it holds still and pinned while the page under it fades. */
.ax-top { view-transition-name: ax-top; }
::view-transition-group(ax-top) { animation: none; }
::view-transition-old(ax-top) { display: none; }
::view-transition-new(ax-top) { animation: none; }
/* The bar gets a wider centred column than the page (user: "needs to widen it a little because it's all squished"; then
   "widen the search bar hub as well ... just slightly"). The scale --u still comes from the former column (24px less), so
   the height is unchanged; the extra width (--tx, half of the bar's stretch, at most 60px) widens the six tab slots and
   the rest widens the search slot, both by stretching the art's plain middle. */
.ax-top-in { width: min(1600px, calc(100% - 24px)); margin: 0 auto; container-type: inline-size; }
.ax-bar { --u: min(1px, calc((100cqw - 24px) / 1409)); --tx: min(60px, calc((100cqw - 1409 * var(--u)) / 2)); --slot: calc((527 * var(--u) + var(--tx)) / 6); --art: url("kit/home/header/ASSET-0001.webp"); position: relative; display: flex; height: calc(96 * var(--u)); }
.ax-bar-l, .ax-bar-tools, .ax-cta { background: var(--art) 0 calc(-14 * var(--u)) / calc(1409 * var(--u)) calc(122 * var(--u)) no-repeat; }
.ax-bar-l { position: relative; flex: none; width: calc(800 * var(--u) + var(--tx)); }
.ax-bar-m { flex: 1; min-width: 0; display: flex; align-items: center; gap: calc(14 * var(--u)); padding: 0 0 0 calc(40 * var(--u)); border: 0 solid transparent; border-image: var(--art) 14 539 12 800 fill / 0 / 0 stretch; }
.ax-bar-r { flex: none; display: flex; }
.ax-bar-tools { position: relative; width: calc(315 * var(--u)); background-position-x: calc(-870 * var(--u)); }

/* Logo cell: the B mark and the BARRAGE wordmark, linking home. The pair is centred on the cell's clear band under it
   (y 39-92, below the inner red line; x 68-281 at mid height), measured on the art's visible pixels. */
.ax-brand { position: absolute; left: calc(97.5 * var(--u)); top: calc(29.5 * var(--u)); display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(44 * var(--u)); transition: var(--ax-hover-t); }
.ax-brand img { width: auto; height: calc(40 * var(--u)); }
.ax-brand .ax-brand-word { height: calc(28 * var(--u)); }

/* Tabs: live caps text centred in six even slots across the art's tab strip (313-840, since YouTube joined). .ax-nav-rule
   covers the strip's baked dividers with the art's own plain middle (x 540-650, stretched) and re-places the art's own divider
   (x 417-426, y 55-72) between the new slots. The current tab gets ASSET-0001-underline at the art's own underline row (y 72). */
.ax-nav-rule { position: absolute; left: calc(320 * var(--u)); top: 0; width: calc(477 * var(--u) + var(--tx)); height: 100%; box-sizing: border-box; border: 0 solid transparent; border-image: var(--art) 14 759 12 540 fill / 0 / 0 stretch; pointer-events: none; }
.ax-nav-rule i { position: absolute; top: calc(41 * var(--u)); width: calc(9 * var(--u)); height: calc(17 * var(--u)); background: var(--art) calc(-417 * var(--u)) calc(-55 * var(--u)) / calc(1409 * var(--u)) calc(122 * var(--u)) no-repeat; }
.ax-nav-rule i:nth-child(1) { left: calc(1 * var(--slot) - 11.5 * var(--u)); }
.ax-nav-rule i:nth-child(2) { left: calc(2 * var(--slot) - 11.5 * var(--u)); }
.ax-nav-rule i:nth-child(3) { left: calc(3 * var(--slot) - 11.5 * var(--u)); }
.ax-nav-rule i:nth-child(4) { left: calc(4 * var(--slot) - 11.5 * var(--u)); }
.ax-nav-rule i:nth-child(5) { left: calc(5 * var(--slot) - 11.5 * var(--u)); }
.ax-nav a { position: absolute; top: calc(34 * var(--u)); width: var(--slot); height: calc(30 * var(--u)); display: flex; align-items: center; justify-content: center; color: #d6d6da; font: 700 max(13px, calc(19 * var(--u)))/1 var(--ax-font); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; transition: color .2s, var(--ax-hover-t); }
.ax-nav a:nth-of-type(1) { left: calc(313 * var(--u)); }
.ax-nav a:nth-of-type(2) { left: calc(313 * var(--u) + var(--slot)); }
.ax-nav a:nth-of-type(3) { left: calc(313 * var(--u) + 2 * var(--slot)); }
.ax-nav a:nth-of-type(4) { left: calc(313 * var(--u) + 3 * var(--slot)); }
.ax-nav a:nth-of-type(5) { left: calc(313 * var(--u) + 4 * var(--slot)); }
.ax-nav a:nth-of-type(6) { left: calc(313 * var(--u) + 5 * var(--slot)); }
.ax-nav a:hover, .ax-nav a:focus-visible, .ax-nav a[aria-current="page"] { color: #fff; }
.ax-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; top: calc(24 * var(--u)); width: calc(84 * var(--u)); height: calc(20 * var(--u)); translate: -50% 0; background: url("kit/home/header/ASSET-0001-underline.webp") 0 0 / 100% 100% no-repeat; }

/* Search: the art's slanted slot (x 878-1040, y 40-82, cropped as ASSET-0001-search) stretched to the left (user): its left
   slant (28px) and right end with the red slash (120px) stay native and its plain middle (x 906-920) stretches. The slot sits
   in the bar's middle from the end of the tab slots (x 840) and reaches into the tools to its native right end (x 1040),
   so it covers the baked slot exactly there. The art's glyph (x 1050-1096) is the submit button. */
.ax-search { position: relative; z-index: 1; flex: 1; min-width: calc(162 * var(--u)); height: calc(42 * var(--u)); margin-right: calc(-170 * var(--u)); border: solid transparent; border-width: 0 calc(120 * var(--u)) 0 calc(28 * var(--u)); border-image: url("kit/home/header/ASSET-0001-search.webp") 0 120 0 28 fill / 0 calc(120 * var(--u)) 0 calc(28 * var(--u)) / 0 stretch; transition: var(--ax-hover-t); }
.ax-search input { position: absolute; inset: 0 calc(-74 * var(--u)) 0 calc(2 * var(--u)); width: auto; height: 100%; padding: 0; border: 0; outline: 0; background: none; color: #fff; font: 700 max(12px, calc(15 * var(--u)))/1 var(--ax-font); }
.ax-search input::placeholder { color: #9a9aa0; opacity: 1; }
.ax-search input::-webkit-search-cancel-button { display: none; }
.ax-search-go { position: absolute; left: calc(180 * var(--u)); top: calc(26 * var(--u)); width: calc(46 * var(--u)); height: calc(40 * var(--u)); padding: 0; border: 0; background: url("kit/home/header/ASSET-0001-glyph.webp") 0 0 / 100% 100% no-repeat; cursor: pointer; transition: var(--ax-hover-t); }

/* Discord (user: not the circle, and centred): ASSET-0026-discord, the square HUD frame of ASSET-0026 (the menu button) with its
   bars painted out and ASSET-0029's own Discord glyph set in. It sits in the art's bell spot, centred across the clear band
   (x 1105-1186, centre 1145.5) and on the bar's centre line (49 below the bar top, the middle of the band and of the red cap),
   measured on the frame's visible pixels (rows 10-106 of 114, centre row 58). */
.ax-discord { position: absolute; left: calc(251.2 * var(--u)); top: calc(25.1 * var(--u)); width: calc(48.6 * var(--u)); height: calc(47 * var(--u)); transition: var(--ax-hover-t); }
.ax-discord img { width: 100%; height: 100%; }

/* Get free key: the art's red cap with its baked chevrons; the label sits in the cap's plain red (x 1200-1330, y 42-86).
   The element shows the bar there; ::before is the cap cut out (ASSET-0001-cta) exactly over it, and only it and the label
   light up and grow on hover, so the glow follows the cap. It doesn't lift: that would show the baked cap under it. */
.ax-cta { position: relative; flex: none; width: calc(224 * var(--u)); background-position-x: calc(-1185 * var(--u)); color: #fff; font: 700 max(12px, calc(19 * var(--u)))/1 var(--ax-font); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; transition: var(--ax-hover-t); }
.ax-cta::before { content: ""; position: absolute; inset: 0; background: url("kit/home/header/ASSET-0001-cta.webp") 0 calc(-14 * var(--u)) / 100% calc(122 * var(--u)) no-repeat; transition: var(--ax-hover-t); }
.ax-cta span { z-index: 1; transition: var(--ax-hover-t); position: absolute; left: calc(15 * var(--u)); top: calc(28 * var(--u)); width: calc(135 * var(--u)); height: calc(44 * var(--u)); display: flex; align-items: center; justify-content: center; }

/* Shared hover, scale-only in the bar (user: match the page title icons): every piece grows 1.06 from its centre with the
   site glow at the site timing. No lift, turn, inner zoom or neighbour push. The Get free key cap and label grow, not the
   cell (that would show the baked cap under it). The menu button stays lit while open. */
.ax-brand:hover, .ax-brand:focus-visible, .ax-nav a:hover, .ax-nav a:focus-visible, .ax-search:hover, .ax-search:focus-within, .ax-search-go:hover, .ax-search-go:focus-visible, .ax-discord:hover, .ax-discord:focus-visible, .ax-cta:hover::before, .ax-cta:focus-visible::before, .ax-cta:hover span, .ax-cta:focus-visible span, .ax-menu summary:hover, .ax-menu summary:focus-visible, .ax-menu[open] summary { z-index: 1; filter: var(--ax-hover-fx); }
.ax-brand:hover, .ax-brand:focus-visible, .ax-nav a:hover, .ax-nav a:focus-visible, .ax-search:hover, .ax-search:focus-within, .ax-search-go:hover, .ax-search-go:focus-visible, .ax-discord:hover, .ax-discord:focus-visible, .ax-menu summary:hover, .ax-menu summary:focus-visible { scale: var(--ax-hover-scale); }
.ax-cta:hover::before, .ax-cta:focus-visible::before, .ax-cta:hover span, .ax-cta:focus-visible span { scale: var(--ax-hover-scale); }

/* Menu: replaces the tabs on narrow screens; its button is ASSET-0026. The panel is the shared dropdown kit (site-apex.css):
   the Dropdown Large Red Slash head reading "Menu", one row per link (the current page on the red row), the slashed foot. */
.ax-menu { display: none; }
.ax-menu summary { list-style: none; display: block; width: calc(max(36px, 46 * var(--u)) * 118 / 114); height: max(36px, calc(46 * var(--u))); background: url("kit/home/header/ASSET-0026.webp") 0 0 / 100% 100% no-repeat; cursor: pointer; transition: var(--ax-hover-t); }
.ax-menu summary::-webkit-details-marker { display: none; }
.ax-menu-panel { position: absolute; z-index: 40; right: 0; top: 100%; display: grid; width: min(320px, calc(100vw - 32px)); filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .6)); }
.ax-menu-panel::before { content: "Menu"; cursor: default; }
.ax-menu-search svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* No white focus box or tap flash on the header (user): a click shows only the art; keyboard focus keeps the red glow above.
   The footer's plain text links keep a white outline as their keyboard cue; the footer art has its own glow (site-apex-foot.css). */
.ax-top :is(a, button, summary) { -webkit-tap-highlight-color: transparent; }
.ax-top :is(a, button, summary):is(:focus, :focus-visible) { outline: none; }
.ax-foot-col a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Narrow: the logo cell (x 0-300) and the stretched middle holding the menu button replace the tabs. */
@media (max-width: 1000px) {
  .ax-bar { --u: min(1px, calc((100cqw - 24px) / 920)); --tx: 0px; }
  .ax-bar-l { width: calc(300 * var(--u)); }
  .ax-nav { display: none; }
  .ax-menu { display: block; order: -1; }
  .ax-bar-m { padding-left: calc(14 * var(--u)); }
}
/* Phones: the search and Discord move into the menu; the red cap follows the middle. */
@media (max-width: 700px) {
  .ax-bar { --u: min(1px, calc((100cqw - 24px) / 590)); }
  .ax-bar-tools, .ax-search { display: none; }
  .ax-bar-m { justify-content: flex-end; padding-right: calc(14 * var(--u)); }
}