Keep scrolling content behind the desktop band

assets/styles.css

@@ -25,6 +25,7 @@
   /* One design unit is one point on the supplied 1200 × 900 layout. */
   --unit: 0.0833333333vw;
   --font-body: Roboto, system-ui, sans-serif;
+  --desktop-backdrop: image-set(url("./background-1200.webp") 1x, url("./background-2400.webp") 2x);
 }
 
 *,
@@ -57,7 +58,7 @@ body::before {
   inset: 0 0 auto;
   min-block-size: 100svh;
   block-size: calc(900 * var(--unit));
-  background-image: image-set(url("./background-1200.webp") 1x, url("./background-2400.webp") 2x);
+  background-image: var(--desktop-backdrop);
   background-size: 100% auto;
   background-repeat: no-repeat;
   background-position: center top;
@@ -271,7 +272,7 @@ address {
 
 .skip-link {
   position: absolute;
-  z-index: 1;
+  z-index: 2;
   inset-block-start: 1rem;
   inset-inline-start: 1rem;
   padding: 0.75rem 1rem;
@@ -283,6 +284,25 @@ address {
   transform: none;
 }
 
+@media (width > 1024px) {
+  body::after {
+    position: fixed;
+    z-index: 1;
+    inset: 0 0 auto;
+    block-size: calc(254 * var(--unit));
+    background-image: var(--desktop-backdrop);
+    background-size: 100% auto;
+    background-repeat: no-repeat;
+    /* Reuse the original pixels, revealing only the opaque tape above content. */
+    mask-image: url("./construction-tape.svg");
+    mask-mode: alpha;
+    mask-size: 100% auto;
+    mask-repeat: no-repeat;
+    pointer-events: none;
+    content: "";
+  }
+}
+
 @media (width <= 1024px) {
   :root {
     --unit: 1px;