/* corner-mark-box: a hairline box with a small solid square centred on every corner.
   Measured from tekt.com.au (.corner-box): 1px #2d2012 border + a 6px square on each corner (3px outside the box),
   drawn with two pseudo strips (:before left, :after right) running from 3px above to 3px below the box.
   Neighbours share their borders (-1px), so a stack or grid of boxes reads as one ruled drawing with a square at
   every joint. The shared base for every Tekt part: load this file, then add class "cmb" to any element.

   The source paints the squares with two linear-gradients; gradients can't interpolate, so on the live site the
   squares SNAP while the line fades (measured: border mid-fade at 82ms, marks already the new colour). Here each
   strip draws its squares as its own top + bottom border, so marks and line recolour together over --cmb-dur. */

:where(:root) {             /* defaults live on the root so any ancestor can override them for its boxes */
  --cmb-ink: #2d2012;          /* line + mark colour (dark umber) */
  --cmb-pale: #d0dbe4;         /* the pale variant, for boxes over photos (pale steel) */
  --cmb-mark: 6px;             /* corner square size */
  --cmb-line: 1px;             /* line width */
  --cmb-dur: .3s;              /* recolour time */
  --cmb-ease: ease;
}

.cmb {
  --cmb-c: var(--cmb-ink);     /* the colour in use: set this (or swap --cmb-ink) to recolour a box */
  position: relative;
  box-sizing: border-box;
  border: var(--cmb-line) solid var(--cmb-c);
  transition: border-color var(--cmb-dur) var(--cmb-ease);
}
.cmb::before,
.cmb::after {
  content: "";
  position: absolute;
  /* centred on the line: -mark/2, nudged by any extra line width (1px line -> -3px, exactly the source) */
  top: calc(var(--cmb-mark) / -2 - (var(--cmb-line) - 1px) / 2);
  bottom: calc(var(--cmb-mark) / -2 - (var(--cmb-line) - 1px) / 2);
  width: var(--cmb-mark);
  box-sizing: border-box;
  border-top: var(--cmb-mark) solid var(--cmb-c);
  border-bottom: var(--cmb-mark) solid var(--cmb-c);
  pointer-events: none;
  transition: border-color var(--cmb-dur) var(--cmb-ease);
}
.cmb::before { left: calc(var(--cmb-mark) / -2 - (var(--cmb-line) - 1px) / 2); }
.cmb::after { right: calc(var(--cmb-mark) / -2 - (var(--cmb-line) - 1px) / 2); }

/* pale variant (source .b-pale): lines + marks in pale steel, for boxes laid over pictures */
.cmb--pale { --cmb-c: var(--cmb-pale); }
/* marks off (a plain ruled box that still tiles with the others) */
.cmb--bare::before, .cmb--bare::after { display: none; }

/* --- tiling: neighbours share one line -------------------------------------------------------------------------- */
/* manual pulls, like the source's .mtn1 / .mbn1 / .mln1 */
.cmb-up { margin-top: calc(var(--cmb-line) * -1); }
.cmb-left { margin-left: calc(var(--cmb-line) * -1); }

/* a vertical stack: every box after the first rides up one line */
.cmb-stack { display: flex; flex-direction: column; }
.cmb-stack > .cmb + .cmb { margin-top: calc(var(--cmb-line) * -1); }

/* a horizontal row: every box after the first slides left one line */
.cmb-row { display: flex; }
.cmb-row > .cmb + .cmb { margin-left: calc(var(--cmb-line) * -1); }

/* a grid of any column count: each cell grows one line left and one line down into its neighbours, and the
   container's padding takes the first column's and last row's overhang. --cmb-cols sets the column count. */
:where(.cmb-grid) { --cmb-cols: 3; }
.cmb-grid {
  display: grid;
  grid-template-columns: repeat(var(--cmb-cols), minmax(0, 1fr));
  padding: 0 0 var(--cmb-line) var(--cmb-line);
}
.cmb-grid > .cmb { margin: 0 0 calc(var(--cmb-line) * -1) calc(var(--cmb-line) * -1); }

@media (prefers-reduced-motion: reduce) {
  .cmb, .cmb::before, .cmb::after { transition-duration: 0s; }
}