/* Site chrome: a soft "progressive blur" behind the fixed logo and the docked nav bar at the top of a case study page, so whatever scrolls underneath never clashes with
   them. There is NO colour fill (so it works over any background, light or dark, and when the background colour changes): the page content itself is blurred, a little
   at the lower edge and more and more towards the top of the screen, until small text dissolves. It is made of three thin layers stacked on top of each other, each a
   different blur strength (2px, 5px, 10px) that is faded out by a gradient mask over a different part of the height; together they ramp up smoothly with no visible edge.
   js/site-chrome.js swaps those gradient masks for dither masks (dots in the home page's Bayer pattern that thin out downwards); the gradients below are what is used without it.
   Light on the computer: three small fixed strips (at most 147px tall) using the browser's own backdrop-filter, done on the graphics card. Where a browser cannot do that,
   a plain soft fade of the page colour is used instead. It sits under the nav bar (z 60) and the logo (z 70), does not catch clicks, and its height follows the stack of
   logo + bar (--visual-nav-chrome-h: 78px on a computer, 119px on a phone) plus 28px of fade.
   It only appears together with the docked nav bar (it fades in and out with it); before that, at the top of the page, the logo sits on the plain page.
   <div class="site-chrome" aria-hidden="true"><span></span><span></span><span></span></div>      (once, after the site header) */
.site-chrome { position: fixed; top: 0; left: 0; right: 0; z-index: 55; pointer-events: none; height: calc(var(--visual-nav-chrome-h) + 28px); }
.site-chrome > span { position: absolute; inset: 0; display: block; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease-out), visibility 0s .35s; }
.site-chrome.is-visible > span { opacity: 1; visibility: visible; transition: opacity .35s var(--ease-out); }   /* only while the docked nav bar is showing (js/visual-nav.js toggles .is-visible with it); the layers fade, not their parent, so the blur keeps seeing the page */
@media (prefers-reduced-motion: reduce) { .site-chrome > span, .site-chrome.is-visible > span { transition: none; } }
.site-chrome > span:nth-child(1) { -webkit-backdrop-filter: blur(2px);  backdrop-filter: blur(2px);  -webkit-mask-image: linear-gradient(to bottom, #000 0, transparent 100%);            mask-image: linear-gradient(to bottom, #000 0, transparent 100%); }
.site-chrome > span:nth-child(2) { -webkit-backdrop-filter: blur(5px);  backdrop-filter: blur(5px);  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 20%, transparent 78%);  mask-image: linear-gradient(to bottom, #000 0, #000 20%, transparent 78%); }
.site-chrome > span:nth-child(3) { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 35%, transparent 62%);  mask-image: linear-gradient(to bottom, #000 0, #000 35%, transparent 62%); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-chrome { background: linear-gradient(to bottom, rgba(232, 233, 227, .9) 0, rgba(232, 233, 227, 0) 100%); }   /* = --color-bg */
}

/* Site header: the PixelDandy logo (assets/images/pixeldandy-logo.svg, 134 x 29), fixed top-left, 34px in and 29px down as in Figma. It links home (the landing page).
   <header class="site-header"><a href="index.html" aria-label="PixelDandy home"><img src="assets/images/pixeldandy-logo.svg" alt="PixelDandy" width="134" height="29"></a></header> */
.site-header { position: fixed; top: 0; left: 0; padding: 29px 34px; z-index: 70;   /* above the docked nav bar (60), so the logo is never covered by it */ line-height: 0; }
.site-header { pointer-events: none; }   /* its padding must not block the nav bar buttons next to the logo */
.site-header a { display: block; width: 134px; text-decoration: none; pointer-events: auto; }
.site-header img { display: block; width: 134px; height: auto; }

@media (max-width: 900px) { .site-header { padding: 16px var(--gutter); } }   /* phones: the logo sits in the top row, with the docked nav bar stacked under it */