/* ============================================================
   Parts of the page that have to survive a browser darkening it.

   Samsung Internet's dark mode (and Chrome's "force dark") repaints CSS
   backgrounds and text but leaves photographs alone, and nothing on the page
   can switch it off. Hand-written, unlike site.css (see README, "Dark mode").
============================================================ */

/* The JN monogram is dark ink on transparent, so on a darkened page it sits
   black on black. Drawn as a mask over two layers that the browser treats
   differently:

     ::before  a near-white photograph, which a darkening browser leaves alone
     ::after   a flat light grey background, which it turns dark

   ::after uses mix-blend-mode: difference, so the glyph is |photo - grey|:

     normal    255 - 233  ->  the original ink (about 20)
     darkened  255 -  30  ->  a light monogram, like the rest of the text

   If a browser darkens neither layer, or both, the result is the ink it always
   was, so this can only fail towards the old look. Only Chromium engines
   force-darken, so everything else (Safari, Firefox) keeps the plain <img>:
   -webkit-app-region is a property only they have, and it keeps WebKit's
   history of bugs with blend modes inside masks out of the picture. The photo
   is a JPEG on purpose: a flat PNG that small gets classed as an icon and
   darkened too. */
.jn-mono { display: inline-block; position: relative; flex: none; }
.jn-mono > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.jn-mono-glyph { display: none; }

@supports ((-webkit-app-region: no-drag) and (mix-blend-mode: difference) and
           ((-webkit-mask-image: url(x)) or (mask-image: url(x)))) {
  .jn-mono > img { visibility: hidden; }
  .jn-mono-glyph {
    display: block;
    position: absolute;
    inset: 0;
    isolation: isolate;
    -webkit-mask: url(../img/monogram-jn-mask.png) center / contain no-repeat;
            mask: url(../img/monogram-jn-mask.png) center / contain no-repeat;
  }
  .jn-mono-glyph::before,
  .jn-mono-glyph::after { content: ""; position: absolute; inset: 0; }
  /* The white underneath only shows if the photo fails to load. */
  .jn-mono-glyph::before { background: #fff url(../img/dark-switch.jpg) center / 100% 100% no-repeat; }
  .jn-mono-glyph::after { background: #E9E9E9; mix-blend-mode: difference; }
}