/* The LCGrid backdrop (owner's sketch, 2026-10-31): a diamond grid in the bottom-left and top-right
   corners, hairline grey, fading smoothly into the page toward the middle.
   - One lattice for the whole page (background-attachment: fixed), so both corners line up.
   - Lines have soft half-pixel edges, so 45° hairlines stay smooth instead of stair-stepped.
   - The fade is a radial layer in the page colour painted over the lines, not a CSS mask: a mask
     here stopped faded-in elements above it (Sign in, the lines) from drawing in Chromium. */
.gridbg { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; --bg-page: #0b0b0c; }
.gridbg i { position: absolute; display: block;
  --line: rgba(237, 237, 239, .085); --gap: 44px;
  background-attachment: fixed, fixed, fixed;
  background-image:
    var(--fade),
    repeating-linear-gradient(45deg, transparent 0, var(--line) .5px, var(--line) 1px, transparent 1.5px, transparent var(--gap)),
    repeating-linear-gradient(-45deg, transparent 0, var(--line) .5px, var(--line) 1px, transparent 1.5px, transparent var(--gap)); }
.gridbg .g-bl { left: 0; bottom: 0; width: 58vw; height: 100vh;
  --fade: radial-gradient(ellipse 58vw 92vh at 0 100%, transparent 0, transparent 38%, var(--bg-page) 100%); }
.gridbg .g-tr { right: 0; top: 0; width: 46vw; height: 64vh;
  --fade: radial-gradient(ellipse 46vw 64vh at 100% 0, transparent 0, transparent 34%, var(--bg-page) 100%); }
/* the radial layer doesn't use the fixed attachment's page box, it follows its own element */
.gridbg i { background-attachment: scroll, fixed, fixed; }
@media (max-width: 560px) {
  .gridbg .g-bl { width: 90vw; height: 62vh; --fade: radial-gradient(ellipse 90vw 62vh at 0 100%, transparent 0, transparent 30%, var(--bg-page) 100%); }
  .gridbg .g-tr { width: 80vw; height: 36vh; --fade: radial-gradient(ellipse 80vw 36vh at 100% 0, transparent 0, transparent 30%, var(--bg-page) 100%); }
}

/* everything you read or click sits above it */
.gridbg ~ header, .gridbg ~ main { position: relative; z-index: 1; }
.mark, .signin, .note, #sub { z-index: 2; }