/* ------------------------------------------------------------------------
 * The exchange tape on the landing page: a fixed strip above ALL content,
 * pushing the header UI down to make room. The whole strip is one link to
 * /board/.
 *
 * The lamp grammar (.tape / .tk) lives ONCE in css/exchange-ui.css — this
 * file is only the .site-tape wrapper (glass, reveal, page push) and its
 * chrome overrides on that shared block.
 * ------------------------------------------------------------------------ */

.site-tape {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 600;               /* logo (501) scrolls UNDER the tape; sidebar nav (900)
                                   covers it — see the stacking-context note below */
    display: block;
    /* Translucent glass — the app's grammar (WFTOddsBox: blur + black scrim).
       Light enough that the hero video visibly moves behind the lamps; the
       blur keeps them readable over bright frames. Solid-black graceful
       fallback where backdrop-filter is missing. */
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    /* the notch/status strip: tape chrome continues behind it */
    padding-top: env(safe-area-inset-top, 0px);
    text-decoration: none;
    cursor: pointer;
}

/* The top-of-page UI sits below the tape by its measured height. No reveal
 * transition anywhere: the ghost strip claims the layout before first paint
 * (js/tape.js boot) and the page never moves.
 * margin-top, NEVER transform — a transform on .s-header makes it the
 * containing block for its position:fixed children (the sidebar nav and the
 * hamburger), which collapsed the menu to header height. Margins push the
 * same distance at every breakpoint's own top offset without that trap. */
body.has-tape .s-header          { margin-top: var(--tape-h, 46px); }
body.has-tape .header-menu-toggle { margin-top: var(--tape-h, 46px); }

/* Dissolve the header's own stacking context (its z-index:500 made the whole
 * subtree one indivisible layer — the tape could not sit above the logo yet
 * below the sidebar). With z auto, each fixed/absolute piece ranks in the
 * root context individually: logo 501 < tape 600 < nav 900 — the tower
 * scrolls UNDER the tape, the open menu still covers it. The hamburger gets
 * its own 550 (under the tape it never overlaps; above all page content). */
.s-header { z-index: auto; }
.header-menu-toggle { z-index: 550; }

/* Mobile's .home-topfade paints the hero's top pure black (the Safari
 * status-strip blend) — exactly the strip the glass looks through. With the
 * tape covering that region, start the fade below it so the video, not the
 * fade, is what shows through the scrim. */
body.has-tape .home-topfade { top: var(--tape-h, 46px); }

/* Chrome overrides on the shared LED block (css/exchange-ui.css): the
 * wrapper's translucent scrim is what shows behind the lamps, and the
 * vignette edge sits at the strip's TOP here (the board's, at the bottom
 * of its topbar, does not apply). */
.site-tape .tape {
    background: transparent;
    border-bottom: 0;
    border-top: 2px solid #0a0a0b;
}