/* ============================================================
   Mobile block — desktop-only gate.

   The Portfolio is a hands-on desktop experience (custom cursors,
   live demos), so phones / small tablets get a full-screen message
   instead of a broken layout. Hard block: an opaque overlay covers
   all chrome and the page is locked from scrolling.

   Trigger: viewport <= 820px, OR a real touch device
   (hover:none AND pointer:coarse — catches phones/tablets while
   sparing touch-laptops, which still report hover:hover).

   z-index clears EVERYTHING: cursor stack (~10003), transition
   curtain (10001), landing paper-doc (100001). Hence max int.
   ============================================================ */

#mobile-block {
  display: none;                 /* shown only by the media query below */
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-7) var(--margin-page);
  background: var(--color-bg);
  color: var(--color-fg);
  box-sizing: border-box;
}

/* Tighten the headline wrap + keep the doodle muted to match the brand. */
#mobile-block .ds-display { max-width: 14ch; }
#mobile-block .doodle     { color: var(--color-muted); }
#mobile-block .ds-caps    { margin-top: var(--space-2); }

@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  #mobile-block { display: flex; }
  body { overflow: hidden; }     /* lock the page behind the overlay */
}