/* ==========================================================================
   CASE PAGES — shared nav chrome (BACK button + burger menu) — Desktop
   (1280px – 1920px). Design reference: 1920 width.

   Case screens are one long photo scroll (no hero-sized first screen),
   so both the BACK button and the burger menu button are fixed to the
   viewport here — unlike on the hero, where the menu button is
   position: absolute and scrolls away after the first screen. This file
   is loaded after menu.desktop.css, so the position: fixed override
   below simply wins the cascade without touching hero's behavior.
   ========================================================================== */

/* No mix-blend-mode here — the icon already has its own opaque black
   square background, so it stays visible over any photo on its own.
   Blending it would make that black square "disappear" into the
   backdrop (difference against black = no change), leaving only the
   lighter lines visible — exactly the broken look we want to avoid. */
.main-menu-trigger-btn {
    position: fixed;
}

/* mix-blend-mode: difference against white inverts whatever photo is
   underneath, so BACK stays readable regardless of how dark/light the
   case photos are — no manual color juggling per case. */
.case-back {
    position: fixed;
    left: 5rem;
    top: 5rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 4rem;
    line-height: 4rem;
    letter-spacing: -0.08em;
    text-transform: uppercase;
    color: #ffffff;
    mix-blend-mode: difference;
    z-index: 10;
}