#bg-gradient {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 65% 60% at 50% 42%,
    #190f0e 0%,
    #110b0a 35%,
    #080808 55%,
    #030202 100%
  );
  /* The idle easter egg toggles body.is-idle and warms the center
     stop a hair — paired with the dot-background's IDLE_ALPHA_DROP and
     wave slowdown, the field reads as "the room got dimmer and
     quieter." 2s ease matches the dot-background lerp duration. */
  transition: background 2s ease;
}

body.is-idle #bg-gradient {
  background: radial-gradient(
    ellipse 65% 60% at 50% 42%,
    #1f110f 0%,
    #110b0a 35%,
    #080808 55%,
    #030202 100%
  );
}

#dot-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.content {
  position: relative;
  z-index: 1;
  margin-left: var(--dock-width);
}

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
}

@media (max-width: 768px) {
  /* Dock is at the bottom on mobile, not the left — kill the left gutter
     content used to reserve for the vertical dock. */
  :root { --dock-width: 0; }
  .about-content { grid-template-columns: 1fr; }
  .blog-card { flex-direction: column; gap: 0.25rem; }
  .blog-card__arrow { display: none; }
  .nudge-postit { width: 260px; min-height: 160px; }
  .hero__name { font-size: clamp(1.6rem, 5vw, 2.5rem); }
}