/* =========================================================================
Floating dot connections — styling.
Boekestyn Greenhouses, 2026-08-18. Pairs with js/dot-field.js.
Deliberately a standalone file so it can be added to any page without
touching boeks.css, and removed again just as cleanly.
TO USE, on any page:
in
before
Everything below is scoped to [data-dot-field] and .dot-field-canvas, so it
cannot affect any section you have not opted in.
========================================================================= */
/* The canvas is positioned against this element. */
[data-dot-field] {
position: relative;
}
.dot-field-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
display: block;
/* The important one. The canvas is invisible to the mouse, so links,
buttons and text selection sitting on top behave exactly as before. */
pointer-events: none;
}
/* Lift the real content above the canvas. Direct children only, so nothing
deeper in the tree gets a stacking context it did not ask for. */
[data-dot-field] > *:not(.dot-field-canvas) {
position: relative;
z-index: 1;
}